/* P10FK Practice band overrides. Keeps the active tool strip compact, balanced, and musician-facing. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.54rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: clamp(16.5rem, 24vw, 22rem) !important; padding-block: clamp(1.1rem, 2vw, 1.55rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-action-strip.hero-actions { margin-bottom: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { align-items: stretch !important; gap: 0.5rem !important; margin-top: -0.18rem !important; padding: 0.5rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { box-sizing: border-box !important; height: 11.4rem !important; max-height: 11.4rem !important; min-height: 11.4rem !important; overflow: hidden !important; padding: 0.56rem 0.64rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { align-content: start !important; display: grid !important; gap: 0.16rem !important; grid-template-rows: auto auto auto !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-middle, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display { font-size: clamp(1.38rem, 1.5vw, 1.62rem) !important; line-height: 1 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.14rem !important; margin-bottom: 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { margin-top: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { font-size: 0.62rem !important; min-height: 1.34rem !important; min-width: 0 !important; padding: 0 !important; width: 1.85rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right > button { font-size: 0.68rem !important; min-height: 1.55rem !important; padding-block: 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { margin-top: 0.36rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-timer-auto-row { font-size: 0.66rem !important; min-height: 1.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { align-content: start !important; gap: 0.28rem !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { gap: 0.3rem !important; grid-template-areas: "bpm auto" "bpm sound" !important; grid-template-columns: minmax(6.4rem, 1fr) minmax(5.7rem, 0.95fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region { grid-area: bpm !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { grid-area: auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-sound-region { grid-area: sound !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title { font-size: 0.82rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { font-size: 0.52rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 1.55rem minmax(2.5rem, 1fr) 1.55rem !important; min-height: 1.72rem !important; padding: 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.28rem !important; height: 1.62rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { font-size: 0.66rem !important; min-height: 1.66rem !important; padding-block: 0.08rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-link, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05t-pattern-summary, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-pattern-region, body:has(.practice-dashboard:not([hidden])) #p10exMetroNoteCell { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm .p03i-metronome-select-grid { gap: 0.24rem !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-rhythm-pattern::before { color: rgba(232, 237, 250, 0.38) !important; content: "Feel" !important; display: block !important; font-size: 0.58rem !important; font-weight: 640 !important; letter-spacing: 0.05em !important; margin-bottom: 0.18rem !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard .p05t-pattern-summary { font-size: 0.66rem !important; min-height: 1.55rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { gap: 0.28rem !important; transform: translateY(-0.18rem) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: 1.42rem !important; min-height: 2.2rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini { background: radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.20), transparent 58%), radial-gradient(circle at 95% 0%, rgba(45, 212, 191, 0.07), transparent 48%), linear-gradient(145deg, rgba(255, 255, 255, 0.034), rgba(255, 255, 255, 0.012)) !important; border-color: rgba(221, 230, 247, 0.038) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), 0 18px 46px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-week { background: radial-gradient(circle at 18% 30%, rgba(74, 222, 128, 0.20), transparent 54%), radial-gradient(circle at 95% 0%, rgba(34, 211, 238, 0.07), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips > .p10ex-help-anchor { cursor: help !important; pointer-events: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor:hover::after, body:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor:focus-visible::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 243, 255, 0.94)) !important; border-radius: 12px !important; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20) !important; color: #172033 !important; content: attr(data-help) !important; display: block !important; font-size: 0.69rem !important; font-weight: 560 !important; left: calc(100% + 0.55rem) !important; line-height: 1.22 !important; max-width: 12rem !important; padding: 0.46rem 0.58rem !important; position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; width: max-content !important; z-index: 40 !important; } body.practice-help-mode:has(.practice-dashboard:not([hidden])) .practice-focus-goal-chips .p10ex-help-anchor::after { content: attr(data-help) !important; left: calc(100% + 0.55rem) !important; top: 50% !important; transform: translateY(-50%) !important; } } /* Soft Light Studio modal pilot: Add/Edit Goal only. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 23% 16%, rgba(245, 184, 91, 0.17), transparent 18rem), radial-gradient(circle at 84% 12%, rgba(94, 234, 212, 0.08), transparent 20rem), rgba(4, 7, 13, 0.76) !important; -webkit-backdrop-filter: blur(12px) saturate(1.05) !important; backdrop-filter: blur(12px) saturate(1.05) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #e7e0d3 !important; background-image: radial-gradient(circle at 8% 0%, rgba(245, 184, 91, 0.22), transparent 18rem), radial-gradient(circle at 94% 12%, rgba(255, 255, 255, 0.5), transparent 18rem), linear-gradient(145deg, #f1ece3 0%, #e7e0d3 50%, #d8d0c1 100%) !important; border: 1px solid rgba(124, 102, 67, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 34px 96px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 42px rgba(216, 145, 46, 0.12) !important; color: #25282d !important; color-scheme: light !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #eee7dc !important; background-image: radial-gradient(circle at 12% 0%, rgba(245, 184, 91, 0.22), transparent 14rem), linear-gradient(135deg, rgba(249, 245, 236, 0.99), rgba(225, 217, 205, 0.99)) !important; border-bottom: 1px solid rgba(216, 145, 46, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 255, 255, 0.42) !important; color: #25282d !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle { color: #9c681d !important; -webkit-text-fill-color: #9c681d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title { color: #25282d !important; text-shadow: none !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button { background-color: rgba(46, 45, 41, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(46, 45, 41, 0.05)) !important; border-color: rgba(46, 45, 41, 0.18) !important; color: #303238 !important; -webkit-text-fill-color: #303238 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible { background-color: rgba(216, 145, 46, 0.16) !important; border-color: rgba(216, 145, 46, 0.38) !important; color: #25282d !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: linear-gradient(180deg, rgba(255, 253, 248, 0.36), rgba(225, 217, 204, 0.18)) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field { background-color: #d4ccbe !important; background-image: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.3), transparent 12rem), linear-gradient(145deg, rgba(218, 210, 198, 0.95), rgba(202, 193, 180, 0.92)) !important; border: 1px solid rgba(121, 105, 78, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 14px 32px rgba(49, 40, 26, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field { background: transparent !important; border: 0 !important; box-shadow: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong) { color: rgba(37, 40, 45, 0.94) !important; -webkit-text-fill-color: rgba(37, 40, 45, 0.94) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta) { color: #68635a !important; -webkit-text-fill-color: #68635a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #fbfaf6 !important; background-image: linear-gradient(180deg, #fffdf9, #f1eee6) !important; border: 1px solid rgba(151, 119, 68, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(49, 40, 26, 0.11) !important; color: #22262b !important; color-scheme: light !important; caret-color: #9c681d !important; -webkit-text-fill-color: #22262b !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder { color: rgba(93, 88, 80, 0.58) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(93, 88, 80, 0.58) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus { background-color: #fffdf8 !important; border-color: rgba(216, 145, 46, 0.88) !important; box-shadow: 0 0 0 3px rgba(216, 145, 46, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; color: #1f2328 !important; outline: none !important; -webkit-text-fill-color: #1f2328 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button { background-color: rgba(255, 253, 248, 0.54) !important; background-image: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.42), transparent 5rem), linear-gradient(135deg, rgba(255, 253, 248, 0.52), rgba(216, 145, 46, 0.13)) !important; border: 1px solid rgba(151, 119, 68, 0.28) !important; color: #292c31 !important; -webkit-text-fill-color: #292c31 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer { background-color: #d7cebf !important; background-image: linear-gradient(180deg, rgba(219, 211, 198, 0.96), rgba(205, 196, 183, 0.98)) !important; border-top: 1px solid rgba(121, 105, 78, 0.24) !important; box-shadow: 0 -14px 30px rgba(49, 40, 26, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: #d8912e !important; background-image: linear-gradient(135deg, #ffd18a, #b8711e) !important; border: 1px solid rgba(255, 231, 191, 0.64) !important; color: #21160c !important; box-shadow: 0 14px 30px rgba(184, 113, 30, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; -webkit-text-fill-color: #21160c !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button { background-color: rgba(48, 48, 44, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(48, 48, 44, 0.08)) !important; border: 1px solid rgba(48, 48, 44, 0.22) !important; color: #2f3338 !important; -webkit-text-fill-color: #2f3338 !important; } } /* Soft Light Studio modal pilot: cool teal color pass for Add/Edit Goal only. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 23% 16%, rgba(45, 212, 191, 0.18), transparent 18rem), radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.08), transparent 20rem), rgba(4, 7, 13, 0.76) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #e3eeee !important; background-image: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.22), transparent 18rem), radial-gradient(circle at 94% 12%, rgba(255, 255, 255, 0.58), transparent 18rem), linear-gradient(145deg, #f3fbfa 0%, #e3eeee 50%, #d5e3e3 100%) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 34px 96px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 42px rgba(20, 184, 166, 0.14) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #eaf6f5 !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.24), transparent 14rem), linear-gradient(135deg, rgba(248, 253, 252, 0.99), rgba(218, 235, 234, 0.99)) !important; border-bottom: 1px solid rgba(20, 184, 166, 0.32) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong) { color: rgba(32, 48, 54, 0.96) !important; -webkit-text-fill-color: rgba(32, 48, 54, 0.96) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button { background-color: rgba(15, 118, 110, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(15, 118, 110, 0.06)) !important; border-color: rgba(15, 118, 110, 0.2) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible { background-color: rgba(20, 184, 166, 0.16) !important; border-color: rgba(15, 118, 110, 0.34) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: radial-gradient(circle at 0% 22%, rgba(45, 212, 191, 0.06), transparent 20rem), linear-gradient(180deg, rgba(249, 254, 253, 0.42), rgba(216, 234, 234, 0.2)) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples) { background-color: #d7e9e8 !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(226, 242, 241, 0.96), rgba(205, 225, 225, 0.93)) !important; border: 1px solid rgba(15, 118, 110, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 14px 32px rgba(12, 74, 80, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field { background: transparent !important; border: 0 !important; box-shadow: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-list, .linked-goal-option, .warmup-role-toggle, .goal-example-picker), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-list, .linked-goal-option, .warmup-role-toggle, .goal-example-picker) { background-color: rgba(242, 253, 251, 0.48) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(45, 212, 191, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.16) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goal-option:hover, .linked-goal-option:focus-within), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goal-option:hover, .linked-goal-option:focus-within) { background-color: rgba(204, 251, 241, 0.64) !important; border-color: rgba(20, 184, 166, 0.36) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta) { color: #5e7375 !important; -webkit-text-fill-color: #5e7375 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #fbfefd !important; background-image: linear-gradient(180deg, #ffffff, #edf7f5) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #1f2f35 !important; caret-color: #0f766e !important; -webkit-text-fill-color: #1f2f35 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder { color: rgba(82, 104, 107, 0.62) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(82, 104, 107, 0.62) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus { background-color: #fdfffe !important; border-color: rgba(20, 184, 166, 0.84) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; color: #17282d !important; -webkit-text-fill-color: #17282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) { background-color: rgba(15, 118, 110, 0.08) !important; border-color: rgba(15, 118, 110, 0.22) !important; color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button { background-color: rgba(241, 253, 251, 0.62) !important; background-image: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.48), transparent 5rem), linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(20, 184, 166, 0.14)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer { background-color: #d4e5e4 !important; background-image: linear-gradient(180deg, rgba(220, 238, 237, 0.96), rgba(202, 224, 224, 0.98)) !important; border-top: 1px solid rgba(15, 118, 110, 0.22) !important; box-shadow: 0 -14px 30px rgba(12, 74, 80, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: #14b8a6 !important; background-image: linear-gradient(135deg, #99f6e4, #0f766e) !important; border: 1px solid rgba(204, 251, 241, 0.66) !important; color: #042f2e !important; box-shadow: 0 14px 30px rgba(15, 118, 110, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: #042f2e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button { background-color: rgba(15, 118, 110, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(15, 118, 110, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } } /* P10GM polish: unified active-state control, transient drawers, and calmer sidebar status. */ #currentItemElapsedPill, body:has(.practice-dashboard:not([hidden])) #currentItemElapsedPill { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #startItemButton.is-paused-practice-action { background: radial-gradient(circle at 20% 12%, rgba(251, 191, 36, 0.24), transparent 42%), linear-gradient(145deg, rgba(88, 65, 166, 0.52), rgba(28, 35, 54, 0.86)) !important; border-color: rgba(196, 181, 253, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 18px 42px rgba(76, 29, 149, 0.22) !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #startItemButton:is(.is-active-practice-action, .is-paused-practice-action) .p10eb-action-icon { font-size: 1.05rem !important; } .practice-queue-drawer, body:has(.practice-dashboard:not([hidden])) .practice-queue-drawer { bottom: auto !important; height: auto !important; left: 1rem !important; max-height: calc(100vh - 2rem) !important; top: 1rem !important; width: min(22.75rem, calc(100vw - 2rem)) !important; border-radius: 26px !important; background: radial-gradient(circle at 22% 4%, rgba(167, 139, 250, 0.16), transparent 36%), radial-gradient(circle at 86% 10%, rgba(20, 184, 166, 0.11), transparent 34%), linear-gradient(160deg, rgba(12, 19, 32, 0.955), rgba(7, 12, 22, 0.965)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 28px 80px rgba(0, 0, 0, 0.42) !important; } .practice-queue-workspace-list, body:has(.practice-dashboard:not([hidden])) .practice-queue-workspace-list { max-height: min(31rem, calc(100vh - 14rem)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer { align-items: center !important; display: flex !important; gap: 0.62rem !important; justify-content: flex-end !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer .practice-notes-edit-current { margin-right: auto !important; } /* P10GD workflow refinement: notes become a summonable session-memory drawer. */ body:has(.practice-dashboard:not([hidden])) .practice-hero-edit-button { align-items: center !important; background: rgba(255, 255, 255, 0.050) !important; border: 1px solid rgba(221, 230, 247, 0.085) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050) !important; color: rgba(247, 250, 255, 0.82) !important; display: inline-flex !important; height: 2.1rem !important; justify-content: center !important; min-height: 2.1rem !important; padding: 0 !important; position: absolute !important; right: 1.1rem !important; top: 1.05rem !important; width: 2.1rem !important; z-index: 6 !important; } body:has(.practice-dashboard:not([hidden])) .practice-hero-edit-button:hover { background: rgba(167, 139, 250, 0.14) !important; border-color: rgba(167, 139, 250, 0.25) !important; color: #ffffff !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-card > #editCurrentItemButton, body:has(.practice-dashboard:not([hidden])) .practice-hero-edit-button { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #editCurrentItemButton.practice-action-edit-current { align-items: center !important; background: rgba(255, 255, 255, 0.038) !important; border-color: rgba(221, 230, 247, 0.075) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.038) !important; color: rgba(226, 232, 240, 0.72) !important; display: inline-flex !important; height: 3.85rem !important; justify-content: center !important; max-height: 3.85rem !important; min-height: 3.85rem !important; opacity: 0.78 !important; padding: 0.48rem 0.46rem !important; position: static !important; width: auto !important; z-index: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #editCurrentItemButton.practice-action-edit-current:hover, body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #editCurrentItemButton.practice-action-edit-current:focus-visible { background: rgba(167, 139, 250, 0.10) !important; border-color: rgba(167, 139, 250, 0.18) !important; color: rgba(248, 250, 252, 0.92) !important; opacity: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #editCurrentItemButton.practice-action-edit-current .p10eb-action-copy small { color: rgba(203, 213, 225, 0.50) !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-workspace { inset: 0 !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; transition: opacity 160ms ease !important; z-index: 90 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-workspace { opacity: 1 !important; pointer-events: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-scrim { background: rgba(2, 6, 16, 0.48) !important; inset: 0 !important; position: absolute !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer { background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 38%), radial-gradient(circle at 100% 24%, rgba(45, 212, 191, 0.10), transparent 44%), linear-gradient(180deg, rgba(12, 19, 34, 0.97), rgba(4, 9, 20, 0.98)) !important; border-left: 1px solid rgba(221, 230, 247, 0.08) !important; box-shadow: -28px 0 80px rgba(0, 0, 0, 0.34) !important; box-sizing: border-box !important; color: rgba(247, 250, 255, 0.94) !important; display: grid !important; gap: 1rem !important; grid-template-rows: auto auto minmax(0, 1fr) auto !important; height: 100vh !important; max-width: min(31rem, calc(100vw - 1.4rem)) !important; padding: 1.15rem !important; position: absolute !important; right: 0 !important; top: 0 !important; transform: translateX(1.25rem) !important; transition: transform 180ms ease !important; width: 31rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer { transform: translateX(0) !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-header { align-items: start !important; display: flex !important; justify-content: space-between !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-header small { color: rgba(191, 174, 255, 0.74) !important; display: block !important; font-size: 0.66rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-header h3 { font-size: 1.55rem !important; margin: 0.15rem 0 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-close { align-items: center !important; background: rgba(255, 255, 255, 0.070) !important; border: 1px solid rgba(221, 230, 247, 0.10) !important; border-radius: 999px !important; color: rgba(247, 250, 255, 0.90) !important; display: inline-flex !important; font-size: 1.1rem !important; height: 2.45rem !important; justify-content: center !important; width: 2.45rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-summary { color: rgba(232, 237, 250, 0.66) !important; font-size: 0.9rem !important; line-height: 1.45 !important; margin: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-body { min-height: 0 !important; overflow: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-grid { display: grid !important; gap: 0.9rem !important; grid-template-columns: 1fr !important; height: auto !important; max-height: none !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-grid > #currentItemReminderBox.practice-tool-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.026)) !important; border: 1px solid rgba(221, 230, 247, 0.075) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.040) !important; box-sizing: border-box !important; display: grid !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding: 1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-grid textarea#currentItemReminderNotes { background: rgba(2, 7, 18, 0.32) !important; border-color: rgba(221, 230, 247, 0.09) !important; border-radius: 16px !important; color: rgba(247, 250, 255, 0.92) !important; height: 8rem !important; max-height: none !important; min-height: 8rem !important; resize: vertical !important; } body:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer { border-top: 1px solid rgba(221, 230, 247, 0.06) !important; padding-top: 0.85rem !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { display: none !important; } } /* P10FW queue moves out of the dashboard; transport tools get the recovered space. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid { gap: 0.7rem !important; margin-top: 0 !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 12rem !important; max-height: 12rem !important; min-height: 12rem !important; padding: 0.82rem 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { border-radius: 16px !important; font-size: 1.16rem !important; height: 2.6rem !important; min-height: 2.6rem !important; min-width: 2.8rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { gap: 0.48rem !important; grid-template-rows: auto auto minmax(2.85rem, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { min-height: 2.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { min-height: 3rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { gap: 0.38rem !important; grid-template-columns: repeat(3, minmax(2.75rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(1.72rem, 1.9vw, 2.05rem) !important; min-height: 2.72rem !important; min-width: 6.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.62rem !important; grid-template-rows: minmax(5.9rem, auto) minmax(3rem, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.45rem minmax(3.2rem, 1fr) 2.45rem !important; min-height: 2.65rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.72rem !important; height: 2.1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.45rem !important; grid-template-columns: repeat(2, minmax(3.3rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { gap: 0.55rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { gap: 0.45rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7.45rem !important; max-height: 7.45rem !important; min-height: 7.45rem !important; } } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { appearance: none; color: inherit; cursor: pointer; font: inherit; text-align: left; width: 100%; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { border-color: rgba(167, 139, 250, 0.26) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 22px 58px rgba(0, 0, 0, 0.12), 0 0 42px rgba(139, 92, 246, 0.10) !important; outline: none; } .practice-queue-workspace { inset: 0; pointer-events: none; position: fixed; z-index: 90; } .practice-queue-scrim { background: rgba(2, 6, 16, 0.38); inset: 0; opacity: 0; position: absolute; transition: opacity 160ms ease; } .practice-queue-drawer { background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 42%), radial-gradient(circle at 95% 18%, rgba(45, 212, 191, 0.10), transparent 42%), linear-gradient(180deg, rgba(13, 20, 34, 0.98), rgba(6, 11, 22, 0.98)); border-right: 1px solid rgba(221, 230, 247, 0.10); box-shadow: 28px 0 70px rgba(0, 0, 0, 0.34); box-sizing: border-box; color: #eef3ff; height: 100%; max-width: min(27rem, calc(100vw - 1.5rem)); overflow-y: auto; padding: 1.25rem; pointer-events: auto; position: absolute; transform: translateX(-102%); transition: transform 180ms ease; width: 24rem; } body.practice-queue-workspace-open .practice-queue-workspace { pointer-events: auto; } body.practice-queue-workspace-open .practice-queue-scrim { opacity: 1; } body.practice-queue-workspace-open .practice-queue-drawer { transform: translateX(0); } .practice-queue-drawer-header { align-items: center; display: flex; justify-content: space-between; margin-bottom: 1rem; } .practice-queue-drawer-header small { color: rgba(232, 237, 250, 0.58); display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .practice-queue-drawer-header h3 { font-size: 1.45rem; line-height: 1.05; margin: 0.12rem 0 0; } .practice-queue-close { align-items: center; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(221, 230, 247, 0.10); border-radius: 14px; color: #eef3ff; cursor: pointer; display: inline-flex; font-size: 1.2rem; height: 2.35rem; justify-content: center; width: 2.35rem; } .practice-queue-drawer-meter { background: rgba(255, 255, 255, 0.08); border-radius: 999px; height: 0.34rem; margin-bottom: 0.7rem; overflow: hidden; } .practice-queue-drawer-meter span { background: linear-gradient(90deg, #8b5cf6, #22d3ee, #62e6a8); display: block; height: 100%; width: 0; } .practice-queue-drawer-summary { color: rgba(232, 237, 250, 0.66); font-size: 0.84rem; line-height: 1.35; margin: 0 0 1rem; } .practice-queue-workspace-list { display: grid; gap: 0.55rem; list-style: none; margin: 0; padding: 0; } .practice-queue-workspace-item { align-items: center; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(221, 230, 247, 0.075); border-radius: 18px; display: grid; gap: 0.62rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.68rem; } .practice-queue-workspace-item.is-current { background: rgba(139, 92, 246, 0.16); border-color: rgba(167, 139, 250, 0.42); } .practice-queue-workspace-item.is-complete { opacity: 0.62; } .practice-queue-workspace-marker { align-items: center; background: rgba(255, 255, 255, 0.08); border-radius: 999px; display: inline-flex; font-size: 0.78rem; height: 1.5rem; justify-content: center; width: 1.5rem; } .practice-queue-workspace-copy { display: grid; gap: 0.12rem; min-width: 0; } .practice-queue-workspace-copy strong { font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .practice-queue-workspace-copy small { color: rgba(232, 237, 250, 0.56); font-size: 0.74rem; } .practice-queue-workspace-actions { display: flex; gap: 0.35rem; } .practice-queue-workspace-actions button { min-height: 1.85rem; padding: 0.28rem 0.58rem; } /* P10FR final cascade: keep the transport cleanup above the older compact guards. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.65rem !important; max-height: 10.65rem !important; min-height: 10.65rem !important; padding: 0.68rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { align-items: center !important; border-radius: 14px !important; display: inline-flex !important; font-size: 1.02rem !important; font-weight: 780 !important; height: 2.15rem !important; justify-content: center !important; line-height: 1 !important; min-height: 2.15rem !important; min-width: 2.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { align-content: stretch !important; display: grid !important; gap: 0.36rem !important; grid-template-rows: auto auto minmax(2.35rem, 1fr) !important; height: 100% !important; overflow: hidden !important; padding-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-presets { align-items: center !important; display: grid !important; min-height: 1.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-transport { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) !important; min-height: 2.55rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { align-items: center !important; border-radius: 16px !important; display: inline-flex !important; font-size: clamp(1.45rem, 1.65vw, 1.78rem) !important; font-weight: 650 !important; justify-content: center !important; min-height: 2.28rem !important; min-width: 5.7rem !important; padding: 0.18rem 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { display: grid !important; gap: 0.28rem !important; grid-column: 1 / -1 !important; grid-template-columns: repeat(3, minmax(2.25rem, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { font-size: 1.02rem !important; height: 2.15rem !important; min-height: 2.15rem !important; min-width: 2.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) { display: grid !important; gap: 0.36rem !important; grid-template-rows: auto auto !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p10fr-countdown-top { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p10fr-countdown-body { align-items: center !important; display: grid !important; gap: 0.36rem !important; grid-template-areas: "presets presets" "display actions" !important; grid-template-columns: minmax(5.8rem, 0.95fr) minmax(7.2rem, 1.05fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) #p03iCountdownMinutes { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-presets { grid-area: presets !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-timer-display { grid-area: display !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-action-row { grid-area: actions !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.48rem !important; grid-template-rows: minmax(5.3rem, auto) minmax(2.35rem, 1fr) !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(6.35rem, 1fr) minmax(5.5rem, 0.88fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: grid !important; grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.1rem minmax(2.9rem, 1fr) 2.1rem !important; min-height: 2.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.45rem !important; height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.34rem !important; grid-template-columns: repeat(2, minmax(2.8rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) { display: grid !important; gap: 0.36rem !important; grid-template-rows: auto auto !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p10fr-countdown-top { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p10fr-countdown-body { align-items: center !important; display: grid !important; gap: 0.36rem !important; grid-template-areas: "presets presets" "display actions" !important; grid-template-columns: minmax(5.8rem, 0.95fr) minmax(7.2rem, 1.05fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) #p03iCountdownMinutes { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-presets { grid-area: presets !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-timer-display { grid-area: display !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-action-row { grid-area: actions !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { align-content: stretch !important; display: grid !important; gap: 0.48rem !important; grid-template-rows: minmax(5.3rem, auto) minmax(2.35rem, 1fr) !important; height: 100% !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; gap: 0.34rem !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(6.35rem, 1fr) minmax(5.5rem, 0.88fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: grid !important; grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.1rem minmax(2.9rem, 1fr) 2.1rem !important; min-height: 2.2rem !important; padding: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.45rem !important; height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { min-height: 2.05rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { align-items: end !important; display: grid !important; min-height: 2.3rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { display: grid !important; gap: 0.34rem !important; grid-template-columns: repeat(2, minmax(2.8rem, 1fr)) !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card.main-queue-panel { min-height: 4.4rem !important; padding: 0.62rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { display: flex !important; gap: 0.42rem !important; min-height: 2.25rem !important; overflow-x: auto !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { flex: 0 0 auto !important; max-width: 11rem !important; min-height: 2.15rem !important; min-width: 7.5rem !important; padding: 0.26rem 0.56rem !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7rem !important; max-height: 7rem !important; min-height: 7rem !important; padding: 0.7rem 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotesBox .practice-tool-subtle, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox .reminder-indicator:empty { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { min-height: 3.4rem !important; padding: 0.58rem 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini { background: radial-gradient(circle at 12% 16%, rgba(167, 139, 250, 0.32), transparent 44%), radial-gradient(circle at 94% 12%, rgba(45, 212, 191, 0.11), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.010)) !important; border-color: rgba(221, 230, 247, 0.032) !important; border-radius: 24px !important; } } /* P10FR cleanup: readable transport console, compact setlist queue, softer rail widgets. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid { gap: 0.62rem !important; margin-top: -0.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.65rem !important; max-height: 10.65rem !important; min-height: 10.65rem !important; padding: 0.68rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iMetronomeCard.p10ex-metronome-card { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iTimerCard { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #quickRecordPanel { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > .current-item-references-box { order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { align-items: center !important; border-radius: 14px !important; display: inline-flex !important; font-size: 1.02rem !important; font-weight: 780 !important; height: 2.15rem !important; justify-content: center !important; line-height: 1 !important; min-height: 2.15rem !important; min-width: 2.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { align-content: stretch !important; display: grid !important; gap: 0.36rem !important; grid-template-rows: auto auto minmax(2.35rem, 1fr) !important; height: 100% !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top .p03i-timing-title { font-size: 0.83rem !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top .p03m-auto-row { justify-self: end !important; min-height: 1.45rem !important; padding: 0.08rem 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-presets { align-items: center !important; display: grid !important; min-height: 1.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.22rem !important; grid-template-columns: repeat(6, minmax(1.72rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { border-radius: 11px !important; font-size: 0.66rem !important; height: 1.42rem !important; min-height: 1.42rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-transport { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(5.8rem, 0.95fr) minmax(7.2rem, 1.05fr) !important; min-height: 2.55rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { align-items: center !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.025)), rgba(4, 9, 19, 0.30) !important; border: 1px solid rgba(221, 230, 247, 0.09) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; display: inline-flex !important; font-size: clamp(1.45rem, 1.65vw, 1.78rem) !important; font-weight: 650 !important; justify-content: center !important; letter-spacing: 0 !important; min-height: 2.28rem !important; min-width: 5.7rem !important; padding: 0.18rem 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { display: grid !important; gap: 0.28rem !important; grid-template-columns: repeat(3, minmax(2.25rem, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { align-content: stretch !important; display: grid !important; gap: 0.48rem !important; grid-template-rows: minmax(5.3rem, auto) minmax(2.35rem, 1fr) !important; height: 100% !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; gap: 0.34rem !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(6.35rem, 1fr) minmax(5.5rem, 0.88fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: grid !important; grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.1rem minmax(2.9rem, 1fr) 2.1rem !important; min-height: 2.2rem !important; padding: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.45rem !important; height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { min-height: 2.05rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { align-items: end !important; display: grid !important; min-height: 2.3rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { display: grid !important; gap: 0.34rem !important; grid-template-columns: repeat(2, minmax(2.8rem, 1fr)) !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { align-content: start !important; gap: 0.4rem !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { gap: 0.34rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card.main-queue-panel { min-height: 4.4rem !important; padding: 0.62rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-heading { align-items: center !important; display: grid !important; gap: 0.45rem !important; grid-template-columns: auto auto minmax(4rem, 0.24fr) 1fr auto !important; margin-bottom: 0.4rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-progress-track { height: 0.24rem !important; max-width: 7rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { display: flex !important; gap: 0.42rem !important; min-height: 2.25rem !important; overflow-x: auto !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { flex: 0 0 auto !important; gap: 0.32rem !important; max-width: 11rem !important; min-height: 2.15rem !important; min-width: 7.5rem !important; padding: 0.26rem 0.56rem !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="0"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position^="-"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="5"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="6"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="7"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="8"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="9"] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="1"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="2"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="3"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="4"] { display: grid !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { gap: 0.6rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7rem !important; max-height: 7rem !important; min-height: 7rem !important; padding: 0.7rem 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotesBox .practice-tool-subtle, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox .reminder-indicator:empty { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { min-height: 3.4rem !important; padding: 0.58rem 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) #saveReminderNotesButton { min-height: 1.7rem !important; padding: 0.22rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.62rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini { background: radial-gradient(circle at 12% 16%, rgba(167, 139, 250, 0.32), transparent 44%), radial-gradient(circle at 94% 12%, rgba(45, 212, 191, 0.11), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.010)) !important; border-color: rgba(221, 230, 247, 0.032) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), 0 22px 54px rgba(0, 0, 0, 0.10), 0 0 36px rgba(139, 92, 246, 0.04) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-week { background: radial-gradient(circle at 18% 28%, rgba(74, 222, 128, 0.26), transparent 44%), radial-gradient(circle at 96% 8%, rgba(56, 189, 248, 0.10), transparent 44%), linear-gradient(145deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.010)) !important; } } @media (min-width: 961px) and (max-width: 1180px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.25rem !important; max-height: 10.25rem !important; min-height: 10.25rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-transport { grid-template-columns: minmax(5.4rem, 0.85fr) minmax(6.75rem, 1.15fr) !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { min-width: 2.18rem !important; } } /* Final P10FR cascade guard: older polish layers must not over-compress the transport console. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iMetronomeCard.p10ex-metronome-card { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iTimerCard { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #quickRecordPanel { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box { order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > .current-item-references-box { order: 4 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { align-content: stretch !important; gap: 0.36rem !important; grid-template-rows: auto auto minmax(2.35rem, 1fr) !important; overflow: hidden !important; padding-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { align-items: center !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; height: auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { min-height: 1.95rem !important; min-width: 5.7rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-auto-row { grid-column: auto !important; height: auto !important; min-height: 1.45rem !important; padding: 0.08rem 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-timer-auto-row input, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-auto-row input { height: 0.72rem !important; width: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-middle { min-height: 1.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { height: 1.42rem !important; min-height: 1.42rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) !important; height: auto !important; min-height: 2.55rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { display: grid !important; gap: 0.28rem !important; grid-column: 1 / -1 !important; grid-template-columns: repeat(3, minmax(2.25rem, 1fr)) !important; justify-content: stretch !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { font-size: 1.02rem !important; height: 2.15rem !important; min-height: 2.15rem !important; min-width: 2.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.48rem !important; grid-template-rows: minmax(5.3rem, auto) minmax(2.35rem, 1fr) !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(6.35rem, 1fr) minmax(5.5rem, 0.88fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: grid !important; grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.1rem minmax(2.9rem, 1fr) 2.1rem !important; min-height: 2.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.45rem !important; height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.34rem !important; grid-template-columns: repeat(2, minmax(2.8rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { display: flex !important; gap: 0.42rem !important; overflow-x: auto !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { flex: 0 0 auto !important; max-width: 11rem !important; min-width: 7.5rem !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="0"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position^="-"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="5"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="6"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="7"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="8"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="9"] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="1"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="2"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="3"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="4"] { display: grid !important; } } /* P10FX terminal guard. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { display: grid !important; gap: 0.72rem !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.86fr) !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 13.1rem !important; max-height: 13.1rem !important; min-height: 13.1rem !important; padding: 1rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { font-size: 1.24rem !important; height: 2.9rem !important; min-height: 2.9rem !important; min-width: 3.05rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { grid-template-areas: "title auto" "display display" !important; min-height: 4.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(1.9rem, 2.15vw, 2.35rem) !important; min-height: 3.1rem !important; min-width: 7rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.7rem minmax(3.6rem, 1fr) 2.7rem !important; min-height: 3rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.95rem !important; height: 2.35rem !important; } } /* P10FX final queue/sidebar + tool rebuild guard. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(circle at 14% 12%, rgba(167, 139, 250, 0.34), transparent 42%), radial-gradient(circle at 92% 18%, rgba(34, 211, 238, 0.12), transparent 44%), linear-gradient(145deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.012)) !important; border: 1px solid rgba(221, 230, 247, 0.045) !important; border-radius: 25px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 22px 58px rgba(0, 0, 0, 0.11), 0 0 42px rgba(139, 92, 246, 0.045) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { grid-template-columns: 3.2rem minmax(0, 1fr) !important; min-height: 6.4rem !important; padding: 0.82rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 3.1rem !important; width: 3.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(196, 181, 253, 0.78) !important; font-size: 0.64rem !important; letter-spacing: 0.08em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: #f7f8ff !important; font-size: 1.02rem !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(232, 237, 250, 0.58) !important; font-size: 0.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-drawer { width: 25.5rem !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.76rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { align-items: stretch !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.86fr) !important; margin-top: 0 !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 13.1rem !important; max-height: 13.1rem !important; min-height: 13.1rem !important; overflow: hidden !important; padding: 1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iMetronomeCard.p10ex-metronome-card { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #p03iTimerCard { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > #quickRecordPanel { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > .current-item-references-box { order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { border-radius: 18px !important; font-size: 1.24rem !important; height: 2.9rem !important; min-height: 2.9rem !important; min-width: 3.05rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { gap: 0.58rem !important; grid-template-rows: minmax(4.45rem, auto) auto minmax(3.15rem, 1fr) !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { align-items: center !important; gap: 0.34rem !important; grid-template-areas: "title auto" "display display" !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 4.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03i-timing-title { grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03m-auto-row { grid-area: auto !important; justify-self: end !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display { grid-area: display !important; justify-self: stretch !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(1.9rem, 2.15vw, 2.35rem) !important; min-height: 3.1rem !important; min-width: 7rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.28rem !important; grid-template-columns: repeat(6, minmax(1.85rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { border-radius: 12px !important; height: 1.65rem !important; min-height: 1.65rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { grid-template-columns: repeat(3, minmax(3rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.68rem !important; grid-template-rows: minmax(6.25rem, auto) minmax(3.2rem, 1fr) !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(7.2rem, 1fr) minmax(6.1rem, 0.86fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.7rem minmax(3.6rem, 1fr) 2.7rem !important; min-height: 3rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.95rem !important; height: 2.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { min-height: 2.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { grid-template-columns: repeat(2, minmax(3.6rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { gap: 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { gap: 0.52rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box { opacity: 0.92 !important; } } /* P10FW absolute final guard: no queue strip in the main Practice dashboard. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 12rem !important; max-height: 12rem !important; min-height: 12rem !important; padding: 0.82rem 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { font-size: 1.16rem !important; height: 2.6rem !important; min-height: 2.6rem !important; min-width: 2.8rem !important; } } /* P10FW terminal guard: queue lives in the rail drawer, not the main cockpit. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 12rem !important; max-height: 12rem !important; min-height: 12rem !important; padding: 0.82rem 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { border-radius: 16px !important; font-size: 1.16rem !important; height: 2.6rem !important; min-height: 2.6rem !important; min-width: 2.8rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { gap: 0.38rem !important; grid-template-columns: repeat(3, minmax(2.75rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(1.72rem, 1.9vw, 2.05rem) !important; min-height: 2.72rem !important; min-width: 6.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.45rem minmax(3.2rem, 1fr) 2.45rem !important; min-height: 2.65rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.72rem !important; height: 2.1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.45rem !important; grid-template-columns: repeat(2, minmax(3.3rem, 1fr)) !important; } } /* P10FR terminal override: readable transport controls after all prior compact layers. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.65rem !important; max-height: 10.65rem !important; min-height: 10.65rem !important; padding: 0.68rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { font-size: 1.02rem !important; height: 2.15rem !important; min-height: 2.15rem !important; min-width: 2.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { gap: 0.36rem !important; grid-template-rows: auto auto minmax(2.35rem, 1fr) !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-top { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p10fr-countdown-transport { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(5.8rem, 0.95fr) minmax(7.2rem, 1.05fr) !important; min-height: 2.55rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(1.45rem, 1.65vw, 1.78rem) !important; min-height: 2.28rem !important; min-width: 5.7rem !important; padding: 0.18rem 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { display: grid !important; gap: 0.28rem !important; grid-template-columns: repeat(3, minmax(2.25rem, 1fr)) !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.48rem !important; grid-template-rows: minmax(5.3rem, auto) minmax(2.35rem, 1fr) !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(6.35rem, 1fr) minmax(5.5rem, 0.88fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { display: grid !important; grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 2.1rem minmax(2.9rem, 1fr) 2.1rem !important; min-height: 2.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.45rem !important; height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.34rem !important; grid-template-columns: repeat(2, minmax(2.8rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { display: flex !important; gap: 0.42rem !important; overflow-x: auto !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { flex: 0 0 auto !important; max-width: 11rem !important; min-width: 7.5rem !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotesBox .practice-tool-subtle, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox .reminder-indicator:empty { display: none !important; } } @media (min-width: 1181px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } /* P10LJ global UI consistency: normalize typography, nav, rails, and row interactions. */ :root { --zb-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --zb-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --zb-weight-nav: 400; --zb-weight-nav-active: 520; --zb-weight-rail: 400; --zb-weight-rail-active: 520; --zb-weight-title: 500; --zb-weight-body: 330; --zb-weight-meta: 360; --zb-ease: 170ms ease; } body, button, input, select, textarea { font-family: var(--zb-ui-font) !important; } .app-header.header-with-nav .brand-block h1 { font-weight: 690 !important; letter-spacing: 0 !important; } .app-header.header-with-nav .brand-tagline, .brand-support, .app-build-line, .pwa-update-status { font-weight: 430 !important; letter-spacing: 0 !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"], .app-header.header-with-nav .app-nav, .app-nav { background: transparent !important; box-shadow: none !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, .header-with-nav .app-nav-button, .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.68) !important; font-family: var(--zb-ui-font) !important; font-size: clamp(0.82rem, 1vw, 0.92rem) !important; font-weight: var(--zb-weight-nav) !important; letter-spacing: 0 !important; min-height: 2rem !important; opacity: 1 !important; padding: 0.28rem 0 0.5rem !important; position: relative !important; text-shadow: none !important; transform: none !important; transition: color var(--zb-ease), opacity var(--zb-ease), filter var(--zb-ease) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before, .header-with-nav .app-nav-button::before, .app-nav-button::before { content: none !important; display: none !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, .header-with-nav .app-nav-button::after, .app-nav-button::after { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.82), transparent) !important; border-radius: 999px !important; bottom: -0.36rem !important; box-shadow: 0 0 16px rgba(168, 85, 247, 0.20) !important; content: "" !important; display: block !important; height: 2px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.5) !important; transform-origin: center !important; transition: opacity var(--zb-ease), transform var(--zb-ease) !important; width: 2.4rem !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover, .header-with-nav .app-nav-button:hover, .app-nav-button:hover { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(248, 251, 255, 0.94) !important; filter: brightness(1.05) !important; transform: none !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, .header-with-nav .app-nav-button:hover::after, .app-nav-button:hover::after { opacity: 0.38 !important; transform: translateX(-50%) scaleX(0.78) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, .header-with-nav .app-nav-button.is-selected, .app-nav-button.is-selected { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.98) !important; font-weight: var(--zb-weight-nav-active) !important; filter: none !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, .header-with-nav .app-nav-button.is-selected::after, .app-nav-button.is-selected::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } .organize-workspace-label { color: rgba(213, 225, 242, 0.70) !important; font-family: var(--zb-ui-font) !important; font-size: 0.64rem !important; font-weight: 430 !important; letter-spacing: 0.07em !important; } .organize-nav-item { background: transparent !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: rgba(226, 234, 247, 0.76) !important; font-family: var(--zb-ui-font) !important; font-size: 0.84rem !important; font-weight: var(--zb-weight-rail) !important; letter-spacing: 0 !important; min-height: 2.12rem !important; text-shadow: none !important; transition: background var(--zb-ease), box-shadow var(--zb-ease), color var(--zb-ease), filter var(--zb-ease) !important; } .organize-nav-item:hover { background: linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(168, 85, 247, 0.045)) !important; box-shadow: inset 1px 0 0 rgba(203, 213, 225, 0.12), 0 10px 26px rgba(0, 0, 0, 0.08) !important; color: rgba(248, 251, 255, 0.92) !important; } .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.26), rgba(47, 141, 255, 0.13)) !important; box-shadow: inset 3px 0 0 rgba(168, 85, 247, 0.95), 0 16px 34px rgba(104, 64, 212, 0.16) !important; color: rgba(255, 255, 255, 0.96) !important; font-weight: var(--zb-weight-rail-active) !important; } .organize-nav-icon svg { stroke-width: 1.75 !important; } .preference-row, .preference-row strong, .preference-row small, .preferences-group-heading h3, .preferences-group-heading p { font-family: var(--zb-ui-font) !important; letter-spacing: 0 !important; } .preference-row strong, .preferences-group-heading h3 { font-weight: 500 !important; } .preference-row small, .preferences-group-heading p, .organize-song-modern-linked small, .organize-goal-modern-links-label, .organize-goal-modern-description, .organize-drill-modern-title small, .organize-song-modern-title small, .organize-solo-modern-title small { font-weight: var(--zb-weight-body) !important; } .organize-goal-modern-title, .organize-goal-modern-title strong, .organize-drill-modern-title strong, .organize-song-modern-title strong, .organize-solo-modern-title strong, .organize-item-list-name strong, .organize-lane-item strong { font-family: var(--zb-ui-font) !important; font-weight: var(--zb-weight-title) !important; letter-spacing: 0 !important; } .organize-drills-table-head, .organize-songs-table-head, .organize-solos-table-head, .organize-goal-modern-section-title, .organize-goal-modern-links-label { font-family: var(--zb-ui-font) !important; font-weight: 470 !important; letter-spacing: 0.07em !important; } .organize-goal-modern-linked, .organize-drill-modern-category, .organize-drill-modern-priority, .organize-drill-modern-frequency, .organize-drill-modern-frequency em, .organize-drill-modern-linked, .organize-drill-modern-linked em, .organize-song-modern-source, .organize-song-modern-key, .organize-song-modern-bpm, .organize-song-modern-linked, .organize-song-modern-linked em, .organize-song-modern-practiced, .organize-song-modern-practiced em, .organize-solo-modern-key, .organize-solo-modern-bpm, .organize-solo-modern-linked, .organize-solo-modern-linked em, .organize-solo-modern-practiced, .organize-solo-modern-practiced em, .organize-item-workspace-card > span, .organize-lane-item span { font-family: var(--zb-ui-font) !important; font-weight: var(--zb-weight-meta) !important; letter-spacing: 0 !important; } .organize-goal-modern-row, .organize-drill-modern-row, .organize-song-modern-row, .organize-solo-modern-row, .organize-item-workspace-card, .organize-lane-item { cursor: pointer !important; transition: background var(--zb-ease), border-color var(--zb-ease), box-shadow var(--zb-ease), filter var(--zb-ease) !important; } .organize-goal-modern-row:hover, .organize-goal-modern-row.is-selected:hover, .organize-drill-modern-row:hover, .organize-song-modern-row:hover, .organize-solo-modern-row:hover, body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card:hover, body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.026) 44%, transparent) !important; border-color: rgba(169, 190, 231, 0.16) !important; box-shadow: inset 1px 0 0 rgba(226, 232, 240, 0.14), 0 10px 26px rgba(0, 0, 0, 0.10) !important; transform: none !important; } .organize-drill-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--drill-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--drill-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-song-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--song-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--song-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-solo-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--solo-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--solo-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-goal-modern-row.is-selected, .organize-drill-modern-row.is-selected, .organize-song-modern-row.is-selected, .organize-solo-modern-row.is-selected, body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card.is-selected, body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item.is-selected { background: linear-gradient(90deg, rgba(168, 85, 247, 0.075), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 rgba(192, 132, 252, 0.58), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-drills-filter-bar label span, .organize-songs-filter-bar label span, .organize-solos-filter-bar label span, .organize-drills-filter-bar input, .organize-songs-filter-bar input, .organize-solos-filter-bar input, .organize-drills-filter-bar select, .organize-songs-filter-bar select, .organize-solos-filter-bar select, .organize-songs-new-action, .organize-solos-new-action, .organize-rail-new-goal, button { font-weight: 430 !important; letter-spacing: 0 !important; } /* P10FO polish pass: align the tool band, restore metronome identity, and keep medium desktop widths calm. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.46rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { height: clamp(14.75rem, 20.5vw, 18.6rem) !important; min-height: 0 !important; padding-block: clamp(0.96rem, 1.7vw, 1.35rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { gap: 0.48rem !important; margin-top: -0.3rem !important; padding: 0.46rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid > .p10eu-runtime-prompt { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.7rem !important; margin: 0 !important; max-height: 10.7rem !important; min-height: 10.7rem !important; padding: 0.56rem 0.62rem !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { align-content: start !important; display: grid !important; gap: 0.26rem !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { grid-template-rows: auto auto auto !important; justify-items: stretch !important; padding-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail > .p03i-timing-open-header, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail > .p03i-timer-body { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { align-items: start !important; display: grid !important; gap: 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-middle, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { display: grid !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timing-title, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title { color: rgba(250, 252, 255, 0.9) !important; font-size: 0.82rem !important; font-weight: 650 !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display { font-size: clamp(1.52rem, 1.75vw, 1.85rem) !important; line-height: 0.95 !important; margin-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-middle { align-items: center !important; display: grid !important; gap: 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard #p03iCountdownMinutes { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { align-items: center !important; display: grid !important; gap: 0.14rem !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; margin: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { border-radius: 8px !important; font-size: 0.61rem !important; min-height: 1.3rem !important; padding: 0 !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { align-items: end !important; display: grid !important; gap: 0.22rem !important; margin-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { display: grid !important; gap: 0.24rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right > button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button { border-radius: 9px !important; font-size: 0.67rem !important; min-height: 1.52rem !important; padding: 0.08rem 0.22rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-auto-row { align-items: center !important; color: rgba(232, 237, 250, 0.62) !important; display: inline-flex !important; font-size: 0.64rem !important; gap: 0.32rem !important; justify-content: flex-start !important; letter-spacing: 0.03em !important; min-height: 1.1rem !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row .p03m-auto-row { grid-column: 1 / -1 !important; margin-top: 0.02rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { grid-template-rows: auto auto auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: start !important; gap: 0.22rem 0.32rem !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(5.7rem, 1fr) minmax(5.25rem, 0.86fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-title-region { align-items: start !important; display: grid !important; grid-area: title !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-kicker { display: none !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region { grid-area: bpm !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { align-self: start !important; grid-area: auto !important; justify-self: end !important; min-height: 1.28rem !important; padding: 0.08rem 0.38rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-sound-region { grid-area: sound !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 1.5rem minmax(2.25rem, 1fr) 1.5rem !important; min-height: 1.62rem !important; padding: 0.12rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.24rem !important; height: 1.44rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-step, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { font-size: 0.64rem !important; min-height: 1.42rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { border-radius: 9px !important; font-size: 0.64rem !important; min-height: 1.44rem !important; padding-block: 0.08rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { display: grid !important; gap: 0.22rem !important; grid-template-columns: minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-tap, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-rhythm, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05t-pattern-summary, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-pattern-region, body:has(.practice-dashboard:not([hidden])) #p10exMetroNoteCell { display: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { align-content: start !important; gap: 0.28rem !important; transform: translateY(-0.08rem) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: 1.36rem !important; min-height: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box { align-content: start !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { align-items: stretch !important; gap: 0.48rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotesBox, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox { height: 7.65rem !important; margin: 0 !important; max-height: 7.65rem !important; min-height: 7.65rem !important; overflow: hidden !important; padding: 0.66rem 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotes, body:has(.practice-dashboard:not([hidden])) #currentItemReminderNotes { min-height: 2.45rem !important; padding-block: 0.56rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7.65rem !important; max-height: 7.65rem !important; min-height: 7.65rem !important; padding: 0.66rem 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { height: 2.6rem !important; max-height: 2.6rem !important; min-height: 2.6rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.62rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini { background: radial-gradient(circle at 12% 10%, rgba(167, 139, 250, 0.24), transparent 48%), radial-gradient(circle at 92% 4%, rgba(45, 212, 191, 0.11), transparent 44%), linear-gradient(145deg, rgba(255, 255, 255, 0.038), rgba(255, 255, 255, 0.012)) !important; border-color: rgba(221, 230, 247, 0.035) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), 0 18px 50px rgba(0, 0, 0, 0.10) !important; min-height: 4.35rem !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-week { background: radial-gradient(circle at 18% 30%, rgba(74, 222, 128, 0.24), transparent 50%), radial-gradient(circle at 95% 2%, rgba(56, 189, 248, 0.11), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.040), rgba(255, 255, 255, 0.014)) !important; } } @media (min-width: 1181px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } } @media (min-width: 961px) and (max-width: 1180px) { body:has(.practice-dashboard:not([hidden])) .app-shell { grid-template-columns: minmax(11.5rem, 13.25rem) minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard { padding-inline: clamp(0.8rem, 1.8vw, 1.3rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { height: clamp(14.25rem, 18.5vw, 17.2rem) !important; min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { grid-template-columns: repeat(4, minmax(8.25rem, 1fr)) !important; overflow-x: auto !important; scrollbar-width: thin !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 10.25rem !important; max-height: 10.25rem !important; min-height: 10.25rem !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotesBox, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox { height: 6.95rem !important; max-height: 6.95rem !important; min-height: 6.95rem !important; } body:has(.practice-dashboard:not([hidden])) #currentItemNotes, body:has(.practice-dashboard:not([hidden])) #currentItemReminderNotes { min-height: 2.55rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 6.95rem !important; max-height: 6.95rem !important; min-height: 6.95rem !important; } } /* P10FQ transport console: one coordinated timing/capture band and upcoming-only setlist chips. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box { order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 9.25rem !important; max-height: 9.25rem !important; min-height: 9.25rem !important; padding: 0.48rem 0.54rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { align-items: center !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.026)) !important; border: 1px solid rgba(221, 230, 247, 0.09) !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.08) !important; color: rgba(250, 252, 255, 0.92) !important; display: inline-flex !important; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size: clamp(1.05rem, 1.25vw, 1.32rem) !important; font-weight: 620 !important; justify-content: center !important; letter-spacing: 0 !important; line-height: 1 !important; min-height: 2.05rem !important; min-width: 5.2rem !important; padding: 0.2rem 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) { gap: 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-timing-open-header, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { grid-template-columns: minmax(3.9rem, 0.85fr) auto auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { background: rgba(255, 255, 255, 0.036) !important; border-color: rgba(221, 230, 247, 0.06) !important; font-size: 0.58rem !important; min-height: 1.14rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { align-items: center !important; border-radius: 999px !important; display: inline-flex !important; font-size: 0.72rem !important; font-weight: 680 !important; height: 1.72rem !important; justify-content: center !important; min-height: 1.72rem !important; min-width: 1.72rem !important; padding: 0 !important; width: 1.72rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { align-items: center !important; display: flex !important; gap: 0.32rem !important; justify-content: flex-start !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(5.2rem, 0.95fr) minmax(5rem, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { margin-top: 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { display: grid !important; gap: 0.24rem !important; grid-template-rows: auto auto auto !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { order: 3 !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { order: 2 !important; justify-self: start !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel :is(.quick-record-status, .quick-record-help, .quick-record-note) { color: rgba(232, 237, 250, 0.48) !important; font-size: 0.64rem !important; line-height: 1.25 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card.main-queue-panel { height: 4.65rem !important; max-height: 4.65rem !important; min-height: 4.65rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { gap: 0.26rem !important; grid-auto-columns: minmax(6.1rem, max-content) !important; height: 1.95rem !important; max-height: 1.95rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { min-height: 1.82rem !important; padding: 0.18rem 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="0"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position^="-"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="5"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="6"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="7"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="8"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="9"] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item-title { max-width: 11rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item:hover { background: rgba(255, 255, 255, 0.065) !important; border-color: rgba(167, 139, 250, 0.22) !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7.55rem !important; max-height: 7.55rem !important; min-height: 7.55rem !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .current-item-notes-header span, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox summary span:not(.reminder-indicator) { color: rgba(232, 237, 250, 0.50) !important; font-size: 0.63rem !important; line-height: 1.25 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { height: 3.05rem !important; max-height: 3.05rem !important; min-height: 3.05rem !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-action-prompt.p10eu-runtime-prompt { align-items: center !important; background: rgba(12, 18, 31, 0.82) !important; border: 1px solid rgba(221, 230, 247, 0.08) !important; border-radius: 999px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18) !important; display: inline-flex !important; gap: 0.46rem !important; justify-self: start !important; margin-top: -0.1rem !important; max-width: max-content !important; padding: 0.32rem 0.46rem 0.32rem 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-action-prompt.p10eu-runtime-prompt[hidden] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-action-text { color: rgba(232, 237, 250, 0.72) !important; font-size: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-save-button { border-radius: 999px !important; font-size: 0.62rem !important; min-height: 1.35rem !important; padding: 0.16rem 0.48rem !important; } } /* P10FP refinement: contextual help only, compact setlist queue, and tighter tool interiors. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) #practiceHelpToggle.practice-help-toggle { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { height: clamp(13.2rem, 17vw, 16.6rem) !important; min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid { gap: 0.42rem !important; margin-top: -0.38rem !important; padding: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 9.8rem !important; max-height: 9.8rem !important; min-height: 9.8rem !important; padding: 0.5rem 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.22rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) { align-content: start !important; display: grid !important; gap: 0.24rem !important; grid-template-rows: auto auto !important; height: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-timing-open-header { align-items: center !important; display: grid !important; gap: 0.28rem !important; grid-template-columns: minmax(4.9rem, 1fr) auto auto !important; min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-open-body:not(.p05q-timer-rail) .p03i-timer-body { align-content: start !important; display: grid !important; gap: 0.26rem !important; grid-template-rows: auto auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { grid-template-rows: auto auto auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { align-items: center !important; display: grid !important; gap: 0.28rem !important; grid-template-columns: minmax(4.9rem, 1fr) auto auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timing-title, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title { font-size: 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display { font-size: clamp(1.28rem, 1.52vw, 1.62rem) !important; justify-self: end !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03m-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(221, 230, 247, 0.08) !important; border-radius: 999px !important; font-size: 0.58rem !important; justify-self: end !important; min-height: 1.28rem !important; padding: 0.04rem 0.38rem !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-middle { align-items: center !important; display: grid !important; min-height: 1.46rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.12rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { min-height: 1.22rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { align-items: start !important; gap: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right > button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button { min-height: 1.38rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { gap: 0.18rem 0.24rem !important; grid-template-areas: "title bpm sound auto" !important; grid-template-columns: minmax(4.4rem, 0.8fr) minmax(5rem, 1fr) minmax(5.2rem, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 1.35rem minmax(2.1rem, 1fr) 1.35rem !important; min-height: 1.45rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 1.12rem !important; height: 1.28rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { min-height: 1.36rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { align-content: start !important; margin-top: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { align-content: start !important; gap: 0.22rem !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: 1.24rem !important; min-height: 1.62rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { gap: 0.24rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box { gap: 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .references-list, body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-empty-state, body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-linked-list { margin-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) .p10eb-reference-shortcuts { margin-top: 0.1rem !important; transform: translateY(-0.08rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 7.15rem !important; max-height: 7.15rem !important; min-height: 7.15rem !important; padding: 0.62rem 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { height: 2.55rem !important; max-height: 2.55rem !important; min-height: 2.55rem !important; overflow: auto !important; padding: 0.56rem 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card.main-queue-panel { display: grid !important; gap: 0.42rem !important; height: 5.35rem !important; max-height: 5.35rem !important; min-height: 5.35rem !important; overflow: hidden !important; padding: 0.54rem 0.64rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-heading { align-items: center !important; display: grid !important; gap: 0.34rem !important; grid-template-columns: auto 1fr auto !important; min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-title-row { display: contents !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card h3 { font-size: 0.8rem !important; margin: 0 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .help-bubble, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-helper, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .mobile-queue-toggle, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .desktop-queue-toggle { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-progress-pill { background: rgba(255, 255, 255, 0.045) !important; border-color: rgba(221, 230, 247, 0.08) !important; font-size: 0.64rem !important; justify-self: end !important; padding: 0.12rem 0.44rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-progress-track { align-self: center !important; height: 0.22rem !important; min-width: 7rem !important; opacity: 0.52 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .session-queue { display: grid !important; gap: 0.36rem !important; grid-auto-columns: minmax(7.2rem, 1fr) !important; grid-auto-flow: column !important; height: 2.25rem !important; list-style: none !important; margin: 0 !important; max-height: 2.25rem !important; overflow: hidden !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item.compact-queue-item { align-items: center !important; background: rgba(255, 255, 255, 0.038) !important; border: 1px solid rgba(221, 230, 247, 0.055) !important; border-radius: 999px !important; display: grid !important; gap: 0.34rem !important; grid-template-columns: auto minmax(0, 1fr) !important; min-height: 2.1rem !important; padding: 0.28rem 0.54rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position^="-"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="4"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="5"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="6"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="7"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="8"], body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item[data-queue-position="9"] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-status-marker { height: 0.7rem !important; width: 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-text { gap: 0 !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item-title { font-size: 0.68rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-item-type, body:has(.practice-dashboard:not([hidden])) .practice-queue-card .queue-start-now-button { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini { background: radial-gradient(circle at 14% 12%, rgba(167, 139, 250, 0.30), transparent 42%), radial-gradient(circle at 100% 0%, rgba(56, 189, 248, 0.12), transparent 46%), linear-gradient(145deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0.008)) !important; border-color: rgba(221, 230, 247, 0.026) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.018), 0 20px 58px rgba(0, 0, 0, 0.08), 0 0 34px rgba(139, 92, 246, 0.035) !important; } } @media (min-width: 961px) and (max-width: 1180px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { height: clamp(13.5rem, 17vw, 16.25rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box).practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, #p03iMetronomeCard, #quickRecordPanel, .current-item-references-box) { height: 9.55rem !important; max-height: 9.55rem !important; min-height: 9.55rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { height: 6.7rem !important; max-height: 6.7rem !important; min-height: 6.7rem !important; } } /* P10FY lower dashboard recomposition: practice console first, summonable systems second. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-queue-card.main-queue-panel { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.8rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(circle at 15% 12%, rgba(167, 139, 250, 0.36), transparent 42%), radial-gradient(circle at 90% 14%, rgba(34, 211, 238, 0.13), transparent 44%), linear-gradient(145deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012)) !important; border-color: rgba(221, 230, 247, 0.045) !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.032), 0 22px 58px rgba(0, 0, 0, 0.12), 0 0 42px rgba(139, 92, 246, 0.055) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { grid-template-columns: 3.25rem minmax(0, 1fr) !important; min-height: 6.55rem !important; padding: 0.84rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 3.15rem !important; width: 3.15rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(196, 181, 253, 0.80) !important; font-size: 0.64rem !important; letter-spacing: 0.08em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: #f7f8ff !important; font-size: 1.04rem !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(232, 237, 250, 0.58) !important; font-size: 0.75rem !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player.p10fy-practice-console { gap: 0.82rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console { align-items: stretch !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: minmax(17rem, auto) minmax(5.2rem, auto) !important; margin-top: 0 !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > :is(#p03iMetronomeCard, #p03iTimerCard, #quickRecordPanel).p10fy-console-primary { height: 17rem !important; max-height: 17rem !important; min-height: 17rem !important; overflow: hidden !important; padding: 1.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > #p03iMetronomeCard { grid-column: 1 !important; grid-row: 1 !important; order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > #p03iTimerCard { grid-column: 2 !important; grid-row: 1 !important; order: 2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > #quickRecordPanel { grid-column: 3 !important; grid-row: 1 !important; order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box.p10fy-reference-strip { align-items: center !important; display: grid !important; grid-column: 1 / -1 !important; grid-row: 2 !important; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.4fr) auto !important; height: 5.2rem !important; max-height: 5.2rem !important; min-height: 5.2rem !important; order: 4 !important; padding: 0.82rem 1rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box.p10fy-reference-strip .reference-box-header { margin: 0 !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box.p10fy-reference-strip .reference-context-list, body:has(.practice-dashboard:not([hidden])) .current-item-references-box.p10fy-reference-strip .reference-empty-state { margin: 0 !important; min-height: 0 !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box.p10fy-reference-strip .p10eb-reference-shortcuts { justify-self: end !important; margin: 0 !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { border-radius: 20px !important; font-size: 1.34rem !important; height: 3.25rem !important; min-height: 3.25rem !important; min-width: 3.35rem !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { gap: 0.8rem !important; grid-template-rows: minmax(6.1rem, auto) auto minmax(3.55rem, 1fr) !important; height: 100% !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left { align-items: center !important; grid-template-areas: "title auto" "display display" !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 6.1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03i-timing-title { grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03m-timer-auto-row, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-left .p03m-auto-row { grid-area: auto !important; justify-self: end !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display { grid-area: display !important; justify-self: stretch !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { font-size: clamp(2.15rem, 2.7vw, 2.95rem) !important; min-height: 4rem !important; min-width: 8rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.34rem !important; grid-template-columns: repeat(6, minmax(2rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { border-radius: 13px !important; height: 1.85rem !important; min-height: 1.85rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { gap: 0.55rem !important; grid-template-columns: repeat(3, minmax(3.4rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.85rem !important; grid-template-rows: minmax(8.35rem, auto) minmax(3.55rem, 1fr) !important; height: 100% !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(8.6rem, 1fr) minmax(6.8rem, 0.82fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { grid-template-columns: 3rem minmax(4.2rem, 1fr) 3rem !important; min-height: 3.7rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-bpm-input { font-size: 2.35rem !important; height: 2.8rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { min-height: 2.8rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { gap: 0.58rem !important; grid-template-columns: repeat(2, minmax(3.9rem, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-body { align-content: start !important; gap: 0.85rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { display: grid !important; gap: 0.55rem !important; grid-template-columns: repeat(3, minmax(3.35rem, auto)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { grid-column: 1 / -1 !important; order: -1 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray { display: grid !important; gap: 0.72rem !important; grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray > .p10fy-note-chip.practice-tool-card { height: 5.35rem !important; max-height: 5.35rem !important; min-height: 5.35rem !important; overflow: hidden !important; padding: 0.74rem 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray textarea { min-height: 2.45rem !important; } } /* P10FY verification fixes: keep recomposed regions from being reclaimed by legacy queue/card rules. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-queue-card.main-queue-panel { display: none !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console { grid-template-rows: 17rem 5.2rem !important; height: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box.p10fy-reference-strip, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box { grid-column: 1 / -1 !important; grid-row: 2 !important; height: 5.2rem !important; max-height: 5.2rem !important; min-height: 5.2rem !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-right { display: flex !important; min-height: 3.55rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row { display: flex !important; gap: 0.5rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button { flex: 1 1 0 !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr) !important; grid-template-rows: minmax(5.35rem, auto) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray > .p10fy-note-chip.practice-tool-card, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray > #currentItemReminderBox.practice-tool-card { grid-row: 1 !important; height: 5.35rem !important; max-height: 5.35rem !important; min-height: 5.35rem !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox.p10fy-note-chip > p, body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox.p10fy-note-chip .reminder-actions { display: none !important; } } /* P10FZ hard stop for the support strip: References is not a primary console. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box.p10fy-reference-strip, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box { align-self: stretch !important; box-sizing: border-box !important; grid-column: 1 / -1 !important; grid-row: 2 !important; height: 5.2rem !important; max-height: 5.2rem !important; min-height: 5.2rem !important; overflow: hidden !important; padding: 0.78rem 1rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button { flex: 1 1 0 !important; width: auto !important; } } /* P10GC visual refinement: make the practice console feel like one premium instrument surface. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(circle at 18% 14%, rgba(167, 139, 250, 0.42), transparent 42%), radial-gradient(circle at 88% 10%, rgba(34, 211, 238, 0.15), transparent 42%), radial-gradient(circle at 40% 105%, rgba(74, 222, 128, 0.08), transparent 44%), linear-gradient(145deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.014)) !important; border-color: rgba(221, 230, 247, 0.050) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.040), 0 24px 62px rgba(0, 0, 0, 0.13), 0 0 48px rgba(139, 92, 246, 0.065) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy small { color: rgba(210, 200, 255, 0.74) !important; font-size: 0.62rem !important; font-weight: 760 !important; letter-spacing: 0.08em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy strong { color: #f8faff !important; font-weight: 710 !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy em { color: rgba(232, 237, 250, 0.58) !important; font-style: normal !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console { gap: 0.82rem !important; grid-template-rows: 17.25rem 5rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > :is(#p03iMetronomeCard, #p03iTimerCard, #quickRecordPanel).p10fy-console-primary { background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.13), transparent 42%), radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.08), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.024)) !important; border-color: rgba(221, 230, 247, 0.070) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 24px 60px rgba(0, 0, 0, 0.16) !important; height: 17.25rem !important; max-height: 17.25rem !important; min-height: 17.25rem !important; padding: 1.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timing-title, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-timing-title, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel summary { color: rgba(247, 250, 255, 0.94) !important; font-size: 0.98rem !important; font-weight: 720 !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel button.p10fq-transport-button { background: linear-gradient(180deg, rgba(255, 255, 255, 0.110), rgba(255, 255, 255, 0.040)), rgba(5, 11, 24, 0.30) !important; border: 1px solid rgba(221, 230, 247, 0.115) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 26px rgba(0, 0, 0, 0.18) !important; color: #f7fbff !important; font-size: 1.38rem !important; height: 3.18rem !important; min-height: 3.18rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-action-row > button.p10fq-transport-button:first-child, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button:first-child { background: linear-gradient(180deg, rgba(71, 221, 128, 0.92), rgba(16, 143, 71, 0.88)) !important; border-color: rgba(123, 255, 177, 0.34) !important; color: #f5fff8 !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel #quickRecordStartButton.p10fq-transport-button { background: linear-gradient(180deg, rgba(255, 90, 108, 0.94), rgba(160, 24, 44, 0.92)) !important; border-color: rgba(255, 150, 165, 0.34) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p05q-timer-rail { gap: 0.72rem !important; grid-template-rows: minmax(6rem, auto) auto minmax(3.35rem, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timer-display, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed, body[data-dashboard-mode]:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.025)), rgba(3, 8, 18, 0.34) !important; border-color: rgba(221, 230, 247, 0.095) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(247, 250, 255, 0.94) !important; font-weight: 610 !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-presets { gap: 0.36rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset { background: rgba(255, 255, 255, 0.060) !important; border-color: rgba(221, 230, 247, 0.075) !important; border-radius: 13px !important; color: rgba(232, 237, 250, 0.82) !important; font-size: 0.74rem !important; font-weight: 680 !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-preset.is-selected { background: rgba(139, 92, 246, 0.28) !important; border-color: rgba(167, 139, 250, 0.42) !important; color: #f7f2ff !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { gap: 0.76rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p05w-bpm-control { background: linear-gradient(180deg, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.025)), rgba(3, 8, 18, 0.30) !important; border-color: rgba(221, 230, 247, 0.10) !important; border-radius: 20px !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard #p03iSoundSelect { background: rgba(255, 255, 255, 0.060) !important; border-color: rgba(221, 230, 247, 0.085) !important; border-radius: 16px !important; color: rgba(247, 250, 255, 0.90) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { align-items: center !important; justify-content: start !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box.p10fy-reference-strip, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid.p10fy-primary-console > .current-item-references-box { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important; border-color: rgba(221, 230, 247, 0.055) !important; border-radius: 20px !important; height: 5rem !important; max-height: 5rem !important; min-height: 5rem !important; opacity: 0.94 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.p10fy-notes-tray > .p10fy-note-chip.practice-tool-card { background: rgba(255, 255, 255, 0.032) !important; border-color: rgba(221, 230, 247, 0.045) !important; border-radius: 19px !important; } } /* P10GD terminal drawer correction: notes are hidden from the dashboard, visible in the drawer. */ body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer .practice-notes-grid, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer .practice-notes-grid.p10fy-notes-tray, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer .practice-notes-drawer-grid { display: grid !important; gap: 0.9rem !important; grid-template-columns: 1fr !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer #currentItemReminderBox.practice-tool-card { display: grid !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer textarea#currentItemReminderNotes { display: block !important; height: 8rem !important; max-height: none !important; min-height: 8rem !important; } /* P10GF fallback composition: render the existing notes grid as drawer content without changing data ownership. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { display: none !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { display: grid !important; gap: 0.9rem !important; grid-template-columns: 1fr !important; height: auto !important; max-height: calc(100vh - 13rem) !important; min-height: 0 !important; overflow: auto !important; position: fixed !important; right: 1.15rem !important; top: 8.7rem !important; width: min(28.7rem, calc(100vw - 3.7rem)) !important; z-index: 96 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.030)) !important; border: 1px solid rgba(221, 230, 247, 0.080) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; display: grid !important; height: auto !important; grid-column: 1 / -1 !important; grid-row: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; padding: 1rem !important; width: auto !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #currentItemReminderBox[open].practice-tool-card { align-content: start !important; gap: 0.65rem !important; min-height: 12rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { background: rgba(2, 7, 18, 0.34) !important; border-color: rgba(221, 230, 247, 0.10) !important; border-radius: 16px !important; color: rgba(247, 250, 255, 0.92) !important; display: block !important; height: 8rem !important; max-height: none !important; min-height: 8rem !important; resize: vertical !important; } /* P10GL polish: metronome rebalance, active-state cue, and softer sidebar widgets. */ body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #startItemButton.is-active-practice-action { background: radial-gradient(circle at 18% 0%, rgba(74, 222, 128, 0.20), transparent 45%), linear-gradient(180deg, rgba(34, 197, 94, 0.74), rgba(17, 94, 58, 0.82)) !important; border-color: rgba(134, 239, 172, 0.36) !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #startItemButton.is-active-practice-action .p10eb-action-copy strong { font-variant-numeric: tabular-nums !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(circle at 16% 18%, rgba(167, 139, 250, 0.34), transparent 42%), radial-gradient(circle at 92% 18%, rgba(45, 212, 191, 0.13), transparent 40%), linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(221, 230, 247, 0.055) !important; border-radius: 23px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050), 0 20px 54px rgba(0, 0, 0, 0.16), 0 0 38px rgba(139, 92, 246, 0.075) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(circle at 15% 18%, rgba(168, 85, 247, 0.42), transparent 42%), radial-gradient(circle at 92% 18%, rgba(20, 184, 166, 0.18), transparent 42%), linear-gradient(145deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.020)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-icon, body:has(.practice-dashboard:not([hidden])) .practice-rail-ring { filter: drop-shadow(0 0 16px rgba(167, 139, 250, 0.25)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy small { color: rgba(213, 204, 255, 0.78) !important; font-size: 0.61rem !important; font-weight: 800 !important; letter-spacing: 0.09em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy strong { color: #fbfdff !important; font-size: clamp(1rem, 1.12vw, 1.22rem) !important; font-weight: 760 !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy em { color: rgba(232, 237, 250, 0.62) !important; font-size: 0.73rem !important; } @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { align-content: stretch !important; gap: 0.82rem !important; grid-template-rows: auto minmax(5.7rem, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: end !important; grid-template-areas: "title auto" "bpm sound" !important; grid-template-columns: minmax(7.1rem, 1.05fr) minmax(6.15rem, 0.95fr) !important; gap: 0.52rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { align-items: center !important; align-self: center !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.030)) !important; border: 1px solid rgba(221, 230, 247, 0.10) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(232, 237, 250, 0.80) !important; display: inline-flex !important; font-size: 0.68rem !important; gap: 0.42rem !important; grid-area: auto !important; justify-self: end !important; min-height: 2.25rem !important; padding: 0.35rem 0.72rem !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { align-self: stretch !important; display: grid !important; min-height: 5.9rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions { align-items: stretch !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; height: 100% !important; min-height: 5.9rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button { border-radius: 24px !important; font-size: 1.72rem !important; height: auto !important; min-height: 5.6rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p03i-metronome-actions > button.p10fq-transport-button:first-child { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px rgba(16, 185, 129, 0.18) !important; } } /* P10GM final override: active state owns elapsed timing and queue opens as a transient drawer. */ #currentItemElapsedPill { display: none !important; } .practice-queue-drawer { bottom: auto !important; height: auto !important; left: 1rem !important; max-height: calc(100vh - 2rem) !important; top: 1rem !important; width: min(22.75rem, calc(100vw - 2rem)) !important; border-radius: 26px !important; } body.practice-queue-workspace-open .practice-queue-drawer { transform: translateX(0) !important; } .practice-queue-workspace-list { max-height: min(31rem, calc(100vh - 14rem)) !important; } /* P10GN product polish: metronome balance, tool-owned prompts, recorder review state, ambient rail widgets. */ body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-shell { grid-template-rows: auto minmax(5.85rem, 1fr) !important; gap: 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: stretch !important; display: grid !important; grid-template-areas: "title title title" "bpm sound auto" !important; grid-template-columns: minmax(7.4rem, 1.12fr) minmax(6.3rem, 0.96fr) minmax(4.65rem, 0.72fr) !important; gap: 0.54rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card :is(.p06d-metro-title-region, .p10ex-metro-title) { grid-area: title !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-bpm-region { grid-area: bpm !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p06d-metro-sound-region { grid-area: sound !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { align-self: stretch !important; display: inline-flex !important; grid-area: auto !important; justify-self: stretch !important; min-height: 2.72rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-transport { min-height: 5.95rem !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) { overflow: visible !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt { bottom: 0.7rem !important; left: 50% !important; margin: 0 !important; max-width: calc(100% - 1.4rem) !important; position: absolute !important; transform: translate(-50%, 58%) !important; z-index: 8 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard > .runtime-default-action-prompt { background: radial-gradient(circle at 18% 12%, rgba(167, 139, 250, 0.18), transparent 46%), linear-gradient(180deg, rgba(19, 25, 42, 0.96), rgba(10, 15, 27, 0.94)) !important; border-color: rgba(196, 181, 253, 0.18) !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard > .runtime-default-action-prompt { background: radial-gradient(circle at 18% 12%, rgba(45, 212, 191, 0.16), transparent 46%), linear-gradient(180deg, rgba(17, 28, 42, 0.96), rgba(8, 16, 27, 0.94)) !important; border-color: rgba(125, 211, 252, 0.16) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-secondary-row { display: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-secondary-row { display: grid !important; gap: 0.48rem !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-secondary-row button[hidden] { display: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordDeleteButton { color: rgba(254, 226, 226, 0.94) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(circle at 14% 10%, rgba(167, 139, 250, 0.34), transparent 42%), radial-gradient(circle at 92% 16%, rgba(45, 212, 191, 0.16), transparent 42%), linear-gradient(150deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.018) 58%, rgba(79, 70, 229, 0.060)) !important; border-color: rgba(221, 230, 247, 0.050) !important; border-radius: 25px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -18px 42px rgba(2, 6, 16, 0.12), 0 24px 70px rgba(0, 0, 0, 0.20), 0 0 48px rgba(124, 58, 237, 0.075) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy small { color: rgba(222, 214, 255, 0.72) !important; font-size: 0.59rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy strong { color: rgba(248, 250, 252, 0.98) !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy em { color: rgba(226, 232, 240, 0.58) !important; } .practice-queue-drawer { background: radial-gradient(circle at 18% 6%, rgba(167, 139, 250, 0.18), transparent 40%), radial-gradient(circle at 90% 8%, rgba(45, 212, 191, 0.11), transparent 38%), linear-gradient(160deg, rgba(11, 18, 31, 0.965), rgba(5, 10, 20, 0.972)) !important; border: 1px solid rgba(221, 230, 247, 0.070) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 28px 90px rgba(0, 0, 0, 0.46), 0 0 56px rgba(124, 58, 237, 0.08) !important; } /* P10GO final identity polish: ambient sidebar, detached tool prompts, and instrument label icons. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.78rem !important; margin-top: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { order: 2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { order: 3 !important; } /* P10GU final terminal overrides: keep recorder review actions visible and make sidebar modules ambient, not card-like. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.66rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-secondary-row { align-items: center !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready :is(#quickRecordPlayButton, #quickRecordSaveButton, #quickRecordDeleteButton):not([hidden]) { align-items: center !important; display: inline-flex !important; justify-content: center !important; min-height: 2.58rem !important; opacity: 1 !important; visibility: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStartButton, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStopButton { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(ellipse at 16% 12%, rgba(14, 165, 233, 0.30), transparent 42%), radial-gradient(ellipse at 88% 18%, rgba(168, 85, 247, 0.22), transparent 44%), radial-gradient(ellipse at 50% 112%, rgba(34, 211, 238, 0.12), transparent 54%), linear-gradient(150deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.010) 58%, rgba(15, 23, 42, 0.18)) !important; border-color: rgba(125, 211, 252, 0.10) !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -20px 42px rgba(2, 6, 16, 0.16), 0 16px 46px rgba(0, 0, 0, 0.13), 0 0 44px rgba(14, 165, 233, 0.09) !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; min-height: 4.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: radial-gradient(circle, rgba(14, 165, 233, 0.24), rgba(99, 102, 241, 0.11) 58%, transparent 60%) !important; border: 1px solid rgba(125, 211, 252, 0.16) !important; box-shadow: 0 0 30px rgba(14, 165, 233, 0.16) !important; height: 2.14rem !important; width: 2.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(186, 230, 253, 0.98) !important; font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.08rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.92rem !important; font-weight: 680 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(ellipse at 18% 10%, rgba(251, 191, 36, 0.24), transparent 44%), radial-gradient(ellipse at 88% 18%, rgba(244, 114, 182, 0.16), transparent 42%), radial-gradient(ellipse at 46% 116%, rgba(167, 139, 250, 0.17), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.15)) !important; border-color: rgba(253, 224, 71, 0.08) !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050), inset 0 -22px 50px rgba(2, 6, 16, 0.12), 0 16px 50px rgba(0, 0, 0, 0.13), 0 0 48px rgba(250, 204, 21, 0.075) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.04rem !important; } /* P10HA terminal recorder-only fix: review actions stay on one visible row. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.44rem !important; grid-template-columns: minmax(4.7rem, 1fr) minmax(3.7rem, 0.72fr) 2.42rem !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordElapsed, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordElapsed { grid-column: 1 / -1 !important; order: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-secondary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-secondary-row { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] :is(#quickRecordPlayButton, #quickRecordSaveButton):not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordPlayButton:not([hidden]) { display: inline-flex !important; min-height: 2.34rem !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordDeleteButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordDeleteButton:not([hidden]) { align-items: center !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; gap: 0 !important; height: 2.34rem !important; justify-content: center !important; justify-self: end !important; min-height: 2.34rem !important; min-width: 2.34rem !important; padding: 0 !important; width: 2.34rem !important; } /* P10HB true terminal sidebar-widget-only pass: ambient queue launcher and motivational streak module. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.78rem !important; margin: 0 0 clamp(0.55rem, 1.5vh, 1rem) !important; order: 2 !important; padding: 0 !important; position: relative !important; transform: translateY(-clamp(1.4rem, 5.5vh, 4.2rem)) !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { border-radius: inherit !important; content: "" !important; inset: 1px !important; opacity: 0.9 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%, rgba(255, 255, 255, 0.055) 76%, transparent) !important; content: "" !important; height: 1px !important; left: 1.1rem !important; opacity: 0.58 !important; pointer-events: none !important; position: absolute !important; right: 1.1rem !important; top: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 18% 12%, rgba(56, 189, 248, 0.34), transparent 44%), radial-gradient(ellipse at 95% 16%, rgba(167, 139, 250, 0.26), transparent 48%), radial-gradient(ellipse at 46% 122%, rgba(45, 212, 191, 0.12), transparent 56%), linear-gradient(150deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.012) 58%, rgba(8, 47, 73, 0.18)) !important; border: 1px solid rgba(125, 211, 252, 0.055) !important; border-radius: 30px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.058), inset 0 -28px 56px rgba(2, 6, 16, 0.16), 0 22px 58px rgba(0, 0, 0, 0.16), 0 0 52px rgba(14, 165, 233, 0.13) !important; cursor: pointer !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.55rem minmax(0, 1fr) !important; min-height: 5.35rem !important; order: 1 !important; padding: 0.82rem 0.88rem !important; text-align: left !important; transform: translateZ(0) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { border-color: rgba(125, 211, 252, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.070), inset 0 -28px 56px rgba(2, 6, 16, 0.15), 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 64px rgba(14, 165, 233, 0.18) !important; outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 18% 14%, rgba(186, 230, 253, 0.11), transparent 36%), linear-gradient(150deg, rgba(15, 23, 42, 0.12), rgba(3, 7, 18, 0.28)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { align-items: center !important; background: conic-gradient(from -90deg, rgba(34, 211, 238, 0.98) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(8, 13, 27, 0.98) 58%, transparent 59%) !important; border: 1px solid rgba(125, 211, 252, 0.11) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(14, 165, 233, 0.20) !important; display: inline-flex !important; height: 2.48rem !important; justify-content: center !important; width: 2.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring::after { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(224, 242, 254, 0.98) !important; font-size: 0 !important; line-height: 1 !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.12rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(186, 230, 253, 0.76) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 251, 255, 0.98) !important; font-size: 1.02rem !important; font-weight: 720 !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(226, 232, 240, 0.62) !important; font-size: 0.70rem !important; line-height: 1.28 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; background: radial-gradient(ellipse at 17% 10%, rgba(251, 191, 36, 0.30), transparent 44%), radial-gradient(ellipse at 92% 14%, rgba(244, 114, 182, 0.18), transparent 42%), radial-gradient(ellipse at 46% 118%, rgba(167, 139, 250, 0.18), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.16)) !important; border: 1px solid rgba(253, 224, 71, 0.045) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -28px 58px rgba(2, 6, 16, 0.13), 0 20px 56px rgba(0, 0, 0, 0.15), 0 0 58px rgba(250, 204, 21, 0.10) !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 5.75rem !important; order: 2 !important; padding: 0.86rem 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 18% 18%, rgba(254, 240, 138, 0.12), transparent 38%), linear-gradient(150deg, rgba(15, 23, 42, 0.08), rgba(3, 7, 18, 0.30)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { align-items: center !important; background: radial-gradient(circle, rgba(253, 224, 71, 0.26), transparent 62%), rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(253, 224, 71, 0.12) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(250, 204, 21, 0.16) !important; color: rgba(254, 240, 138, 0.98) !important; display: inline-flex !important; font-size: 1.18rem !important; height: 2.38rem !important; justify-content: center !important; width: 2.38rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.12rem !important; font-weight: 760 !important; line-height: 1.04 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(253, 230, 138, 0.78) !important; font-size: 0.76rem !important; line-height: 1.25 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(253, 224, 71, 0.075) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 10px 28px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 251, 235, 0.78) !important; font-size: 0.76rem !important; min-height: 2.18rem !important; order: 3 !important; } /* P10HD sidebar-only correction: true floating widgets plus visible build/update footer. */ body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav { --rail-widget-glow: 0 24px 70px rgba(0, 0, 0, 0.22); } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { align-self: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.72rem !important; margin: auto 0 0 !important; order: 2 !important; padding: 0 0.05rem !important; position: relative !important; transform: none !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { backdrop-filter: blur(18px) saturate(1.18) !important; border: 0 !important; isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { border-radius: inherit !important; content: "" !important; inset: 0 !important; opacity: 1 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: radial-gradient(ellipse at 28% 0%, rgba(255, 255, 255, 0.34), transparent 38%), linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(255, 255, 255, 0.06) 72%, transparent) !important; content: "" !important; height: 100% !important; inset: 0 !important; opacity: 0.42 !important; pointer-events: none !important; position: absolute !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 8% 6%, rgba(103, 232, 249, 0.38), transparent 38%), radial-gradient(ellipse at 104% 18%, rgba(168, 85, 247, 0.32), transparent 46%), radial-gradient(ellipse at 50% 122%, rgba(45, 212, 191, 0.18), transparent 58%), linear-gradient(145deg, rgba(10, 24, 45, 0.54), rgba(7, 12, 25, 0.18) 62%, rgba(17, 24, 39, 0.42)) !important; border-radius: 34px 22px 32px 24px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -30px 54px rgba(2, 6, 23, 0.18), var(--rail-widget-glow), 0 0 62px rgba(34, 211, 238, 0.18) !important; cursor: pointer !important; display: grid !important; gap: 0.74rem !important; grid-template-columns: 2.78rem minmax(0, 1fr) !important; justify-self: stretch !important; min-height: 5rem !important; order: 1 !important; padding: 0.8rem 0.9rem 0.82rem !important; text-align: left !important; transform: translateX(0.18rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -30px 54px rgba(2, 6, 23, 0.16), 0 26px 76px rgba(0, 0, 0, 0.24), 0 0 78px rgba(34, 211, 238, 0.25) !important; outline: none !important; transform: translateX(0.18rem) translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 17% 24%, rgba(224, 242, 254, 0.14), transparent 36%), radial-gradient(circle at 82% 74%, rgba(59, 130, 246, 0.10), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.010) 66%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { align-items: center !important; background: conic-gradient(from -90deg, rgba(103, 232, 249, 0.98) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.12) 0), radial-gradient(circle, rgba(6, 15, 31, 0.98) 57%, transparent 58%) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 32px rgba(34, 211, 238, 0.24) !important; display: inline-flex !important; height: 2.5rem !important; justify-content: center !important; width: 2.5rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(224, 242, 254, 0.98) !important; font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 1.14rem !important; width: 1.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { font-size: 0.54rem !important; font-weight: 760 !important; letter-spacing: 0.14em !important; opacity: 0.86 !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(186, 230, 253, 0.78) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(250, 253, 255, 0.98) !important; font-size: 1.03rem !important; font-weight: 720 !important; line-height: 1.02 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(219, 234, 254, 0.64) !important; font-size: 0.69rem !important; line-height: 1.22 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; background: radial-gradient(ellipse at 12% 4%, rgba(254, 240, 138, 0.36), transparent 40%), radial-gradient(ellipse at 98% 14%, rgba(244, 114, 182, 0.24), transparent 42%), radial-gradient(ellipse at 48% 116%, rgba(168, 85, 247, 0.20), transparent 58%), linear-gradient(150deg, rgba(42, 26, 49, 0.44), rgba(20, 12, 31, 0.18) 62%, rgba(69, 26, 3, 0.22)) !important; border: 0 !important; border-radius: 24px 34px 24px 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), inset 0 -28px 54px rgba(17, 12, 28, 0.18), var(--rail-widget-glow), 0 0 66px rgba(251, 191, 36, 0.16) !important; display: grid !important; gap: 0.76rem !important; grid-template-columns: 2.52rem minmax(0, 1fr) !important; justify-self: stretch !important; min-height: 5.25rem !important; order: 2 !important; padding: 0.84rem 0.92rem !important; transform: translateX(-0.12rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 22% 18%, rgba(254, 240, 138, 0.18), transparent 36%), radial-gradient(circle at 82% 80%, rgba(244, 114, 182, 0.10), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.010) 66%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { align-items: center !important; background: radial-gradient(circle, rgba(254, 240, 138, 0.35), transparent 62%), rgba(250, 204, 21, 0.10) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 34px rgba(250, 204, 21, 0.20) !important; color: rgba(254, 240, 138, 0.98) !important; display: inline-flex !important; font-size: 1.24rem !important; height: 2.42rem !important; justify-content: center !important; width: 2.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.70) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.13rem !important; font-weight: 760 !important; line-height: 1.02 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.76) !important; font-size: 0.74rem !important; line-height: 1.2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { align-items: center !important; align-self: center !important; background: rgba(255, 255, 255, 0.040) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 34px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 251, 235, 0.76) !important; display: inline-flex !important; font-size: 0.74rem !important; justify-content: center !important; min-height: 2rem !important; order: 3 !important; padding: 0 1rem !important; width: calc(100% - 1.4rem) !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { align-items: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.42rem !important; margin-top: 0.4rem !important; order: 3 !important; padding: 0 0.22rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar .dashboard-mode-buttons, body:has(.practice-dashboard:not([hidden])) .header-utility-bar .header-mode-buttons { display: none !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { align-items: center !important; background: radial-gradient(ellipse at 12% 0%, rgba(148, 163, 184, 0.12), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 32px rgba(0, 0, 0, 0.10) !important; color: rgba(226, 232, 240, 0.68) !important; display: grid !important; font-size: 0.66rem !important; gap: 0.24rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 2.1rem !important; padding: 0.36rem 0.62rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaVersionLabel { color: rgba(241, 245, 249, 0.76) !important; display: inline-flex !important; font-size: 0.66rem !important; font-weight: 720 !important; letter-spacing: 0.02em !important; min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateMessage { align-items: center !important; color: rgba(187, 247, 208, 0.66) !important; display: inline-flex !important; font-size: 0.64rem !important; gap: 0.28rem !important; justify-content: flex-end !important; opacity: 1 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateMessage::before { background: rgba(187, 247, 208, 0.82) !important; border-radius: 999px !important; box-shadow: 0 0 10px rgba(34, 197, 94, 0.26) !important; content: "" !important; display: inline-block !important; height: 0.38rem !important; width: 0.38rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaReloadButton { display: none !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar .pwa-update-status.update-available #pwaReloadButton, body:has(.practice-dashboard:not([hidden])) .header-utility-bar .pwa-update-status.update-error #pwaReloadButton { display: inline-flex !important; grid-column: 1 / -1 !important; justify-self: stretch !important; } /* P10HE terminal sidebar identity pass: dissolve card edges into ambient rail modules. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.92rem !important; margin: auto 0 0 !important; padding: 0 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 38% 62% 54% 46% / 42% 36% 64% 58% !important; filter: blur(0.2px) !important; inset: -0.62rem -0.72rem -0.7rem -0.62rem !important; opacity: 0.82 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { border-radius: 999px !important; height: 52% !important; inset: 12% 8% auto 16% !important; opacity: 0.22 !important; transform: rotate(-8deg) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; cursor: pointer !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.5rem minmax(0, 1fr) !important; min-height: 4.5rem !important; padding: 0.54rem 0.34rem 0.54rem 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 18% 26%, rgba(103, 232, 249, 0.30), transparent 42%), radial-gradient(ellipse at 76% 30%, rgba(168, 85, 247, 0.20), transparent 48%), radial-gradient(ellipse at 48% 92%, rgba(45, 212, 191, 0.12), transparent 52%) !important; box-shadow: 0 0 58px rgba(34, 211, 238, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(110deg, rgba(224, 242, 254, 0.18), rgba(224, 242, 254, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { opacity: 1 !important; box-shadow: 0 0 70px rgba(34, 211, 238, 0.18), 0 18px 58px rgba(0, 0, 0, 0.12) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: conic-gradient(from -90deg, rgba(103, 232, 249, 0.96) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(5, 12, 26, 0.92) 56%, transparent 58%) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 28px rgba(34, 211, 238, 0.22) !important; height: 2.34rem !important; width: 2.34rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy { gap: 0.18rem !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { font-size: 0.52rem !important; letter-spacing: 0.145em !important; opacity: 0.72 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 253, 255, 0.96) !important; font-size: 1.03rem !important; font-weight: 690 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(203, 236, 255, 0.58) !important; font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 4.72rem !important; padding: 0.58rem 0.22rem 0.58rem 0.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 18% 22%, rgba(254, 240, 138, 0.28), transparent 42%), radial-gradient(ellipse at 78% 24%, rgba(244, 114, 182, 0.18), transparent 44%), radial-gradient(ellipse at 48% 94%, rgba(168, 85, 247, 0.13), transparent 54%) !important; box-shadow: 0 0 62px rgba(251, 191, 36, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { background: linear-gradient(108deg, rgba(254, 240, 138, 0.18), rgba(244, 114, 182, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: radial-gradient(circle, rgba(254, 240, 138, 0.28), transparent 64%), rgba(250, 204, 21, 0.075) !important; border: 0 !important; box-shadow: 0 0 32px rgba(250, 204, 21, 0.17) !important; height: 2.26rem !important; width: 2.26rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.96) !important; font-size: 1.13rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.73rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(255, 251, 235, 0.56) !important; min-height: 1.74rem !important; padding: 0 0.35rem !important; text-align: left !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:focus-visible { color: rgba(255, 251, 235, 0.78) !important; outline: none !important; text-shadow: 0 0 18px rgba(250, 204, 21, 0.16) !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { margin-top: 0.18rem !important; opacity: 0.82 !important; padding: 0 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.54) !important; min-height: 1.72rem !important; padding: 0 0.24rem !important; } /* P10HF terminal final sidebar polish: calmer ambient modules, less oval glow emphasis. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.82rem !important; padding: 0 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { min-height: 4.34rem !important; padding-bottom: 0.48rem !important; padding-top: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 30px 24px 34px 26px !important; filter: blur(0.4px) !important; inset: -0.38rem -0.46rem -0.42rem -0.38rem !important; opacity: 0.68 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { height: 42% !important; inset: 15% 13% auto 18% !important; opacity: 0.16 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { gap: 0.7rem !important; grid-template-columns: 2.36rem minmax(0, 1fr) !important; padding-left: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 20% 26%, rgba(103, 232, 249, 0.24), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(168, 85, 247, 0.15), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 42px rgba(34, 211, 238, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { box-shadow: 0 0 52px rgba(34, 211, 238, 0.13), 0 14px 42px rgba(0, 0, 0, 0.09) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 2.18rem !important; width: 2.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 1.04rem !important; width: 1.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.98rem !important; font-weight: 700 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { gap: 0.7rem !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; padding-left: 0.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 20% 24%, rgba(254, 240, 138, 0.22), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(244, 114, 182, 0.13), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 46px rgba(251, 191, 36, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { height: 2.12rem !important; width: 2.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { font-size: 1.06rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { font-size: 0.71rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { color: rgba(255, 251, 235, 0.52) !important; min-height: 1.62rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { opacity: 0.76 !important; } /* P10JV sidebar widget refinement: operational queue launcher above motivational streak/progress. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.94rem !important; margin: clamp(0.7rem, 3vh, 1.75rem) 0 0 !important; padding: 0 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { border-radius: 22px !important; display: grid !important; isolation: isolate !important; overflow: visible !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; gap: 0.58rem !important; grid-template-columns: 2.25rem minmax(0, 1fr) !important; min-height: 4.05rem !important; padding: 0.48rem 0.48rem 0.48rem 0.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 18% 50%, rgba(34, 211, 238, 0.22), transparent 33%), radial-gradient(ellipse at 62% 6%, rgba(168, 85, 247, 0.15), transparent 48%), linear-gradient(100deg, rgba(9, 23, 42, 0.78), rgba(7, 16, 30, 0.24) 72%) !important; border: 0 !important; border-radius: 22px 18px 26px 18px !important; box-shadow: 0 0 36px rgba(34, 211, 238, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; inset: -0.24rem -0.36rem -0.22rem -0.16rem !important; opacity: 0.92 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(90deg, rgba(103, 232, 249, 0.16), transparent 72%) !important; height: 1px !important; inset: auto 12% 0.28rem 2.65rem !important; opacity: 0.58 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: radial-gradient(circle, rgba(7, 16, 30, 0.92) 52%, transparent 54%), conic-gradient(from -90deg, rgba(103, 232, 249, 0.96) calc(var(--practice-rail-percent, 8) * 1%), rgba(148, 163, 184, 0.14) 0) !important; height: 2.08rem !important; width: 2.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { stroke: rgba(224, 242, 254, 0.90) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(125, 211, 252, 0.82) !important; font-size: 0.52rem !important; letter-spacing: 0.16em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 250, 252, 0.98) !important; font-size: 0.96rem !important; line-height: 1.05 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(203, 213, 225, 0.70) !important; font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; gap: 0.58rem !important; grid-template-columns: 2.25rem minmax(0, 1fr) !important; min-height: 4.35rem !important; padding: 0.55rem 0.42rem 0.55rem 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 18% 50%, rgba(250, 204, 21, 0.24), transparent 32%), radial-gradient(ellipse at 72% 14%, rgba(244, 114, 182, 0.13), transparent 46%), linear-gradient(100deg, rgba(29, 22, 33, 0.74), rgba(9, 14, 26, 0.18) 74%) !important; border: 0 !important; border-radius: 22px 19px 26px 18px !important; box-shadow: 0 0 38px rgba(250, 204, 21, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.030) !important; inset: -0.22rem -0.34rem -0.20rem -0.14rem !important; opacity: 0.88 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { background: linear-gradient(90deg, rgba(250, 204, 21, 0.15), transparent 72%) !important; height: 1px !important; inset: auto 12% 0.28rem 2.65rem !important; opacity: 0.48 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(251, 191, 36, 0.98) !important; height: 2.08rem !important; width: 2.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon svg { display: block !important; fill: none !important; height: 1.58rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 2 !important; width: 1.58rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(250, 204, 21, 0.76) !important; font-size: 0.52rem !important; letter-spacing: 0.16em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 0.98rem !important; line-height: 1.04 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.80) !important; font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { color: rgba(196, 181, 253, 0.78) !important; font-size: 0.83rem !important; font-weight: 720 !important; margin-top: 0.12rem !important; min-height: 1.55rem !important; padding-left: 2.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link::after { content: "›"; margin-left: 0.35rem; } /* P10HG tool header icon accents: restrained identity color, no extra chrome. */ body:has(.practice-dashboard:not([hidden])) .p10hf-tool-icon { color: rgba(203, 213, 225, 0.72) !important; filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.06)) !important; opacity: 0.92 !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-tool-icon svg { stroke-width: 1.75 !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-metronome-icon { color: rgba(147, 197, 253, 0.82) !important; filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.18)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-countdown-icon { color: rgba(125, 211, 252, 0.80) !important; filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.14)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-recorder-icon { color: rgba(252, 165, 165, 0.82) !important; filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.15)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.13)) !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; } /* P10JV final Goals cascade position: keep the modern Goals workspace dark after older goal-card rules. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-goals-modern-workspace { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.08), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.98), rgba(5, 13, 25, 0.99)) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-context-card { border: 0 !important; box-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace { border-color: rgba(148, 94, 255, 0.22) !important; border-radius: 18px !important; grid-template-columns: minmax(10.8rem, 0.22fr) minmax(0, 1fr) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav { padding: 1.72rem 0.66rem 1rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { align-items: center !important; display: grid !important; gap: 0.68rem !important; grid-template-columns: 1.15rem minmax(0, 1fr) !important; justify-items: start !important; min-height: 2.55rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-icon, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-rail-new-goal svg, .organize-goals-modern-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-icon svg { display: block; height: 1.15rem; width: 1.15rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(47, 141, 255, 0.14)) !important; box-shadow: inset 3px 0 0 #a855f7, 0 16px 34px rgba(104, 64, 212, 0.2) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-rail-new-goal { align-items: center; appearance: none; background: rgba(139, 92, 246, 0.09); border: 1px solid rgba(168, 85, 247, 0.72); border-radius: 7px; color: #c084fc; cursor: pointer; display: inline-flex; font: inherit; font-weight: 640; gap: 0.55rem; margin: auto 0.15rem 0; min-height: 2.45rem; padding: 0.56rem 0.72rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-rail-new-goal svg { height: 1.05rem; width: 1.05rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero { background: linear-gradient(90deg, rgba(5, 14, 27, 0.98) 0%, rgba(5, 14, 27, 0.66) 32%, rgba(67, 25, 78, 0.20) 72%), linear-gradient(180deg, rgba(5, 14, 27, 0.05), rgba(5, 14, 27, 0.82)), url("assets/organize/goals-mountain-hero.png") center / cover no-repeat !important; min-height: clamp(12rem, 22vw, 16rem) !important; padding-bottom: 1.2rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero h2 { font-size: clamp(2.35rem, 4.2vw, 3.45rem) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-kicker::after { background: #c084fc !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action { background: linear-gradient(135deg, #a855f7, #6d5dfc) !important; border-color: rgba(216, 180, 254, 0.42) !important; box-shadow: 0 18px 42px rgba(124, 58, 237, 0.34) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action svg { height: 1.15rem; width: 1.15rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel { border-color: rgba(128, 161, 213, 0.22) !important; margin-top: -0.32rem !important; } .organize-goals-list-tools, .organize-goals-list-tools label, .organize-goals-view-mode { align-items: center; display: inline-flex; gap: 0.55rem; } .organize-goals-list-tools span { color: rgba(218, 228, 244, 0.76); font-size: 0.86rem; } .organize-goals-list-tools select { appearance: none; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(128, 161, 213, 0.18); border-radius: 7px; color: #f8fbff; font: inherit; min-height: 2.3rem; padding: 0.38rem 2rem 0.38rem 0.8rem; } .organize-goals-view-mode { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(128, 161, 213, 0.14); border-radius: 7px; padding: 0.18rem; } .organize-goals-view-mode button { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 6px; color: rgba(218, 228, 244, 0.72); display: inline-flex; height: 2rem; justify-content: center; width: 2.05rem; } .organize-goals-view-mode button.is-selected { background: rgba(139, 92, 246, 0.26); color: #c084fc; } .organize-goals-view-mode svg { height: 1.05rem; width: 1.05rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { min-height: 4.95rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main { grid-template-columns: 4rem minmax(13rem, 0.85fr) minmax(16rem, 1fr) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-identity svg { height: 1.8rem; width: 1.8rem; } .organize-goal-modern-links { display: grid; gap: 0.34rem; } .organize-goal-modern-links > small { color: rgba(218, 228, 244, 0.7); display: block; font-size: 0.8rem; } .organize-goal-modern-links > span { align-items: center; display: flex; flex-wrap: wrap; gap: 0.82rem; } .organize-goal-link-chip { align-items: center; color: rgba(233, 241, 255, 0.92); display: inline-flex; gap: 0.36rem; white-space: nowrap; } .organize-goal-link-chip svg { height: 1.05rem; width: 1.05rem; } .organize-goal-link-drill { color: #56f06e; } .organize-goal-link-song, .organize-goal-link-solo { color: #2398ff; } .organize-goal-link-activity { color: #fbbf24; } .organize-goal-link-chip em { color: rgba(237, 244, 255, 0.92); font-style: normal; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit { align-items: center; background: transparent !important; border: 0 !important; border-radius: 6px !important; color: rgba(199, 214, 236, 0.72) !important; display: inline-flex; justify-content: center; min-height: 2.45rem !important; padding: 0 !important; width: 2.45rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit svg { height: 1.5rem; width: 1.5rem; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote { min-height: 3.8rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote em { color: rgba(183, 198, 220, 0.74); font-style: normal; margin-left: 0.55rem; } /* P10JW target-match pass: make Goals read like the preferred compact mockup, not the first cut. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace { grid-template-columns: minmax(9.6rem, 0.18fr) minmax(0, 1fr) !important; max-height: calc(100vh - 6.3rem); } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav { padding: 1.18rem 0.58rem 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-label { margin-bottom: 0.64rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { font-size: 0.9rem !important; gap: 0.56rem !important; min-height: 2.25rem !important; padding: 0.5rem 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-rail-new-goal { margin-top: auto !important; min-height: 2.22rem !important; padding: 0.44rem 0.62rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-main { min-height: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-workspace { grid-template-rows: auto minmax(0, 1fr); min-height: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero { min-height: clamp(9.2rem, 15vw, 11.3rem) !important; padding: clamp(1.35rem, 2.7vw, 2rem) clamp(1.2rem, 3vw, 2.4rem) 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero h2 { font-size: clamp(2.05rem, 3.35vw, 2.9rem) !important; margin-bottom: 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-kicker, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-support { font-size: clamp(0.84rem, 1.15vw, 1rem) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-kicker::after { margin: 0.42rem 0 !important; width: 2.3rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action { font-size: 0.9rem !important; min-height: 2.38rem !important; padding: 0.56rem 0.88rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel { align-self: start; gap: 0.44rem !important; margin: -0.48rem clamp(0.75rem, 1.6vw, 1.1rem) 0.72rem !important; max-height: calc(100vh - 19.5rem); overflow: auto; padding: 0.76rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header { padding-bottom: 0.56rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header strong { font-size: 0.9rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools select { font-size: 0.84rem !important; min-height: 2rem !important; padding-bottom: 0.28rem !important; padding-top: 0.28rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-view-mode button { height: 1.72rem !important; width: 1.78rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-list { gap: 0.4rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { border-radius: 7px !important; min-height: 4.28rem !important; padding: 0.48rem 0.58rem 0.48rem 0.72rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main { gap: 0.78rem !important; grid-template-columns: 3.45rem minmax(12rem, 0.82fr) minmax(14rem, 1fr) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-identity { height: 2.88rem !important; width: 2.88rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-identity svg { height: 1.5rem !important; width: 1.5rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy strong { font-size: 0.96rem !important; margin-bottom: 0.18rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy small, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { font-size: 0.82rem !important; line-height: 1.32 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { gap: 0.22rem !important; padding-left: 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > small { font-size: 0.72rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > span { gap: 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip { gap: 0.28rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip svg { height: 0.9rem !important; width: 0.9rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit { min-height: 2rem !important; width: 2rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit svg { height: 1.25rem !important; width: 1.25rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote { margin-top: 0.22rem !important; min-height: 3.1rem !important; padding: 0.62rem 0.9rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote span { font-size: 3rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote p { font-size: 0.92rem !important; } /* P10JX Goals target-frame pass: make the visible Goals chrome match the preferred compact workspace. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) { background: radial-gradient(circle at 9% 2%, rgba(88, 80, 189, 0.18), transparent 23rem), radial-gradient(circle at 92% 3%, rgba(37, 99, 235, 0.18), transparent 26rem), linear-gradient(180deg, #05111f 0%, #071525 48%, #071221 100%) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell { max-width: none !important; padding: clamp(0.5rem, 1.1vw, 0.86rem) clamp(0.55rem, 1.35vw, 1.25rem) 1rem !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav { align-items: center !important; background: linear-gradient(180deg, rgba(6, 16, 31, 0.95), rgba(5, 13, 25, 0.9)) !important; border: 1px solid rgba(137, 161, 204, 0.20) !important; border-radius: 15px 15px 0 0 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12.5rem, 0.82fr) minmax(30rem, max-content) minmax(7rem, 0.82fr) !important; margin: 0 !important; min-height: 4.05rem !important; padding: 0.48rem 1.12rem !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.68), transparent); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; right: 0; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.06rem 0.62rem !important; grid-template-columns: 2.6rem minmax(0, 1fr) !important; justify-self: start !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 53%, transparent 54%), conic-gradient(from 30deg, #d9f99d, #7dd3fc, #a855f7, #fef08a, #d9f99d); border-radius: 999px; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 26px rgba(168, 85, 247, 0.18); color: #f8fbff; content: "Z"; display: inline-flex; font-size: 1.28rem; font-weight: 900; grid-row: span 3; justify-content: center; letter-spacing: 0; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: #f8fbff !important; font-size: 0.96rem !important; line-height: 1 !important; margin: 0 !important; text-shadow: 0 0 18px rgba(168, 85, 247, 0.20) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-size: 0.62rem !important; font-weight: 700 !important; line-height: 1.1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block .app-build-line { display: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"], body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav { align-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; gap: clamp(0.8rem, 2vw, 1.9rem) !important; grid-column: 2 !important; justify-content: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.74) !important; font-size: clamp(0.78rem, 1vw, 0.92rem) !important; font-weight: 620 !important; min-height: 2.25rem !important; padding: 0.38rem 0 !important; position: relative !important; white-space: nowrap !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button:hover { color: #f8fbff !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: #f8fbff !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { background: linear-gradient(90deg, #a855f7, #6d5dfc) !important; border-radius: 999px !important; bottom: -0.42rem !important; content: "" !important; height: 2px !important; left: 0 !important; position: absolute !important; right: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { align-items: center !important; display: flex !important; gap: 0.62rem !important; justify-content: flex-end !important; justify-self: end !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .header-mode-buttons, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav #pwaVersionLabel, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .pwa-reload-button { display: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(226, 232, 240, 0.13) !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.62rem !important; padding: 0.32rem 0.5rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace { border-radius: 0 0 15px 15px !important; border-top: 0 !important; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28) !important; grid-template-columns: minmax(8.5rem, 0.145fr) minmax(0, 1fr) !important; margin-top: 0 !important; max-height: calc(100vh - 5.35rem) !important; min-height: calc(100vh - 5.35rem) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-nav { border-right-color: rgba(137, 161, 204, 0.15) !important; padding-left: 0.68rem !important; padding-right: 0.68rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { border-radius: 6px !important; min-height: 2.14rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero { border-top-left-radius: 0 !important; min-height: clamp(8.85rem, 14vw, 10.9rem) !important; padding-left: clamp(1.85rem, 3vw, 2.6rem) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel { margin-left: clamp(0.62rem, 1.1vw, 0.9rem) !important; margin-right: clamp(0.62rem, 1.1vw, 0.9rem) !important; } /* P10JY Goals target typography: the preferred mockup uses a distinct serif hero and crisp compact UI type. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) { --goals-ui-font: Inter, "SF Pro Text", "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --goals-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-workspace { font-family: var(--goals-ui-font) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { font-family: var(--goals-ui-font) !important; font-size: 0.82rem !important; font-weight: 790 !important; letter-spacing: -0.01em !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { font-family: var(--goals-ui-font) !important; font-size: 0.56rem !important; font-weight: 720 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { font-family: Georgia, "Times New Roman", serif !important; font-size: 1.36rem !important; font-weight: 850 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] { gap: clamp(1.05rem, 2vw, 2rem) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.setup-nav-button), body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:not(.setup-nav-button) { font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: 520 !important; letter-spacing: 0 !important; line-height: 1.1 !important; min-height: 2rem !important; padding: 0.28rem 0 0.48rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected { font-weight: 690 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-workspace-label { font-family: var(--goals-ui-font) !important; font-size: 0.66rem !important; font-weight: 720 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { font-family: var(--goals-ui-font) !important; font-size: 0.86rem !important; font-weight: 610 !important; letter-spacing: 0 !important; line-height: 1.05 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero h2 { font-family: var(--goals-display-font) !important; font-size: clamp(2.35rem, 3.25vw, 3.15rem) !important; font-weight: 700 !important; letter-spacing: -0.01em !important; line-height: 0.92 !important; margin-bottom: 0.66rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-kicker { font-family: var(--goals-ui-font) !important; font-size: clamp(0.9rem, 1.08vw, 1.04rem) !important; font-weight: 610 !important; letter-spacing: 0 !important; line-height: 1.22 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-support { font-family: var(--goals-ui-font) !important; font-size: clamp(0.82rem, 1vw, 0.96rem) !important; font-weight: 430 !important; letter-spacing: 0 !important; line-height: 1.35 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-rail-new-goal { font-family: var(--goals-ui-font) !important; font-size: 0.88rem !important; font-weight: 690 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header strong { font-family: var(--goals-ui-font) !important; font-size: 0.84rem !important; font-weight: 720 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools select, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-view-mode { font-family: var(--goals-ui-font) !important; font-size: 0.78rem !important; font-weight: 520 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy strong { font-family: var(--goals-ui-font) !important; font-size: 0.92rem !important; font-weight: 770 !important; letter-spacing: -0.005em !important; line-height: 1.08 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy small { color: rgba(225, 235, 249, 0.82) !important; font-family: var(--goals-ui-font) !important; font-size: 0.76rem !important; font-weight: 430 !important; letter-spacing: 0 !important; line-height: 1.32 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { font-family: var(--goals-ui-font) !important; font-size: 0.78rem !important; font-weight: 540 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > small { color: rgba(206, 219, 239, 0.76) !important; font-size: 0.72rem !important; font-weight: 500 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip em { font-size: 0.78rem !important; font-weight: 580 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote p { font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: 560 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote em { font-size: 0.82rem !important; font-weight: 430 !important; } /* P10JZ Goals surface flattening: remove obvious nested cards while preserving readable rows. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel { background: linear-gradient(180deg, rgba(4, 15, 29, 0.72), rgba(4, 13, 25, 0.50)) !important; border-color: rgba(137, 161, 204, 0.10) !important; border-radius: 9px !important; box-shadow: none !important; padding: 0.64rem 0.68rem 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header { border-bottom-color: rgba(137, 161, 204, 0.14) !important; padding: 0.08rem 0.2rem 0.54rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-list { gap: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(137, 161, 204, 0.12) !important; border-radius: 0 !important; box-shadow: inset 2px 0 0 var(--goal-accent) !important; min-height: 4.36rem !important; padding: 0.56rem 0.54rem 0.56rem 0.78rem !important; transition: background 160ms ease, box-shadow 160ms ease; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row:first-child { border-top: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row:last-child { border-bottom: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row:hover { background: rgba(255, 255, 255, 0.025) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row.is-selected { background: linear-gradient(90deg, color-mix(in srgb, var(--goal-accent) 12%, transparent), transparent 48%) !important; border-color: rgba(137, 161, 204, 0.14) !important; box-shadow: inset 2px 0 0 var(--goal-accent) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-identity { background: color-mix(in srgb, var(--goal-accent) 10%, transparent) !important; border-width: 1.5px !important; box-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { border-left-color: rgba(137, 161, 204, 0.10) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit { opacity: 0.78 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote { background: transparent !important; border-color: rgba(137, 161, 204, 0.10) !important; border-radius: 8px !important; box-shadow: none !important; } /* P10KA Goals add controls: keep New Goal available without making it read as another boxed card. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action { background: linear-gradient(135deg, #a855f7, #6d5dfc) !important; border: 0 !important; border-radius: 7px !important; box-shadow: 0 12px 26px rgba(124, 58, 237, 0.28) !important; min-height: 2.18rem !important; padding: 0.5rem 0.82rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-rail-new-goal { background: transparent !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: #c084fc !important; justify-content: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-rail-new-goal:hover { background: rgba(168, 85, 247, 0.10) !important; } /* P10KB Goals polish: single add action, lighter type, and a centered desktop canvas. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 1380px) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace { width: 100% !important; } @media (min-width: 761px) { body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-rail-new-goal { display: none !important; } } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action { border-radius: 6px !important; box-shadow: 0 10px 22px rgba(124, 58, 237, 0.22) !important; font-size: 0.84rem !important; font-weight: 620 !important; min-height: 2.08rem !important; padding: 0.46rem 0.76rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action svg { height: 1rem !important; width: 1rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { font-weight: 460 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { font-weight: 600 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { font-size: 0.84rem !important; font-weight: 520 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item.is-selected { font-weight: 620 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header strong { font-weight: 640 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy strong { font-size: 0.9rem !important; font-weight: 650 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy small { color: rgba(225, 235, 249, 0.76) !important; font-weight: 380 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { color: rgba(219, 230, 246, 0.80) !important; font-weight: 430 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > small { color: rgba(198, 212, 234, 0.68) !important; font-weight: 420 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip em { font-weight: 470 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote p { font-weight: 470 !important; } /* P10KC Goals final polish: lighter type, quieter rows, and no placeholder view controls. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-shell { max-width: min(100%, 1360px) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { color: rgba(226, 232, 240, 0.70) !important; font-weight: 430 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(248, 251, 255, 0.96) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item { color: rgba(226, 234, 247, 0.78) !important; font-weight: 450 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace .organize-nav-item.is-selected { color: rgba(248, 251, 255, 0.94) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action { background: rgba(168, 85, 247, 0.10) !important; border: 0 !important; box-shadow: none !important; color: #eadbff !important; font-size: 0.82rem !important; font-weight: 540 !important; min-height: 2rem !important; padding: 0.42rem 0.68rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action:hover { background: rgba(168, 85, 247, 0.16) !important; filter: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel { background: radial-gradient(circle at 86% 6%, rgba(168, 85, 247, 0.055), transparent 20rem), linear-gradient(180deg, rgba(5, 16, 30, 0.62), rgba(5, 13, 25, 0.38)) !important; border-color: rgba(137, 161, 204, 0.075) !important; padding: 0.62rem 0.66rem 0.62rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header { border-bottom-color: rgba(137, 161, 204, 0.075) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header strong { font-weight: 580 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools { gap: 0.42rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools span { color: rgba(206, 219, 239, 0.66) !important; font-weight: 390 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools select { background: rgba(255, 255, 255, 0.035) !important; border-color: rgba(137, 161, 204, 0.11) !important; color: rgba(244, 248, 255, 0.90) !important; font-weight: 430 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-view-mode { display: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-list { gap: 0.12rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { background: linear-gradient(90deg, color-mix(in srgb, var(--goal-accent) 4%, transparent), rgba(255, 255, 255, 0.014) 42%, transparent) !important; border: 0 !important; border-bottom: 0 !important; border-radius: 7px !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--goal-accent) 70%, transparent) !important; min-height: 4.24rem !important; padding: 0.52rem 0.54rem 0.52rem 0.7rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--goal-accent) 7%, transparent), rgba(255, 255, 255, 0.025) 44%, transparent) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row.is-selected { background: linear-gradient(90deg, color-mix(in srgb, var(--goal-accent) 8%, transparent), rgba(255, 255, 255, 0.026) 42%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--goal-accent) 78%, transparent) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-identity { background: color-mix(in srgb, var(--goal-accent) 7%, transparent) !important; border-color: color-mix(in srgb, var(--goal-accent) 82%, transparent) !important; border-width: 1px !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy strong { color: rgba(248, 251, 255, 0.93) !important; font-weight: 580 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy small { color: rgba(218, 229, 246, 0.70) !important; font-weight: 340 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links { border-left-color: rgba(137, 161, 204, 0.06) !important; color: rgba(219, 230, 246, 0.72) !important; font-weight: 390 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > small { color: rgba(198, 212, 234, 0.58) !important; font-weight: 350 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip em { color: rgba(237, 244, 255, 0.84) !important; font-weight: 410 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote { border-color: rgba(137, 161, 204, 0.07) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote p { color: rgba(248, 251, 255, 0.86) !important; font-weight: 410 !important; } /* P10KD modern Drills workspace: migrate Drills to the approved Goals workspace language. */ body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) { background: radial-gradient(circle at 9% 2%, rgba(88, 80, 189, 0.18), transparent 23rem), radial-gradient(circle at 92% 3%, rgba(37, 99, 235, 0.18), transparent 26rem), linear-gradient(180deg, #05111f 0%, #071525 48%, #071221 100%) !important; --goals-ui-font: Inter, "SF Pro Text", "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --goals-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-shell { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 1360px) !important; padding: clamp(0.5rem, 1.1vw, 0.86rem) clamp(0.55rem, 1.35vw, 1.25rem) 1rem !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav { align-items: center !important; background: linear-gradient(180deg, rgba(6, 16, 31, 0.95), rgba(5, 13, 25, 0.9)) !important; border: 1px solid rgba(137, 161, 204, 0.20) !important; border-radius: 15px 15px 0 0 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12.5rem, 0.82fr) minmax(30rem, max-content) minmax(7rem, 0.82fr) !important; margin: 0 !important; min-height: 4.05rem !important; padding: 0.48rem 1.12rem !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.68), transparent); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; right: 0; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.06rem 0.62rem !important; grid-template-columns: 2.6rem minmax(0, 1fr) !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 53%, transparent 54%), conic-gradient(from 30deg, #d9f99d, #7dd3fc, #a855f7, #fef08a, #d9f99d); border-radius: 999px; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 26px rgba(168, 85, 247, 0.18); color: #f8fbff; content: "Z"; display: inline-flex; font-family: Georgia, "Times New Roman", serif; font-size: 1.36rem; font-weight: 850; grid-row: span 3; justify-content: center; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: #f8fbff !important; font-family: var(--goals-ui-font) !important; font-size: 0.82rem !important; font-weight: 790 !important; line-height: 1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: var(--goals-ui-font) !important; font-size: 0.56rem !important; font-weight: 720 !important; line-height: 1.1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block .app-build-line, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .header-mode-buttons, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav #pwaVersionLabel, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .pwa-reload-button { display: none !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .app-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; gap: clamp(1.05rem, 2vw, 2rem) !important; grid-column: 2 !important; justify-content: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.70) !important; font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: 430 !important; min-height: 2rem !important; padding: 0.28rem 0 0.48rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(248, 251, 255, 0.96) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { background: linear-gradient(90deg, #a855f7, #6d5dfc) !important; bottom: -0.42rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { align-items: center !important; display: flex !important; justify-content: flex-end !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(226, 232, 240, 0.13) !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.62rem !important; padding: 0.32rem 0.5rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.08), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.98), rgba(5, 13, 25, 0.99)) !important; border-color: rgba(148, 94, 255, 0.22) !important; border-radius: 0 0 15px 15px !important; border-top: 0 !important; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28) !important; display: grid !important; gap: 0 !important; grid-template-columns: minmax(8.5rem, 0.145fr) minmax(0, 1fr) !important; margin-top: 0 !important; max-height: calc(100vh - 5.35rem) !important; min-height: calc(100vh - 5.35rem) !important; overflow: hidden !important; padding: 0 !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-nav { background: linear-gradient(180deg, rgba(8, 24, 42, 0.94), rgba(4, 13, 25, 0.96)) !important; border: 0 !important; border-right: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.18rem 0.68rem 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-label { color: rgba(213, 225, 242, 0.74) !important; font-family: var(--goals-ui-font) !important; font-size: 0.66rem !important; font-weight: 720 !important; letter-spacing: 0.055em !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-nav-item { align-items: center !important; border-radius: 6px !important; color: rgba(226, 234, 247, 0.78) !important; display: grid !important; font-family: var(--goals-ui-font) !important; font-size: 0.84rem !important; font-weight: 450 !important; gap: 0.56rem !important; grid-template-columns: 1.15rem minmax(0, 1fr) !important; min-height: 2.14rem !important; padding: 0.5rem 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(47, 141, 255, 0.14)) !important; box-shadow: inset 3px 0 0 #a855f7, 0 16px 34px rgba(104, 64, 212, 0.2) !important; color: rgba(248, 251, 255, 0.94) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-nav-icon svg, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-modern-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-context-card, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-modern-workspace { background: transparent !important; border: 0 !important; box-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-context-header, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-goal-browser-panel { display: none !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-context-card, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-relationship-preview { min-height: 100%; } .organize-drills-modern-workspace { color: #eef5ff; display: grid; font-family: var(--goals-ui-font); grid-template-rows: auto minmax(0, 1fr); min-height: 100%; } .organize-drills-hero { align-items: start; background: linear-gradient(90deg, rgba(5, 14, 27, 0.97) 0%, rgba(5, 14, 27, 0.66) 32%, rgba(67, 25, 78, 0.16) 72%), linear-gradient(180deg, rgba(5, 14, 27, 0.04), rgba(5, 14, 27, 0.80)), url("assets/organize/goals-mountain-hero.png") center / cover no-repeat; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-height: clamp(9rem, 15vw, 11.5rem); padding: clamp(1.35rem, 2.7vw, 2rem) clamp(1.2rem, 3vw, 2.4rem) 0.78rem; } .organize-drills-hero-copy { max-width: 42rem; } .organize-drills-hero h2 { color: #ffffff; font-family: var(--goals-display-font); font-size: clamp(2.3rem, 3.3vw, 3.25rem); font-weight: 700; letter-spacing: -0.01em; line-height: 0.94; margin: 0 0 0.62rem; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.38); } .organize-drills-hero-kicker, .organize-drills-hero-support { color: rgba(232, 240, 252, 0.86) !important; font-size: clamp(0.86rem, 1.05vw, 1rem); font-weight: 390; line-height: 1.35; margin: 0 !important; } .organize-drills-hero-kicker::after { background: #c084fc; content: ""; display: block; height: 2px; margin: 0.52rem 0; width: 2.3rem; } .organize-drills-new-action { align-items: center; appearance: none; background: rgba(168, 85, 247, 0.10); border: 0; border-radius: 6px; color: #eadbff; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.84rem; font-weight: 540; gap: 0.48rem; justify-self: end; min-height: 2rem; padding: 0.42rem 0.68rem; white-space: nowrap; } .organize-drills-new-action:hover { background: rgba(168, 85, 247, 0.16); } .organize-drills-new-action svg { height: 1rem; width: 1rem; } .organize-drills-list-panel { align-self: start; background: radial-gradient(circle at 84% 6%, rgba(168, 85, 247, 0.055), transparent 20rem), linear-gradient(180deg, rgba(5, 16, 30, 0.66), rgba(5, 13, 25, 0.44)); border: 1px solid rgba(137, 161, 204, 0.075); border-radius: 9px; display: grid; gap: 0.78rem; margin: -0.3rem clamp(0.75rem, 1.6vw, 1.1rem) 0.72rem; max-height: calc(100vh - 18.2rem); overflow: auto; padding: 0.72rem 0.78rem 0.9rem; } .organize-drills-filter-bar { align-items: center; display: grid; gap: 0.48rem; grid-template-columns: minmax(11rem, 1.4fr) repeat(4, minmax(8rem, 0.82fr)) minmax(9rem, 0.88fr); } .organize-drills-filter-bar label { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.11); border-radius: 7px; color: rgba(206, 219, 239, 0.70); display: inline-flex; gap: 0.35rem; min-height: 2.1rem; min-width: 0; padding: 0 0.58rem; } .organize-drills-filter-bar label span { font-size: 0.74rem; font-weight: 390; white-space: nowrap; } .organize-drills-filter-bar input, .organize-drills-filter-bar select { appearance: none; background: transparent; border: 0; color: rgba(244, 248, 255, 0.92); font: inherit; font-size: 0.78rem; font-weight: 430; min-height: 1.9rem; min-width: 0; outline: 0; padding: 0; width: 100%; } .organize-drills-search svg { color: rgba(206, 219, 239, 0.72); height: 1rem; width: 1rem; } .organize-drills-count { color: rgba(230, 238, 250, 0.86); font-size: 0.84rem; font-weight: 530; } .organize-drills-table { display: grid; gap: 0.18rem; } .organize-drills-table-head, .organize-drill-modern-row { display: grid; gap: clamp(0.7rem, 1.4vw, 1.2rem); grid-template-columns: minmax(20rem, 1.95fr) minmax(8rem, 0.7fr) minmax(7rem, 0.62fr) minmax(9rem, 0.84fr) minmax(7rem, 0.68fr); } .organize-drills-table-head { color: rgba(198, 212, 234, 0.64); font-size: 0.68rem; font-weight: 690; letter-spacing: 0.07em; padding: 0 1rem 0.36rem; text-transform: uppercase; } .organize-drills-list { background: linear-gradient(180deg, rgba(5, 16, 30, 0.34), rgba(5, 13, 25, 0.18)); border: 1px solid rgba(137, 161, 204, 0.075); border-radius: 9px; display: grid; overflow: hidden; } .organize-drill-modern-row { align-items: center; appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(137, 161, 204, 0.065); color: inherit; cursor: pointer; font: inherit; min-height: 4.05rem; padding: 0.62rem 1rem; text-align: left; } .organize-drill-modern-row:last-child { border-bottom: 0; } .organize-drill-modern-row:hover, .organize-drill-modern-row.is-selected { background: linear-gradient(90deg, color-mix(in srgb, var(--drill-accent) 7%, transparent), rgba(255, 255, 255, 0.018) 42%, transparent); } .organize-drill-modern-title { align-items: center; display: grid; gap: 0.86rem; grid-template-columns: 2.72rem minmax(0, 1fr); min-width: 0; } .organize-drill-modern-icon { align-items: center; background: color-mix(in srgb, var(--drill-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--drill-accent) 82%, transparent); border-radius: 999px; color: var(--drill-accent); display: inline-flex; height: 2.55rem; justify-content: center; width: 2.55rem; } .organize-drill-modern-icon svg { height: 1.28rem; width: 1.28rem; } .organize-drill-modern-title strong { color: rgba(248, 251, 255, 0.93); display: block; font-size: 0.9rem; font-weight: 600; line-height: 1.12; margin-bottom: 0.2rem; } .organize-drill-modern-title small { color: rgba(218, 229, 246, 0.70); display: block; font-size: 0.78rem; font-weight: 340; line-height: 1.32; } .organize-drill-modern-category, .organize-drill-modern-priority, .organize-drill-modern-frequency, .organize-drill-modern-linked { align-items: center; color: rgba(234, 241, 252, 0.84); display: inline-flex; font-size: 0.82rem; font-weight: 410; gap: 0.38rem; } .organize-drill-modern-priority.is-high { color: #ff4d7f; } .organize-drill-modern-priority.is-medium { color: #ffad33; } .organize-drill-modern-priority.is-low { color: #c4d82f; } .organize-drill-modern-frequency svg { color: #67d18a; height: 1rem; width: 1rem; } .organize-drill-modern-linked svg { color: #c084fc; height: 1rem; width: 1rem; } .organize-drill-modern-frequency em, .organize-drill-modern-linked em { font-style: normal; } .organize-drills-empty { color: rgba(218, 229, 246, 0.78); display: grid; gap: 0.2rem; padding: 1.1rem; } .organize-drills-empty strong { color: rgba(248, 251, 255, 0.92); } /* P10KE Drills typography alignment: match the approved Goals mockup font feel. */ body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) { --goals-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --goals-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-modern-workspace { font-family: var(--goals-ui-font) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero h2 { font-family: var(--goals-display-font) !important; font-size: clamp(2.38rem, 3.45vw, 3.38rem) !important; font-weight: 690 !important; letter-spacing: -0.012em !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero-kicker, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero-support { font-family: var(--goals-ui-font) !important; font-size: clamp(0.88rem, 1.08vw, 1.02rem) !important; font-weight: 360 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar label span, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar input, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar select, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-count, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-category, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-priority, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-frequency, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-linked { font-family: var(--goals-ui-font) !important; font-weight: 400 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-table-head { font-family: var(--goals-ui-font) !important; font-weight: 620 !important; letter-spacing: 0.075em !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title strong { font-family: var(--goals-ui-font) !important; font-size: 0.94rem !important; font-weight: 610 !important; letter-spacing: -0.004em !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title small { font-family: var(--goals-ui-font) !important; font-size: 0.8rem !important; font-weight: 350 !important; letter-spacing: 0 !important; } /* P10KF Drills type rhythm: normalize weights and vertical spacing across the screen. */ body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) { --drill-weight-label: 420; --drill-weight-selected: 560; --drill-weight-heading: 680; --drill-weight-title: 560; --drill-weight-body: 340; --drill-weight-meta: 390; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-label { font-weight: var(--drill-weight-label) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-nav-item { font-weight: var(--drill-weight-label) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-nav-item.is-selected { font-weight: var(--drill-weight-selected) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero { padding-top: clamp(1.28rem, 2.5vw, 1.9rem) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero h2 { font-weight: var(--drill-weight-heading) !important; margin-bottom: 0.46rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero-kicker { font-weight: var(--drill-weight-body) !important; line-height: 1.32 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero-kicker::after { margin: 0.48rem 0 0.66rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero-support { font-weight: var(--drill-weight-body) !important; line-height: 1.34 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar label span, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar input, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-filter-bar select { font-weight: var(--drill-weight-meta) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-count { font-weight: 460 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-table-head { font-weight: 540 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title strong { font-size: 0.92rem !important; font-weight: var(--drill-weight-title) !important; line-height: 1.14 !important; margin-bottom: 0.18rem !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title small { font-size: 0.79rem !important; font-weight: var(--drill-weight-body) !important; line-height: 1.34 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-category, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-priority, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-frequency, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-linked, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-frequency em, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-linked em { font-size: 0.8rem !important; font-weight: var(--drill-weight-meta) !important; } /* P10KG Drills surface correction: remove inherited light Organize wash and align type with Goals. */ body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-relationship-preview { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.055), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.99), rgba(5, 13, 25, 0.995)) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-relationship-preview { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-workspace-shell.is-modern-drills-workspace .organize-drills-modern-workspace { background: transparent !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-list-panel { background: radial-gradient(circle at 84% 6%, rgba(168, 85, 247, 0.04), transparent 20rem), linear-gradient(180deg, rgba(5, 16, 30, 0.72), rgba(5, 13, 25, 0.62)) !important; border-color: rgba(137, 161, 204, 0.08) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-list { background: linear-gradient(180deg, rgba(5, 16, 30, 0.48), rgba(5, 13, 25, 0.32)) !important; border-color: rgba(137, 161, 204, 0.065) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) { --drill-weight-label: 390; --drill-weight-selected: 520; --drill-weight-heading: 660; --drill-weight-title: 520; --drill-weight-body: 320; --drill-weight-meta: 360; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drills-hero h2 { font-weight: var(--drill-weight-heading) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title strong { font-size: 0.9rem !important; font-weight: var(--drill-weight-title) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-title small { color: rgba(218, 229, 246, 0.66) !important; font-weight: var(--drill-weight-body) !important; } body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-category, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-priority, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-frequency, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-linked, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-frequency em, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .organize-drill-modern-linked em { color: rgba(234, 241, 252, 0.78); font-weight: var(--drill-weight-meta) !important; } /* P10LJ modern Songs workspace: align Songs with the approved Goals/Drills surface. */ body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) { background: radial-gradient(circle at 9% 2%, rgba(88, 80, 189, 0.18), transparent 23rem), radial-gradient(circle at 92% 3%, rgba(37, 99, 235, 0.18), transparent 26rem), linear-gradient(180deg, #05111f 0%, #071525 48%, #071221 100%) !important; --goals-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --goals-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --song-weight-label: 390; --song-weight-selected: 520; --song-weight-heading: 660; --song-weight-title: 520; --song-weight-body: 320; --song-weight-meta: 360; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-shell { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 1360px) !important; padding: clamp(0.5rem, 1.1vw, 0.86rem) clamp(0.55rem, 1.35vw, 1.25rem) 1rem !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav { align-items: center !important; background: linear-gradient(180deg, rgba(6, 16, 31, 0.95), rgba(5, 13, 25, 0.9)) !important; border: 1px solid rgba(137, 161, 204, 0.20) !important; border-radius: 15px 15px 0 0 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12.5rem, 0.82fr) minmax(30rem, max-content) minmax(7rem, 0.82fr) !important; margin: 0 !important; min-height: 4.05rem !important; padding: 0.48rem 1.12rem !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.68), transparent); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; right: 0; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.06rem 0.62rem !important; grid-template-columns: 2.6rem minmax(0, 1fr) !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 53%, transparent 54%), conic-gradient(from 30deg, #d9f99d, #7dd3fc, #a855f7, #fef08a, #d9f99d); border-radius: 999px; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 26px rgba(168, 85, 247, 0.18); color: #f8fbff; content: "Z"; display: inline-flex; font-family: Georgia, "Times New Roman", serif; font-size: 1.36rem; font-weight: 850; grid-row: span 3; justify-content: center; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: #f8fbff !important; font-family: var(--goals-ui-font) !important; font-size: 0.82rem !important; font-weight: 790 !important; line-height: 1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: var(--goals-ui-font) !important; font-size: 0.56rem !important; font-weight: 720 !important; line-height: 1.1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block .app-build-line, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .header-mode-buttons, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav #pwaVersionLabel, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .pwa-reload-button { display: none !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .app-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; gap: clamp(1.05rem, 2vw, 2rem) !important; grid-column: 2 !important; justify-content: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.70) !important; font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: 430 !important; min-height: 2rem !important; padding: 0.28rem 0 0.48rem !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(248, 251, 255, 0.96) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { background: linear-gradient(90deg, #a855f7, #6d5dfc) !important; bottom: -0.42rem !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { align-items: center !important; display: flex !important; justify-content: flex-end !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(226, 232, 240, 0.13) !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.62rem !important; padding: 0.32rem 0.5rem !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.055), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.99), rgba(5, 13, 25, 0.995)) !important; border-color: rgba(148, 94, 255, 0.22) !important; border-radius: 0 0 15px 15px !important; border-top: 0 !important; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28) !important; display: grid !important; gap: 0 !important; grid-template-columns: minmax(8.5rem, 0.145fr) minmax(0, 1fr) !important; margin-top: 0 !important; max-height: calc(100vh - 5.35rem) !important; min-height: calc(100vh - 5.35rem) !important; overflow: hidden !important; padding: 0 !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-nav { background: linear-gradient(180deg, rgba(8, 24, 42, 0.94), rgba(4, 13, 25, 0.96)) !important; border: 0 !important; border-right: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.18rem 0.68rem 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-label { color: rgba(213, 225, 242, 0.74) !important; font-family: var(--goals-ui-font) !important; font-size: 0.66rem !important; font-weight: var(--song-weight-label) !important; letter-spacing: 0.055em !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-nav-item { align-items: center !important; border-radius: 6px !important; color: rgba(226, 234, 247, 0.78) !important; display: grid !important; font-family: var(--goals-ui-font) !important; font-size: 0.84rem !important; font-weight: var(--song-weight-label) !important; gap: 0.56rem !important; grid-template-columns: 1.15rem minmax(0, 1fr) !important; min-height: 2.14rem !important; padding: 0.5rem 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(47, 141, 255, 0.14)) !important; box-shadow: inset 3px 0 0 #a855f7, 0 16px 34px rgba(104, 64, 212, 0.2) !important; color: rgba(248, 251, 255, 0.94) !important; font-weight: var(--song-weight-selected) !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-nav-icon svg, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-songs-modern-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-context-card, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-relationship-preview, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-songs-modern-workspace { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } /* P10LJ Songs surface correction: remove inherited light Organize wash. */ body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-relationship-preview { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.055), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.99), rgba(5, 13, 25, 0.995)) !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-relationship-preview { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-shell.is-modern-songs-workspace .organize-songs-modern-workspace { background: transparent !important; } /* P10LJ modern Solos workspace: migrate Solos into the approved Organize surface. */ body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) { background: radial-gradient(circle at 9% 2%, rgba(88, 80, 189, 0.18), transparent 23rem), radial-gradient(circle at 92% 3%, rgba(37, 99, 235, 0.18), transparent 26rem), linear-gradient(180deg, #05111f 0%, #071525 48%, #071221 100%) !important; --goals-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --goals-display-font: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --solo-weight-label: 390; --solo-weight-selected: 520; --solo-weight-heading: 660; --solo-weight-title: 520; --solo-weight-body: 320; --solo-weight-meta: 360; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-shell { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 1360px) !important; padding: clamp(0.5rem, 1.1vw, 0.86rem) clamp(0.55rem, 1.35vw, 1.25rem) 1rem !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav { align-items: center !important; background: linear-gradient(180deg, rgba(6, 16, 31, 0.95), rgba(5, 13, 25, 0.9)) !important; border: 1px solid rgba(137, 161, 204, 0.20) !important; border-radius: 15px 15px 0 0 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12.5rem, 0.82fr) minmax(30rem, max-content) minmax(7rem, 0.82fr) !important; margin: 0 !important; min-height: 4.05rem !important; padding: 0.48rem 1.12rem !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.68), transparent); bottom: -1px; content: ""; height: 1px; left: 0; position: absolute; right: 0; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.06rem 0.62rem !important; grid-template-columns: 2.6rem minmax(0, 1fr) !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 53%, transparent 54%), conic-gradient(from 30deg, #d9f99d, #7dd3fc, #a855f7, #fef08a, #d9f99d); border-radius: 999px; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 26px rgba(168, 85, 247, 0.18); color: #f8fbff; content: "Z"; display: inline-flex; font-family: Georgia, "Times New Roman", serif; font-size: 1.36rem; font-weight: 850; grid-row: span 3; justify-content: center; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: #f8fbff !important; font-family: var(--goals-ui-font) !important; font-size: 0.82rem !important; font-weight: 790 !important; line-height: 1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: var(--goals-ui-font) !important; font-size: 0.56rem !important; font-weight: 720 !important; line-height: 1.1 !important; margin: 0 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block .app-build-line, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .header-mode-buttons, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav #pwaVersionLabel, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .pwa-reload-button { display: none !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .app-nav { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; gap: clamp(1.05rem, 2vw, 2rem) !important; grid-column: 2 !important; justify-content: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.70) !important; font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: 430 !important; min-height: 2rem !important; padding: 0.28rem 0 0.48rem !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(248, 251, 255, 0.96) !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { background: linear-gradient(90deg, #a855f7, #6d5dfc) !important; bottom: -0.42rem !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { align-items: center !important; display: flex !important; justify-content: flex-end !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(226, 232, 240, 0.13) !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.62rem !important; padding: 0.32rem 0.5rem !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-relationship-preview { background: radial-gradient(circle at 84% 10%, rgba(47, 141, 255, 0.055), transparent 28%), linear-gradient(180deg, rgba(6, 16, 31, 0.99), rgba(5, 13, 25, 0.995)) !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace { border-color: rgba(148, 94, 255, 0.22) !important; border-radius: 0 0 15px 15px !important; border-top: 0 !important; box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28) !important; display: grid !important; gap: 0 !important; grid-template-columns: minmax(8.5rem, 0.145fr) minmax(0, 1fr) !important; margin-top: 0 !important; max-height: calc(100vh - 5.35rem) !important; min-height: calc(100vh - 5.35rem) !important; overflow: hidden !important; padding: 0 !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-nav { background: linear-gradient(180deg, rgba(8, 24, 42, 0.94), rgba(4, 13, 25, 0.96)) !important; border: 0 !important; border-right: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 0 !important; box-shadow: none !important; padding: 1.18rem 0.68rem 0.78rem !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-label { color: rgba(213, 225, 242, 0.74) !important; font-family: var(--goals-ui-font) !important; font-size: 0.66rem !important; font-weight: var(--solo-weight-label) !important; letter-spacing: 0.055em !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-nav-item { align-items: center !important; border-radius: 6px !important; color: rgba(226, 234, 247, 0.78) !important; display: grid !important; font-family: var(--goals-ui-font) !important; font-size: 0.84rem !important; font-weight: var(--solo-weight-label) !important; gap: 0.56rem !important; grid-template-columns: 1.15rem minmax(0, 1fr) !important; min-height: 2.14rem !important; padding: 0.5rem 0.58rem !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.28), rgba(47, 141, 255, 0.14)) !important; box-shadow: inset 3px 0 0 #a855f7, 0 16px 34px rgba(104, 64, 212, 0.2) !important; color: rgba(248, 251, 255, 0.94) !important; font-weight: var(--solo-weight-selected) !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-nav-icon svg, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-solos-modern-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-workspace-shell.is-modern-solos-workspace .organize-relationship-preview { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; min-height: 100%; padding: 0 !important; } body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-context-header, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .organize-goal-browser-panel { display: none !important; } .organize-solos-modern-workspace { background: transparent !important; color: #eef5ff; display: grid; font-family: var(--goals-ui-font); grid-template-rows: auto minmax(0, 1fr); min-height: 100%; } .organize-solos-hero { align-items: start; background: linear-gradient(90deg, rgba(5, 14, 27, 0.98) 0%, rgba(5, 14, 27, 0.72) 34%, rgba(67, 25, 78, 0.08) 72%), linear-gradient(180deg, rgba(5, 14, 27, 0.04), rgba(5, 14, 27, 0.80)), url("assets/organize/solos-guitar-hero.png") center / cover no-repeat; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-height: clamp(9rem, 15vw, 11.5rem); padding: clamp(1.28rem, 2.5vw, 1.9rem) clamp(1.2rem, 3vw, 2.4rem) 0.78rem; } .organize-solos-hero-copy { max-width: 44rem; } .organize-solos-hero h2 { color: #ffffff; font-family: var(--goals-display-font) !important; font-size: clamp(2.38rem, 3.45vw, 3.38rem) !important; font-weight: var(--solo-weight-heading) !important; letter-spacing: -0.012em !important; line-height: 0.94; margin: 0 0 0.46rem !important; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.38); } .organize-solos-hero-kicker, .organize-solos-hero-support { color: rgba(232, 240, 252, 0.86) !important; font-family: var(--goals-ui-font) !important; font-size: clamp(0.88rem, 1.08vw, 1.02rem) !important; font-weight: var(--solo-weight-body) !important; letter-spacing: 0 !important; line-height: 1.34 !important; margin: 0 !important; } .organize-solos-hero-kicker::after { background: #c084fc; content: ""; display: block; height: 2px; margin: 0.48rem 0 0.66rem !important; width: 2.3rem; } .organize-solos-new-action { align-items: center; appearance: none; background: rgba(245, 196, 0, 0.08); border: 1px solid rgba(245, 196, 0, 0.56); border-radius: 6px; color: #f9d94a; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.84rem; font-weight: 540; gap: 0.48rem; justify-self: end; min-height: 2.22rem; padding: 0.42rem 0.72rem; white-space: nowrap; } .organize-solos-new-action:hover { background: rgba(245, 196, 0, 0.14); } .organize-solos-new-action svg { height: 1rem; width: 1rem; } .organize-solos-list-panel { align-self: start; background: radial-gradient(circle at 84% 6%, rgba(168, 85, 247, 0.04), transparent 20rem), linear-gradient(180deg, rgba(5, 16, 30, 0.72), rgba(5, 13, 25, 0.62)) !important; border: 1px solid rgba(137, 161, 204, 0.08); border-radius: 9px; display: grid; gap: 0.78rem; margin: -0.3rem clamp(0.75rem, 1.6vw, 1.1rem) 0.72rem; max-height: calc(100vh - 18.2rem); overflow: auto; padding: 0.72rem 0.78rem 0.9rem; } .organize-solos-filter-bar { align-items: center; display: grid; gap: 0.48rem; grid-template-columns: minmax(13rem, 1.5fr) minmax(8rem, 0.75fr) minmax(8rem, 0.75fr) minmax(9rem, 0.8fr); } .organize-solos-filter-bar label { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.11); border-radius: 7px; color: rgba(206, 219, 239, 0.70); display: inline-flex; gap: 0.35rem; min-height: 2.1rem; min-width: 0; padding: 0 0.58rem; } .organize-solos-filter-bar label span, .organize-solos-filter-bar input, .organize-solos-filter-bar select { font-family: var(--goals-ui-font) !important; font-size: 0.78rem; font-weight: var(--solo-weight-meta) !important; letter-spacing: 0 !important; } .organize-solos-filter-bar input, .organize-solos-filter-bar select { appearance: none; background: transparent; border: 0; color: rgba(244, 248, 255, 0.92); min-height: 1.9rem; min-width: 0; outline: 0; padding: 0; width: 100%; } .organize-solos-search svg { color: rgba(206, 219, 239, 0.72); height: 1rem; width: 1rem; } .organize-solos-count { color: rgba(230, 238, 250, 0.86); font-family: var(--goals-ui-font) !important; font-size: 0.84rem; font-weight: 460 !important; } .organize-solos-table { display: grid; gap: 0.18rem; } .organize-solos-table-head, .organize-solo-modern-row { display: grid; gap: clamp(0.7rem, 1.4vw, 1.2rem); grid-template-columns: minmax(20rem, 1.7fr) minmax(5rem, 0.42fr) minmax(5rem, 0.42fr) minmax(8rem, 0.72fr) minmax(9rem, 0.88fr); } .organize-solos-table-head { color: rgba(198, 212, 234, 0.64); font-family: var(--goals-ui-font) !important; font-size: 0.68rem; font-weight: 540 !important; letter-spacing: 0.075em !important; padding: 0 1rem 0.36rem; text-transform: uppercase; } .organize-solos-list { background: linear-gradient(180deg, rgba(5, 16, 30, 0.48), rgba(5, 13, 25, 0.32)) !important; border: 1px solid rgba(137, 161, 204, 0.065); border-radius: 9px; display: grid; overflow: hidden; } .organize-solo-modern-row { align-items: center; appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(137, 161, 204, 0.065); color: inherit; cursor: pointer; font: inherit; min-height: 4.28rem; padding: 0.66rem 1rem; text-align: left; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .organize-solo-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--solo-accent) 7%, transparent), rgba(255, 255, 255, 0.018) 42%, transparent); } .organize-solo-modern-row:last-child { border-bottom: 0; } .organize-solo-modern-title { align-items: center; display: grid; gap: 0.86rem; grid-template-columns: 2.72rem minmax(0, 1fr); min-width: 0; } .organize-solo-modern-icon { align-items: center; background: color-mix(in srgb, var(--solo-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--solo-accent) 82%, transparent); border-radius: 999px; color: var(--solo-accent); display: inline-flex; height: 2.55rem; justify-content: center; width: 2.55rem; } .organize-solo-modern-icon svg { height: 1.28rem; width: 1.28rem; } .organize-solo-modern-title strong { color: rgba(248, 251, 255, 0.93); display: block; font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: var(--solo-weight-title) !important; line-height: 1.14 !important; margin-bottom: 0.18rem !important; } .organize-solo-modern-title small { color: rgba(218, 229, 246, 0.66) !important; display: block; font-family: var(--goals-ui-font) !important; font-size: 0.79rem !important; font-weight: var(--solo-weight-body) !important; line-height: 1.34 !important; } .organize-solo-modern-key, .organize-solo-modern-bpm, .organize-solo-modern-linked, .organize-solo-modern-linked em, .organize-solo-modern-practiced, .organize-solo-modern-practiced em { color: rgba(234, 241, 252, 0.78); font-family: var(--goals-ui-font) !important; font-size: 0.8rem !important; font-style: normal; font-weight: var(--solo-weight-meta) !important; } .organize-solo-modern-linked, .organize-solo-modern-practiced { align-items: center; display: inline-flex; gap: 0.38rem; } .organize-solo-modern-linked svg { color: #c084fc; height: 1rem; width: 1rem; } .organize-solo-modern-practiced svg { color: #2ed573; height: 1rem; width: 1rem; } .organize-solos-note { align-items: center; border: 1px solid rgba(137, 161, 204, 0.09); border-radius: 8px; color: rgba(218, 229, 246, 0.68); display: flex; font-size: 0.78rem; gap: 0.56rem; margin: 0; min-height: 2.25rem; padding: 0.58rem 0.78rem; } .organize-solos-note svg { height: 1rem; width: 1rem; } .organize-solos-empty { color: rgba(218, 229, 246, 0.78); display: grid; gap: 0.2rem; padding: 1.1rem; } .organize-solos-empty strong { color: rgba(248, 251, 255, 0.92); } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-context-header, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-goal-browser-panel { display: none !important; } body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-context-card, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .organize-relationship-preview { min-height: 100%; } .organize-songs-modern-workspace { color: #eef5ff; display: grid; font-family: var(--goals-ui-font); grid-template-rows: auto minmax(0, 1fr); min-height: 100%; } .organize-songs-hero { align-items: start; background: linear-gradient(90deg, rgba(5, 14, 27, 0.97) 0%, rgba(5, 14, 27, 0.66) 32%, rgba(67, 25, 78, 0.16) 72%), linear-gradient(180deg, rgba(5, 14, 27, 0.04), rgba(5, 14, 27, 0.80)), url("assets/organize/goals-mountain-hero.png") center / cover no-repeat; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-height: clamp(9rem, 15vw, 11.5rem); padding: clamp(1.28rem, 2.5vw, 1.9rem) clamp(1.2rem, 3vw, 2.4rem) 0.78rem; } .organize-songs-hero-copy { max-width: 42rem; } .organize-songs-hero h2 { color: #ffffff; font-family: var(--goals-display-font) !important; font-size: clamp(2.38rem, 3.45vw, 3.38rem) !important; font-weight: var(--song-weight-heading) !important; letter-spacing: -0.012em !important; line-height: 0.94; margin: 0 0 0.46rem !important; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.38); } .organize-songs-hero-kicker, .organize-songs-hero-support { color: rgba(232, 240, 252, 0.86) !important; font-family: var(--goals-ui-font) !important; font-size: clamp(0.88rem, 1.08vw, 1.02rem) !important; font-weight: var(--song-weight-body) !important; letter-spacing: 0 !important; line-height: 1.34 !important; margin: 0 !important; } .organize-songs-hero-kicker::after { background: #c084fc; content: ""; display: block; height: 2px; margin: 0.48rem 0 0.66rem !important; width: 2.3rem; } .organize-songs-new-action { align-items: center; appearance: none; background: rgba(168, 85, 247, 0.10); border: 0; border-radius: 6px; color: #eadbff; cursor: pointer; display: inline-flex; font: inherit; font-size: 0.84rem; font-weight: 540; gap: 0.48rem; justify-self: end; min-height: 2rem; padding: 0.42rem 0.68rem; white-space: nowrap; } .organize-songs-new-action:hover { background: rgba(168, 85, 247, 0.16); } .organize-songs-new-action svg { height: 1rem; width: 1rem; } .organize-songs-list-panel { align-self: start; background: radial-gradient(circle at 84% 6%, rgba(168, 85, 247, 0.04), transparent 20rem), linear-gradient(180deg, rgba(5, 16, 30, 0.72), rgba(5, 13, 25, 0.62)) !important; border: 1px solid rgba(137, 161, 204, 0.08); border-radius: 9px; display: grid; gap: 0.78rem; margin: -0.3rem clamp(0.75rem, 1.6vw, 1.1rem) 0.72rem; max-height: calc(100vh - 18.2rem); overflow: auto; padding: 0.72rem 0.78rem 0.9rem; } .organize-songs-filter-bar { align-items: center; display: grid; gap: 0.48rem; grid-template-columns: minmax(11rem, 1.55fr) repeat(4, minmax(7rem, 0.74fr)) minmax(9rem, 0.84fr); } .organize-songs-filter-bar label { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.11); border-radius: 7px; color: rgba(206, 219, 239, 0.70); display: inline-flex; gap: 0.35rem; min-height: 2.1rem; min-width: 0; padding: 0 0.58rem; } .organize-songs-filter-bar label span, .organize-songs-filter-bar input, .organize-songs-filter-bar select { font-family: var(--goals-ui-font) !important; font-size: 0.78rem; font-weight: var(--song-weight-meta) !important; letter-spacing: 0 !important; } .organize-songs-filter-bar label span { color: rgba(206, 219, 239, 0.70); white-space: nowrap; } .organize-songs-filter-bar input, .organize-songs-filter-bar select { appearance: none; background: transparent; border: 0; color: rgba(244, 248, 255, 0.92); min-height: 1.9rem; min-width: 0; outline: 0; padding: 0; width: 100%; } .organize-songs-search svg { color: rgba(206, 219, 239, 0.72); height: 1rem; width: 1rem; } .organize-songs-count { color: rgba(230, 238, 250, 0.86); font-family: var(--goals-ui-font) !important; font-size: 0.84rem; font-weight: 460 !important; } .organize-songs-table { display: grid; gap: 0.18rem; } .organize-songs-table-head, .organize-song-modern-row { display: grid; gap: clamp(0.7rem, 1.4vw, 1.2rem); grid-template-columns: minmax(17rem, 1.55fr) minmax(10rem, 0.92fr) minmax(4.5rem, 0.36fr) minmax(4.5rem, 0.36fr) minmax(7.5rem, 0.62fr) minmax(8rem, 0.72fr); } .organize-songs-table-head { color: rgba(198, 212, 234, 0.64); font-family: var(--goals-ui-font) !important; font-size: 0.68rem; font-weight: 540 !important; letter-spacing: 0.075em !important; padding: 0 1rem 0.36rem; text-transform: uppercase; } .organize-songs-list { background: linear-gradient(180deg, rgba(5, 16, 30, 0.48), rgba(5, 13, 25, 0.32)) !important; border: 1px solid rgba(137, 161, 204, 0.065); border-radius: 9px; display: grid; overflow: hidden; } .organize-song-modern-row { align-items: center; appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(137, 161, 204, 0.065); color: inherit; cursor: pointer; font: inherit; min-height: 4.05rem; padding: 0.62rem 1rem; text-align: left; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .organize-song-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--song-accent) 7%, transparent), rgba(255, 255, 255, 0.018) 42%, transparent); } .organize-song-modern-row:last-child { border-bottom: 0; } .organize-song-modern-title { align-items: center; display: grid; gap: 0.86rem; grid-template-columns: 2.72rem minmax(0, 1fr); min-width: 0; } .organize-song-modern-icon { align-items: center; background: color-mix(in srgb, var(--song-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--song-accent) 82%, transparent); border-radius: 999px; color: var(--song-accent); display: inline-flex; height: 2.55rem; justify-content: center; width: 2.55rem; } .organize-song-modern-icon svg { height: 1.28rem; width: 1.28rem; } .organize-song-modern-title strong { color: rgba(248, 251, 255, 0.93); display: block; font-family: var(--goals-ui-font) !important; font-size: 0.9rem !important; font-weight: var(--song-weight-title) !important; line-height: 1.14 !important; margin-bottom: 0.18rem !important; } .organize-song-modern-title small { color: rgba(218, 229, 246, 0.66) !important; display: block; font-family: var(--goals-ui-font) !important; font-size: 0.79rem !important; font-weight: var(--song-weight-body) !important; line-height: 1.34 !important; } .organize-song-modern-source, .organize-song-modern-key, .organize-song-modern-bpm, .organize-song-modern-linked, .organize-song-modern-linked em, .organize-song-modern-practiced, .organize-song-modern-practiced em { color: rgba(234, 241, 252, 0.78); font-family: var(--goals-ui-font) !important; font-size: 0.8rem !important; font-style: normal; font-weight: var(--song-weight-meta) !important; } .organize-song-modern-linked { display: grid; gap: 0.18rem; } .organize-song-modern-linked small { color: rgba(218, 229, 246, 0.62); font-size: 0.7rem; font-weight: 350; } .organize-song-modern-linked span { align-items: center; display: inline-flex; gap: 0.38rem; } .organize-song-modern-linked svg { color: #c084fc; height: 1rem; width: 1rem; } .organize-song-modern-practiced { align-items: center; display: inline-flex; gap: 0.38rem; } .organize-song-modern-practiced svg { color: #2ed573; height: 1rem; width: 1rem; } .organize-songs-note { align-items: center; border: 1px solid rgba(137, 161, 204, 0.09); border-radius: 8px; color: rgba(218, 229, 246, 0.68); display: flex; font-size: 0.78rem; gap: 0.56rem; margin: 0; min-height: 2.25rem; padding: 0.58rem 0.78rem; } .organize-songs-note svg { height: 1rem; width: 1rem; } .organize-songs-empty { color: rgba(218, 229, 246, 0.78); display: grid; gap: 0.2rem; padding: 1.1rem; } .organize-songs-empty strong { color: rgba(248, 251, 255, 0.92); } @media (max-width: 1100px) { .organize-drills-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organize-songs-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organize-solos-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organize-drills-table-head { display: none; } .organize-songs-table-head { display: none; } .organize-solos-table-head { display: none; } .organize-drill-modern-row { grid-template-columns: 1fr; } .organize-song-modern-row { grid-template-columns: 1fr; } .organize-solo-modern-row { grid-template-columns: 1fr; } } @media (max-width: 980px) { body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav { grid-template-columns: 1fr !important; justify-items: center !important; min-height: auto !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { justify-self: center !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace { max-height: none !important; min-height: auto !important; } } /* P10JV final sidebar widget replacement: queue launcher plus streak/practice-time widget. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.86rem !important; margin: clamp(0.85rem, 4vh, 2.2rem) 0 0 !important; padding: 0 0.2rem !important; transform: translateY(-5.35rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: transparent !important; border: 0 !important; display: grid !important; gap: 0.58rem !important; grid-template-columns: 2.2rem minmax(0, 1fr) !important; min-height: 3.72rem !important; padding: 0.45rem 0.42rem 0.45rem 0.04rem !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 16% 50%, rgba(45, 212, 191, 0.22), transparent 33%), radial-gradient(ellipse at 66% 18%, rgba(168, 85, 247, 0.18), transparent 48%), linear-gradient(100deg, rgba(10, 24, 43, 0.86), rgba(8, 14, 30, 0.18) 76%) !important; border: 0 !important; border-radius: 22px 16px 24px 16px !important; box-shadow: 0 0 38px rgba(45, 212, 191, 0.11) !important; inset: -0.2rem -0.3rem -0.18rem -0.15rem !important; opacity: 0.98 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(90deg, rgba(103, 232, 249, 0.20), transparent 70%) !important; height: 1px !important; inset: auto 10% 0.24rem 2.55rem !important; opacity: 0.68 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: rgba(6, 15, 28, 0.82) !important; border: 0 !important; border-radius: 999px !important; box-shadow: 0 0 24px rgba(45, 212, 191, 0.18) !important; height: 2.04rem !important; width: 2.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 0.96rem !important; stroke: rgba(226, 245, 255, 0.92) !important; width: 0.96rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(125, 211, 252, 0.82) !important; font-size: 0.5rem !important; letter-spacing: 0.16em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 250, 252, 0.98) !important; font-size: 0.98rem !important; line-height: 1.02 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(203, 213, 225, 0.76) !important; font-size: 0.64rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(circle at 50% 0%, rgba(250, 204, 21, 0.12), transparent 36%), linear-gradient(180deg, rgba(12, 21, 37, 0.78), rgba(7, 12, 24, 0.52)) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; align-items: center !important; display: flex !important; flex-direction: column !important; gap: 0.16rem !important; justify-content: flex-start !important; min-height: 9.25rem !important; padding: 0.62rem 0.5rem 0.48rem !important; text-align: center !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: transparent !important; box-shadow: none !important; color: rgba(245, 158, 11, 0.98) !important; display: inline-flex !important; height: 1.9rem !important; justify-content: center !important; margin: 0 auto 0.02rem !important; width: 1.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon svg { fill: none !important; height: 1.42rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 2.15 !important; width: 1.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy { align-items: center !important; display: flex !important; flex-direction: column !important; gap: 0.08rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.69rem !important; font-weight: 690 !important; letter-spacing: 0.02em !important; line-height: 1.1 !important; margin-top: 0.44rem !important; text-transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.88rem !important; font-weight: 760 !important; line-height: 1.12 !important; white-space: normal !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy .practice-rail-week-time { color: rgba(248, 250, 252, 0.98) !important; font-size: 1.12rem !important; margin-top: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.62rem !important; font-style: normal !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-streak-detail { color: rgba(254, 240, 138, 0.82) !important; margin-bottom: 0.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-progress-link { align-self: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(168, 85, 247, 0.92) !important; font-size: 0.73rem !important; font-weight: 760 !important; justify-self: center !important; margin: 0.12rem auto 0 !important; min-height: 1.1rem !important; padding: 0 !important; position: static !important; text-align: center !important; transform: none !important; white-space: nowrap !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-progress-link::after { content: "›"; margin-left: 0.28rem; } /* P10JV View My Progress reveal: lightweight emotional reflection, not deep analytics. */ @property --progress-reveal-percent { inherits: true; initial-value: 0; syntax: ""; } body:has(.practice-dashboard:not([hidden])) .app-shell, body:has(.practice-dashboard:not([hidden])) .page-shell, body:has(.practice-dashboard:not([hidden])) #app { transition: filter 780ms ease, transform 900ms cubic-bezier(0.2, 0.72, 0.18, 1); } body.progress-reveal-open:has(.practice-dashboard:not([hidden])) .app-shell, body.progress-reveal-open:has(.practice-dashboard:not([hidden])) .page-shell, body.progress-reveal-open:has(.practice-dashboard:not([hidden])) #app { filter: blur(5px) brightness(0.68) saturate(0.92); transform: scale(0.994); } .progress-reveal-overlay { inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 760ms ease, visibility 0s linear 760ms; visibility: hidden; z-index: 180; } .progress-reveal-overlay[aria-hidden="true"]:not(.is-leaving) { display: none; } .progress-reveal-overlay.is-ready, .progress-reveal-overlay.is-leaving { display: block; visibility: visible; } .progress-reveal-overlay.is-ready { opacity: 1; pointer-events: auto; transition-delay: 0s; } .progress-reveal-scrim { backdrop-filter: blur(16px) saturate(116%); background: radial-gradient(circle at 26% 18%, rgba(250, 204, 21, 0.08), transparent 34%), radial-gradient(circle at 24% 24%, rgba(124, 58, 237, 0.20), transparent 46%), radial-gradient(circle at 78% 12%, rgba(45, 212, 191, 0.12), transparent 42%), radial-gradient(circle at 50% 78%, rgba(14, 165, 233, 0.10), transparent 50%), rgba(2, 7, 18, 0.76); inset: 0; opacity: 0; position: absolute; transition: opacity 860ms ease; } .progress-reveal-overlay.is-ready .progress-reveal-scrim { opacity: 1; } .progress-reveal-panel { background: radial-gradient(circle at 18% 18%, rgba(167, 139, 250, 0.24), transparent 34%), radial-gradient(circle at 69% 9%, rgba(124, 58, 237, 0.19), transparent 38%), radial-gradient(circle at 86% 57%, rgba(45, 212, 191, 0.095), transparent 36%), radial-gradient(circle at 18% 82%, rgba(37, 99, 235, 0.13), transparent 34%), linear-gradient(145deg, rgba(11, 18, 38, 0.86), rgba(6, 12, 28, 0.92) 58%, rgba(5, 19, 32, 0.88)); border: 1px solid rgba(203, 213, 225, 0.16); border-radius: 30px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 48px 140px rgba(0, 0, 0, 0.46), 0 0 110px rgba(45, 212, 191, 0.060); color: rgba(248, 250, 252, 0.92); display: grid; gap: clamp(1rem, 1.65vw, 1.45rem); isolation: isolate; left: 50%; max-height: min(45rem, calc(100vh - 1rem)); max-width: min(72rem, calc(100vw - 1rem)); overflow: hidden; opacity: 0; padding: clamp(1.55rem, 2.55vw, 2.35rem); position: absolute; top: 50%; transform: translate(-50%, -46%) scale(0.975); transition: filter 820ms ease, opacity 820ms ease, transform 980ms cubic-bezier(0.2, 0.72, 0.18, 1); width: 100%; } .progress-reveal-panel::before { animation: progressRevealGlow 11s ease-in-out infinite alternate; background: radial-gradient(circle at 32% 47%, rgba(34, 211, 238, 0.18), transparent 25%), radial-gradient(circle at 23% 52%, rgba(139, 92, 246, 0.18), transparent 31%), radial-gradient(circle at 78% 30%, rgba(168, 85, 247, 0.13), transparent 36%), radial-gradient(circle at 88% 78%, rgba(14, 165, 233, 0.09), transparent 24%); content: ""; inset: -18%; opacity: 0.72; pointer-events: none; position: absolute; z-index: -1; } .progress-reveal-overlay.is-ready .progress-reveal-panel { filter: blur(0); opacity: 1; transform: translate(-50%, -50%) scale(1); } .progress-reveal-close { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(226, 232, 240, 0.22); border-radius: 999px; color: rgba(248, 250, 252, 0.82); cursor: pointer; display: inline-flex; font-size: 1.55rem; height: 2.9rem; justify-content: center; position: absolute; right: clamp(1rem, 2vw, 1.5rem); top: clamp(1rem, 2vw, 1.5rem); width: 2.9rem; } .progress-reveal-header { max-width: 52rem; text-align: left; } .progress-reveal-header span { color: rgba(216, 180, 254, 0.90); display: inline-flex; font-size: 0.78rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .progress-reveal-header h2 { background: linear-gradient(90deg, #f0abfc 0%, #f8fafc 46%, #5eead4 100%); background-clip: text; color: transparent; font-size: clamp(3rem, 5vw, 5rem); font-weight: 780; letter-spacing: 0; line-height: 1.02; margin: 0.42rem 0 0; text-shadow: 0 0 34px rgba(94, 234, 212, 0.14); white-space: nowrap; } .progress-reveal-header p { color: rgba(248, 250, 252, 0.80); font-size: clamp(1rem, 1.8vw, 1.2rem); line-height: 1.55; margin: 0.55rem 0 0; min-height: 1.25rem; } .progress-reveal-body { display: grid; gap: clamp(1.65rem, 2.75vw, 2.6rem); grid-template-columns: minmax(18rem, 0.72fr) minmax(30rem, 1.28fr); min-height: min(28rem, calc(100vh - 15rem)); } .progress-reveal-side, .progress-reveal-stat-row article, .progress-reveal-week-strip { background: radial-gradient(circle at 28% 0%, rgba(255, 255, 255, 0.058), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.006)); border: 1px solid rgba(226, 232, 240, 0.026); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026), 0 24px 70px rgba(0, 0, 0, 0.105); } .progress-reveal-header, .progress-reveal-hero, .progress-reveal-stat-row, .progress-reveal-week-strip { opacity: 0; transform: translateY(12px); transition: opacity 780ms ease, transform 900ms cubic-bezier(0.2, 0.72, 0.18, 1); } .progress-reveal-overlay.is-ready .progress-reveal-header, .progress-reveal-overlay.is-ready .progress-reveal-hero, .progress-reveal-overlay.is-ready .progress-reveal-stat-row, .progress-reveal-overlay.is-ready .progress-reveal-week-strip { opacity: 1; transform: translateY(0); } .progress-reveal-overlay.is-ready .progress-reveal-hero { transition-delay: 120ms; } .progress-reveal-overlay.is-ready .progress-reveal-stat-row { transition-delay: 210ms; } .progress-reveal-overlay.is-ready .progress-reveal-week-strip { transition-delay: 360ms; } .progress-reveal-hero { align-items: center; background: radial-gradient(circle at 49% 48%, rgba(45, 212, 191, 0.17), transparent 35%), radial-gradient(circle at 30% 46%, rgba(168, 85, 247, 0.20), transparent 43%), linear-gradient(180deg, rgba(255, 255, 255, 0.004), rgba(255, 255, 255, 0)); border-color: transparent; box-shadow: none; display: grid; gap: 1rem; justify-items: center; padding: clamp(0.35rem, 1.2vw, 1rem) 0 0; } .progress-reveal-ring { align-items: center; aspect-ratio: 1; background: var(--progress-reveal-ring-gradient, conic-gradient(from -90deg, rgba(148, 163, 184, 0.24) 0 100%)); border-radius: 999px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 30px rgba(167, 139, 250, 0.42), 0 0 92px rgba(45, 212, 191, 0.25), 0 0 130px rgba(124, 58, 237, 0.18), 0 35px 90px rgba(0, 0, 0, 0.36); display: grid; justify-items: center; max-width: min(21rem, calc(100vh - 24rem)); padding: 1.05rem; position: relative; transition: --progress-reveal-percent 1400ms cubic-bezier(0.2, 0.72, 0.18, 1), filter 1100ms ease, transform 1100ms cubic-bezier(0.2, 0.72, 0.18, 1); width: min(92%, 21rem, calc(100vh - 24rem)); } .progress-reveal-ring::before { background: radial-gradient(circle at 94% 44%, rgba(45, 212, 191, 0.35), transparent 15%), conic-gradient(from -90deg, rgba(255, 255, 255, 0.86), transparent 8%, transparent 73%, rgba(255, 255, 255, 0.24)); border-radius: inherit; content: ""; filter: blur(0.4px); inset: 0.18rem; opacity: 0.36; position: absolute; } .progress-reveal-ring::after { background: radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.078), transparent 44%), radial-gradient(circle at 48% 78%, rgba(94, 234, 212, 0.055), transparent 54%), rgb(7, 16, 31); border-radius: inherit; content: ""; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 0 28px rgba(0, 0, 0, 0.14); inset: 1.95rem; position: absolute; } .progress-reveal-ring strong, .progress-reveal-ring span { position: relative; z-index: 1; } .progress-reveal-ring strong { font-size: clamp(3rem, 5.6vw, 4.8rem); font-weight: 740; line-height: 1; text-align: center; } .progress-reveal-ring span { color: rgba(203, 213, 225, 0.70); font-size: 1rem; margin-top: -2.15rem; } .progress-reveal-hero-meta, .progress-reveal-stat-row span { color: rgba(203, 213, 225, 0.60); font-size: 0.78rem; } .progress-reveal-hero-meta { color: rgba(248, 250, 252, 0.84); font-size: 1rem; letter-spacing: 0.01em; margin: 0; text-align: center; } .progress-reveal-hero-meta::first-letter { color: rgba(94, 234, 212, 0.92); } .progress-reveal-side { align-self: center; background: transparent; border: 0; box-shadow: none; display: grid; gap: 1.15rem; } .progress-reveal-stat-row { display: grid; gap: 1.05rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .progress-reveal-stat-row article { backdrop-filter: blur(20px); border: 1px solid rgba(226, 232, 240, 0.11); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 24px 60px rgba(0, 0, 0, 0.19); display: grid; gap: 0.48rem; min-height: 9.4rem; padding: 1.25rem 1.15rem; } .progress-reveal-stat-icon { display: inline-flex; height: 2rem; line-height: 1; width: 2rem; } .progress-reveal-stat-icon svg { display: block; fill: none; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; width: 100%; } .progress-reveal-stat-row strong { font-size: clamp(1.55rem, 2.35vw, 2.25rem); font-weight: 680; line-height: 1.08; overflow: hidden; text-overflow: ellipsis; } #progressRevealTopItem { display: -webkit-box; font-size: clamp(1.08rem, 1.55vw, 1.58rem); -webkit-box-orient: vertical; -webkit-line-clamp: 3; max-height: 5.05rem; overflow-wrap: break-word; white-space: normal; } .progress-reveal-stat-row em { color: rgba(203, 213, 225, 0.62); font-size: 0.86rem; font-style: normal; } .progress-reveal-stat-row article:nth-child(1) { background: radial-gradient(circle at 26% 0%, rgba(45, 212, 191, 0.24), transparent 48%), linear-gradient(180deg, rgba(20, 34, 60, 0.68), rgba(13, 25, 47, 0.50)); } .progress-reveal-stat-row article:nth-child(1) b { color: rgba(45, 212, 191, 0.96); filter: drop-shadow(0 0 12px rgba(45, 212, 191, 0.28)); } .progress-reveal-stat-row article:nth-child(2) { background: radial-gradient(circle at 35% 0%, rgba(168, 85, 247, 0.27), transparent 52%), linear-gradient(180deg, rgba(39, 26, 69, 0.70), rgba(17, 23, 48, 0.52)); } .progress-reveal-stat-row article:nth-child(2) b { color: rgba(192, 132, 252, 0.96); filter: drop-shadow(0 0 12px rgba(192, 132, 252, 0.26)); } .progress-reveal-stat-row article:nth-child(3) { background: radial-gradient(circle at 30% 0%, rgba(250, 204, 21, 0.18), transparent 48%), linear-gradient(180deg, rgba(47, 33, 42, 0.68), rgba(16, 24, 42, 0.52)); } .progress-reveal-stat-row article:nth-child(3) b { color: rgba(250, 204, 21, 0.96); filter: drop-shadow(0 0 12px rgba(250, 204, 21, 0.24)); } .progress-reveal-stat-row article:nth-child(4) { background: radial-gradient(circle at 30% 0%, rgba(96, 165, 250, 0.20), transparent 48%), linear-gradient(180deg, rgba(25, 42, 72, 0.68), rgba(16, 24, 42, 0.52)); } .progress-reveal-stat-row article:nth-child(4) b { color: rgba(147, 197, 253, 0.96); filter: drop-shadow(0 0 12px rgba(96, 165, 250, 0.24)); } .progress-reveal-week-strip { background: radial-gradient(circle at 72% 15%, rgba(124, 58, 237, 0.16), transparent 42%), radial-gradient(circle at 18% 10%, rgba(45, 212, 191, 0.12), transparent 42%), linear-gradient(180deg, rgba(15, 28, 51, 0.62), rgba(6, 14, 29, 0.50)); border: 1px solid rgba(203, 213, 225, 0.10); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.036), 0 26px 70px rgba(0, 0, 0, 0.18); display: grid; gap: 0.85rem; padding: 1.15rem clamp(1.35rem, 2.2vw, 1.75rem) 1.15rem; position: relative; } .progress-reveal-week-strip::before { background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.10), rgba(167, 139, 250, 0.08), transparent); border-radius: 999px; content: ""; height: 1px; left: 6%; opacity: 0.72; pointer-events: none; position: absolute; right: 6%; top: 63%; } .progress-reveal-section-label { color: rgba(216, 180, 254, 0.88); font-size: 0.82rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .progress-reveal-trend { align-items: end; display: grid; gap: clamp(0.7rem, 1.45vw, 1.05rem); grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 6.1rem; } .progress-reveal-trend span { align-items: center; display: grid; gap: 0.45rem; grid-template-rows: minmax(0, 1fr) auto; height: 100%; justify-items: center; transition: opacity 820ms ease, transform 1100ms cubic-bezier(0.2, 0.72, 0.18, 1); transition-delay: calc(360ms + (var(--progress-reveal-bar-index, 0) * 80ms)); } .progress-reveal-trend span i { align-self: end; background: rgba(148, 163, 184, 0.18); border-radius: 999px; display: block; height: var(--progress-reveal-bar, 8%); min-height: 1rem; transform: scaleY(0.08); transform-origin: bottom; transition: transform 1100ms cubic-bezier(0.2, 0.72, 0.18, 1); transition-delay: calc(420ms + (var(--progress-reveal-bar-index, 0) * 80ms)); width: min(1.55rem, 58%); } .progress-reveal-trend span.has-practice { background: transparent; } .progress-reveal-trend span.has-practice i { background: linear-gradient(180deg, rgba(45, 212, 191, 0.95), rgba(59, 130, 246, 0.78) 50%, rgba(124, 58, 237, 0.86)); box-shadow: 0 0 25px rgba(45, 212, 191, 0.22); } .progress-reveal-trend span.is-peak::before { color: rgba(250, 204, 21, 0.95); content: "★"; font-size: 0.86rem; line-height: 1; margin-bottom: -0.15rem; order: -1; text-shadow: 0 0 16px rgba(250, 204, 21, 0.38); } .progress-reveal-trend span em { color: rgba(203, 213, 225, 0.54); font-size: 0.7rem; font-style: normal; } .progress-reveal-overlay.is-drawn .progress-reveal-trend span, .progress-reveal-overlay.is-drawn .progress-reveal-trend span i { transform: scaleY(1); } .progress-reveal-week-strip p { color: rgba(203, 213, 225, 0.72); font-size: 0.94rem; margin: 0; min-height: 1.1rem; text-align: center; } .progress-reveal-week-strip p:not(:empty)::before { color: rgba(96, 165, 250, 0.95); content: "★"; margin-right: 0.55rem; text-shadow: 0 0 16px rgba(96, 165, 250, 0.36); } .progress-reveal-week-strip p strong { color: rgba(216, 180, 254, 0.94); } .progress-reveal-footer-insight { align-items: center; border-top: 1px solid rgba(203, 213, 225, 0.08); color: rgba(226, 232, 240, 0.82); display: flex; font-size: clamp(1rem, 1.8vw, 1.18rem); gap: 0.8rem; line-height: 1.5; margin: 0; min-height: 2.25rem; padding-top: 0.82rem; } .progress-reveal-footer-insight:empty { display: none; } .progress-reveal-footer-insight span { color: rgba(148, 163, 184, 0.78); font-size: 1.25rem; } .progress-reveal-footer-insight strong { color: rgba(45, 212, 191, 0.96); font-weight: 720; } @media (max-width: 1120px) { .progress-reveal-panel { max-width: min(63rem, calc(100vw - 0.75rem)); padding: clamp(1.25rem, 2vw, 1.7rem); } .progress-reveal-header h2 { font-size: clamp(3rem, 4.6vw, 4.35rem); } .progress-reveal-body { gap: clamp(1.15rem, 2vw, 1.6rem); grid-template-columns: minmax(16rem, 0.7fr) minmax(27rem, 1.3fr); min-height: min(24.5rem, calc(100vh - 13.5rem)); } .progress-reveal-ring { max-width: min(18.8rem, calc(100vh - 22rem)); width: min(90%, 18.8rem, calc(100vh - 22rem)); } .progress-reveal-ring::after { inset: 1.72rem; } .progress-reveal-stat-row article { min-height: 8.4rem; padding: 1rem; } .progress-reveal-week-strip { padding-bottom: 0.95rem; } .progress-reveal-trend { min-height: 5rem; } } @media (max-width: 760px) { .progress-reveal-body { grid-template-columns: 1fr; min-height: 0; } .progress-reveal-header h2 { white-space: normal; } .progress-reveal-stat-row { grid-template-columns: 1fr; } .progress-reveal-stat-row article { min-height: 0; } .progress-reveal-panel { max-height: calc(100vh - 1.5rem); max-width: calc(100vw - 1rem); } .progress-reveal-header { text-align: center; } } @keyframes progressRevealGlow { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1%, 0) scale(1.03); } } @media (prefers-reduced-motion: reduce) { body:has(.practice-dashboard:not([hidden])) .app-shell, body:has(.practice-dashboard:not([hidden])) .page-shell, body:has(.practice-dashboard:not([hidden])) #app, .progress-reveal-overlay, .progress-reveal-scrim, .progress-reveal-panel, .progress-reveal-header, .progress-reveal-hero, .progress-reveal-stat-row, .progress-reveal-week-strip, .progress-reveal-ring, .progress-reveal-trend span, .progress-reveal-trend span i { animation: none !important; transition-duration: 1ms !important; } } /* P10JV shared-screen cleanup: the Practice rail widgets live in the shared header, but should only render on Practice. */ body:not(:has(.practice-dashboard:not([hidden]))) .app-header > .practice-rail-progress, body:not(:has(.practice-dashboard:not([hidden]))) .header-utility-bar .practice-rail-progress { display: none !important; } body:has([data-screen-panel="manage"]:not([hidden])) .app-header.header-with-nav, body:has([data-screen-panel="tools"]:not([hidden])) .app-header.header-with-nav, body:has([data-screen-panel="system"]:not([hidden])) .app-header.header-with-nav { grid-template-columns: minmax(13rem, 1fr) max-content max-content !important; } body:has([data-screen-panel="manage"]:not([hidden])) .app-header.header-with-nav .app-nav, body:has([data-screen-panel="tools"]:not([hidden])) .app-header.header-with-nav .app-nav, body:has([data-screen-panel="system"]:not([hidden])) .app-header.header-with-nav .app-nav { flex-wrap: nowrap !important; } /* P10JV terminal targeted drawer-surface fix: final cascade position for real rendered drawer nodes. */ body.practice-queue-workspace-open #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-drawer { background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.30), transparent 42%), radial-gradient(circle at 86% 10%, rgba(45, 212, 191, 0.20), transparent 40%), linear-gradient(160deg, rgba(34, 47, 76, 0.988), rgba(14, 24, 42, 0.992)) !important; border-color: rgba(226, 232, 240, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), 0 36px 100px rgba(0, 0, 0, 0.44), 0 0 90px rgba(45, 212, 191, 0.08) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.14) !important; backdrop-filter: blur(18px) saturate(128%) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item:hover, body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item:focus-visible { background: radial-gradient(circle at 10% 16%, rgba(96, 165, 250, 0.22), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.155), rgba(255, 255, 255, 0.070)) !important; border-color: rgba(196, 181, 253, 0.34) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item.is-current { background: radial-gradient(circle at 12% 18%, rgba(94, 234, 212, 0.22), transparent 50%), linear-gradient(180deg, rgba(139, 92, 246, 0.28), rgba(255, 255, 255, 0.075)) !important; border-color: rgba(167, 139, 250, 0.46) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace > .practice-notes-drawer { background: radial-gradient(circle at 16% 0%, rgba(167, 139, 250, 0.30), transparent 40%), radial-gradient(circle at 88% 8%, rgba(45, 212, 191, 0.20), transparent 42%), linear-gradient(160deg, rgba(35, 49, 78, 0.988), rgba(13, 23, 41, 0.992)) !important; border-color: rgba(226, 232, 240, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), 0 36px 104px rgba(0, 0, 0, 0.45), 0 0 84px rgba(124, 58, 237, 0.09) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid { align-content: stretch !important; gap: 0.85rem !important; grid-template-rows: auto auto minmax(18rem, 1fr) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > #currentItemReminderBox.practice-tool-card { background: radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.11), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.060)) !important; border-color: rgba(226, 232, 240, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.13) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemReminderNotes { background: rgba(22, 35, 58, 0.82) !important; border-color: rgba(226, 232, 240, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(15, 23, 42, 0.20) !important; color: rgba(248, 250, 252, 0.92) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .reminder-actions > button.secondary-button, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-footer > button { background: rgba(255, 255, 255, 0.095) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(241, 245, 249, 0.88) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > .practice-notes-history-panel { background: radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.13), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.13) !important; min-height: clamp(18rem, 42vh, 30rem) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-list { max-height: clamp(14rem, 36vh, 25rem) !important; overflow: auto !important; padding-right: 0.32rem !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-item { background: rgba(2, 7, 18, 0.18) !important; border: 1px solid rgba(226, 232, 240, 0.08) !important; border-left-color: rgba(94, 234, 212, 0.38) !important; border-radius: 14px !important; padding: 0.64rem 0.72rem !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-empty { align-items: center !important; background: radial-gradient(circle at 16% 20%, rgba(167, 139, 250, 0.14), transparent 48%), rgba(2, 7, 18, 0.20) !important; border-color: rgba(226, 232, 240, 0.10) !important; color: rgba(226, 232, 240, 0.66) !important; display: flex !important; min-height: 12rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.practice-notes-drawer-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.practice-notes-drawer-grid > #currentItemReminderBox.practice-tool-card { background: radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.12), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.138), rgba(255, 255, 255, 0.066)) !important; border-color: rgba(226, 232, 240, 0.19) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 10px 24px rgba(0, 0, 0, 0.13) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemReminderNotes { background: rgba(24, 38, 62, 0.86) !important; border-color: rgba(226, 232, 240, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(15, 23, 42, 0.18) !important; color: rgba(248, 250, 252, 0.94) !important; } /* P10JV first Preferences workspace mockup: calm, curated global settings surface. */ @media (min-width: 900px) { body:has(.preferences-screen:not([hidden])) { background: radial-gradient(circle at 9% 19%, rgba(139, 92, 246, 0.13), transparent 22rem), radial-gradient(circle at 72% 0%, rgba(20, 184, 166, 0.10), transparent 34rem), linear-gradient(145deg, #060a15 0%, #090d1c 52%, #050812 100%) !important; color: #f7f8ff !important; } body:has(.preferences-screen:not([hidden])) .app-shell { align-items: start !important; display: grid !important; gap: clamp(1.25rem, 2.35vw, 2.45rem) !important; grid-template-columns: clamp(12.25rem, 15vw, 14.7rem) minmax(0, 1fr) !important; max-width: 1720px !important; padding: 0 clamp(1rem, 2vw, 1.85rem) clamp(1rem, 1.8vw, 1.6rem) 0 !important; } body:has(.preferences-screen:not([hidden])) .app-shell > :not(.app-header) { grid-column: 2 !important; min-width: 0 !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav, body:has(.preferences-screen:not([hidden])) .app-header.compact-brand-header.header-with-nav, body:has(.preferences-screen:not([hidden])) .app-header.brand-header.header-with-nav { align-self: start !important; background: radial-gradient(ellipse at 18% 14%, rgba(139, 92, 246, 0.07), transparent 13rem), linear-gradient(180deg, rgba(8, 12, 26, 0.91), rgba(5, 8, 18, 0.86)) !important; border-width: 0 1px 0 0 !important; border-color: rgba(224, 231, 247, 0.052) !important; border-radius: 0 !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.018), 16px 0 48px rgba(0, 0, 0, 0.10) !important; display: flex !important; flex-direction: column !important; gap: clamp(1.05rem, 2.2vh, 1.45rem) !important; grid-column: 1 !important; min-height: 100vh !important; padding: clamp(1.35rem, 2vw, 2rem) clamp(1.15rem, 1.7vw, 1.55rem) !important; position: sticky !important; top: 0 !important; width: 100% !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block { display: grid !important; gap: 0.3rem !important; grid-column: auto !important; grid-row: auto !important; padding-left: 2.45rem !important; position: relative !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center !important; background: linear-gradient(145deg, #8b5cf6, #5b21b6) !important; border-radius: 999px !important; box-shadow: 0 0 22px rgba(139, 92, 246, 0.26) !important; color: #ffffff !important; content: "♪" !important; display: flex !important; font-size: 1.2rem !important; height: 2rem !important; justify-content: center !important; left: 0 !important; line-height: 1 !important; position: absolute !important; top: 0.05rem !important; transform: rotate(-18deg) !important; width: 2rem !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: rgba(248, 250, 255, 0.93) !important; font-size: clamp(0.98rem, 1.1vw, 1.16rem) !important; font-weight: 620 !important; letter-spacing: 0 !important; line-height: 1.05 !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-tagline { color: rgba(232, 237, 250, 0.52) !important; display: block !important; font-size: 0.8rem !important; line-height: 1.45 !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block .app-build-line { display: none !important; } body:has(.preferences-screen:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"], body:has(.preferences-screen:not([hidden])) .header-with-nav .app-nav, body:has(.preferences-screen:not([hidden])) .app-nav { align-items: stretch !important; display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 0.5rem !important; grid-column: auto !important; grid-row: auto !important; justify-content: flex-start !important; margin: 0 !important; overflow: visible !important; padding: clamp(1rem, 2.4vh, 1.8rem) 0 0 !important; width: 100% !important; } body:has(.preferences-screen:not([hidden])) .app-nav-button { align-items: center !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 12px !important; box-shadow: none !important; color: rgba(238, 242, 250, 0.58) !important; display: flex !important; font-size: 0.88rem !important; font-weight: 470 !important; gap: 0.72rem !important; justify-content: flex-start !important; letter-spacing: 0 !important; min-height: 3.18rem !important; padding: 0.64rem 0.78rem !important; text-align: left !important; text-transform: none !important; width: 100% !important; } body:has(.preferences-screen:not([hidden])) .app-nav-button, body:has([data-screen-panel="log"]:not([hidden])) .app-nav-button { white-space: nowrap !important; } body:has(.preferences-screen:not([hidden])) .preferences-nav-button { margin-top: 0.5rem !important; } body:has(.preferences-screen:not([hidden])) .p10eb-nav-icon { align-items: center !important; color: rgba(238, 242, 250, 0.54) !important; display: inline-flex !important; font-size: 1.18rem !important; height: 1.5rem !important; justify-content: center !important; width: 1.55rem !important; } body:has(.preferences-screen:not([hidden])) .p10eb-nav-icon svg { fill: none !important; height: 1.35rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.75 !important; width: 1.35rem !important; } body:has(.preferences-screen:not([hidden])) .app-nav-button:hover { background: rgba(255, 255, 255, 0.026) !important; color: rgba(248, 251, 255, 0.88) !important; transform: none !important; } body:has(.preferences-screen:not([hidden])) .app-nav-button.is-selected { background: radial-gradient(circle at 22% 22%, rgba(168, 85, 247, 0.155), transparent 60%), linear-gradient(135deg, rgba(65, 49, 119, 0.32), rgba(30, 24, 58, 0.30)) !important; border-color: rgba(181, 160, 246, 0.13) !important; color: rgba(250, 252, 255, 0.94) !important; font-weight: 560 !important; } body:has(.preferences-screen:not([hidden])) .app-nav-button.is-selected .p10eb-nav-icon { color: #a78bfa !important; } body:has(.preferences-screen:not([hidden])) .header-utility-bar { align-items: stretch !important; border-top: 1px solid rgba(214, 224, 244, 0.08) !important; display: grid !important; gap: 0.6rem !important; grid-column: auto !important; grid-row: auto !important; margin-top: auto !important; padding-top: 1rem !important; width: 100% !important; } body:has(.preferences-screen:not([hidden])) .header-utility-bar .header-mode-buttons, body:has(.preferences-screen:not([hidden])) .app-header > .practice-rail-progress, body:has(.preferences-screen:not([hidden])) .header-utility-bar .practice-rail-progress { display: none !important; } body:has(.preferences-screen:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.54) !important; justify-content: flex-start !important; padding: 0 0.2rem !important; } } .preferences-nav-button { margin-top: 0.38rem !important; opacity: 0.84; } .app-screen.card.preferences-screen, .preferences-screen { background: radial-gradient(ellipse at 18% 0%, rgba(124, 58, 237, 0.10), transparent 38%), radial-gradient(ellipse at 92% 12%, rgba(20, 184, 166, 0.08), transparent 42%), linear-gradient(145deg, rgba(10, 16, 28, 0.92), rgba(6, 10, 20, 0.98)) !important; border-color: rgba(148, 163, 184, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 28px 80px rgba(0, 0, 0, 0.18) !important; overflow: hidden; position: relative; } .preferences-screen::before { background: linear-gradient(112deg, rgba(255, 255, 255, 0.032), transparent 34%), repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 56px); content: ""; inset: 0; opacity: 0.42; pointer-events: none; position: absolute; } .preferences-screen > * { position: relative; z-index: 1; } .preferences-header { align-items: flex-start !important; border-bottom: 1px solid rgba(148, 163, 184, 0.10); margin-bottom: 1.15rem !important; padding-bottom: 1rem; } .preferences-header .screen-title { color: rgba(248, 250, 252, 0.96); font-size: clamp(2rem, 3vw, 3.2rem); letter-spacing: 0; line-height: 1.02; } .preferences-header .section-note { color: rgba(203, 213, 225, 0.68); max-width: 42rem; } .preferences-status-pill, .preference-chip { align-items: center; background: rgba(148, 163, 184, 0.10); border: 1px solid rgba(226, 232, 240, 0.12); border-radius: 999px; color: rgba(226, 232, 240, 0.72); display: inline-flex; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; min-height: 1.9rem; padding: 0.28rem 0.72rem; } .preferences-shell { display: grid; gap: 1.15rem; } .preferences-intro { align-items: center; background: radial-gradient(ellipse at 14% 28%, rgba(168, 85, 247, 0.24), transparent 42%), radial-gradient(ellipse at 84% 40%, rgba(45, 212, 191, 0.13), transparent 48%), rgba(15, 23, 42, 0.38); border: 1px solid rgba(226, 232, 240, 0.09); border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 70px rgba(0, 0, 0, 0.12); display: grid; gap: 1.15rem; grid-template-columns: auto minmax(0, 1fr); min-height: 8.2rem; padding: 1.35rem 1.5rem; } .preferences-orb { background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.78), transparent 14%), radial-gradient(circle at 52% 54%, rgba(168, 85, 247, 0.95), rgba(14, 165, 233, 0.56) 58%, rgba(20, 184, 166, 0.28)); border-radius: 28px 34px 26px 32px; box-shadow: 0 0 54px rgba(99, 102, 241, 0.30), 0 0 78px rgba(45, 212, 191, 0.11); height: 4.2rem; width: 4.2rem; } .preferences-intro .eyebrow { color: rgba(167, 139, 250, 0.90); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.10em; margin: 0 0 0.42rem; text-transform: uppercase; } .preferences-intro h3 { color: rgba(248, 250, 252, 0.96); font-size: clamp(1.45rem, 2vw, 2.05rem); line-height: 1.08; margin: 0; } .preferences-intro p:last-child { color: rgba(203, 213, 225, 0.70); line-height: 1.55; margin: 0.55rem 0 0; max-width: 48rem; } .preferences-groups { display: grid; gap: 0.95rem; } .preferences-group { background: radial-gradient(ellipse at 12% 0%, rgba(124, 58, 237, 0.055), transparent 44%), linear-gradient(180deg, rgba(21, 31, 52, 0.58), rgba(12, 20, 36, 0.46)); border: 1px solid rgba(196, 208, 230, 0.125); border-radius: 22px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 18px 46px rgba(0, 0, 0, 0.11); padding: 1.05rem; } .preferences-group-heading, .preferences-advanced > summary { align-items: flex-start; display: grid; gap: 0.8rem; grid-template-columns: 2.1rem minmax(0, 1fr); } .preferences-group-heading > span, .preferences-advanced > summary > span { color: rgba(148, 163, 184, 0.46); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; padding-top: 0.18rem; } .preferences-group h3 { color: rgba(248, 250, 252, 0.90); font-size: 1.04rem; font-weight: 720; line-height: 1.2; margin: 0; } .preferences-group p { color: rgba(203, 213, 225, 0.56); line-height: 1.45; margin: 0.25rem 0 0; } .preferences-list { display: grid; gap: 0.08rem; margin-top: 0.92rem; } .preference-row { align-items: center; border-radius: 16px; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-height: 3.55rem; padding: 0.72rem 0.82rem; transition: background 180ms ease, color 180ms ease; } .preference-row:hover, .preference-row:focus-within { background: rgba(255, 255, 255, 0.035); } .preference-row > span:first-child { display: grid; gap: 0.22rem; } .preference-row strong { color: rgba(241, 245, 249, 0.88); font-size: 0.94rem; font-weight: 680; } .preference-row small { color: rgba(203, 213, 225, 0.54); font-size: 0.78rem; line-height: 1.35; } .preference-row select { appearance: none; background: linear-gradient(180deg, rgba(30, 41, 59, 0.74), rgba(15, 23, 42, 0.78)), linear-gradient(90deg, transparent calc(100% - 2rem), rgba(148, 163, 184, 0.08) calc(100% - 2rem)); border: 1px solid rgba(226, 232, 240, 0.12); border-radius: 999px; color: rgba(241, 245, 249, 0.86); font: inherit; font-size: 0.82rem; min-width: 12.2rem; outline: none; padding: 0.62rem 2.15rem 0.62rem 0.9rem; } .preference-row select:focus-visible { border-color: rgba(167, 139, 250, 0.54); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); } .preference-row-toggle input[type="checkbox"] { appearance: none; background: rgba(30, 41, 59, 0.86); border: 1px solid rgba(226, 232, 240, 0.12); border-radius: 999px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.28); cursor: pointer; height: 1.75rem; margin: 0; position: relative; transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease; width: 3.25rem; } .preference-row-toggle input[type="checkbox"]::after { background: rgba(226, 232, 240, 0.86); border-radius: 50%; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30); content: ""; height: 1.26rem; left: 0.22rem; position: absolute; top: 0.2rem; transition: transform 180ms ease, background 180ms ease; width: 1.26rem; } .preference-row-toggle input[type="checkbox"]:checked { background: linear-gradient(135deg, rgba(124, 58, 237, 0.95), rgba(20, 184, 166, 0.78)); border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 0 26px rgba(124, 58, 237, 0.18), inset 0 1px 3px rgba(255, 255, 255, 0.08); } .preference-row-toggle input[type="checkbox"]:checked::after { background: white; transform: translateX(1.48rem); } .preference-row-toggle input[type="checkbox"]:focus-visible { outline: 3px solid rgba(167, 139, 250, 0.30); outline-offset: 3px; } .preference-row.is-placeholder { opacity: 0.72; } .preferences-advanced { background: rgba(15, 23, 42, 0.30); border-color: rgba(148, 163, 184, 0.085); } .preferences-advanced > summary { cursor: pointer; list-style: none; } .preferences-advanced > summary::-webkit-details-marker { display: none; } .preferences-advanced > summary::after { align-self: center; color: rgba(203, 213, 225, 0.48); content: "Open"; font-size: 0.76rem; grid-column: 2; justify-self: end; margin-top: -2rem; } .preferences-advanced[open] > summary::after { content: "Hide"; } @media (min-width: 1180px) { .preferences-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .preferences-advanced { grid-column: 1 / -1; } } @media (max-width: 760px) { .preferences-intro { grid-template-columns: 1fr; padding: 1.15rem; } .preferences-orb { height: 3rem; width: 3rem; } .preference-row { align-items: flex-start; grid-template-columns: 1fr; } .preference-row select { min-width: 0; width: 100%; } } /* P10JV drawer polish: notes history, calmer footer actions, and a softer queue navigator. */ body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer { background: radial-gradient(circle at 16% 4%, rgba(167, 139, 250, 0.16), transparent 38%), radial-gradient(circle at 88% 10%, rgba(45, 212, 191, 0.10), transparent 40%), linear-gradient(160deg, rgba(11, 18, 31, 0.972), rgba(5, 10, 20, 0.978)) !important; border-color: rgba(221, 230, 247, 0.085) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.060), 0 30px 92px rgba(0, 0, 0, 0.48), 0 0 62px rgba(124, 58, 237, 0.075) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-summary { color: rgba(226, 232, 240, 0.62) !important; line-height: 1.45 !important; margin-bottom: 0.18rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-panel { background: linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.022)) !important; border: 1px solid rgba(221, 230, 247, 0.072) !important; border-radius: 20px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.040) !important; display: grid !important; gap: 0.72rem !important; padding: 0.92rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-heading { display: grid !important; gap: 0.2rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-heading span { color: rgba(248, 250, 252, 0.88) !important; font-size: 0.88rem !important; font-weight: 720 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-heading small { color: rgba(203, 213, 225, 0.52) !important; font-size: 0.72rem !important; line-height: 1.35 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-list { display: grid !important; gap: 0.55rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-empty { background: rgba(2, 7, 18, 0.22) !important; border: 1px solid rgba(221, 230, 247, 0.060) !important; border-radius: 16px !important; color: rgba(226, 232, 240, 0.58) !important; font-size: 0.78rem !important; line-height: 1.45 !important; margin: 0 !important; padding: 0.8rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-item { border-left: 1px solid rgba(167, 139, 250, 0.32) !important; display: grid !important; gap: 0.22rem !important; padding: 0.18rem 0 0.18rem 0.72rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-item small { color: rgba(167, 139, 250, 0.68) !important; font-size: 0.66rem !important; font-weight: 760 !important; letter-spacing: 0.02em !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-item p { color: rgba(241, 245, 249, 0.78) !important; font-size: 0.8rem !important; line-height: 1.4 !important; margin: 0 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer { background: rgba(255, 255, 255, 0.026) !important; border-top: 1px solid rgba(221, 230, 247, 0.075) !important; gap: 0.58rem !important; padding-top: 0.9rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer button { border-radius: 999px !important; font-size: 0.78rem !important; font-weight: 720 !important; min-height: 2.35rem !important; padding: 0.55rem 0.9rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer .secondary-button { background: rgba(255, 255, 255, 0.058) !important; border-color: rgba(221, 230, 247, 0.105) !important; color: rgba(226, 232, 240, 0.76) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer-footer .primary-button { background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(20, 184, 166, 0.66)) !important; border-color: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 14px 34px rgba(79, 70, 229, 0.20) !important; color: rgba(255, 255, 255, 0.96) !important; } .practice-queue-drawer { backdrop-filter: blur(22px) saturate(125%) !important; border-radius: 24px !important; padding: 1.05rem !important; } .practice-queue-drawer-header { gap: 0.72rem !important; padding-bottom: 0.88rem !important; } .practice-queue-drawer-icon { background: radial-gradient(circle, rgba(167, 139, 250, 0.24), transparent 68%), rgba(255, 255, 255, 0.044) !important; border-color: rgba(221, 230, 247, 0.085) !important; box-shadow: 0 0 28px rgba(124, 58, 237, 0.12) !important; } .practice-queue-drawer-header small { color: rgba(167, 139, 250, 0.72) !important; font-size: 0.66rem !important; letter-spacing: 0.08em !important; } .practice-queue-drawer-header h3 { color: rgba(248, 250, 252, 0.94) !important; font-weight: 720 !important; } .practice-queue-drawer-summary { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.78rem !important; } .practice-queue-workspace-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.024)) !important; border-color: rgba(221, 230, 247, 0.072) !important; border-radius: 18px !important; gap: 0.68rem !important; padding: 0.72rem !important; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important; } .practice-queue-workspace-item:hover, .practice-queue-workspace-item:focus-visible { background: radial-gradient(circle at 10% 20%, rgba(167, 139, 250, 0.12), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.032)) !important; border-color: rgba(196, 181, 253, 0.18) !important; outline: none !important; transform: translateY(-1px) !important; } .practice-queue-workspace-item.is-current { background: radial-gradient(circle at 12% 18%, rgba(96, 165, 250, 0.16), transparent 52%), linear-gradient(180deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.032)) !important; border-color: rgba(167, 139, 250, 0.28) !important; } .practice-queue-workspace-copy strong { color: rgba(248, 250, 252, 0.90) !important; font-size: 0.84rem !important; font-weight: 720 !important; } .practice-queue-workspace-copy small { color: rgba(203, 213, 225, 0.54) !important; font-size: 0.7rem !important; } .practice-queue-workspace-actions button { border-radius: 999px !important; font-size: 0.72rem !important; min-height: 2rem !important; padding: 0.42rem 0.68rem !important; } /* P10JV maturation pass: brighter dark surfaces for Preferences, Notes, Queue, and System demo utilities. */ .preferences-group { background: radial-gradient(ellipse at 14% 0%, rgba(124, 58, 237, 0.07), transparent 46%), linear-gradient(180deg, rgba(28, 39, 64, 0.66), rgba(16, 26, 44, 0.54)) !important; border-color: rgba(205, 218, 240, 0.15) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.062), 0 20px 52px rgba(0, 0, 0, 0.14) !important; } .preferences-intro { background: radial-gradient(ellipse at 14% 28%, rgba(168, 85, 247, 0.27), transparent 42%), radial-gradient(ellipse at 84% 40%, rgba(45, 212, 191, 0.16), transparent 48%), rgba(21, 32, 54, 0.48) !important; border-color: rgba(226, 232, 240, 0.12) !important; } .preference-row:hover, .preference-row:focus-within { background: rgba(255, 255, 255, 0.050) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer { background: radial-gradient(circle at 16% 4%, rgba(167, 139, 250, 0.19), transparent 38%), radial-gradient(circle at 88% 10%, rgba(45, 212, 191, 0.13), transparent 40%), linear-gradient(160deg, rgba(17, 26, 44, 0.978), rgba(8, 15, 29, 0.982)) !important; border-color: rgba(221, 230, 247, 0.115) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid { max-height: calc(100vh - 11.4rem) !important; top: 7.7rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card { background: radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.055), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.086), rgba(255, 255, 255, 0.042)) !important; border-color: rgba(221, 230, 247, 0.115) !important; padding: 0.82rem 0.9rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #currentItemNotesBox.practice-tool-card .current-item-notes-header, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #currentItemReminderBox.practice-tool-card summary { color: rgba(248, 250, 252, 0.92) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #currentItemNotesBox.practice-tool-card .current-item-notes-header span, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #currentItemReminderBox.practice-tool-card > p { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.74rem !important; line-height: 1.35 !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { background: rgba(10, 18, 32, 0.62) !important; border-color: rgba(221, 230, 247, 0.15) !important; min-height: 6.6rem !important; height: 6.6rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) #currentItemReminderBox[open].practice-tool-card { min-height: 10.4rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-panel { background: radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.09), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.034)) !important; border-color: rgba(221, 230, 247, 0.105) !important; min-height: 11.5rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-list { max-height: min(18rem, 30vh) !important; overflow: auto !important; padding-right: 0.25rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-empty { align-items: center !important; display: flex !important; min-height: 7.2rem !important; } .practice-queue-drawer { background: radial-gradient(circle at 18% 6%, rgba(167, 139, 250, 0.21), transparent 40%), radial-gradient(circle at 90% 8%, rgba(45, 212, 191, 0.14), transparent 38%), linear-gradient(160deg, rgba(15, 24, 41, 0.972), rgba(7, 13, 25, 0.982)) !important; border-color: rgba(221, 230, 247, 0.095) !important; } .practice-queue-workspace-marker { box-shadow: 0 0 22px rgba(124, 58, 237, 0.13) !important; } .practice-queue-workspace-item.is-current .practice-queue-workspace-marker { background: linear-gradient(135deg, rgba(96, 165, 250, 0.88), rgba(167, 139, 250, 0.82)) !important; color: rgba(255, 255, 255, 0.98) !important; } .practice-queue-workspace-actions .secondary-button { background: rgba(255, 255, 255, 0.060) !important; border-color: rgba(221, 230, 247, 0.11) !important; color: rgba(241, 245, 249, 0.82) !important; } .practice-queue-workspace-actions .secondary-button:not(:disabled):hover { background: rgba(167, 139, 250, 0.14) !important; border-color: rgba(196, 181, 253, 0.22) !important; } .demo-history-panel { background: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.09), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(245, 247, 250, 0.84)) !important; } body:has(.preferences-screen:not([hidden])) .demo-history-panel { background: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.10), transparent 42%), linear-gradient(180deg, rgba(28, 39, 64, 0.62), rgba(16, 26, 44, 0.50)) !important; } /* P10JV report foundation: instructor-friendly weekly summary with share/export support. */ .teacher-report-panel { background: radial-gradient(circle at 9% 0%, rgba(124, 58, 237, 0.10), transparent 42%), linear-gradient(180deg, rgba(20, 31, 52, 0.66), rgba(10, 18, 32, 0.58)); border: 1px solid rgba(221, 230, 247, 0.10); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 54px rgba(0, 0, 0, 0.12); display: grid; gap: 0.95rem; margin: 1.45rem 0 1.15rem; padding: 1.05rem; position: relative; } .teacher-report-panel::before { background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.18), transparent); content: ""; height: 1px; left: 1rem; position: absolute; right: 1rem; top: -0.72rem; } .teacher-report-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; } .teacher-report-kicker { color: rgba(167, 139, 250, 0.68); display: inline-flex; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .teacher-report-header h3 { color: rgba(248, 250, 252, 0.94); font-size: 1.25rem; line-height: 1.15; margin: 0.25rem 0 0; } .teacher-report-header p { color: rgba(203, 213, 225, 0.62); line-height: 1.45; margin: 0.35rem 0 0; max-width: 46rem; } .teacher-report-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: flex-end; } .teacher-report-actions button { border-radius: 999px; font-size: 0.76rem; min-height: 2.28rem; padding: 0.5rem 0.86rem; } .teacher-report-summary { display: grid; gap: 0.7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .teacher-report-stat { background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.032)); border: 1px solid rgba(221, 230, 247, 0.09); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045); display: grid; gap: 0.2rem; padding: 0.78rem 0.82rem; } .teacher-report-stat strong { color: rgba(248, 250, 252, 0.94); font-size: 1.15rem; font-weight: 760; line-height: 1; } .teacher-report-stat span { color: rgba(203, 213, 225, 0.56); font-size: 0.72rem; } .teacher-report-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .teacher-report-section { background: linear-gradient(180deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.022)); border: 1px solid rgba(221, 230, 247, 0.072); border-radius: 20px; display: grid; gap: 0.7rem; min-height: 10rem; padding: 0.88rem; } .teacher-report-chart-section { min-height: 14rem; } .teacher-report-chart { align-self: stretch; } .teacher-report-chart .progress-donut-breakdown { gap: 0.7rem; grid-template-columns: minmax(6.6rem, 0.62fr) minmax(0, 1fr); } .teacher-report-chart .progress-donut-chart { min-width: 6.6rem; } .teacher-report-section h4 { color: rgba(241, 245, 249, 0.88); font-size: 0.88rem; line-height: 1.2; margin: 0; } .teacher-report-list { display: grid; gap: 0.5rem; max-height: 15rem; overflow: auto; padding-right: 0.18rem; } .teacher-report-row { background: rgba(2, 7, 18, 0.18); border: 1px solid rgba(221, 230, 247, 0.055); border-radius: 14px; display: grid; gap: 0.24rem; padding: 0.62rem 0.68rem; } .teacher-report-row span { color: rgba(226, 232, 240, 0.78); font-size: 0.8rem; line-height: 1.35; } .teacher-report-row strong { color: rgba(94, 234, 212, 0.82); font-size: 0.78rem; font-weight: 760; } .teacher-report-row small { color: rgba(167, 139, 250, 0.68); font-size: 0.66rem; font-weight: 760; } .teacher-report-row p, .teacher-report-empty { color: rgba(203, 213, 225, 0.58); font-size: 0.76rem; line-height: 1.4; margin: 0; } .teacher-report-share-status { color: rgba(203, 213, 225, 0.62); margin: 0; min-height: 1rem; } @media (max-width: 980px) { .teacher-report-summary, .teacher-report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .teacher-report-header { display: grid; } .teacher-report-actions { justify-content: flex-start; } .teacher-report-summary, .teacher-report-grid { grid-template-columns: 1fr; } } /* P10JV drawer and Progress polish: brighter trays, graphs-first Progress, and HTML report affordance. */ .progress-overview-panel { background: radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.14), transparent 42%), radial-gradient(circle at 86% 4%, rgba(45, 212, 191, 0.10), transparent 44%), linear-gradient(180deg, rgba(28, 40, 66, 0.74), rgba(13, 22, 39, 0.64)); border: 1px solid rgba(221, 230, 247, 0.13); border-radius: 26px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 24px 68px rgba(0, 0, 0, 0.16); display: grid; gap: 1.05rem; margin: 1rem 0; padding: 1.08rem; } .progress-overview-header { align-items: flex-start; display: flex; gap: 1rem; justify-content: space-between; } .progress-kicker { color: rgba(94, 234, 212, 0.72); display: inline-flex; font-size: 0.66rem; font-weight: 820; letter-spacing: 0.09em; text-transform: uppercase; } .progress-overview-header h3, .progress-log-section h3 { color: rgba(248, 250, 252, 0.94); font-size: 1.24rem; line-height: 1.15; margin: 0.25rem 0 0; } .progress-overview-header p, .progress-log-section p, .progress-visual-card p { color: rgba(203, 213, 225, 0.62); line-height: 1.45; margin: 0.3rem 0 0; } .progress-card-kicker { color: rgba(167, 139, 250, 0.68); display: inline-flex; font-size: 0.62rem; font-weight: 820; letter-spacing: 0.085em; margin-bottom: 0.22rem; text-transform: uppercase; } .progress-timeframe-control, .progress-window-pill { background: rgba(255, 255, 255, 0.065); border: 1px solid rgba(221, 230, 247, 0.105); border-radius: 999px; } .progress-timeframe-control { display: inline-flex; gap: 0.18rem; padding: 0.22rem; white-space: nowrap; } .progress-timeframe-control button { background: transparent; border: 0; border-radius: 999px; color: rgba(203, 213, 225, 0.64); cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 740; min-width: 3.1rem; padding: 0.34rem 0.58rem; transition: background 160ms ease, color 160ms ease; } .progress-timeframe-control button:hover { background: rgba(255, 255, 255, 0.065); color: rgba(248, 250, 252, 0.88); } .progress-timeframe-control button.is-active { background: radial-gradient(circle at 30% 20%, rgba(94, 234, 212, 0.18), transparent 58%), rgba(124, 58, 237, 0.22); color: rgba(248, 250, 252, 0.94); } .progress-window-pill { color: rgba(226, 232, 240, 0.76); font-size: 0.76rem; padding: 0.46rem 0.72rem; white-space: nowrap; } .progress-overview-stats { display: grid; gap: 0.72rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .progress-overview-stat, .progress-visual-card { background: linear-gradient(180deg, rgba(255, 255, 255, 0.080), rgba(255, 255, 255, 0.035)); border: 1px solid rgba(221, 230, 247, 0.095); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055); } .progress-overview-stat { display: grid; gap: 0.22rem; padding: 0.82rem 0.88rem; } .progress-overview-stat strong { color: rgba(248, 250, 252, 0.94); font-size: 1.14rem; line-height: 1; } .progress-overview-stat span { color: rgba(203, 213, 225, 0.58); font-size: 0.72rem; } .progress-visual-grid { display: grid; gap: 0.86rem; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .progress-visual-card { display: grid; gap: 0.78rem; padding: 0.94rem; } .progress-visual-card h4 { color: rgba(241, 245, 249, 0.90); font-size: 0.9rem; margin: 0; } .progress-trend-bars { align-items: end; display: grid; gap: 0.28rem; grid-template-columns: repeat(30, minmax(0, 1fr)); min-height: 8.4rem; } .progress-trend-bars span { background: rgba(148, 163, 184, 0.12); border-radius: 999px 999px 4px 4px; display: block; height: var(--bar-height, 6%); min-height: 0.34rem; transition: background 180ms ease, transform 180ms ease; } .progress-trend-bars span.has-practice { background: linear-gradient(180deg, rgba(94, 234, 212, 0.86), rgba(124, 58, 237, 0.72)); box-shadow: 0 0 18px rgba(45, 212, 191, 0.12); } .progress-trend-bars span:hover { transform: translateY(-2px); } .progress-breakdown-list, .progress-highlight-list { display: grid; gap: 0.52rem; } .progress-donut-breakdown { align-items: center; display: grid; gap: 0.82rem; grid-template-columns: minmax(6.9rem, 0.56fr) minmax(0, 1fr); } .progress-donut-chart { align-items: center; aspect-ratio: 1; background: var(--donut-gradient, rgba(148, 163, 184, 0.16)); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 32px rgba(45, 212, 191, 0.10); display: grid; justify-items: center; min-width: 6.9rem; padding: 0.86rem; position: relative; } .progress-donut-chart::after { background: radial-gradient(circle at 50% 22%, rgba(255, 255, 255, 0.055), transparent 46%), rgb(17, 28, 48); border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); content: ""; inset: 1.12rem; position: absolute; } .progress-donut-chart strong, .progress-donut-chart span { position: relative; z-index: 1; } .progress-donut-chart strong { color: rgba(248, 250, 252, 0.94); font-size: 0.84rem; font-weight: 780; } .progress-donut-chart span { color: rgba(203, 213, 225, 0.58); font-size: 0.68rem; margin-top: -1.5rem; } .progress-donut-legend { display: grid; gap: 0.34rem; min-width: 0; } .progress-donut-legend-item { align-items: center; background: transparent; border: 0; border-radius: 10px; display: grid; gap: 0.48rem; grid-template-columns: 0.62rem minmax(0, 1fr) auto; padding: 0.25rem 0.1rem; } .progress-donut-legend-item i { background: var(--legend-color, rgba(148, 163, 184, 0.6)); border-radius: 999px; height: 0.58rem; width: 0.58rem; } .progress-donut-legend-item span { color: rgba(226, 232, 240, 0.78); font-size: 0.74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .progress-donut-legend-item strong { color: rgba(203, 213, 225, 0.62); font-size: 0.7rem; font-weight: 680; } .progress-breakdown-row { background: rgba(2, 7, 18, 0.17); border: 1px solid rgba(221, 230, 247, 0.055); border-radius: 15px; display: grid; gap: 0.34rem; grid-template-columns: minmax(0, 1fr) auto; padding: 0.62rem 0.7rem; } .progress-breakdown-row span { color: rgba(226, 232, 240, 0.78); font-size: 0.78rem; } .progress-breakdown-row strong { color: rgba(94, 234, 212, 0.80); font-size: 0.76rem; } .progress-breakdown-row i { background: linear-gradient(90deg, rgba(124, 58, 237, 0.80), rgba(45, 212, 191, 0.72)); border-radius: 999px; display: block; grid-column: 1 / -1; height: 0.28rem; width: var(--progress-width, 3%); } .progress-highlight-item, .progress-empty-state { background: rgba(2, 7, 18, 0.18); border: 1px solid rgba(221, 230, 247, 0.055); border-radius: 15px; color: rgba(226, 232, 240, 0.72); font-size: 0.78rem; line-height: 1.4; margin: 0; padding: 0.68rem 0.72rem; } .progress-log-section { align-items: end; display: flex; justify-content: space-between; margin: 1.15rem 0 0.7rem; } body.practice-queue-workspace-open .practice-queue-drawer, .practice-queue-drawer { background: radial-gradient(circle at 16% 2%, rgba(167, 139, 250, 0.24), transparent 42%), radial-gradient(circle at 86% 8%, rgba(45, 212, 191, 0.16), transparent 40%), linear-gradient(160deg, rgba(24, 36, 60, 0.982), rgba(10, 18, 32, 0.986)) !important; border-color: rgba(221, 230, 247, 0.14) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 34px 100px rgba(0, 0, 0, 0.48), 0 0 70px rgba(45, 212, 191, 0.055) !important; } .practice-queue-workspace-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.074), rgba(255, 255, 255, 0.035)) !important; border-color: rgba(221, 230, 247, 0.105) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050) !important; } .practice-queue-workspace-item:hover, .practice-queue-workspace-item:focus-visible { background: radial-gradient(circle at 12% 10%, rgba(96, 165, 250, 0.16), transparent 48%), linear-gradient(180deg, rgba(255, 255, 255, 0.096), rgba(255, 255, 255, 0.045)) !important; border-color: rgba(196, 181, 253, 0.25) !important; } .practice-queue-workspace-item.is-current { background: radial-gradient(circle at 12% 18%, rgba(94, 234, 212, 0.16), transparent 50%), linear-gradient(180deg, rgba(124, 58, 237, 0.20), rgba(255, 255, 255, 0.048)) !important; border-color: rgba(167, 139, 250, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 34px rgba(124, 58, 237, 0.10) !important; } /* P10JV targeted drawer surfaces: exact queue + notes tray components only. */ body.practice-queue-workspace-open #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-drawer { background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.30), transparent 42%), radial-gradient(circle at 86% 10%, rgba(45, 212, 191, 0.20), transparent 40%), linear-gradient(160deg, rgba(34, 47, 76, 0.988), rgba(14, 24, 42, 0.992)) !important; border-color: rgba(226, 232, 240, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), 0 36px 100px rgba(0, 0, 0, 0.44), 0 0 90px rgba(45, 212, 191, 0.08) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList.practice-queue-workspace-list { gap: 0.72rem !important; padding: 0.08rem 0.12rem 0.32rem !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.14) !important; backdrop-filter: blur(18px) saturate(128%) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item:hover, body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item:focus-visible { background: radial-gradient(circle at 10% 16%, rgba(96, 165, 250, 0.22), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.155), rgba(255, 255, 255, 0.070)) !important; border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.095), 0 16px 34px rgba(0, 0, 0, 0.18), 0 0 32px rgba(96, 165, 250, 0.10) !important; transform: translateY(-1px) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item.is-current { background: radial-gradient(circle at 12% 18%, rgba(94, 234, 212, 0.22), transparent 50%), linear-gradient(180deg, rgba(139, 92, 246, 0.28), rgba(255, 255, 255, 0.075)) !important; border-color: rgba(167, 139, 250, 0.46) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 18px 44px rgba(76, 29, 149, 0.18), 0 0 44px rgba(124, 58, 237, 0.14) !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item.is-complete { opacity: 0.62 !important; } body.practice-queue-workspace-open #practiceQueueWorkspaceList .practice-queue-workspace-actions > button.secondary-button { background: rgba(255, 255, 255, 0.095) !important; border-color: rgba(226, 232, 240, 0.16) !important; color: rgba(241, 245, 249, 0.86) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace > .practice-notes-drawer { background: radial-gradient(circle at 16% 0%, rgba(167, 139, 250, 0.30), transparent 40%), radial-gradient(circle at 88% 8%, rgba(45, 212, 191, 0.20), transparent 42%), linear-gradient(160deg, rgba(35, 49, 78, 0.988), rgba(13, 23, 41, 0.992)) !important; border-color: rgba(226, 232, 240, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), 0 36px 104px rgba(0, 0, 0, 0.45), 0 0 84px rgba(124, 58, 237, 0.09) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-body { min-height: min(45rem, calc(100vh - 12rem)) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-grid { align-content: stretch !important; display: grid !important; gap: 0.85rem !important; grid-template-rows: auto auto minmax(18rem, 1fr) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open #practiceNotesWorkspace #currentItemReminderBox.practice-tool-card { background: radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.11), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.060)) !important; border-color: rgba(226, 232, 240, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.13) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes, body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemReminderNotes { background: rgba(22, 35, 58, 0.82) !important; border-color: rgba(226, 232, 240, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(15, 23, 42, 0.20) !important; color: rgba(248, 250, 252, 0.92) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes { min-height: clamp(13rem, 34vh, 22rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemReminderNotes { min-height: clamp(7rem, 18vh, 12rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes::placeholder, body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemReminderNotes::placeholder { color: rgba(203, 213, 225, 0.56) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .reminder-actions > button.secondary-button, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-footer > button { background: rgba(255, 255, 255, 0.095) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(241, 245, 249, 0.88) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-panel { background: radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.13), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.13) !important; min-height: clamp(18rem, 42vh, 30rem) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-list { max-height: clamp(14rem, 36vh, 25rem) !important; overflow: auto !important; padding-right: 0.32rem !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-item { background: rgba(2, 7, 18, 0.18) !important; border: 1px solid rgba(226, 232, 240, 0.08) !important; border-left-color: rgba(94, 234, 212, 0.38) !important; border-radius: 14px !important; padding: 0.64rem 0.72rem !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-empty { align-items: center !important; background: radial-gradient(circle at 16% 20%, rgba(167, 139, 250, 0.14), transparent 48%), rgba(2, 7, 18, 0.20) !important; border-color: rgba(226, 232, 240, 0.10) !important; color: rgba(226, 232, 240, 0.66) !important; display: flex !important; min-height: 12rem !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid { align-content: stretch !important; gap: 0.85rem !important; grid-template-rows: auto auto minmax(18rem, 1fr) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > #currentItemReminderBox.practice-tool-card { background: radial-gradient(ellipse at 14% 0%, rgba(255, 255, 255, 0.11), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.125), rgba(255, 255, 255, 0.060)) !important; border-color: rgba(226, 232, 240, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 24px rgba(0, 0, 0, 0.13) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemReminderNotes { background: rgba(22, 35, 58, 0.82) !important; border-color: rgba(226, 232, 240, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(15, 23, 42, 0.20) !important; color: rgba(248, 250, 252, 0.92) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes { min-height: clamp(13rem, 34vh, 22rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemReminderNotes { min-height: clamp(7rem, 18vh, 12rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes::placeholder, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemReminderNotes::placeholder { color: rgba(203, 213, 225, 0.56) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .reminder-actions > button.secondary-button { background: rgba(255, 255, 255, 0.095) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(241, 245, 249, 0.88) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid > .practice-notes-history-panel { background: radial-gradient(circle at 20% 0%, rgba(45, 212, 191, 0.13), transparent 44%), linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.13) !important; min-height: clamp(18rem, 42vh, 30rem) !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-list { max-height: clamp(14rem, 36vh, 25rem) !important; overflow: auto !important; padding-right: 0.32rem !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-item { background: rgba(2, 7, 18, 0.18) !important; border: 1px solid rgba(226, 232, 240, 0.08) !important; border-left-color: rgba(94, 234, 212, 0.38) !important; border-radius: 14px !important; padding: 0.64rem 0.72rem !important; } body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid .practice-notes-history-empty { align-items: center !important; background: radial-gradient(circle at 16% 20%, rgba(167, 139, 250, 0.14), transparent 48%), rgba(2, 7, 18, 0.20) !important; border-color: rgba(226, 232, 240, 0.10) !important; color: rgba(226, 232, 240, 0.66) !important; display: flex !important; min-height: 12rem !important; } .practice-queue-workspace-actions button { background: rgba(255, 255, 255, 0.075) !important; border-color: rgba(221, 230, 247, 0.13) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.040) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-drawer { background: radial-gradient(circle at 18% 2%, rgba(167, 139, 250, 0.23), transparent 40%), radial-gradient(circle at 88% 8%, rgba(45, 212, 191, 0.16), transparent 42%), linear-gradient(160deg, rgba(23, 35, 58, 0.984), rgba(9, 17, 31, 0.986)) !important; border-color: rgba(221, 230, 247, 0.145) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid > #currentItemReminderBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-panel { background: radial-gradient(ellipse at 18% 0%, rgba(255, 255, 255, 0.075), transparent 54%), linear-gradient(180deg, rgba(255, 255, 255, 0.105), rgba(255, 255, 255, 0.050)) !important; border-color: rgba(221, 230, 247, 0.145) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemReminderNotes { background: rgba(16, 27, 46, 0.74) !important; border-color: rgba(221, 230, 247, 0.19) !important; color: rgba(248, 250, 252, 0.88) !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-panel { min-height: 13.8rem !important; } body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-notes-history-list { max-height: min(22rem, 38vh) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes { height: clamp(10rem, 25vh, 14rem) !important; min-height: clamp(10rem, 25vh, 14rem) !important; } @media (max-height: 760px) { body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes, body.practice-notes-workspace-open #sessionPanel > .practice-notes-grid.practice-notes-drawer-grid textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-notes-grid textarea#currentItemNotes { height: 8.75rem !important; min-height: 8.75rem !important; } } .practice-queue-workspace[aria-hidden="true"], .practice-notes-workspace[aria-hidden="true"] { display: none !important; } body:has([data-screen-panel="log"]:not([hidden])) .practice-rail-progress { display: none !important; } body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav { align-items: center !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12rem, 0.9fr) minmax(0, 1.6fr) auto !important; min-height: 0 !important; padding: 1rem 1.15rem !important; } body:has([data-screen-panel="log"]:not([hidden])) .brand-support, body:has([data-screen-panel="log"]:not([hidden])) .dashboard-mode-buttons { display: none !important; } body:has([data-screen-panel="log"]:not([hidden])) .app-nav { align-items: center !important; display: flex !important; flex-wrap: nowrap !important; gap: 0.5rem !important; justify-content: center !important; min-width: 0 !important; overflow: visible !important; } body:has([data-screen-panel="log"]:not([hidden])) .app-nav-button { flex: 0 1 auto !important; min-width: 0 !important; white-space: nowrap !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .button-row { display: none !important; } body:has([data-screen-panel="log"]:not([hidden])) .teacher-report-panel { gap: 1rem !important; max-height: none !important; overflow: visible !important; } body:has([data-screen-panel="log"]:not([hidden])) .teacher-report-summary { display: grid !important; } body:has([data-screen-panel="log"]:not([hidden])) .teacher-report-grid { display: grid !important; } .preferences-group { background: radial-gradient(ellipse at 14% 0%, rgba(124, 58, 237, 0.09), transparent 46%), linear-gradient(180deg, rgba(35, 48, 76, 0.72), rgba(19, 31, 52, 0.60)) !important; border-color: rgba(221, 230, 247, 0.17) !important; transition: background 180ms ease, border-color 180ms ease, transform 180ms ease !important; } .preferences-group:hover, .preferences-group:focus-within { background: radial-gradient(ellipse at 14% 0%, rgba(124, 58, 237, 0.12), transparent 46%), linear-gradient(180deg, rgba(40, 55, 86, 0.76), rgba(22, 36, 60, 0.64)) !important; border-color: rgba(221, 230, 247, 0.22) !important; transform: translateY(-1px); } .preference-row:hover, .preference-row:focus-within { background: rgba(255, 255, 255, 0.070) !important; } @media (max-width: 980px) { .progress-overview-stats, .progress-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .progress-overview-header, .progress-log-section { display: grid; } .progress-overview-stats, .progress-visual-grid { grid-template-columns: 1fr; } .progress-donut-breakdown { grid-template-columns: 1fr; } .progress-donut-chart { justify-self: center; width: min(10rem, 70vw); } } /* P10JV experimental focus rotation: ambient guidance in the open hero space. */ body:has(.practice-dashboard:not([hidden])) .practice-focus-card .practice-focus-rotation { align-items: center !important; display: grid !important; gap: 0.72rem !important; justify-items: center !important; max-width: min(24rem, 38%) !important; opacity: 0 !important; pointer-events: none !important; position: absolute !important; right: clamp(2rem, 6vw, 5.6rem) !important; top: clamp(3.2rem, 5.8vw, 5.4rem) !important; transition: opacity 1400ms ease !important; z-index: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-card .practice-focus-rotation.is-active { opacity: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-orb { background: radial-gradient(circle, rgba(153, 246, 228, 0.20), rgba(125, 211, 252, 0.08) 42%, transparent 66%) !important; border-radius: 999px !important; box-shadow: 0 0 32px rgba(45, 212, 191, 0.12), 0 0 72px rgba(59, 130, 246, 0.08) !important; height: 2.35rem !important; opacity: 0.74 !important; position: relative !important; width: 2.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-orb::after { background: rgba(226, 232, 240, 0.38) !important; border-radius: 999px !important; content: "" !important; height: 0.38rem !important; inset: 50% auto auto 50% !important; position: absolute !important; transform: translate(-50%, -50%) !important; width: 0.38rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-cue { align-items: center !important; background: radial-gradient(circle at 0% 8%, rgba(251, 191, 36, 0.19), transparent 44%), linear-gradient(135deg, rgba(34, 22, 20, 0.86), rgba(5, 16, 24, 0.78)) !important; border: 1px solid rgba(245, 158, 11, 0.22) !important; border-radius: 22px !important; box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34), 0 0 52px rgba(146, 64, 14, 0.14), inset 0 1px 0 rgba(255, 237, 213, 0.08) !important; display: grid !important; gap: 0.34rem !important; justify-items: center !important; height: 10.8rem !important; min-height: 10.8rem !important; overflow: hidden !important; opacity: 0 !important; padding: 1.05rem 1.18rem !important; text-align: center !important; transform: translateY(0.26rem) !important; transition: opacity 420ms ease, transform 420ms ease !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-cue.is-visible { opacity: 1 !important; transform: translateY(0) !important; transition: opacity 480ms ease, transform 480ms ease !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-cue small { color: rgba(252, 211, 77, 0.86) !important; font-size: 0.82rem !important; font-weight: 760 !important; letter-spacing: 0.07em !important; line-height: 1 !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-text { color: rgba(255, 251, 235, 0.96) !important; align-items: center !important; display: grid !important; font-size: clamp(1.34rem, 2.05vw, 1.92rem) !important; font-weight: 760 !important; letter-spacing: 0 !important; line-height: 1.12 !important; min-height: 6.7rem !important; text-shadow: 0 0 28px rgba(125, 211, 252, 0.12) !important; } @media (max-width: 860px) { body:has(.practice-dashboard:not([hidden])) .practice-focus-card .practice-focus-rotation { display: none !important; } } @media (prefers-reduced-motion: reduce) { body:has(.practice-dashboard:not([hidden])) .practice-focus-rotation-cue { transition: opacity 1ms linear !important; transform: none !important; } } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .current-item-references-box .reference-box-header .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; } /* P10JV experimental break experience: calm ocean reset between practice items. */ .practice-break-experience { align-items: center; background: radial-gradient(ellipse at 50% 18%, rgba(45, 212, 191, 0.12), transparent 42%), radial-gradient(ellipse at 50% 100%, rgba(14, 165, 233, 0.16), transparent 56%), rgba(2, 6, 16, 0.92); color: rgba(241, 245, 249, 0.94); display: grid; inset: 0; justify-items: center; opacity: 0; overflow: hidden; padding: clamp(1.4rem, 4vw, 3rem); pointer-events: none; position: fixed; transition: opacity 360ms ease; z-index: 1200; } .practice-break-experience[hidden] { display: none !important; } .practice-break-experience.is-visible { opacity: 1; pointer-events: auto; } .practice-break-backdrop { inset: 0; overflow: hidden; position: absolute; } .practice-break-image { filter: saturate(0.78) brightness(0.55) contrast(1.08); height: 100%; inset: 0; object-fit: cover; opacity: 0.74; position: absolute; transform: scale(1.035); width: 100%; } .practice-break-media { filter: saturate(0.72) brightness(0.46) contrast(1.08) blur(0.2px); height: 100%; inset: 0; object-fit: cover; opacity: 0.18; position: absolute; transform: scale(1.04); width: 100%; } .practice-break-backdrop::before { background: linear-gradient(180deg, rgba(8, 13, 27, 0.20), rgba(8, 13, 27, 0.88)), radial-gradient(ellipse at 50% 38%, rgba(56, 189, 248, 0.12), transparent 52%); content: ""; inset: 0; position: absolute; } .practice-break-horizon { background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.34), rgba(94, 234, 212, 0.22), transparent); filter: blur(0.5px); height: 1px; left: 8%; opacity: 0.68; position: absolute; right: 8%; top: 42%; } .practice-break-moon { background: radial-gradient(circle, rgba(226, 232, 240, 0.72), rgba(125, 211, 252, 0.08) 58%, transparent 62%); border-radius: 999px; box-shadow: 0 0 58px rgba(125, 211, 252, 0.14); height: clamp(4rem, 10vw, 7rem); opacity: 0.32; position: absolute; right: 18%; top: 16%; width: clamp(4rem, 10vw, 7rem); } .practice-break-wave { background: radial-gradient(ellipse at 20% 50%, rgba(125, 211, 252, 0.20), transparent 36%), radial-gradient(ellipse at 54% 45%, rgba(94, 234, 212, 0.13), transparent 34%), radial-gradient(ellipse at 84% 48%, rgba(129, 140, 248, 0.11), transparent 32%); filter: blur(8px); height: 28vh; left: -12%; opacity: 0.58; position: absolute; right: -12%; transform: translate3d(0, 0, 0); } .practice-break-wave-a { animation: practiceBreakWaveDrift 14s ease-in-out infinite alternate; bottom: -3vh; } .practice-break-wave-b { animation: practiceBreakWaveDrift 18s ease-in-out infinite alternate-reverse; bottom: 6vh; opacity: 0.34; } .practice-break-wave-c { animation: practiceBreakWaveDrift 22s ease-in-out infinite alternate; bottom: 16vh; opacity: 0.24; } .practice-break-content { align-items: center; background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.055), transparent 64%); display: grid; gap: 0.64rem; justify-items: center; max-width: 34rem; position: relative; text-align: center; transform: translateY(0.5rem); transition: transform 420ms ease; z-index: 1; } .practice-break-experience.is-visible .practice-break-content { transform: translateY(0); } .practice-break-kicker { color: rgba(125, 211, 252, 0.68); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.16em; margin: 0 0 0.25rem; text-transform: uppercase; } .practice-break-content h2 { color: rgba(248, 250, 252, 0.98); font-size: clamp(2rem, 5vw, 4.4rem); font-weight: 720; letter-spacing: 0; line-height: 1; margin: 0; text-shadow: 0 0 48px rgba(125, 211, 252, 0.16); } .practice-break-content p { color: rgba(226, 232, 240, 0.78); font-size: clamp(1rem, 1.8vw, 1.24rem); line-height: 1.45; margin: 0; } .practice-break-content .practice-break-subtle { color: rgba(153, 246, 228, 0.60); } .practice-break-timer { align-items: center; color: rgba(241, 245, 249, 0.86); display: inline-grid; gap: 0.18rem; margin: 1rem 0 0.25rem; } .practice-break-timer span { font-size: 1.28rem; font-variant-numeric: tabular-nums; font-weight: 680; } .practice-break-timer small { color: rgba(203, 213, 225, 0.48); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; } .practice-break-image-credit { color: rgba(226, 232, 240, 0.48); font-size: 0.68rem; line-height: 1.35; max-width: min(100%, 30rem); } .practice-break-actions { display: flex; flex-wrap: wrap; gap: 0.76rem; justify-content: center; margin-top: 0.7rem; } .practice-break-actions button { border-radius: 999px; min-height: 2.75rem; padding: 0.68rem 1.15rem; } .practice-break-actions #resumePracticeFromBreakButton { background: linear-gradient(180deg, rgba(20, 184, 166, 0.88), rgba(14, 116, 144, 0.80)); border: 1px solid rgba(153, 246, 228, 0.24); box-shadow: 0 18px 46px rgba(20, 184, 166, 0.16); } .practice-break-actions #skipPracticeBreakButton { background: rgba(15, 23, 42, 0.54); border: 1px solid rgba(226, 232, 240, 0.14); color: rgba(226, 232, 240, 0.82); } @keyframes practiceBreakWaveDrift { from { transform: translate3d(-2%, 0, 0) scale(1.02); } to { transform: translate3d(2%, -1.5vh, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .practice-break-wave { animation: none !important; } } .practice-microbreak-panel { align-items: end; border-radius: inherit; color: rgba(248, 250, 252, 0.96); display: grid; inset: 0; opacity: 0; overflow: hidden; padding: clamp(1rem, 2vw, 1.55rem); pointer-events: none; position: absolute; transform: scale(0.995); transition: opacity 280ms ease, transform 320ms ease; z-index: 40; } .practice-microbreak-panel[hidden] { display: none !important; } .practice-microbreak-panel.is-visible { opacity: 1; pointer-events: auto; transform: scale(1); } .practice-microbreak-image, .practice-microbreak-scrim { inset: 0; position: absolute; } .practice-microbreak-image { filter: saturate(0.88) brightness(0.7) contrast(1.05); height: 100%; object-fit: cover; transform: scale(1.025); width: 100%; } .practice-microbreak-scrim { background: linear-gradient(90deg, rgba(2, 6, 23, 0.82), rgba(2, 6, 23, 0.34) 56%, rgba(2, 6, 23, 0.74)), linear-gradient(180deg, rgba(2, 6, 23, 0.14), rgba(2, 6, 23, 0.72)); } .practice-microbreak-copy { align-self: end; display: grid; gap: 0.52rem; max-width: min(100%, 34rem); position: relative; z-index: 1; } .practice-microbreak-kicker { color: rgba(94, 234, 212, 0.88); font-size: 0.72rem; font-weight: 860; letter-spacing: 0; margin: 0; text-transform: uppercase; } .practice-microbreak-copy h3 { color: #ffffff; font-size: 2.7rem; letter-spacing: 0; line-height: 1; margin: 0; text-shadow: 0 12px 36px rgba(0, 0, 0, 0.42); } .practice-microbreak-copy p { color: rgba(226, 232, 240, 0.84); font-size: 1rem; line-height: 1.42; margin: 0; } .practice-microbreak-next { color: rgba(204, 251, 241, 0.88) !important; font-weight: 720; } .practice-microbreak-meta { align-items: baseline; background: rgba(2, 8, 23, 0.5); border: 1px solid rgba(226, 232, 240, 0.16); border-radius: 999px; display: inline-flex; gap: 0.35rem; justify-self: start; padding: 0.42rem 0.7rem; } .practice-microbreak-meta span { font-size: 1.18rem; font-variant-numeric: tabular-nums; font-weight: 900; } .practice-microbreak-meta small, .practice-microbreak-credit { color: rgba(226, 232, 240, 0.58); font-size: 0.72rem; } .practice-microbreak-actions { display: flex; flex-wrap: wrap; gap: 0.58rem; margin-top: 0.28rem; } .practice-microbreak-actions button { border-radius: 999px; min-height: 2.35rem; padding: 0.52rem 0.9rem; } body.practice-microbreak-active .queue-start-now-button { opacity: 0.52; pointer-events: none; } .break-image-review-modal { align-items: start; background: radial-gradient(circle at 16% 12%, rgba(45, 212, 191, 0.16), transparent 24rem), radial-gradient(circle at 88% 10%, rgba(139, 92, 246, 0.16), transparent 26rem), rgba(2, 6, 23, 0.86); display: grid; inset: 0; justify-items: center; padding: clamp(0.35rem, 1vh, 0.75rem) clamp(0.75rem, 2vw, 1.25rem); position: fixed; z-index: 1300; } .break-image-review-modal[hidden] { display: none !important; } .break-image-review-modal .break-image-review-card { background: radial-gradient(circle at 18% 8%, rgba(20, 184, 166, 0.18), transparent 20rem), radial-gradient(circle at 84% 12%, rgba(124, 58, 237, 0.2), transparent 22rem), linear-gradient(145deg, rgba(15, 23, 42, 0.94), rgba(2, 8, 23, 0.97)); border: 1px solid rgba(226, 232, 240, 0.18); border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 0 1px rgba(94, 234, 212, 0.08), 0 30px 92px rgba(0, 0, 0, 0.5), 0 0 70px rgba(45, 212, 191, 0.12); color: rgba(248, 250, 252, 0.96); display: grid; gap: 0.65rem; max-height: calc(100vh - clamp(0.7rem, 2vh, 1.5rem)); max-width: min(94vw, 78rem); overflow: auto; padding: clamp(0.7rem, 1.2vw, 1rem); width: 100%; } .break-image-review-header { align-items: start; display: flex; gap: 1rem; justify-content: space-between; } .break-image-review-header h2 { color: #fff; font-size: 1.85rem; letter-spacing: 0; margin: 0.1rem 0 0.2rem; } .break-image-review-header p { color: rgba(203, 213, 225, 0.76); margin: 0; } .break-image-review-stage { background: rgba(2, 6, 23, 0.7); border: 1px solid rgba(148, 163, 184, 0.18); border-radius: 8px; display: grid; min-height: clamp(15rem, 42vh, 29rem); overflow: hidden; place-items: center; } .break-image-review-stage img { height: 100%; max-height: clamp(15rem, 42vh, 29rem); object-fit: contain; width: 100%; } .break-image-review-meta { display: grid; gap: 0.68rem; } .break-image-review-meta > strong { color: rgba(248, 250, 252, 0.96); font-size: 1.25rem; } .break-image-review-meta-grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(4, minmax(0, 1fr)); } .break-image-review-meta-grid div { background: rgba(15, 23, 42, 0.68); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 8px; display: grid; gap: 0.18rem; min-width: 0; padding: 0.62rem 0.72rem; } .break-image-review-meta-grid span { color: rgba(203, 213, 225, 0.68); font-size: 0.7rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; } .break-image-review-meta-grid strong { color: rgba(248, 250, 252, 0.94); font-size: 0.9rem; line-height: 1.28; overflow-wrap: anywhere; } .break-image-review-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; } .break-image-review-actions button { min-height: 2.4rem; } #breakImageReviewStatus { margin: 0; min-height: 1.1rem; } @media (max-width: 760px) { .practice-microbreak-panel { align-items: center; } .practice-microbreak-copy { max-width: 100%; } .practice-microbreak-copy h3 { font-size: 2rem; } .break-image-review-header, .break-image-review-actions { align-items: stretch; display: grid; } .break-image-review-meta-grid { grid-template-columns: 1fr; } } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header strong, body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-context-heading strong { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } /* P10HG terminal references icon selector correction. */ body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header strong, body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-context-heading strong { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; } /* P10HF final sidebar polish: calmer ambient modules, less oval glow emphasis. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.82rem !important; padding: 0 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { min-height: 4.34rem !important; padding-bottom: 0.48rem !important; padding-top: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 30px 24px 34px 26px !important; filter: blur(0.4px) !important; inset: -0.38rem -0.46rem -0.42rem -0.38rem !important; opacity: 0.68 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { height: 42% !important; inset: 15% 13% auto 18% !important; opacity: 0.16 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { gap: 0.7rem !important; grid-template-columns: 2.36rem minmax(0, 1fr) !important; padding-left: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 20% 26%, rgba(103, 232, 249, 0.24), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(168, 85, 247, 0.15), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 42px rgba(34, 211, 238, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { box-shadow: 0 0 52px rgba(34, 211, 238, 0.13), 0 14px 42px rgba(0, 0, 0, 0.09) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 2.18rem !important; width: 2.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 1.04rem !important; width: 1.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.98rem !important; font-weight: 700 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { gap: 0.7rem !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; padding-left: 0.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 20% 24%, rgba(254, 240, 138, 0.22), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(244, 114, 182, 0.13), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 46px rgba(251, 191, 36, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { height: 2.12rem !important; width: 2.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { font-size: 1.06rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { font-size: 0.71rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { color: rgba(255, 251, 235, 0.52) !important; min-height: 1.62rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { opacity: 0.76 !important; } /* P10HE sidebar identity pass: dissolve card edges into ambient rail modules. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.92rem !important; margin: auto 0 0 !important; padding: 0 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 38% 62% 54% 46% / 42% 36% 64% 58% !important; filter: blur(0.2px) !important; inset: -0.62rem -0.72rem -0.7rem -0.62rem !important; opacity: 0.82 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { border-radius: 999px !important; height: 52% !important; inset: 12% 8% auto 16% !important; opacity: 0.22 !important; transform: rotate(-8deg) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; cursor: pointer !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.5rem minmax(0, 1fr) !important; min-height: 4.5rem !important; padding: 0.54rem 0.34rem 0.54rem 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 18% 26%, rgba(103, 232, 249, 0.30), transparent 42%), radial-gradient(ellipse at 76% 30%, rgba(168, 85, 247, 0.20), transparent 48%), radial-gradient(ellipse at 48% 92%, rgba(45, 212, 191, 0.12), transparent 52%) !important; box-shadow: 0 0 58px rgba(34, 211, 238, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(110deg, rgba(224, 242, 254, 0.18), rgba(224, 242, 254, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { opacity: 1 !important; box-shadow: 0 0 70px rgba(34, 211, 238, 0.18), 0 18px 58px rgba(0, 0, 0, 0.12) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: conic-gradient(from -90deg, rgba(103, 232, 249, 0.96) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(5, 12, 26, 0.92) 56%, transparent 58%) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 28px rgba(34, 211, 238, 0.22) !important; height: 2.34rem !important; width: 2.34rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy { gap: 0.18rem !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { font-size: 0.52rem !important; letter-spacing: 0.145em !important; opacity: 0.72 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 253, 255, 0.96) !important; font-size: 1.03rem !important; font-weight: 690 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(203, 236, 255, 0.58) !important; font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 4.72rem !important; padding: 0.58rem 0.22rem 0.58rem 0.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 18% 22%, rgba(254, 240, 138, 0.28), transparent 42%), radial-gradient(ellipse at 78% 24%, rgba(244, 114, 182, 0.18), transparent 44%), radial-gradient(ellipse at 48% 94%, rgba(168, 85, 247, 0.13), transparent 54%) !important; box-shadow: 0 0 62px rgba(251, 191, 36, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { background: linear-gradient(108deg, rgba(254, 240, 138, 0.18), rgba(244, 114, 182, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: radial-gradient(circle, rgba(254, 240, 138, 0.28), transparent 64%), rgba(250, 204, 21, 0.075) !important; border: 0 !important; box-shadow: 0 0 32px rgba(250, 204, 21, 0.17) !important; height: 2.26rem !important; width: 2.26rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.96) !important; font-size: 1.13rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.73rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(255, 251, 235, 0.56) !important; min-height: 1.74rem !important; padding: 0 0.35rem !important; text-align: left !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:focus-visible { color: rgba(255, 251, 235, 0.78) !important; outline: none !important; text-shadow: 0 0 18px rgba(250, 204, 21, 0.16) !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { margin-top: 0.18rem !important; opacity: 0.82 !important; padding: 0 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.54) !important; min-height: 1.72rem !important; padding: 0 0.24rem !important; } /* P10HB sidebar-widget-only pass: ambient queue launcher and motivational streak module. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.78rem !important; margin-bottom: clamp(0.55rem, 1.5vh, 1rem) !important; margin-top: 0 !important; order: 2 !important; padding: 0 !important; position: relative !important; transform: translateY(-clamp(1.4rem, 5.5vh, 4.2rem)) !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { border-radius: inherit !important; content: "" !important; inset: 1px !important; opacity: 0.9 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%, rgba(255, 255, 255, 0.055) 76%, transparent) !important; content: "" !important; height: 1px !important; left: 1.1rem !important; opacity: 0.58 !important; pointer-events: none !important; position: absolute !important; right: 1.1rem !important; top: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 18% 12%, rgba(56, 189, 248, 0.34), transparent 44%), radial-gradient(ellipse at 95% 16%, rgba(167, 139, 250, 0.26), transparent 48%), radial-gradient(ellipse at 46% 122%, rgba(45, 212, 191, 0.12), transparent 56%), linear-gradient(150deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.012) 58%, rgba(8, 47, 73, 0.18)) !important; border: 1px solid rgba(125, 211, 252, 0.055) !important; border-radius: 30px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.058), inset 0 -28px 56px rgba(2, 6, 16, 0.16), 0 22px 58px rgba(0, 0, 0, 0.16), 0 0 52px rgba(14, 165, 233, 0.13) !important; cursor: pointer !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.55rem minmax(0, 1fr) !important; min-height: 5.35rem !important; order: 1 !important; padding: 0.82rem 0.88rem !important; text-align: left !important; transform: translateZ(0) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { border-color: rgba(125, 211, 252, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.070), inset 0 -28px 56px rgba(2, 6, 16, 0.15), 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 64px rgba(14, 165, 233, 0.18) !important; outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 18% 14%, rgba(186, 230, 253, 0.11), transparent 36%), linear-gradient(150deg, rgba(15, 23, 42, 0.12), rgba(3, 7, 18, 0.28)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { align-items: center !important; background: conic-gradient(from -90deg, rgba(34, 211, 238, 0.98) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(8, 13, 27, 0.98) 58%, transparent 59%) !important; border: 1px solid rgba(125, 211, 252, 0.11) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(14, 165, 233, 0.20) !important; display: inline-flex !important; height: 2.48rem !important; justify-content: center !important; width: 2.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring::after { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(224, 242, 254, 0.98) !important; font-size: 0 !important; line-height: 1 !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.12rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(186, 230, 253, 0.76) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 251, 255, 0.98) !important; font-size: 1.02rem !important; font-weight: 720 !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(226, 232, 240, 0.62) !important; font-size: 0.70rem !important; line-height: 1.28 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; background: radial-gradient(ellipse at 17% 10%, rgba(251, 191, 36, 0.30), transparent 44%), radial-gradient(ellipse at 92% 14%, rgba(244, 114, 182, 0.18), transparent 42%), radial-gradient(ellipse at 46% 118%, rgba(167, 139, 250, 0.18), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.16)) !important; border: 1px solid rgba(253, 224, 71, 0.045) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -28px 58px rgba(2, 6, 16, 0.13), 0 20px 56px rgba(0, 0, 0, 0.15), 0 0 58px rgba(250, 204, 21, 0.10) !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 5.75rem !important; order: 2 !important; padding: 0.86rem 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 18% 18%, rgba(254, 240, 138, 0.12), transparent 38%), linear-gradient(150deg, rgba(15, 23, 42, 0.08), rgba(3, 7, 18, 0.30)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { align-items: center !important; background: radial-gradient(circle, rgba(253, 224, 71, 0.26), transparent 62%), rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(253, 224, 71, 0.12) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(250, 204, 21, 0.16) !important; color: rgba(254, 240, 138, 0.98) !important; display: inline-flex !important; font-size: 1.18rem !important; height: 2.38rem !important; justify-content: center !important; width: 2.38rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.12rem !important; font-weight: 760 !important; line-height: 1.04 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(253, 230, 138, 0.78) !important; font-size: 0.76rem !important; line-height: 1.25 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(253, 224, 71, 0.075) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 10px 28px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 251, 235, 0.78) !important; font-size: 0.76rem !important; min-height: 2.18rem !important; order: 3 !important; } /* P10HA recorder-only fix: review actions stay on one row with compact trash. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.44rem !important; grid-template-columns: minmax(4.7rem, 1fr) minmax(3.7rem, 0.72fr) 2.42rem !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordElapsed, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordElapsed { grid-column: 1 / -1 !important; order: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-secondary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-secondary-row { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] :is(#quickRecordPlayButton, #quickRecordSaveButton):not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordPlayButton:not([hidden]) { display: inline-flex !important; min-height: 2.34rem !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordDeleteButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordDeleteButton:not([hidden]) { align-items: center !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; gap: 0 !important; height: 2.34rem !important; justify-content: center !important; justify-self: end !important; min-height: 2.34rem !important; min-width: 2.34rem !important; padding: 0 !important; width: 2.34rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordDeleteButton .p10go-trash-icon, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordDeleteButton .p10go-trash-icon { margin: 0 !important; } /* P10GX recorder-only fix: keep the complete control row visible across recorder states. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel { overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-body { overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-primary-row { align-items: end !important; display: grid !important; gap: 0.5rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel .quick-record-elapsed { grid-column: 1 / -1 !important; justify-self: start !important; min-width: 6.4rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="recording"] .quick-record-primary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="playback"] .quick-record-primary-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel :is(#quickRecordStartButton, #quickRecordStopButton, #quickRecordPlayButton, #quickRecordStopPlaybackButton, #quickRecordSaveButton, #quickRecordDeleteButton):not([hidden]) { align-items: center !important; display: inline-flex !important; gap: 0.32rem !important; justify-content: center !important; min-height: 2.42rem !important; min-width: 0 !important; opacity: 1 !important; visibility: visible !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel :is(#quickRecordPlayButton, #quickRecordDeleteButton):disabled:not([hidden]) { cursor: default !important; opacity: 0.42 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel #quickRecordDeleteButton:not([hidden]) { border-color: rgba(248, 113, 113, 0.18) !important; color: rgba(255, 226, 226, 0.9) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel #quickRecordDeleteButton:disabled:not([hidden]) { border-color: rgba(221, 230, 247, 0.10) !important; color: rgba(232, 237, 250, 0.64) !important; } .p10go-trash-icon { align-items: center !important; display: inline-flex !important; justify-content: center !important; } .p10go-trash-icon svg { fill: none !important; height: 0.96rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.75 !important; width: 0.96rem !important; } /* P10GW recorder bug fix: recorded state renders Play, Save, and Delete in the visible transport row. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.56rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordElapsed { grid-column: 1 / -1 !important; order: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready :is(#quickRecordPlayButton, #quickRecordSaveButton, #quickRecordDeleteButton, #quickRecordStopPlaybackButton):not([hidden]) { align-items: center !important; display: inline-flex !important; justify-content: center !important; min-height: 2.5rem !important; opacity: 1 !important; visibility: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStartButton, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStopButton { display: none !important; } /* P10GT isolated cleanup: stable recorder review controls and ambient sidebar identity. */ body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.66rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-secondary-row { align-items: center !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready #quickRecordPlayButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready #quickRecordSaveButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready #quickRecordDeleteButton:not([hidden]) { align-items: center !important; display: inline-flex !important; gap: 0.36rem !important; justify-content: center !important; min-height: 2.58rem !important; min-width: 0 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready #quickRecordElapsed { background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.10), transparent 54%), rgba(255, 255, 255, 0.050) !important; border: 1px solid rgba(226, 232, 240, 0.075) !important; border-radius: 999px !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { border: 1px solid rgba(255, 255, 255, 0.034) !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050), inset 0 -20px 46px rgba(2, 6, 16, 0.12), 0 18px 56px rgba(0, 0, 0, 0.14), 0 0 52px rgba(124, 58, 237, 0.060) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 18% 16%, rgba(34, 211, 238, 0.20), transparent 44%), radial-gradient(ellipse at 92% 16%, rgba(167, 139, 250, 0.22), transparent 44%), linear-gradient(150deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.012) 58%, rgba(14, 165, 233, 0.046)) !important; grid-template-columns: 2.6rem minmax(0, 1fr) !important; min-height: 5.1rem !important; padding: 0.76rem 0.8rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 2.35rem !important; width: 2.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { font-size: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy { gap: 0.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(125, 211, 252, 0.72) !important; font-size: 0.56rem !important; letter-spacing: 0.12em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.94rem !important; font-weight: 690 !important; line-height: 1.06 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(226, 232, 240, 0.58) !important; font-size: 0.70rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(ellipse at 18% 10%, rgba(251, 191, 36, 0.20), transparent 44%), radial-gradient(ellipse at 86% 18%, rgba(244, 114, 182, 0.13), transparent 42%), radial-gradient(ellipse at 50% 115%, rgba(139, 92, 246, 0.14), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.012) 58%, rgba(124, 58, 237, 0.044)) !important; min-height: 5.8rem !important; padding: 0.82rem 0.86rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { box-shadow: 0 0 28px rgba(250, 204, 21, 0.12) !important; font-size: 1.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.64) !important; font-size: 0.56rem !important; letter-spacing: 0.12em !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.02rem !important; font-weight: 700 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(253, 230, 138, 0.76) !important; font-size: 0.76rem !important; } /* P10GU bug fix: recorder review actions must survive older hidden utility rules; widgets become ambient launch/status modules. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.66rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-secondary-row { align-items: center !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready :is(#quickRecordPlayButton, #quickRecordSaveButton, #quickRecordDeleteButton):not([hidden]) { align-items: center !important; display: inline-flex !important; justify-content: center !important; min-height: 2.58rem !important; opacity: 1 !important; visibility: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStartButton, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStopButton { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(ellipse at 16% 12%, rgba(14, 165, 233, 0.30), transparent 42%), radial-gradient(ellipse at 88% 18%, rgba(168, 85, 247, 0.22), transparent 44%), radial-gradient(ellipse at 50% 112%, rgba(34, 211, 238, 0.12), transparent 54%), linear-gradient(150deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.010) 58%, rgba(15, 23, 42, 0.18)) !important; border-color: rgba(125, 211, 252, 0.10) !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -20px 42px rgba(2, 6, 16, 0.16), 0 16px 46px rgba(0, 0, 0, 0.13), 0 0 44px rgba(14, 165, 233, 0.09) !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; min-height: 4.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: radial-gradient(circle, rgba(14, 165, 233, 0.24), rgba(99, 102, 241, 0.11) 58%, transparent 60%) !important; border: 1px solid rgba(125, 211, 252, 0.16) !important; box-shadow: 0 0 30px rgba(14, 165, 233, 0.16) !important; height: 2.14rem !important; width: 2.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(186, 230, 253, 0.98) !important; font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.08rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.92rem !important; font-weight: 680 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(ellipse at 18% 10%, rgba(251, 191, 36, 0.24), transparent 44%), radial-gradient(ellipse at 88% 18%, rgba(244, 114, 182, 0.16), transparent 42%), radial-gradient(ellipse at 46% 116%, rgba(167, 139, 250, 0.17), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.15)) !important; border-color: rgba(253, 224, 71, 0.08) !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050), inset 0 -22px 50px rgba(2, 6, 16, 0.12), 0 16px 50px rgba(0, 0, 0, 0.13), 0 0 48px rgba(250, 204, 21, 0.075) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(ellipse at 18% 12%, rgba(168, 85, 247, 0.30), transparent 48%), radial-gradient(ellipse at 92% 18%, rgba(20, 184, 166, 0.14), transparent 44%), linear-gradient(152deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.016) 54%, rgba(59, 130, 246, 0.045)) !important; border-color: rgba(226, 232, 240, 0.040) !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.048), inset 0 -24px 54px rgba(2, 6, 16, 0.16), 0 24px 74px rgba(0, 0, 0, 0.18), 0 0 58px rgba(139, 92, 246, 0.070) !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.11), transparent 42%) !important; content: "" !important; inset: 1px !important; opacity: 0.46 !important; pointer-events: none !important; position: absolute !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { min-height: 6.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { min-height: 5.85rem !important; transform: scale(0.965) !important; transform-origin: center top !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-copy { position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-ring, body:has(.practice-dashboard:not([hidden])) .practice-rail-mini-icon { position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: stretch !important; grid-template-areas: "title title title" "bpm sound auto" !important; grid-template-columns: minmax(7.3rem, 1.12fr) minmax(6.2rem, 0.96fr) minmax(4.8rem, 0.76fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10ex-metro-auto { align-self: stretch !important; grid-area: auto !important; justify-content: center !important; justify-self: stretch !important; min-height: 2.78rem !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt { bottom: -2.35rem !important; left: 0.9rem !important; max-width: min(18rem, calc(100% - 1.8rem)) !important; pointer-events: auto !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt .runtime-default-action-text { max-width: 11rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .p10go-tool-icon, .p10go-trash-icon { align-items: center !important; display: inline-flex !important; flex: 0 0 auto !important; justify-content: center !important; } .p10go-tool-icon svg, .p10go-trash-icon svg { fill: none !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.85 !important; } .p10go-tool-icon svg { height: 1.02rem !important; width: 1.02rem !important; } .p10go-trash-icon svg { height: 0.95rem !important; width: 0.95rem !important; } body:has(.practice-dashboard:not([hidden])) #p03iTimerCard .p03i-timing-title, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-summary-main { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fy-reference-strip { padding-bottom: 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fy-reference-strip .p10eb-reference-shortcuts { align-items: center !important; gap: 0.58rem !important; padding-bottom: 0.16rem !important; } .practice-queue-drawer { border-radius: 28px !important; width: min(21.75rem, calc(100vw - 2rem)) !important; } /* P10GQ cleanup: lock metronome auto placement, clarify recorder review, soften sidebar/drawer, and make references scroll cleanly. */ body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top { align-items: stretch !important; grid-template-areas: "title title title" "bpm sound auto" !important; grid-template-columns: minmax(7.25rem, 1.08fr) minmax(6.25rem, 0.98fr) minmax(4.9rem, 0.76fr) !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top > #p03mAutoSound, body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard.p10ex-metronome-card .p10eu-metro-top > .p10ex-metro-auto { align-self: stretch !important; display: inline-flex !important; grid-area: auto !important; justify-content: center !important; justify-self: stretch !important; min-height: 2.78rem !important; position: relative !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) #p03iMetronomeCard .p03i-timing-title { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) { overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt { bottom: auto !important; left: 0.82rem !important; margin: 0 !important; max-width: min(19rem, calc(100% - 1.64rem)) !important; position: absolute !important; right: auto !important; top: calc(100% + 0.95rem) !important; transform: none !important; z-index: 30 !important; } body:has(.practice-dashboard:not([hidden])) :is(#p03iMetronomeCard, #p03iTimerCard) > .runtime-default-action-prompt[hidden] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-action-buttons { align-items: center !important; display: inline-flex !important; gap: 0.38rem !important; } body:has(.practice-dashboard:not([hidden])) .runtime-default-dismiss-button { min-height: 1.85rem !important; padding-inline: 0.62rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="recording"] { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 20px 64px rgba(127, 29, 29, 0.18) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="review"] .quick-record-summary-status, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="saved"] .quick-record-summary-status { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(134, 239, 172, 0.24) !important; color: rgba(187, 247, 208, 0.95) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-secondary-row { display: grid !important; gap: 0.55rem !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important; margin-top: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.is-review-ready .quick-record-secondary-row button { min-height: 2.34rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordPlayButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordSaveButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordDeleteButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordReplaceButton:not([hidden]) { display: inline-flex !important; } body:has(.practice-dashboard:not([hidden])) .p10fy-reference-strip { height: auto !important; max-height: 7.1rem !important; min-height: 5.2rem !important; overflow: hidden !important; padding-bottom: 0.58rem !important; } body:has(.practice-dashboard:not([hidden])) .p10fy-reference-strip #currentItemReferencesList { max-height: 4.25rem !important; overflow-y: auto !important; padding-bottom: 0.18rem !important; scrollbar-color: rgba(167, 139, 250, 0.42) transparent !important; scrollbar-width: thin !important; } body:has(.practice-dashboard:not([hidden])) .p10fy-reference-strip #currentItemReferencesList > * { min-height: 2rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(ellipse at 16% 10%, rgba(192, 132, 252, 0.34), transparent 46%), radial-gradient(ellipse at 86% 18%, rgba(45, 212, 191, 0.16), transparent 42%), radial-gradient(ellipse at 55% 115%, rgba(34, 197, 94, 0.10), transparent 52%), linear-gradient(150deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.018) 56%, rgba(99, 102, 241, 0.052)) !important; border-color: rgba(226, 232, 240, 0.034) !important; border-radius: 30px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -26px 58px rgba(2, 6, 16, 0.15), 0 24px 72px rgba(0, 0, 0, 0.16), 0 0 64px rgba(139, 92, 246, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: conic-gradient(from -90deg, rgba(167, 139, 250, 0.98) calc(var(--practice-rail-percent, 0) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(15, 23, 42, 0.96) 57%, transparent 58%) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 0 28px rgba(167, 139, 250, 0.16) !important; } .practice-queue-drawer { background: radial-gradient(circle at 16% 4%, rgba(167, 139, 250, 0.20), transparent 38%), radial-gradient(circle at 92% 10%, rgba(45, 212, 191, 0.10), transparent 36%), linear-gradient(160deg, rgba(10, 17, 29, 0.97), rgba(5, 10, 20, 0.965)) !important; border-color: rgba(226, 232, 240, 0.055) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 28px 86px rgba(0, 0, 0, 0.42), 0 0 52px rgba(139, 92, 246, 0.075) !important; width: min(20.75rem, calc(100vw - 2rem)) !important; max-height: min(39rem, calc(100vh - 2rem)) !important; overflow: hidden !important; } .practice-queue-drawer-header { align-items: center !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; } .practice-queue-drawer-icon { align-items: center !important; background: rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(196, 181, 253, 0.18) !important; border-radius: 16px !important; color: rgba(216, 180, 254, 0.96) !important; display: inline-flex !important; height: 2.25rem !important; justify-content: center !important; width: 2.25rem !important; } .practice-queue-drawer-icon svg { fill: none !important; height: 1.05rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.8 !important; width: 1.05rem !important; } .practice-queue-workspace-item { background: radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.06), transparent 42%), rgba(255, 255, 255, 0.038) !important; border-color: rgba(226, 232, 240, 0.055) !important; border-radius: 20px !important; cursor: pointer !important; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease !important; } .practice-queue-workspace-list { max-height: min(27rem, calc(100vh - 14rem)) !important; overflow-y: auto !important; padding-right: 0.12rem !important; scrollbar-color: rgba(167, 139, 250, 0.42) transparent !important; scrollbar-width: thin !important; } .practice-queue-workspace-item:hover, .practice-queue-workspace-item:focus-visible { background: radial-gradient(circle at 16% 12%, rgba(167, 139, 250, 0.16), transparent 46%), rgba(255, 255, 255, 0.055) !important; border-color: rgba(196, 181, 253, 0.20) !important; outline: none !important; transform: translateY(-1px) !important; } .practice-queue-workspace-item.is-current { background: radial-gradient(circle at 18% 14%, rgba(167, 139, 250, 0.23), transparent 48%), rgba(139, 92, 246, 0.12) !important; border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: 0 0 32px rgba(139, 92, 246, 0.12) !important; } /* P10GS polish: recorder review transport and ambient sidebar modules. */ body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.66rem !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row > button[hidden], body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-secondary-row > button[hidden] { display: none !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="ready"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="recording"] .quick-record-primary-row { grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="review"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="saved"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel[data-record-state="playback"] .quick-record-primary-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-elapsed { justify-self: center !important; min-width: 6.2rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-primary-row button, body:has(.practice-dashboard:not([hidden])) #quickRecordPanel .quick-record-secondary-row button { align-items: center !important; border-radius: 999px !important; justify-content: center !important; min-height: 2.58rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip .quick-record-secondary-row { display: grid !important; gap: 0.62rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-unsaved-clip .quick-record-secondary-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordPlayButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordSaveButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordDeleteButton:not([hidden]) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.16) !important; gap: 0.34rem !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordSaveButton:not([hidden]) { background: linear-gradient(180deg, rgba(34, 197, 94, 0.28), rgba(21, 128, 61, 0.20)) !important; border-color: rgba(134, 239, 172, 0.28) !important; color: rgba(240, 253, 244, 0.98) !important; } body:has(.practice-dashboard:not([hidden])) #quickRecordPanel.has-clip #quickRecordDeleteButton:not([hidden]) { background: linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(127, 29, 29, 0.16)) !important; border-color: rgba(252, 165, 165, 0.24) !important; } .p10gs-save-icon { align-items: center !important; display: inline-flex !important; justify-content: center !important; } .p10gs-save-icon svg { fill: none !important; height: 0.94rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.8 !important; width: 0.94rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.82rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { order: 1 !important; background: radial-gradient(ellipse at 18% 8%, rgba(56, 189, 248, 0.22), transparent 44%), radial-gradient(ellipse at 88% 18%, rgba(167, 139, 250, 0.24), transparent 46%), linear-gradient(150deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.018) 58%, rgba(14, 165, 233, 0.058)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { order: 2 !important; background: radial-gradient(ellipse at 20% 12%, rgba(250, 204, 21, 0.20), transparent 42%), radial-gradient(ellipse at 86% 16%, rgba(236, 72, 153, 0.14), transparent 42%), radial-gradient(ellipse at 50% 110%, rgba(167, 139, 250, 0.16), transparent 56%), linear-gradient(154deg, rgba(255, 255, 255, 0.066), rgba(255, 255, 255, 0.016) 56%, rgba(124, 58, 237, 0.056)) !important; min-height: 6.05rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: radial-gradient(circle, rgba(250, 204, 21, 0.24), transparent 62%), rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(250, 204, 21, 0.14) !important; border-radius: 999px !important; color: rgba(254, 240, 138, 0.95) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(253, 224, 71, 0.74) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { font-size: 1.08rem !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(248, 250, 252, 0.72) !important; font-size: 0.78rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { order: 3 !important; } /* P10GU final terminal overrides: keep recorder review actions visible and make sidebar modules ambient, not card-like. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.66rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready .quick-record-secondary-row { align-items: center !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready :is(#quickRecordPlayButton, #quickRecordSaveButton, #quickRecordDeleteButton):not([hidden]) { align-items: center !important; display: inline-flex !important; justify-content: center !important; min-height: 2.58rem !important; opacity: 1 !important; visibility: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStartButton, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel.is-review-ready #quickRecordStopButton { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { background: radial-gradient(ellipse at 16% 12%, rgba(14, 165, 233, 0.30), transparent 42%), radial-gradient(ellipse at 88% 18%, rgba(168, 85, 247, 0.22), transparent 44%), radial-gradient(ellipse at 50% 112%, rgba(34, 211, 238, 0.12), transparent 54%), linear-gradient(150deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.010) 58%, rgba(15, 23, 42, 0.18)) !important; border-color: rgba(125, 211, 252, 0.10) !important; border-radius: 26px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -20px 42px rgba(2, 6, 16, 0.16), 0 16px 46px rgba(0, 0, 0, 0.13), 0 0 44px rgba(14, 165, 233, 0.09) !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; min-height: 4.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: radial-gradient(circle, rgba(14, 165, 233, 0.24), rgba(99, 102, 241, 0.11) 58%, transparent 60%) !important; border: 1px solid rgba(125, 211, 252, 0.16) !important; box-shadow: 0 0 30px rgba(14, 165, 233, 0.16) !important; height: 2.14rem !important; width: 2.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(186, 230, 253, 0.98) !important; font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.08rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.08rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.92rem !important; font-weight: 680 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: radial-gradient(ellipse at 18% 10%, rgba(251, 191, 36, 0.24), transparent 44%), radial-gradient(ellipse at 88% 18%, rgba(244, 114, 182, 0.16), transparent 42%), radial-gradient(ellipse at 46% 116%, rgba(167, 139, 250, 0.17), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.048), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.15)) !important; border-color: rgba(253, 224, 71, 0.08) !important; border-radius: 28px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.050), inset 0 -22px 50px rgba(2, 6, 16, 0.12), 0 16px 50px rgba(0, 0, 0, 0.13), 0 0 48px rgba(250, 204, 21, 0.075) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.04rem !important; } /* P10HA true terminal recorder-only fix: review actions stay on one visible row. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-primary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-primary-row { align-items: center !important; display: grid !important; gap: 0.44rem !important; grid-template-columns: minmax(4.7rem, 1fr) minmax(3.7rem, 0.72fr) 2.42rem !important; overflow: visible !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordElapsed, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordElapsed { grid-column: 1 / -1 !important; order: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] .quick-record-secondary-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] .quick-record-secondary-row { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] :is(#quickRecordPlayButton, #quickRecordSaveButton):not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordPlayButton:not([hidden]) { display: inline-flex !important; min-height: 2.34rem !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="review"] #quickRecordDeleteButton:not([hidden]), body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player #quickRecordPanel[data-record-state="saved"] #quickRecordDeleteButton:not([hidden]) { align-items: center !important; aspect-ratio: 1 / 1 !important; display: inline-flex !important; gap: 0 !important; height: 2.34rem !important; justify-content: center !important; justify-self: end !important; min-height: 2.34rem !important; min-width: 2.34rem !important; padding: 0 !important; width: 2.34rem !important; } /* P10HB terminal sidebar-widget-only pass: ambient queue launcher and motivational streak module. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.78rem !important; margin: 0 0 clamp(0.55rem, 1.5vh, 1rem) !important; order: 2 !important; padding: 0 !important; position: relative !important; transform: translateY(-clamp(1.4rem, 5.5vh, 4.2rem)) !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { border-radius: inherit !important; content: "" !important; inset: 1px !important; opacity: 0.9 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(120deg, rgba(255, 255, 255, 0.16), transparent 34%, rgba(255, 255, 255, 0.055) 76%, transparent) !important; content: "" !important; height: 1px !important; left: 1.1rem !important; opacity: 0.58 !important; pointer-events: none !important; position: absolute !important; right: 1.1rem !important; top: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 18% 12%, rgba(56, 189, 248, 0.34), transparent 44%), radial-gradient(ellipse at 95% 16%, rgba(167, 139, 250, 0.26), transparent 48%), radial-gradient(ellipse at 46% 122%, rgba(45, 212, 191, 0.12), transparent 56%), linear-gradient(150deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.012) 58%, rgba(8, 47, 73, 0.18)) !important; border: 1px solid rgba(125, 211, 252, 0.055) !important; border-radius: 30px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.058), inset 0 -28px 56px rgba(2, 6, 16, 0.16), 0 22px 58px rgba(0, 0, 0, 0.16), 0 0 52px rgba(14, 165, 233, 0.13) !important; cursor: pointer !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.55rem minmax(0, 1fr) !important; min-height: 5.35rem !important; order: 1 !important; padding: 0.82rem 0.88rem !important; text-align: left !important; transform: translateZ(0) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { border-color: rgba(125, 211, 252, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.070), inset 0 -28px 56px rgba(2, 6, 16, 0.15), 0 24px 64px rgba(0, 0, 0, 0.18), 0 0 64px rgba(14, 165, 233, 0.18) !important; outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 18% 14%, rgba(186, 230, 253, 0.11), transparent 36%), linear-gradient(150deg, rgba(15, 23, 42, 0.12), rgba(3, 7, 18, 0.28)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { align-items: center !important; background: conic-gradient(from -90deg, rgba(34, 211, 238, 0.98) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(8, 13, 27, 0.98) 58%, transparent 59%) !important; border: 1px solid rgba(125, 211, 252, 0.11) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(14, 165, 233, 0.20) !important; display: inline-flex !important; height: 2.48rem !important; justify-content: center !important; width: 2.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring::after { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(224, 242, 254, 0.98) !important; font-size: 0 !important; line-height: 1 !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { fill: none !important; height: 1.12rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(186, 230, 253, 0.76) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 251, 255, 0.98) !important; font-size: 1.02rem !important; font-weight: 720 !important; line-height: 1.05 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(226, 232, 240, 0.62) !important; font-size: 0.70rem !important; line-height: 1.28 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; background: radial-gradient(ellipse at 17% 10%, rgba(251, 191, 36, 0.30), transparent 44%), radial-gradient(ellipse at 92% 14%, rgba(244, 114, 182, 0.18), transparent 42%), radial-gradient(ellipse at 46% 118%, rgba(167, 139, 250, 0.18), transparent 58%), linear-gradient(154deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.010) 58%, rgba(76, 29, 149, 0.16)) !important; border: 1px solid rgba(253, 224, 71, 0.045) !important; border-radius: 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), inset 0 -28px 58px rgba(2, 6, 16, 0.13), 0 20px 56px rgba(0, 0, 0, 0.15), 0 0 58px rgba(250, 204, 21, 0.10) !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 5.75rem !important; order: 2 !important; padding: 0.86rem 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 18% 18%, rgba(254, 240, 138, 0.12), transparent 38%), linear-gradient(150deg, rgba(15, 23, 42, 0.08), rgba(3, 7, 18, 0.30)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { align-items: center !important; background: radial-gradient(circle, rgba(253, 224, 71, 0.26), transparent 62%), rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(253, 224, 71, 0.12) !important; border-radius: 999px !important; box-shadow: 0 0 34px rgba(250, 204, 21, 0.16) !important; color: rgba(254, 240, 138, 0.98) !important; display: inline-flex !important; font-size: 1.18rem !important; height: 2.38rem !important; justify-content: center !important; width: 2.38rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.56rem !important; font-weight: 780 !important; letter-spacing: 0.13em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.12rem !important; font-weight: 760 !important; line-height: 1.04 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(253, 230, 138, 0.78) !important; font-size: 0.76rem !important; line-height: 1.25 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: linear-gradient(180deg, rgba(255, 255, 255, 0.050), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(253, 224, 71, 0.075) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.052), 0 10px 28px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 251, 235, 0.78) !important; font-size: 0.76rem !important; min-height: 2.18rem !important; order: 3 !important; } /* P10HD final sidebar-only correction: true floating widgets plus visible build/update footer. */ body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav { --rail-widget-glow: 0 24px 70px rgba(0, 0, 0, 0.22); } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { align-self: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.72rem !important; margin: auto 0 0 !important; order: 2 !important; padding: 0 0.05rem !important; position: relative !important; transform: none !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { backdrop-filter: blur(18px) saturate(1.18) !important; border: 0 !important; isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { border-radius: inherit !important; content: "" !important; inset: 0 !important; opacity: 1 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-mini::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: radial-gradient(ellipse at 28% 0%, rgba(255, 255, 255, 0.34), transparent 38%), linear-gradient(115deg, rgba(255, 255, 255, 0.16), transparent 30%, rgba(255, 255, 255, 0.06) 72%, transparent) !important; content: "" !important; height: 100% !important; inset: 0 !important; opacity: 0.42 !important; pointer-events: none !important; position: absolute !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; background: radial-gradient(ellipse at 8% 6%, rgba(103, 232, 249, 0.38), transparent 38%), radial-gradient(ellipse at 104% 18%, rgba(168, 85, 247, 0.32), transparent 46%), radial-gradient(ellipse at 50% 122%, rgba(45, 212, 191, 0.18), transparent 58%), linear-gradient(145deg, rgba(10, 24, 45, 0.54), rgba(7, 12, 25, 0.18) 62%, rgba(17, 24, 39, 0.42)) !important; border-radius: 34px 22px 32px 24px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), inset 0 -30px 54px rgba(2, 6, 23, 0.18), var(--rail-widget-glow), 0 0 62px rgba(34, 211, 238, 0.18) !important; cursor: pointer !important; display: grid !important; gap: 0.74rem !important; grid-template-columns: 2.78rem minmax(0, 1fr) !important; justify-self: stretch !important; min-height: 5rem !important; order: 1 !important; padding: 0.8rem 0.9rem 0.82rem !important; text-align: left !important; transform: translateX(0.18rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -30px 54px rgba(2, 6, 23, 0.16), 0 26px 76px rgba(0, 0, 0, 0.24), 0 0 78px rgba(34, 211, 238, 0.25) !important; outline: none !important; transform: translateX(0.18rem) translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(circle at 17% 24%, rgba(224, 242, 254, 0.14), transparent 36%), radial-gradient(circle at 82% 74%, rgba(59, 130, 246, 0.10), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.010) 66%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { align-items: center !important; background: conic-gradient(from -90deg, rgba(103, 232, 249, 0.98) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.12) 0), radial-gradient(circle, rgba(6, 15, 31, 0.98) 57%, transparent 58%) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 32px rgba(34, 211, 238, 0.24) !important; display: inline-flex !important; height: 2.5rem !important; justify-content: center !important; width: 2.5rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core { color: rgba(224, 242, 254, 0.98) !important; font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 1.14rem !important; width: 1.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { font-size: 0.54rem !important; font-weight: 760 !important; letter-spacing: 0.14em !important; opacity: 0.86 !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small { color: rgba(186, 230, 253, 0.78) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(250, 253, 255, 0.98) !important; font-size: 1.03rem !important; font-weight: 720 !important; line-height: 1.02 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(219, 234, 254, 0.64) !important; font-size: 0.69rem !important; line-height: 1.22 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; background: radial-gradient(ellipse at 12% 4%, rgba(254, 240, 138, 0.36), transparent 40%), radial-gradient(ellipse at 98% 14%, rgba(244, 114, 182, 0.24), transparent 42%), radial-gradient(ellipse at 48% 116%, rgba(168, 85, 247, 0.20), transparent 58%), linear-gradient(150deg, rgba(42, 26, 49, 0.44), rgba(20, 12, 31, 0.18) 62%, rgba(69, 26, 3, 0.22)) !important; border: 0 !important; border-radius: 24px 34px 24px 32px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), inset 0 -28px 54px rgba(17, 12, 28, 0.18), var(--rail-widget-glow), 0 0 66px rgba(251, 191, 36, 0.16) !important; display: grid !important; gap: 0.76rem !important; grid-template-columns: 2.52rem minmax(0, 1fr) !important; justify-self: stretch !important; min-height: 5.25rem !important; order: 2 !important; padding: 0.84rem 0.92rem !important; transform: translateX(-0.12rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(circle at 22% 18%, rgba(254, 240, 138, 0.18), transparent 36%), radial-gradient(circle at 82% 80%, rgba(244, 114, 182, 0.10), transparent 34%), linear-gradient(145deg, rgba(255, 255, 255, 0.072), rgba(255, 255, 255, 0.010) 66%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { align-items: center !important; background: radial-gradient(circle, rgba(254, 240, 138, 0.35), transparent 62%), rgba(250, 204, 21, 0.10) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 34px rgba(250, 204, 21, 0.20) !important; color: rgba(254, 240, 138, 0.98) !important; display: inline-flex !important; font-size: 1.24rem !important; height: 2.42rem !important; justify-content: center !important; width: 2.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { color: rgba(254, 240, 138, 0.70) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.98) !important; font-size: 1.13rem !important; font-weight: 760 !important; line-height: 1.02 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.76) !important; font-size: 0.74rem !important; line-height: 1.2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { align-items: center !important; align-self: center !important; background: rgba(255, 255, 255, 0.040) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 34px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 251, 235, 0.76) !important; display: inline-flex !important; font-size: 0.74rem !important; justify-content: center !important; min-height: 2rem !important; order: 3 !important; padding: 0 1rem !important; width: calc(100% - 1.4rem) !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { align-items: stretch !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.42rem !important; margin-top: 0.4rem !important; order: 3 !important; padding: 0 0.22rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar .dashboard-mode-buttons, body:has(.practice-dashboard:not([hidden])) .header-utility-bar .header-mode-buttons { display: none !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { align-items: center !important; background: radial-gradient(ellipse at 12% 0%, rgba(148, 163, 184, 0.12), transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 12px 32px rgba(0, 0, 0, 0.10) !important; color: rgba(226, 232, 240, 0.68) !important; display: grid !important; font-size: 0.66rem !important; gap: 0.24rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 2.1rem !important; padding: 0.36rem 0.62rem !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaVersionLabel { color: rgba(241, 245, 249, 0.76) !important; font-size: 0.66rem !important; font-weight: 720 !important; letter-spacing: 0.02em !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateMessage { align-items: center !important; color: rgba(187, 247, 208, 0.66) !important; display: inline-flex !important; font-size: 0.64rem !important; gap: 0.28rem !important; justify-content: flex-end !important; opacity: 1 !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateMessage::before { background: rgba(187, 247, 208, 0.82) !important; border-radius: 999px !important; box-shadow: 0 0 10px rgba(34, 197, 94, 0.26) !important; content: "" !important; display: inline-block !important; height: 0.38rem !important; width: 0.38rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaReloadButton { display: none !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar .pwa-update-status.update-available #pwaReloadButton, body:has(.practice-dashboard:not([hidden])) .header-utility-bar .pwa-update-status.update-error #pwaReloadButton { display: inline-flex !important; grid-column: 1 / -1 !important; justify-self: stretch !important; } /* P10HE terminal sidebar identity pass: dissolve card edges into ambient rail modules. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.92rem !important; margin: auto 0 0 !important; padding: 0 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 38% 62% 54% 46% / 42% 36% 64% 58% !important; filter: blur(0.2px) !important; inset: -0.62rem -0.72rem -0.7rem -0.62rem !important; opacity: 0.82 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { border-radius: 999px !important; height: 52% !important; inset: 12% 8% auto 16% !important; opacity: 0.22 !important; transform: rotate(-8deg) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { align-items: center !important; cursor: pointer !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.5rem minmax(0, 1fr) !important; min-height: 4.5rem !important; padding: 0.54rem 0.34rem 0.54rem 0.1rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 18% 26%, rgba(103, 232, 249, 0.30), transparent 42%), radial-gradient(ellipse at 76% 30%, rgba(168, 85, 247, 0.20), transparent 48%), radial-gradient(ellipse at 48% 92%, rgba(45, 212, 191, 0.12), transparent 52%) !important; box-shadow: 0 0 58px rgba(34, 211, 238, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after { background: linear-gradient(110deg, rgba(224, 242, 254, 0.18), rgba(224, 242, 254, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible { outline: none !important; transform: translateY(-1px) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { opacity: 1 !important; box-shadow: 0 0 70px rgba(34, 211, 238, 0.18), 0 18px 58px rgba(0, 0, 0, 0.12) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { background: conic-gradient(from -90deg, rgba(103, 232, 249, 0.96) calc(var(--practice-rail-percent, 8) * 1%), rgba(255, 255, 255, 0.10) 0), radial-gradient(circle, rgba(5, 12, 26, 0.92) 56%, transparent 58%) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 28px rgba(34, 211, 238, 0.22) !important; height: 2.34rem !important; width: 2.34rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy { gap: 0.18rem !important; position: relative !important; z-index: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy small { font-size: 0.52rem !important; letter-spacing: 0.145em !important; opacity: 0.72 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { color: rgba(248, 253, 255, 0.96) !important; font-size: 1.03rem !important; font-weight: 690 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { color: rgba(203, 236, 255, 0.58) !important; font-size: 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { align-items: center !important; display: grid !important; gap: 0.78rem !important; grid-template-columns: 2.45rem minmax(0, 1fr) !important; min-height: 4.72rem !important; padding: 0.58rem 0.22rem 0.58rem 0.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 18% 22%, rgba(254, 240, 138, 0.28), transparent 42%), radial-gradient(ellipse at 78% 24%, rgba(244, 114, 182, 0.18), transparent 44%), radial-gradient(ellipse at 48% 94%, rgba(168, 85, 247, 0.13), transparent 54%) !important; box-shadow: 0 0 62px rgba(251, 191, 36, 0.12), 0 16px 54px rgba(0, 0, 0, 0.10) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { background: linear-gradient(108deg, rgba(254, 240, 138, 0.18), rgba(244, 114, 182, 0.035) 58%, transparent) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { background: radial-gradient(circle, rgba(254, 240, 138, 0.28), transparent 64%), rgba(250, 204, 21, 0.075) !important; border: 0 !important; box-shadow: 0 0 32px rgba(250, 204, 21, 0.17) !important; height: 2.26rem !important; width: 2.26rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { color: rgba(255, 251, 235, 0.96) !important; font-size: 1.13rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { color: rgba(254, 240, 138, 0.68) !important; font-size: 0.73rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(255, 251, 235, 0.56) !important; min-height: 1.74rem !important; padding: 0 0.35rem !important; text-align: left !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:hover, body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link:focus-visible { color: rgba(255, 251, 235, 0.78) !important; outline: none !important; text-shadow: 0 0 18px rgba(250, 204, 21, 0.16) !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { margin-top: 0.18rem !important; opacity: 0.82 !important; padding: 0 0.2rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar #pwaUpdateStatus.pwa-update-status { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.54) !important; min-height: 1.72rem !important; padding: 0 0.24rem !important; } /* P10HF terminal final sidebar polish: calmer ambient modules, less oval glow emphasis. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress { gap: 0.82rem !important; padding: 0 0.16rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { min-height: 4.34rem !important; padding-bottom: 0.48rem !important; padding-top: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { border-radius: 30px 24px 34px 26px !important; filter: blur(0.4px) !important; inset: -0.38rem -0.46rem -0.42rem -0.38rem !important; opacity: 0.68 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::after, body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::after { height: 42% !important; inset: 15% 13% auto 18% !important; opacity: 0.16 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button { gap: 0.7rem !important; grid-template-columns: 2.36rem minmax(0, 1fr) !important; padding-left: 0.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button::before { background: radial-gradient(ellipse at 20% 26%, rgba(103, 232, 249, 0.24), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(168, 85, 247, 0.15), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.030), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 42px rgba(34, 211, 238, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:hover::before, body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button:focus-visible::before { box-shadow: 0 0 52px rgba(34, 211, 238, 0.13), 0 14px 42px rgba(0, 0, 0, 0.09) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring { height: 2.18rem !important; width: 2.18rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-ring-core svg { height: 1.04rem !important; width: 1.04rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy strong { font-size: 0.98rem !important; font-weight: 700 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-queue-button .practice-rail-mini-copy em { font-size: 0.66rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak { gap: 0.7rem !important; grid-template-columns: 2.32rem minmax(0, 1fr) !important; padding-left: 0.14rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak::before { background: radial-gradient(ellipse at 20% 24%, rgba(254, 240, 138, 0.22), transparent 46%), radial-gradient(ellipse at 76% 28%, rgba(244, 114, 182, 0.13), transparent 50%), linear-gradient(140deg, rgba(255, 255, 255, 0.026), rgba(255, 255, 255, 0) 64%) !important; box-shadow: 0 0 46px rgba(251, 191, 36, 0.09), 0 12px 38px rgba(0, 0, 0, 0.08) !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-icon { height: 2.12rem !important; width: 2.12rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy strong { font-size: 1.06rem !important; font-weight: 720 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-streak .practice-rail-mini-copy em { font-size: 0.71rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress-link { color: rgba(255, 251, 235, 0.52) !important; min-height: 1.62rem !important; } body:has(.practice-dashboard:not([hidden])) .header-utility-bar { opacity: 0.76 !important; } /* P10HG terminal tool header icon accents: restrained identity color, no extra chrome. */ body:has(.practice-dashboard:not([hidden])) .p10hf-tool-icon { color: rgba(203, 213, 225, 0.72) !important; filter: drop-shadow(0 0 10px rgba(148, 163, 184, 0.06)) !important; opacity: 0.92 !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-tool-icon svg { stroke-width: 1.75 !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-metronome-icon { color: rgba(147, 197, 253, 0.82) !important; filter: drop-shadow(0 0 10px rgba(129, 140, 248, 0.18)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-countdown-icon { color: rgba(125, 211, 252, 0.80) !important; filter: drop-shadow(0 0 10px rgba(14, 165, 233, 0.14)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-recorder-icon { color: rgba(252, 165, 165, 0.82) !important; filter: drop-shadow(0 0 10px rgba(248, 113, 113, 0.15)) !important; } body:has(.practice-dashboard:not([hidden])) .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; filter: drop-shadow(0 0 10px rgba(45, 212, 191, 0.13)) !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-context-heading strong { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } /* P10HG terminal references icon selector correction. */ body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header strong, body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-context-heading strong { align-items: center !important; display: inline-flex !important; gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-references-box .reference-box-header .p10hf-references-icon { color: rgba(94, 234, 212, 0.78) !important; } /* P10KQ final organize row interaction cascade position. */ body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { cursor: pointer !important; grid-template-columns: minmax(0, 1fr) !important; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main { cursor: pointer !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main:hover, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main:active, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main:focus, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-main:focus-visible { background: transparent !important; box-shadow: none !important; outline: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-edit { display: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row.is-selected { background: linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.012) 42%, transparent) !important; box-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row.is-selected:hover, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.026) 42%, transparent) !important; box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.12), 0 10px 26px rgba(0, 0, 0, 0.1) !important; } .organize-drill-modern-row { cursor: pointer !important; transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .organize-drill-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--drill-accent) 9%, transparent), rgba(255, 255, 255, 0.026) 42%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--drill-accent) 84%, transparent), 0 10px 26px rgba(0, 0, 0, 0.1) !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card { cursor: pointer; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card:hover { background: linear-gradient(90deg, rgba(168, 85, 247, 0.075), rgba(255, 255, 255, 0.026) 46%, rgba(255, 255, 255, 0.006)) !important; border-color: rgba(169, 190, 231, 0.16) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; } /* P10LJ final cascade position: keep the consistency layer above all older screen overrides. */ header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, .header-with-nav .app-nav-button, .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.68) !important; font-family: var(--zb-ui-font) !important; font-size: clamp(0.82rem, 1vw, 0.92rem) !important; font-weight: var(--zb-weight-nav) !important; letter-spacing: 0 !important; min-height: 2rem !important; padding: 0.28rem 0 0.5rem !important; position: relative !important; text-shadow: none !important; transform: none !important; transition: color var(--zb-ease), filter var(--zb-ease) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before, .header-with-nav .app-nav-button::before, .app-nav-button::before { content: none !important; display: none !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, .header-with-nav .app-nav-button::after, .app-nav-button::after { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.82), transparent) !important; border-radius: 999px !important; bottom: -0.36rem !important; box-shadow: 0 0 16px rgba(168, 85, 247, 0.20) !important; content: "" !important; display: block !important; height: 2px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.5) !important; transform-origin: center !important; transition: opacity var(--zb-ease), transform var(--zb-ease) !important; width: 2.4rem !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover, .header-with-nav .app-nav-button:hover, .app-nav-button:hover { color: rgba(248, 251, 255, 0.94) !important; filter: brightness(1.05) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, .header-with-nav .app-nav-button:hover::after, .app-nav-button:hover::after { opacity: 0.38 !important; transform: translateX(-50%) scaleX(0.78) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, .header-with-nav .app-nav-button.is-selected, .app-nav-button.is-selected { color: rgba(255, 255, 255, 0.98) !important; font-weight: var(--zb-weight-nav-active) !important; } header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, .header-with-nav .app-nav-button.is-selected::after, .app-nav-button.is-selected::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } .organize-nav-item { background: transparent !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; color: rgba(226, 234, 247, 0.76) !important; font-family: var(--zb-ui-font) !important; font-size: 0.84rem !important; font-weight: var(--zb-weight-rail) !important; letter-spacing: 0 !important; min-height: 2.12rem !important; transition: background var(--zb-ease), box-shadow var(--zb-ease), color var(--zb-ease) !important; } .organize-nav-item:hover { background: linear-gradient(135deg, rgba(148, 163, 184, 0.10), rgba(168, 85, 247, 0.045)) !important; box-shadow: inset 1px 0 0 rgba(203, 213, 225, 0.12), 0 10px 26px rgba(0, 0, 0, 0.08) !important; color: rgba(248, 251, 255, 0.92) !important; } .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(139, 92, 246, 0.26), rgba(47, 141, 255, 0.13)) !important; box-shadow: inset 3px 0 0 rgba(168, 85, 247, 0.95), 0 16px 34px rgba(104, 64, 212, 0.16) !important; color: rgba(255, 255, 255, 0.96) !important; font-weight: var(--zb-weight-rail-active) !important; } .organize-goal-modern-title strong, .organize-drill-modern-title strong, .organize-song-modern-title strong, .organize-solo-modern-title strong, .organize-item-list-name strong, .organize-lane-item strong { font-weight: var(--zb-weight-title) !important; } .organize-goals-hero h2, .organize-drills-hero h2, .organize-songs-hero h2, .organize-solos-hero h2 { font-family: var(--zb-display-font) !important; font-weight: 600 !important; letter-spacing: 0 !important; } .organize-goals-hero-kicker, .organize-goals-hero-support, .organize-drills-hero-kicker, .organize-drills-hero-support, .organize-songs-hero-kicker, .organize-songs-hero-support, .organize-solos-hero-kicker, .organize-solos-hero-support { font-weight: var(--zb-weight-body) !important; letter-spacing: 0 !important; } .organize-drill-modern-title small, .organize-song-modern-title small, .organize-solo-modern-title small, .organize-goal-modern-description, .preference-row small { font-weight: var(--zb-weight-body) !important; } .organize-drills-table-head, .organize-songs-table-head, .organize-solos-table-head, .organize-goal-modern-section-title, .organize-goal-modern-links-label, .organize-drill-modern-category, .organize-drill-modern-priority, .organize-drill-modern-frequency, .organize-drill-modern-linked, .organize-song-modern-source, .organize-song-modern-key, .organize-song-modern-bpm, .organize-song-modern-linked, .organize-song-modern-practiced, .organize-solo-modern-key, .organize-solo-modern-bpm, .organize-solo-modern-linked, .organize-solo-modern-practiced { font-weight: var(--zb-weight-meta) !important; } .organize-goal-modern-row, .organize-drill-modern-row, .organize-song-modern-row, .organize-solo-modern-row, .organize-item-workspace-card, .organize-lane-item { cursor: pointer !important; transition: background var(--zb-ease), border-color var(--zb-ease), box-shadow var(--zb-ease), filter var(--zb-ease) !important; } .organize-goal-modern-row:hover, .organize-goal-modern-row.is-selected:hover, body:has(.organize-workspace-shell:not([hidden])) .organize-item-workspace-card:hover, body:has(.organize-workspace-shell:not([hidden])) .organize-lane-item:hover { background: linear-gradient(90deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.026) 44%, transparent) !important; border-color: rgba(169, 190, 231, 0.16) !important; box-shadow: inset 1px 0 0 rgba(226, 232, 240, 0.14), 0 10px 26px rgba(0, 0, 0, 0.10) !important; transform: none !important; } .organize-drill-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--drill-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--drill-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-song-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--song-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--song-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-solo-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--solo-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--solo-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-drills-filter-bar label span, .organize-songs-filter-bar label span, .organize-solos-filter-bar label span, .organize-drills-filter-bar input, .organize-songs-filter-bar input, .organize-solos-filter-bar input, .organize-drills-filter-bar select, .organize-songs-filter-bar select, .organize-solos-filter-bar select, .organize-songs-new-action, .organize-solos-new-action, .organize-rail-new-goal, .preference-row strong, .preferences-group-heading h3 { font-weight: 430 !important; letter-spacing: 0 !important; } /* P10LJ nav refinement: thinner active type and underline placed under the label. */ :root { --zb-weight-nav: 360; --zb-weight-nav-active: 430; --zb-weight-rail: 360; --zb-weight-rail-active: 450; --zb-weight-title: 470; --zb-weight-meta: 330; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.app-shell) .header-with-nav .app-nav-button, body:has(.app-shell) .app-nav-button { color: rgba(224, 231, 243, 0.66) !important; font-family: var(--zb-ui-font) !important; font-size: 0.86rem !important; font-weight: var(--zb-weight-nav) !important; line-height: 1.1 !important; min-height: 1.72rem !important; padding: 0.14rem 0 0.34rem !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.app-shell) .header-with-nav .app-nav-button::after, body:has(.app-shell) .app-nav-button::after { background: rgba(168, 85, 247, 0.92) !important; bottom: 0.02rem !important; box-shadow: none !important; height: 1px !important; opacity: 0 !important; transform: translateX(-50%) scaleX(0.62) !important; width: 2rem !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover, body:has(.app-shell) .header-with-nav .app-nav-button:hover, body:has(.app-shell) .app-nav-button:hover { color: rgba(248, 251, 255, 0.86) !important; filter: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.app-shell) .header-with-nav .app-nav-button:hover::after, body:has(.app-shell) .app-nav-button:hover::after { opacity: 0.36 !important; transform: translateX(-50%) scaleX(0.82) !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.app-shell) .header-with-nav .app-nav-button.is-selected, body:has(.app-shell) .app-nav-button.is-selected { color: rgba(255, 255, 255, 0.96) !important; font-weight: var(--zb-weight-nav-active) !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.app-shell) .header-with-nav .app-nav-button.is-selected::after, body:has(.app-shell) .app-nav-button.is-selected::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.app-shell) .app-header.header-with-nav .brand-block h1 { font-weight: 620 !important; } body:has(.app-shell) .app-header.header-with-nav .brand-tagline { font-weight: 450 !important; } /* P10LJ nav finesse: higher-specificity modern workspace override for a thin, close underline. */ :root { --zb-weight-nav: 300; --zb-weight-nav-active: 380; --zb-weight-rail: 340; --zb-weight-rail-active: 430; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav { align-items: center !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(224, 231, 243, 0.64) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.86rem !important; font-weight: var(--zb-weight-nav) !important; line-height: 1.08 !important; min-height: 1.62rem !important; outline: 0 !important; padding: 0.1rem 0 0.3rem !important; text-shadow: none !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible { border: 0 !important; box-shadow: none !important; outline: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button::before, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button::before, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button::before, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button::before { content: none !important; display: none !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button::after, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button::after, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button::after, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button::after { background: rgba(168, 85, 247, 0.86) !important; border-radius: 999px !important; bottom: -0.04rem !important; box-shadow: none !important; content: "" !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.58) !important; transform-origin: center !important; width: 1.95rem !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:hover, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button:hover, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button:hover, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button:hover { color: rgba(248, 251, 255, 0.84) !important; filter: none !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after { opacity: 0.34 !important; transform: translateX(-50%) scaleX(0.78) !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(255, 255, 255, 0.95) !important; font-weight: var(--zb-weight-nav-active) !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { bottom: -0.04rem !important; opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.app-shell) .app-header.header-with-nav .brand-block h1 { font-weight: 560 !important; } /* P10LJ typography finesse: thin, consistent modern workspace type hierarchy. */ :root { --zb-weight-nav: 300; --zb-weight-nav-active: 360; --zb-weight-rail: 330; --zb-weight-rail-active: 430; --zb-weight-row-title: 500; --zb-weight-row-meta: 340; --zb-weight-control: 380; --zb-display-font: "Bodoni 72", Didot, Georgia, "Times New Roman", serif; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button { font-size: 0.86rem !important; font-weight: var(--zb-weight-nav) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { font-weight: var(--zb-weight-nav-active) !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goals-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-drills-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-songs-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-solos-hero h2 { font-family: var(--zb-display-font) !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 0.94 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goals-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-goals-hero-support, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-hero-support { font-weight: 330 !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item { font-size: 0.88rem !important; font-weight: var(--zb-weight-rail) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item.is-selected { font-weight: var(--zb-weight-rail-active) !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-copy strong, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-title strong { font-family: var(--zb-ui-font) !important; font-size: 0.92rem !important; font-weight: var(--zb-weight-row-title) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-copy small, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-links, body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-links > small, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-drills-table-head, body:has(.organize-workspace-shell:not([hidden])) .organize-songs-table-head, body:has(.organize-workspace-shell:not([hidden])) .organize-solos-table-head { font-weight: var(--zb-weight-row-meta) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goals-new-action, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-new-action, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-filter, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-filter select, body:has(.organize-workspace-shell:not([hidden])) .organize-goals-list-tools, body:has(.organize-workspace-shell:not([hidden])) .organize-goals-list-tools select { font-weight: var(--zb-weight-control) !important; letter-spacing: 0 !important; } /* P10LJ chrome correction: beat the older Goals-specific underline and darken the browser surround. */ html, body, body:has(.app-shell), body:has(.my-zone-dashboard:not([hidden])), body:has(#myZonePanel:not([hidden])), body:has([data-screen-panel="myzone"]:not([hidden])) { background: radial-gradient(circle at 18% 0%, rgba(45, 69, 124, 0.22), transparent 28rem), linear-gradient(180deg, #020814 0%, #071321 54%, #030914 100%) !important; color-scheme: dark !important; } body:has(.app-shell) .app-shell { background: transparent !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 243, 0.68) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.85rem !important; font-weight: 280 !important; line-height: 1 !important; min-height: 1.36rem !important; outline: 0 !important; padding: 0.05rem 0 0.2rem !important; position: relative !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:focus, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:focus-visible { border: 0 !important; box-shadow: none !important; outline: 0 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button::before, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button::before { content: none !important; display: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button::after, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button::after { background: rgba(168, 85, 247, 0.86) !important; border-radius: 999px !important; bottom: -0.15rem !important; box-shadow: none !important; content: "" !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.55) !important; transform-origin: center !important; width: 1.72rem !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after { opacity: 0.2 !important; transform: translateX(-50%) scaleX(0.72) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(255, 255, 255, 0.94) !important; font-weight: 340 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { bottom: -0.15rem !important; opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .brand-block h1 { font-weight: 500 !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .pwa-update-status { font-weight: 320 !important; letter-spacing: 0 !important; } /* P10LJ practice chrome typography: lighter, classier text in the top and side panels. */ :root { --zb-chrome-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; --zb-chrome-weight: 280; --zb-chrome-weight-active: 340; --zb-chrome-weight-title: 420; --zb-chrome-weight-label: 300; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav, body:has(.practice-dashboard:not([hidden])) .practice-dashboard, body:has(.practice-dashboard:not([hidden])) .practice-dashboard :is(.practice-header, .practice-queue-card, .practice-tool-card, .current-item, .queue-panel) { font-family: var(--zb-chrome-font) !important; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-block h1 { font-size: 0.9rem !important; font-weight: var(--zb-chrome-weight-title) !important; letter-spacing: 0 !important; line-height: 1.02 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-build-line, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .pwa-update-status { font-weight: var(--zb-chrome-weight-label) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button { font-family: var(--zb-chrome-font) !important; font-size: 0.85rem !important; font-weight: var(--zb-chrome-weight) !important; letter-spacing: 0 !important; line-height: 1 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { font-weight: var(--zb-chrome-weight-active) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-title { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight-title) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .section-note, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-helper, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-status-text, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .record-meta, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .description { font-weight: var(--zb-chrome-weight-label) !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .eyebrow, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-heading h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-queue-card h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .countdown-left .eyebrow, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .timer-config label, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .checkbox-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .quick-record-status, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .quick-record-help, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .quick-record-note, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .quick-record-playback-label, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy strong { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight-label) !important; letter-spacing: 0.01em !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .current-item h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-item-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .session-queue strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-queue-workspace-copy strong { font-family: var(--zb-chrome-font) !important; font-weight: 450 !important; letter-spacing: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard :is(button, .secondary-button, .hero-primary-button, .success-button, .timer-preset, .p10fq-transport-button) { font-family: var(--zb-chrome-font) !important; font-weight: 360 !important; letter-spacing: 0 !important; } /* P10LJ anti-bold pass: active chrome uses tone and line, not heavy weight. */ :root { --zb-chrome-weight: 240; --zb-chrome-weight-active: 300; --zb-chrome-weight-title: 360; --zb-chrome-weight-label: 260; --zb-chrome-weight-content-title: 400; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-title { font-weight: var(--zb-chrome-weight-title) !important; } body:has(.practice-dashboard:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button { font-weight: var(--zb-chrome-weight) !important; } body:has(.practice-dashboard:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { font-weight: var(--zb-chrome-weight-active) !important; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-build-line, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .pwa-update-status, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .section-note, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-helper, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-status-text, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .record-meta, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .description, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .eyebrow, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-heading h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-queue-card h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .timer-config label, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .checkbox-row, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy strong { font-weight: var(--zb-chrome-weight-label) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .current-item h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-item-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .session-queue strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-queue-workspace-copy strong { font-weight: var(--zb-chrome-weight-content-title) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard :is(button, .secondary-button, .hero-primary-button, .success-button, .timer-preset, .p10fq-transport-button), body:has(.organize-workspace-shell:not([hidden])) :is(button, select, input, .organize-goals-new-action, .organize-modern-new-action) { font-weight: 300 !important; } /* P10LJ Goals font parity and restored upper-rail hover feedback. */ :root { --zb-chrome-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; --zb-chrome-weight: 240; --zb-chrome-weight-active: 300; --zb-chrome-weight-title: 360; --zb-chrome-weight-label: 260; --zb-chrome-weight-content-title: 400; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-shell.is-modern-goals-workspace, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-modern-workspace, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-panel, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-row { font-family: var(--zb-chrome-font) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight-title) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-support, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .app-build-line, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-workspace-label, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-kicker, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero-support, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy small, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-links > small, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-link-chip, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools span, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-tools select { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight-label) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-nav-item { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-nav-item:hover { background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(45, 141, 255, 0.06)) !important; box-shadow: inset 2px 0 0 rgba(168, 85, 247, 0.58), 0 12px 28px rgba(0, 0, 0, 0.12) !important; color: rgba(255, 255, 255, 0.92) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-nav-item.is-selected { font-weight: var(--zb-chrome-weight-active) !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-hero h2 { font-weight: 420 !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-list-header strong, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goal-modern-copy strong, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-quote p { font-family: var(--zb-chrome-font) !important; font-weight: var(--zb-chrome-weight-content-title) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-goals-new-action, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .organize-rail-new-goal { font-family: var(--zb-chrome-font) !important; font-weight: 300 !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover, body:has(.app-shell) .app-nav-button:hover { color: rgba(255, 255, 255, 0.94) !important; filter: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.app-shell) .app-nav-button:hover::after { opacity: 0.56 !important; transform: translateX(-50%) scaleX(0.9) !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.app-shell) .app-nav-button.is-selected { font-weight: var(--zb-chrome-weight-active) !important; } /* P10LJ Preferences typography model: use the Preferences rail as shared app chrome. */ :root { --zb-preferences-chrome-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --zb-preferences-chrome-weight: 470; --zb-preferences-chrome-active-weight: 560; --zb-preferences-chrome-muted-weight: 430; --zb-preferences-chrome-title-weight: 620; --zb-preferences-chrome-size: 0.88rem; } body:has(.app-shell) .app-header.header-with-nav, body:has(.app-shell) .app-header.header-with-nav .brand-block, body:has(.app-shell) .app-header.header-with-nav .app-nav, body:has(.app-shell) .app-header.header-with-nav .header-utility-bar, body:has(.practice-dashboard:not([hidden])) .practice-dashboard, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell, body:has([data-screen-panel="log"]:not([hidden])), body:has(.preferences-screen:not([hidden])) { font-family: var(--zb-preferences-chrome-font) !important; } body:has(.app-shell) .app-header.header-with-nav .brand-block h1, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .screen-title, body:has(.preferences-screen:not([hidden])) .preferences-header .screen-title { font-family: var(--zb-preferences-chrome-font) !important; font-weight: var(--zb-preferences-chrome-title-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) .app-header.header-with-nav .brand-tagline, body:has(.app-shell) .app-header.header-with-nav .brand-support, body:has(.app-shell) .app-header.header-with-nav .app-build-line, body:has(.app-shell) .app-header.header-with-nav .pwa-update-status, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .section-note, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .eyebrow, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .record-meta, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .description, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-label, body:has(.organize-workspace-shell:not([hidden])) .organize-goals-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-goals-hero-support, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-modern-hero-support { font-family: var(--zb-preferences-chrome-font) !important; font-weight: var(--zb-preferences-chrome-muted-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.app-shell) .app-header.header-with-nav .app-nav-button, body:has(.app-shell) .app-nav-button, body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-heading h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-queue-card h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-queue-button, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-progress, body:has(.practice-dashboard:not([hidden])) .practice-dashboard :is(button, .secondary-button, .hero-primary-button, .success-button, .timer-preset, .p10fq-transport-button), body:has(.organize-workspace-shell:not([hidden])) :is(button, select, input, .organize-goals-new-action, .organize-modern-new-action, .organize-rail-new-goal) { font-family: var(--zb-preferences-chrome-font) !important; font-size: var(--zb-preferences-chrome-size) !important; font-weight: var(--zb-preferences-chrome-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.app-shell) .app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item.is-selected { font-weight: var(--zb-preferences-chrome-active-weight) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover { color: rgba(248, 251, 255, 0.88) !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-nav-item:hover, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-queue-button:hover, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-queue-button:focus-visible { background: rgba(255, 255, 255, 0.026) !important; color: rgba(248, 251, 255, 0.88) !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-copy strong, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-title strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .current-item h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-item-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .session-queue strong { font-family: var(--zb-preferences-chrome-font) !important; font-weight: var(--zb-preferences-chrome-active-weight) !important; letter-spacing: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-copy small, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-goal-modern-links, body:has(.organize-workspace-shell:not([hidden])) .organize-drill-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-song-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-solo-modern-cell { font-family: var(--zb-preferences-chrome-font) !important; font-weight: var(--zb-preferences-chrome-muted-weight) !important; letter-spacing: 0 !important; } /* P10LJ exact Preferences rail type: use this text treatment everywhere in app chrome. */ :root { --zb-rail-reference-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --zb-rail-reference-size: 0.88rem; --zb-rail-reference-weight: 470; --zb-rail-reference-active-weight: 560; --zb-rail-reference-muted: rgba(238, 242, 250, 0.58); --zb-rail-reference-hover: rgba(248, 251, 255, 0.88); --zb-rail-reference-active: rgba(250, 252, 255, 0.94); } body:has(.app-shell) :is( .app-header.header-with-nav, .app-header.header-with-nav .brand-block, .app-header.header-with-nav .brand-block h1, .app-header.header-with-nav .brand-tagline, .app-header.header-with-nav .brand-support, .app-header.header-with-nav .app-build-line, .app-header.header-with-nav .app-nav, .app-header.header-with-nav .app-nav-button, .app-header.header-with-nav .pwa-update-status, .organize-workspace-nav, .organize-workspace-label, .organize-nav-item, .organize-goals-hero, .organize-goals-hero h2, .organize-goals-hero-kicker, .organize-goals-hero-support, .organize-modern-hero, .organize-modern-hero h2, .organize-modern-hero-kicker, .organize-modern-hero-support, .organize-drills-hero h2, .organize-songs-hero h2, .organize-solos-hero h2, .practice-dashboard, .practice-dashboard .screen-title, .practice-dashboard .screen-subtitle, .practice-dashboard .queue-heading, .practice-dashboard .queue-heading h3, .practice-dashboard .practice-queue-card, .practice-dashboard .practice-rail-mini-copy, .practice-dashboard .practice-rail-queue-button, .preferences-screen, .preferences-header, .preferences-header .screen-title, .preferences-group-heading, .preference-row ) { font-family: var(--zb-rail-reference-font) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button, body:has(.app-shell) .app-header.header-with-nav .app-nav-button, body:has(.app-shell) .organize-nav-item, body:has(.app-shell) .practice-dashboard :is(.queue-heading h3, .practice-rail-mini-copy small, .practice-rail-mini-copy strong, .practice-rail-queue-button), body:has(.app-shell) .preferences-screen .app-nav-button { color: var(--zb-rail-reference-muted) !important; font-family: var(--zb-rail-reference-font) !important; font-size: var(--zb-rail-reference-size) !important; font-weight: var(--zb-rail-reference-weight) !important; letter-spacing: 0 !important; line-height: 1.18 !important; text-shadow: none !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover, body:has(.app-shell) .organize-nav-item:hover, body:has(.app-shell) .practice-dashboard .practice-rail-queue-button:hover { color: var(--zb-rail-reference-hover) !important; font-weight: var(--zb-rail-reference-weight) !important; } body:has(.app-shell) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.app-shell) .organize-nav-item.is-selected, body:has(.app-shell) .preferences-screen .app-nav-button.is-selected { color: var(--zb-rail-reference-active) !important; font-weight: var(--zb-rail-reference-active-weight) !important; } body:has(.app-shell) :is( .organize-goals-hero h2, .organize-modern-hero h2, .organize-drills-hero h2, .organize-songs-hero h2, .organize-solos-hero h2, .practice-dashboard .screen-title, .preferences-header .screen-title ) { font-family: var(--zb-rail-reference-font) !important; font-weight: var(--zb-rail-reference-active-weight) !important; letter-spacing: 0 !important; line-height: 1.02 !important; } body:has(.app-shell) :is( .organize-goals-hero-kicker, .organize-goals-hero-support, .organize-modern-hero-kicker, .organize-modern-hero-support, .practice-dashboard .screen-subtitle, .preferences-header .section-note, .organize-workspace-label, .preferences-group p, .preference-row small ) { font-family: var(--zb-rail-reference-font) !important; font-weight: var(--zb-rail-reference-weight) !important; letter-spacing: 0 !important; } /* P10LJ hard match: override older screen-specific typography with the Preferences rail model. */ :root { --zb-pref-rail-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --zb-pref-rail-size: 0.88rem; --zb-pref-rail-weight: 470; --zb-pref-rail-active-weight: 560; --zb-pref-rail-muted: rgba(238, 242, 250, 0.58); --zb-pref-rail-hover: rgba(248, 251, 255, 0.88); --zb-pref-rail-active: rgba(250, 252, 255, 0.94); } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button span, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item span, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-workspace-label, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-list-header strong, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-list-tools, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-list-tools span, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-list-tools select, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goal-modern-copy strong, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goal-modern-copy small, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goal-modern-links, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-drill-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-drill-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-song-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-song-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-solo-modern-title strong, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-solo-modern-title small, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-drill-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-song-modern-cell, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-solo-modern-cell { font-family: var(--zb-pref-rail-font) !important; font-size: var(--zb-pref-rail-size) !important; font-weight: var(--zb-pref-rail-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item { color: var(--zb-pref-rail-muted) !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:hover, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item:hover { color: var(--zb-pref-rail-hover) !important; font-weight: var(--zb-pref-rail-weight) !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected, body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected span, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item.is-selected, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-nav-item.is-selected span { color: var(--zb-pref-rail-active) !important; font-family: var(--zb-pref-rail-font) !important; font-weight: var(--zb-pref-rail-active-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-modern-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-drills-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-songs-hero h2, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-solos-hero h2 { font-family: var(--zb-pref-rail-font) !important; font-size: clamp(2.45rem, 4vw, 4.1rem) !important; font-weight: var(--zb-pref-rail-active-weight) !important; letter-spacing: 0 !important; line-height: 1.02 !important; text-shadow: none !important; } body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-goals-hero-support, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-modern-hero-kicker, body:has(.organize-workspace-shell:not([hidden])) .organize-workspace-shell .organize-modern-hero-support { font-family: var(--zb-pref-rail-font) !important; font-weight: var(--zb-pref-rail-weight) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button span, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .screen-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .queue-heading h3, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy small, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-mini-copy strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-rail-queue-button { font-family: var(--zb-pref-rail-font) !important; letter-spacing: 0 !important; text-shadow: none !important; } /* P10LJ literal Preferences-screen typography target for banners and rails. */ :root { --zb-preferences-screen-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --zb-preferences-screen-regular: 470; --zb-preferences-screen-active: 560; --zb-preferences-screen-muted: rgba(238, 242, 250, 0.58); --zb-preferences-screen-text: rgba(250, 252, 255, 0.94); } body:has(.app-shell) :is( .app-header.header-with-nav .app-nav-button, .app-header.header-with-nav .app-nav-button span, .app-header.header-with-nav .brand-block h1, .app-header.header-with-nav .brand-tagline, .organize-workspace-label, .organize-nav-item, .organize-nav-item span, .organize-goals-hero h2, .organize-drills-hero h2, .organize-songs-hero h2, .organize-solos-hero h2, .organize-modern-hero h2, .organize-goals-hero-kicker, .organize-goals-hero-support, .organize-modern-hero-kicker, .organize-modern-hero-support, .practice-dashboard .screen-title, .practice-dashboard .screen-subtitle, .practice-dashboard .queue-heading h3, .practice-dashboard .practice-rail-mini-copy small, .practice-dashboard .practice-rail-mini-copy strong, .preferences-header .screen-title ) { font-family: var(--zb-preferences-screen-font) !important; letter-spacing: 0 !important; text-shadow: none !important; } body:has(.app-shell) :is( .app-header.header-with-nav .app-nav-button, .app-header.header-with-nav .app-nav-button span, .organize-nav-item, .organize-nav-item span ) { color: var(--zb-preferences-screen-muted) !important; font-size: 0.88rem !important; font-weight: var(--zb-preferences-screen-regular) !important; line-height: 1.18 !important; } body:has(.app-shell) :is( .app-header.header-with-nav .app-nav-button.is-selected, .app-header.header-with-nav .app-nav-button.is-selected span, .organize-nav-item.is-selected, .organize-nav-item.is-selected span ) { color: var(--zb-preferences-screen-text) !important; font-weight: var(--zb-preferences-screen-active) !important; } body:has(.app-shell) :is( .organize-goals-hero h2, .organize-drills-hero h2, .organize-songs-hero h2, .organize-solos-hero h2, .organize-modern-hero h2, .practice-dashboard .screen-title, .preferences-header .screen-title ) { color: var(--zb-preferences-screen-text) !important; font-weight: var(--zb-preferences-screen-active) !important; } body:has(.app-shell) :is( .organize-goals-hero-kicker, .organize-goals-hero-support, .organize-modern-hero-kicker, .organize-modern-hero-support, .practice-dashboard .screen-subtitle, .organize-workspace-label ) { color: var(--zb-preferences-screen-muted) !important; font-weight: var(--zb-preferences-screen-regular) !important; } /* P10LJ consistent app identity mark: one ZoneBuilder badge and wordmark across screens. */ body:has(.app-shell) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.04rem 0.58rem !important; grid-template-columns: 2.45rem minmax(0, max-content) !important; grid-template-rows: auto auto !important; justify-self: start !important; min-width: 0 !important; padding-left: 0 !important; position: relative !important; } body:has(.app-shell) .app-header.header-with-nav .brand-block::before { align-items: center !important; aspect-ratio: 1 !important; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 52%, transparent 53%), conic-gradient(from 18deg, #fef08a, #7dd3fc, #a855f7, #f472b6, #fef08a) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 24px rgba(168, 85, 247, 0.22) !important; color: #f8fbff !important; content: "Z" !important; display: inline-flex !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 1.22rem !important; font-weight: 780 !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; height: 2.35rem !important; justify-content: center !important; left: auto !important; letter-spacing: 0 !important; line-height: 1 !important; position: static !important; top: auto !important; transform: none !important; width: 2.35rem !important; } body:has(.app-shell) .app-header.header-with-nav .brand-block h1 { color: rgba(248, 250, 255, 0.96) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.92rem !important; font-weight: 720 !important; grid-column: 2 !important; grid-row: 1 !important; letter-spacing: 0 !important; line-height: 1 !important; margin: 0 !important; text-shadow: none !important; white-space: nowrap !important; } /* P10LJ Practice title presence: the only standalone screen title needs a little weight. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-title, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-title { color: rgba(250, 252, 255, 0.96) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(2.15rem, 3.1vw, 3rem) !important; font-weight: 520 !important; letter-spacing: 0 !important; line-height: 1.02 !important; text-shadow: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header .screen-subtitle, body:has(.practice-dashboard:not([hidden])) .practice-dashboard .compact-session-title .screen-subtitle { align-self: center !important; font-size: 0.92rem !important; font-weight: 470 !important; } /* P10LJ navigation interaction standard: underline means active, hover means preview. */ body:has(.app-shell) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(238, 242, 250, 0.58) !important; filter: none !important; outline: 0 !important; position: relative !important; transition: color 160ms ease, text-shadow 160ms ease !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button::before { content: none !important; display: none !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button::after { background: #a855f7 !important; border-radius: 999px !important; bottom: -0.18rem !important; box-shadow: none !important; content: "" !important; display: block !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.72) !important; transform-origin: center !important; transition: opacity 160ms ease, transform 160ms ease !important; width: 1.75rem !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:focus-visible { color: rgba(248, 251, 255, 0.88) !important; text-shadow: 0 0 14px rgba(168, 85, 247, 0.12) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:focus-visible::after { opacity: 0 !important; transform: translateX(-50%) scaleX(0.72) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(250, 252, 255, 0.94) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:hover::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:focus-visible::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } /* P10LM final cascade lock: hover highlights, active underlines, no hover underlines. */ .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; color: rgba(238, 242, 250, 0.64) !important; cursor: pointer !important; position: relative !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, text-shadow 160ms ease !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before { content: none !important; display: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after { background: #a855f7 !important; border-radius: 999px !important; bottom: -0.16rem !important; box-shadow: none !important; content: "" !important; display: block !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.72) !important; transform-origin: center !important; width: 1.8rem !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(56, 189, 248, 0.09)) !important; border-color: rgba(196, 181, 253, 0.2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 20px rgba(168, 85, 247, 0.15) !important; color: rgba(250, 252, 255, 0.98) !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important; transform: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(250, 252, 255, 0.98) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(56, 189, 248, 0.07)) !important; border-color: rgba(196, 181, 253, 0.16) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 18px rgba(168, 85, 247, 0.12) !important; color: rgba(250, 252, 255, 1) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { border-radius: 12px !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after { bottom: 0.34rem !important; left: 0.82rem !important; opacity: 0 !important; right: auto !important; transform: scaleX(0.72) !important; transform-origin: left center !important; width: 1.65rem !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: scaleX(1) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-list .organize-schedule-section-empty { background: linear-gradient(135deg, rgba(13, 31, 55, 0.9), rgba(6, 18, 34, 0.82)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 12px !important; color: rgba(211, 224, 244, 0.76) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty strong { color: rgba(250, 252, 255, 0.96) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty span { color: rgba(211, 224, 244, 0.76) !important; } html body:has(.organize-schedules-workspace) .organize-schedule-card.is-selected strong { color: rgba(255, 255, 255, 0.96) !important; } html body:has(.organize-schedules-workspace) .organize-schedule-card.is-selected small { color: rgba(180, 244, 200, 0.92) !important; } .organize-workspace-shell .organize-nav-item:hover, .organize-workspace-shell .organize-nav-item:focus-visible, .preferences-screen .preferences-sidebar button:hover, .preferences-screen .preferences-sidebar button:focus-visible, .preferences-screen .preferences-nav button:hover, .preferences-screen .preferences-nav button:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(56, 189, 248, 0.09)) !important; border-color: rgba(196, 181, 253, 0.2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 20px rgba(168, 85, 247, 0.15) !important; color: rgba(250, 252, 255, 0.98) !important; text-decoration: none !important; } /* P10NG: final Practice hero clearance lock. Keep the card and its title below the header band. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1.25rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-items: start !important; align-content: start !important; margin-top: 0 !important; padding-top: clamp(2.75rem, 4vw, 4.1rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; margin-top: clamp(0.85rem, 1.45vw, 1.45rem) !important; padding-top: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.25rem, 4.1vw, 3.95rem) !important; line-height: 1.03 !important; margin-top: 0.1rem !important; padding-top: 0.08rem !important; } /* P10NL Catalog top-level shell mockup pass. */ body[data-current-screen="catalog"] .organize-workspace-shell, body[data-current-screen="schedules"] .organize-workspace-shell { max-width: 1540px !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-workspace-nav, body[data-current-screen="catalog"] .organize-workspace-shell .organize-workspace-label, body[data-current-screen="schedules"] .organize-workspace-shell .organize-workspace-nav, body[data-current-screen="schedules"] .organize-workspace-shell .organize-workspace-label { display: none !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-workspace-main, body[data-current-screen="schedules"] .organize-workspace-shell .organize-workspace-main { grid-column: 1 / -1 !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-context-card, body[data-current-screen="catalog"] .organize-workspace-shell .organize-context-header, body[data-current-screen="schedules"] .organize-workspace-shell .organize-context-card, body[data-current-screen="schedules"] .organize-workspace-shell .organize-context-header { display: none !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-context-card, body[data-current-screen="schedules"] .organize-workspace-shell .organize-context-card { display: block !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-context-header, body[data-current-screen="schedules"] .organize-workspace-shell .organize-context-header { display: none !important; } body[data-current-screen="catalog"] .organize-workspace-shell .organize-workspace-content, body[data-current-screen="schedules"] .organize-workspace-shell .organize-workspace-content { grid-template-columns: 1fr !important; } body[data-current-screen="catalog"] .organize-catalog-workspace { gap: 0.92rem !important; } body[data-current-screen="catalog"] .catalog-workspace-topbar { align-items: center !important; border-radius: 18px !important; grid-template-columns: minmax(16rem, 0.72fr) minmax(34rem, 1.28fr) !important; padding: 1rem 1.05rem !important; } body[data-current-screen="catalog"] .catalog-workspace-brand h2 { font-size: clamp(2.15rem, 3.4vw, 3.7rem) !important; font-weight: 520 !important; } body[data-current-screen="catalog"] .catalog-workspace-brand p { max-width: 34rem !important; } body[data-current-screen="catalog"] .catalog-workspace-controls { align-items: center !important; grid-template-columns: minmax(18rem, 1fr) auto auto !important; } body[data-current-screen="catalog"] .catalog-workspace-controls .organize-catalog-tools { grid-template-columns: minmax(18rem, 1fr) !important; } body[data-current-screen="catalog"] .catalog-workspace-controls .organize-catalog-tools label:not(.organize-catalog-search) { display: none !important; } body[data-current-screen="catalog"] .catalog-toolbar-utilities { justify-self: end !important; } body[data-current-screen="catalog"] .catalog-unified-filter-rail { background: radial-gradient(circle at 8% 0%, rgba(124, 58, 237, 0.14), transparent 18rem), linear-gradient(145deg, rgba(9, 22, 42, 0.84), rgba(4, 11, 24, 0.94)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 46px rgba(0, 0, 0, 0.2) !important; display: grid !important; gap: 0.62rem !important; padding: 0.8rem !important; } body[data-current-screen="catalog"] .catalog-unified-filter-rail > div { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.46rem !important; } body[data-current-screen="catalog"] .catalog-unified-filter-rail button { appearance: none !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(137, 161, 204, 0.12) !important; border-radius: 999px !important; color: rgba(203, 213, 225, 0.78) !important; cursor: pointer !important; font: inherit !important; font-size: 0.82rem !important; font-weight: 410 !important; min-height: 2.15rem !important; padding: 0 0.82rem !important; transition: background 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; } body[data-current-screen="catalog"] .catalog-unified-filter-rail button:hover, body[data-current-screen="catalog"] .catalog-unified-filter-rail button:focus-visible, body[data-current-screen="catalog"] .catalog-unified-filter-rail button.is-selected { background: linear-gradient(135deg, rgba(124, 58, 237, 0.38), rgba(14, 165, 233, 0.12)) !important; border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: 0 0 22px rgba(124, 58, 237, 0.14) !important; color: rgba(250, 252, 255, 0.96) !important; } body[data-current-screen="catalog"] .organize-catalog-layout { grid-template-columns: minmax(18rem, 0.54fr) minmax(28rem, 1fr) minmax(16rem, 0.42fr) !important; } body[data-current-screen="catalog"] .catalog-calm-empty-state { align-content: center !important; min-height: 31rem !important; text-align: left !important; } body[data-current-screen="catalog"] .catalog-calm-empty-state strong { color: rgba(248, 250, 252, 0.96) !important; display: block !important; font-size: clamp(1.5rem, 2vw, 2.25rem) !important; font-weight: 480 !important; letter-spacing: 0 !important; margin-bottom: 0.5rem !important; } body[data-current-screen="catalog"] .catalog-calm-empty-state span { color: rgba(203, 213, 225, 0.72) !important; display: block !important; font-size: 0.94rem !important; line-height: 1.55 !important; margin-top: 0.42rem !important; max-width: 34rem !important; } @media (max-width: 1080px) { body[data-current-screen="catalog"] .catalog-workspace-topbar, body[data-current-screen="catalog"] .catalog-workspace-controls, body[data-current-screen="catalog"] .organize-catalog-layout { grid-template-columns: 1fr !important; } } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1rem !important; } } /* P10NG: root-cause Practice hero stack reset. Keep title and copy as the card's first-class content. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-content: start !important; align-items: start !important; display: grid !important; min-height: clamp(16.5rem, 19vw, 18.5rem) !important; overflow: hidden !important; padding: clamp(1.55rem, 2.4vw, 2.35rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; display: flex !important; flex-direction: column !important; gap: 0.52rem !important; justify-content: flex-start !important; margin: 0 !important; max-width: min(39rem, 52%) !important; min-height: 0 !important; padding: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .eyebrow { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.2rem, 3.45vw, 3.55rem) !important; line-height: 1.07 !important; margin: 0 !important; max-width: 14ch !important; order: 2 !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemMeta { font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important; line-height: 1.25 !important; margin: 0 !important; order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription { line-height: 1.48 !important; margin: 0 !important; max-width: 34rem !important; order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-stats, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-goal-chips { display: none !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: 16rem !important; padding: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2rem, 3.1vw, 3.2rem) !important; } } /* P10NG: Practice Flow cleanup — Quick Start, readable current item, inline instructions. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { height: auto !important; min-height: clamp(17rem, 20vw, 19.5rem) !important; overflow: hidden !important; row-gap: 0.8rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { max-width: min(47rem, 64%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2rem, 3.15vw, 3.45rem) !important; line-height: 1.09 !important; max-width: 18ch !important; overflow-wrap: anywhere !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription { color: rgba(228, 236, 248, 0.82) !important; max-width: 42rem !important; } .current-item-context-badges { display: flex !important; flex-wrap: wrap !important; gap: 0.42rem !important; order: 5 !important; } .current-item-context-badges[hidden] { display: none !important; } .current-item-context-badge { align-items: center !important; background: linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(139, 92, 246, 0.16)) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 999px !important; color: rgba(238, 246, 255, 0.9) !important; display: inline-flex !important; font-size: 0.74rem !important; font-weight: 520 !important; min-height: 1.75rem !important; padding: 0.26rem 0.62rem !important; } button.current-item-context-badge { cursor: pointer !important; } button.current-item-context-badge:hover, button.current-item-context-badge:focus-visible { border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: 0 0 18px rgba(45, 212, 191, 0.14) !important; } .current-item-instructions-panel { align-self: end !important; background: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.12), transparent 12rem), linear-gradient(135deg, rgba(4, 14, 27, 0.82), rgba(10, 22, 43, 0.72)) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 14px !important; color: rgba(235, 242, 252, 0.88) !important; grid-column: 1 / -1 !important; justify-self: stretch !important; max-width: min(52rem, 66%) !important; order: 6 !important; overflow: hidden !important; } .current-item-instructions-panel[hidden] { display: none !important; } .current-item-instructions-panel summary { align-items: center !important; cursor: pointer !important; display: flex !important; gap: 0.7rem !important; justify-content: space-between !important; list-style: none !important; padding: 0.68rem 0.82rem !important; } .current-item-instructions-panel summary::-webkit-details-marker { display: none !important; } .current-item-instructions-panel summary span { color: rgba(248, 250, 252, 0.95) !important; font-size: 0.88rem !important; font-weight: 560 !important; } .current-item-instructions-panel summary small { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.76rem !important; } .current-item-instructions-body { border-top: 1px solid rgba(148, 163, 184, 0.12) !important; color: rgba(226, 236, 249, 0.84) !important; font-size: 0.9rem !important; line-height: 1.55 !important; max-height: min(18rem, 34vh) !important; overflow: auto !important; padding: 0.82rem !important; } .current-item-instructions-body p { margin: 0 0 0.72rem !important; } .current-item-instructions-body p:last-child { margin-bottom: 0 !important; } .practice-action-strip .quick-start-button { background: radial-gradient(circle at 15% 25%, rgba(45, 212, 191, 0.18), transparent 4rem), linear-gradient(135deg, rgba(14, 35, 58, 0.86), rgba(30, 22, 58, 0.74)) !important; border-color: rgba(125, 211, 252, 0.18) !important; color: rgba(245, 249, 255, 0.92) !important; } .practice-action-strip .quick-start-button:hover, .practice-action-strip .quick-start-button:focus-visible { border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: 0 0 26px rgba(45, 212, 191, 0.14) !important; } .quick-start-modal-backdrop { align-items: center !important; justify-content: center !important; } .quick-start-modal-card { background: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.13), transparent 18rem), radial-gradient(circle at 88% 12%, rgba(168, 85, 247, 0.13), transparent 16rem), linear-gradient(145deg, rgba(5, 16, 31, 0.98), rgba(3, 9, 18, 0.98)) !important; border-color: rgba(148, 163, 184, 0.18) !important; max-height: min(88vh, 56rem) !important; max-width: min(58rem, calc(100vw - 2rem)) !important; overflow: hidden !important; width: 100% !important; } .quick-start-controls { display: grid !important; gap: 0.72rem !important; grid-template-columns: minmax(0, 1.4fr) minmax(9rem, 0.7fr) minmax(11rem, 0.8fr) !important; margin-bottom: 0.85rem !important; } .quick-start-controls label { color: rgba(191, 219, 254, 0.66) !important; display: grid !important; font-size: 0.7rem !important; gap: 0.28rem !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; } .quick-start-controls input, .quick-start-controls select { background: rgba(2, 8, 17, 0.68) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 12px !important; color: rgba(245, 249, 255, 0.93) !important; font: 420 0.92rem/1.2 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; min-height: 2.55rem !important; padding: 0 0.72rem !important; } .quick-start-list { display: grid !important; gap: 0.68rem !important; max-height: min(52vh, 32rem) !important; overflow: auto !important; padding-right: 0.2rem !important; } .quick-start-item { align-items: center !important; background: radial-gradient(circle at 3% 0%, rgba(45, 212, 191, 0.11), transparent 9rem), linear-gradient(135deg, rgba(10, 31, 55, 0.9), rgba(4, 15, 29, 0.92)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 14px !important; display: grid !important; gap: 0.85rem !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 0.82rem !important; } .quick-start-item:hover { border-color: rgba(125, 211, 252, 0.22) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18), 0 0 22px rgba(45, 212, 191, 0.08) !important; } .quick-start-item-main { display: grid !important; gap: 0.26rem !important; min-width: 0 !important; } .quick-start-type { color: rgba(196, 181, 253, 0.86) !important; font-size: 0.68rem !important; font-weight: 560 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .quick-start-item strong { color: rgba(248, 250, 252, 0.96) !important; font-size: 1rem !important; font-weight: 560 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } .quick-start-item p { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.85rem !important; line-height: 1.42 !important; margin: 0 !important; } .quick-start-item-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.38rem !important; } .quick-start-item-meta span { background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 999px !important; color: rgba(203, 213, 225, 0.72) !important; font-size: 0.72rem !important; padding: 0.2rem 0.5rem !important; } .quick-start-run-button { background: linear-gradient(135deg, rgba(34, 197, 94, 0.86), rgba(16, 185, 129, 0.72)) !important; border: 1px solid rgba(187, 247, 208, 0.18) !important; border-radius: 999px !important; color: rgba(255, 255, 255, 0.96) !important; cursor: pointer !important; font-weight: 620 !important; min-height: 2.4rem !important; padding: 0 0.9rem !important; white-space: nowrap !important; } .quick-start-empty { border: 1px dashed rgba(148, 163, 184, 0.2) !important; border-radius: 14px !important; color: rgba(203, 213, 225, 0.66) !important; padding: 1.5rem !important; text-align: center !important; } .quick-start-status { color: rgba(203, 213, 225, 0.68) !important; margin: 0.75rem 0 0 !important; } @media (max-width: 760px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy, .current-item-instructions-panel { max-width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2rem, 11vw, 3.1rem) !important; max-width: 100% !important; } .quick-start-modal-backdrop { align-items: stretch !important; padding: 0 !important; } .quick-start-modal-card { border-radius: 22px 22px 0 0 !important; margin-top: auto !important; max-height: 92vh !important; max-width: 100% !important; } .quick-start-controls { grid-template-columns: 1fr !important; } .quick-start-item { align-items: stretch !important; grid-template-columns: 1fr !important; } .quick-start-run-button { width: 100% !important; } } /* P10NG: root-cause Practice hero stack reset. Keep title and copy as the card's first-class content. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-content: start !important; align-items: start !important; display: grid !important; min-height: clamp(16.5rem, 19vw, 18.5rem) !important; overflow: hidden !important; padding: clamp(1.55rem, 2.4vw, 2.35rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; display: flex !important; flex-direction: column !important; gap: 0.52rem !important; justify-content: flex-start !important; margin: 0 !important; max-width: min(39rem, 52%) !important; min-height: 0 !important; padding: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .eyebrow { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.2rem, 3.45vw, 3.55rem) !important; line-height: 1.07 !important; margin: 0 !important; max-width: 14ch !important; order: 2 !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemMeta { font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important; line-height: 1.25 !important; margin: 0 !important; order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription { line-height: 1.48 !important; margin: 0 !important; max-width: 34rem !important; order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-stats, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-goal-chips { display: none !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: 16rem !important; padding: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2rem, 3.1vw, 3.2rem) !important; } } /* P10NG: final Practice hero clearance lock. Keep the card and its title below the header band. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1.25rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-items: start !important; align-content: start !important; margin-top: 0 !important; padding-top: clamp(2.75rem, 4vw, 4.1rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; margin-top: clamp(0.85rem, 1.45vw, 1.45rem) !important; padding-top: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.25rem, 4.1vw, 3.95rem) !important; line-height: 1.03 !important; margin-top: 0.1rem !important; padding-top: 0.08rem !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1rem !important; } } /* P10NG: keep Practice operational drawers matched, glowing, and sliding in from the left rail. */ body.practice-queue-workspace-open #practiceQueueWorkspace.practice-queue-workspace, body.active-schedule-drawer-open #activeScheduleDrawer.active-schedule-drawer-shell { opacity: 1 !important; pointer-events: auto !important; } #practiceQueueWorkspace.practice-queue-workspace, #activeScheduleDrawer.active-schedule-drawer-shell { inset: 0 !important; overflow: hidden !important; pointer-events: none !important; position: fixed !important; z-index: 90 !important; } #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-scrim, #activeScheduleDrawer.active-schedule-drawer-shell > .active-schedule-drawer-scrim { background: rgba(2, 6, 16, 0.38) !important; inset: 0 !important; opacity: 0 !important; position: absolute !important; transition: opacity 170ms ease !important; } body.practice-queue-workspace-open #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-scrim, body.active-schedule-drawer-open #activeScheduleDrawer.active-schedule-drawer-shell > .active-schedule-drawer-scrim { opacity: 1 !important; } #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-drawer, #activeScheduleDrawer.active-schedule-drawer-shell > .active-schedule-drawer { background: radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.30), transparent 42%), radial-gradient(circle at 86% 10%, rgba(45, 212, 191, 0.20), transparent 40%), linear-gradient(160deg, rgba(34, 47, 76, 0.988), rgba(14, 24, 42, 0.992)) !important; border: 0 !important; border-radius: 0 28px 28px 0 !important; border-right: 1px solid rgba(226, 232, 240, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.105), 0 36px 100px rgba(0, 0, 0, 0.44), 0 0 90px rgba(45, 212, 191, 0.08) !important; box-sizing: border-box !important; color: #eef3ff !important; height: 100vh !important; left: 0 !important; margin: 0 !important; max-height: none !important; max-width: min(27rem, calc(100vw - 1.5rem)) !important; overflow-x: hidden !important; overflow-y: auto !important; padding: 1.25rem !important; pointer-events: auto !important; position: absolute !important; right: auto !important; top: 0 !important; transform: translateX(-104%) !important; transition: transform 220ms cubic-bezier(0.2, 0.82, 0.2, 1) !important; width: 24rem !important; } body.practice-queue-workspace-open #practiceQueueWorkspace.practice-queue-workspace > .practice-queue-drawer, body.active-schedule-drawer-open #activeScheduleDrawer.active-schedule-drawer-shell > .active-schedule-drawer { transform: translateX(0) !important; } #activeScheduleDrawer .active-schedule-drawer-header { align-items: center !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; } #activeScheduleDrawer .active-schedule-drawer-icon { background: rgba(167, 139, 250, 0.12) !important; border: 1px solid rgba(196, 181, 253, 0.18) !important; border-radius: 16px !important; color: rgba(216, 180, 254, 0.96) !important; height: 2.25rem !important; width: 2.25rem !important; } #activeScheduleDrawer .active-schedule-drawer-list { gap: 0.72rem !important; padding: 0.08rem 0.12rem 0.32rem !important; } #activeScheduleDrawer .active-schedule-option { background: linear-gradient(180deg, rgba(255, 255, 255, 0.115), rgba(255, 255, 255, 0.052)) !important; border-color: rgba(226, 232, 240, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 12px 28px rgba(0, 0, 0, 0.14) !important; backdrop-filter: blur(18px) saturate(128%) !important; } #activeScheduleDrawer .active-schedule-option:hover, #activeScheduleDrawer .active-schedule-option:focus-visible, #activeScheduleDrawer .active-schedule-option:focus-within { background: radial-gradient(circle at 10% 16%, rgba(96, 165, 250, 0.22), transparent 52%), linear-gradient(180deg, rgba(255, 255, 255, 0.155), rgba(255, 255, 255, 0.070)) !important; border-color: rgba(196, 181, 253, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.095), 0 16px 34px rgba(0, 0, 0, 0.18), 0 0 32px rgba(96, 165, 250, 0.10) !important; transform: translateY(-1px) !important; } #activeScheduleDrawer .active-schedule-option.is-active { background: radial-gradient(circle at 12% 18%, rgba(94, 234, 212, 0.22), transparent 50%), linear-gradient(180deg, rgba(139, 92, 246, 0.28), rgba(255, 255, 255, 0.075)) !important; border-color: rgba(167, 139, 250, 0.46) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 18px 44px rgba(76, 29, 149, 0.18), 0 0 44px rgba(124, 58, 237, 0.14) !important; } /* P10NG: lower the Practice player so the hero does not tuck under the header band. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1.05rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard .practice-header.compact-practice-header { margin-bottom: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { margin-top: 0 !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.82rem !important; } } /* P10NG optional workspace modules and ImportZone MVP. */ [data-workspace-module-nav][hidden], [data-workspace-module-screen][hidden] { display: none !important; } .text-cleanup-button, button.text-cleanup-button, .secondary-button.text-cleanup-button { align-items: center !important; background: rgba(8, 18, 34, 0.46) !important; border-color: rgba(148, 163, 184, 0.18) !important; color: rgba(203, 213, 225, 0.78) !important; display: inline-flex !important; height: 1.84rem !important; justify-content: center !important; min-height: 1.84rem !important; padding: 0 !important; text-shadow: none !important; width: 1.84rem !important; } .text-cleanup-button svg, button.text-cleanup-button svg, .secondary-button.text-cleanup-button svg { fill: none !important; height: 0.9rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 2 !important; width: 0.9rem !important; } .text-cleanup-button:hover, .text-cleanup-button:focus-visible, button.text-cleanup-button:hover, button.text-cleanup-button:focus-visible, .secondary-button.text-cleanup-button:hover, .secondary-button.text-cleanup-button:focus-visible { border-color: rgba(94, 234, 212, 0.3) !important; box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.08), 0 8px 18px rgba(14, 165, 163, 0.07) !important; color: rgba(226, 232, 240, 0.94) !important; } .text-cleanup-button:active, button.text-cleanup-button:active, .secondary-button.text-cleanup-button:active { background: rgba(15, 23, 42, 0.72) !important; color: #ffffff !important; } #editModalBackdrop .text-cleanup-button, #addRecordModalBackdrop .text-cleanup-button, #guidanceModalBackdrop .text-cleanup-button { background: rgba(8, 18, 34, 0.46) !important; border-color: rgba(148, 163, 184, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; color: rgba(203, 213, 225, 0.78) !important; } body:has(.workspace-module-screen:not([hidden])) { background: radial-gradient(circle at 18% 0%, rgba(168, 85, 247, 0.13), transparent 28rem), radial-gradient(circle at 86% 12%, rgba(56, 189, 248, 0.09), transparent 26rem), linear-gradient(180deg, #020914 0%, #061321 54%, #030914 100%) !important; } .workspace-module-screen { background: linear-gradient(135deg, rgba(8, 21, 39, 0.96), rgba(3, 10, 20, 0.98)) !important; border: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 18px !important; box-shadow: 0 26px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; color: rgba(238, 245, 255, 0.92) !important; margin-left: auto !important; margin-right: auto !important; max-width: 1320px !important; overflow: hidden !important; } .importzone-header, .creativezone-header { background: linear-gradient(90deg, rgba(4, 12, 23, 0.98) 0%, rgba(6, 17, 33, 0.82) 48%, rgba(70, 26, 113, 0.34) 100%) !important; border-bottom: 1px solid rgba(137, 161, 204, 0.12) !important; margin: -1.35rem -1.35rem 1.25rem !important; padding: 2rem 2.1rem 1.7rem !important; } .importzone-header .screen-title, .creativezone-header .screen-title { font-family: "Avenir Next", Avenir, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(2.35rem, 4vw, 4.2rem) !important; font-weight: 430 !important; letter-spacing: 0 !important; } .importzone-shell { display: grid !important; gap: 1rem !important; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important; } .importzone-input-panel, .importzone-preview-panel, .creativezone-placeholder { background: linear-gradient(145deg, rgba(9, 27, 49, 0.9), rgba(3, 12, 24, 0.94)) !important; border: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 16px !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; min-width: 0 !important; padding: 1rem !important; } .importzone-panel-heading { align-items: start !important; display: flex !important; gap: 1rem !important; justify-content: space-between !important; margin-bottom: 0.85rem !important; } .importzone-panel-heading h3, .creativezone-placeholder h3 { color: rgba(250, 252, 255, 0.96) !important; font-size: 1.25rem !important; font-weight: 520 !important; margin: 0.1rem 0 0.24rem !important; } .importzone-panel-heading p, .creativezone-placeholder p { color: rgba(203, 213, 225, 0.72) !important; font-size: 0.92rem !important; line-height: 1.55 !important; margin: 0 !important; } .importzone-textarea { background: linear-gradient(145deg, rgba(2, 8, 17, 0.9), rgba(6, 20, 38, 0.72)) !important; border: 1px solid rgba(137, 161, 204, 0.18) !important; border-radius: 14px !important; color: rgba(245, 249, 255, 0.93) !important; font: 400 0.98rem/1.55 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; min-height: 22rem !important; outline: 0 !important; padding: 1rem !important; resize: vertical !important; width: 100% !important; } .importzone-textarea:focus { border-color: rgba(196, 181, 253, 0.36) !important; box-shadow: 0 0 32px rgba(168, 85, 247, 0.13) !important; } .importzone-actions { margin-top: 0.85rem !important; } .importzone-destination-panel { display: grid !important; gap: 0.72rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 0.95rem !important; } .importzone-destination-card { align-items: center !important; background: linear-gradient(145deg, rgba(10, 31, 55, 0.74), rgba(4, 13, 25, 0.82)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 14px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; display: grid !important; gap: 0.7rem !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 7rem !important; padding: 0.85rem !important; } .importzone-destination-card.is-primary { border-color: rgba(167, 139, 250, 0.3) !important; box-shadow: 0 18px 42px rgba(37, 99, 235, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; } .importzone-destination-card strong { color: rgba(248, 250, 252, 0.94) !important; display: block !important; font-size: 0.98rem !important; font-weight: 540 !important; margin-bottom: 0.28rem !important; } .importzone-destination-card p { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.82rem !important; line-height: 1.45 !important; margin: 0 !important; } .importzone-destination-card .secondary-button { justify-self: end !important; white-space: nowrap !important; } .importzone-practice-type-panel { background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.1), transparent 44%), rgba(2, 8, 17, 0.5) !important; border: 1px solid rgba(45, 212, 191, 0.2) !important; border-radius: 14px !important; display: grid !important; gap: 0.72rem !important; margin-top: 0.78rem !important; padding: 0.78rem !important; } .importzone-practice-type-panel[hidden] { display: none !important; } .importzone-practice-type-heading { border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; } .importzone-practice-type-grid { display: grid !important; gap: 0.6rem !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .importzone-practice-type-grid button { background: linear-gradient(145deg, rgba(10, 31, 55, 0.74), rgba(4, 13, 25, 0.88)) !important; border: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 13px !important; color: rgba(238, 245, 255, 0.94) !important; cursor: pointer !important; display: grid !important; gap: 0.24rem !important; min-height: 5.9rem !important; padding: 0.7rem !important; text-align: left !important; } .importzone-practice-type-grid button:hover, .importzone-practice-type-grid button:focus-visible { border-color: rgba(45, 212, 191, 0.42) !important; box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.12), 0 14px 30px rgba(13, 148, 136, 0.1) !important; outline: 0 !important; } .importzone-practice-type-grid button strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.9rem !important; } .importzone-practice-type-grid button span { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.76rem !important; line-height: 1.34 !important; } .importzone-clear-button { justify-self: start !important; } .importzone-catalog-fields { display: grid !important; gap: 0.65rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin-top: 0.85rem !important; } .importzone-catalog-fields label, .organize-catalog-tools label, .organize-catalog-meta label, .organize-catalog-body-field { display: grid !important; gap: 0.28rem !important; min-width: 0 !important; } .importzone-catalog-fields span, .organize-catalog-tools span, .organize-catalog-meta span, .organize-catalog-body-field span { color: rgba(191, 219, 254, 0.66) !important; font-size: 0.68rem !important; font-weight: 440 !important; text-transform: uppercase !important; } .importzone-catalog-fields input, .importzone-catalog-fields select, .organize-catalog-tools input, .organize-catalog-tools select, .organize-catalog-meta input, .organize-catalog-meta select, .organize-catalog-body-field textarea { background: rgba(2, 8, 17, 0.58) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; color: rgba(245, 249, 255, 0.92) !important; min-height: 2.4rem !important; padding: 0 0.7rem !important; } /* P10NL Catalog URL promotion and direct reference entry. */ .importzone-url-promotion-panel, .organize-catalog-add-panel { background: linear-gradient(145deg, rgba(11, 31, 55, 0.82), rgba(4, 13, 25, 0.9)) !important; border: 1px solid rgba(168, 85, 247, 0.2) !important; border-radius: 14px !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; display: grid !important; gap: 0.75rem !important; margin-top: 0.85rem !important; padding: 0.85rem !important; } .catalog-workspace-controls .organize-catalog-add-panel { align-self: start !important; margin-top: 0 !important; min-width: 10rem !important; padding: 0 !important; position: relative !important; } .catalog-workspace-controls .organize-catalog-add-panel[open] { padding: 0.8rem !important; width: min(44rem, 70vw) !important; z-index: 5 !important; } .catalog-workspace-controls .organize-catalog-add-panel summary { align-items: center !important; display: inline-flex !important; gap: 0.55rem !important; min-height: 2.45rem !important; padding: 0 0.9rem !important; } .catalog-workspace-controls .organize-catalog-add-panel[open] summary { margin-bottom: 0.7rem !important; } .catalog-workspace-controls .organize-catalog-add-panel summary span { align-items: center !important; background: linear-gradient(135deg, #7c3aed, #4f46e5) !important; border-radius: 8px !important; display: inline-flex !important; font-size: 1.2rem !important; height: 2.15rem !important; justify-content: center !important; width: 2.15rem !important; } .importzone-url-promotion-panel[hidden] { display: none !important; } .importzone-url-promotion-heading strong, .organize-catalog-add-panel summary { color: rgba(248, 250, 252, 0.94) !important; cursor: pointer !important; font-weight: 520 !important; } .importzone-url-promotion-heading small { color: rgba(203, 213, 225, 0.66) !important; display: block !important; margin-top: 0.18rem !important; } .importzone-url-mode-grid { display: grid !important; gap: 0.42rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .importzone-url-mode-grid label { align-items: flex-start !important; background: rgba(2, 8, 17, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 12px !important; color: rgba(226, 232, 240, 0.84) !important; display: flex !important; gap: 0.45rem !important; min-height: 4.5rem !important; padding: 0.48rem 0.62rem !important; } .importzone-url-mode-grid label span { display: grid !important; gap: 0.16rem !important; } .importzone-url-mode-grid label strong { color: rgba(248, 250, 252, 0.9) !important; font-size: 0.86rem !important; font-weight: 520 !important; } .importzone-url-mode-grid label small { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.76rem !important; line-height: 1.34 !important; } .importzone-detected-url-list { display: grid !important; gap: 0.55rem !important; } .importzone-detected-url-row { background: rgba(2, 8, 17, 0.42) !important; border: 1px solid rgba(137, 161, 204, 0.12) !important; border-radius: 12px !important; display: grid !important; gap: 0.5rem !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(9rem, 0.5fr) !important; padding: 0.58rem !important; } .importzone-detected-url-value { align-self: end !important; color: rgba(191, 219, 254, 0.72) !important; font-size: 0.78rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .importzone-detected-url-row label, .organize-catalog-add-grid label { display: grid !important; gap: 0.26rem !important; min-width: 0 !important; } .importzone-detected-url-row span, .organize-catalog-add-grid span { color: rgba(191, 219, 254, 0.66) !important; font-size: 0.66rem !important; font-weight: 440 !important; text-transform: uppercase !important; } .importzone-detected-url-row input, .importzone-detected-url-row select, .organize-catalog-add-grid input, .organize-catalog-add-grid select { background: rgba(2, 8, 17, 0.58) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; color: rgba(245, 249, 255, 0.92) !important; min-height: 2.25rem !important; padding: 0 0.65rem !important; } .organize-catalog-add-grid { display: grid !important; gap: 0.6rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .catalog-add-choice-grid { display: grid !important; gap: 0.58rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: 0.7rem 0 0.76rem !important; } .catalog-add-choice { align-items: flex-start !important; background: linear-gradient(145deg, rgba(25, 42, 75, 0.78), rgba(8, 18, 34, 0.86)) !important; border: 1px solid rgba(168, 85, 247, 0.22) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; color: rgba(245, 249, 255, 0.92) !important; cursor: pointer !important; display: grid !important; gap: 0.22rem !important; min-height: 4.4rem !important; padding: 0.82rem !important; text-align: left !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease !important; } .catalog-add-choice:hover, .catalog-add-choice:focus-visible { background: linear-gradient(145deg, rgba(65, 42, 119, 0.72), rgba(11, 29, 52, 0.9)) !important; border-color: rgba(196, 181, 253, 0.48) !important; box-shadow: 0 14px 34px rgba(76, 29, 149, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transform: translateY(-1px) !important; } .catalog-add-choice strong { color: rgba(255, 255, 255, 0.96) !important; font-size: 0.86rem !important; font-weight: 650 !important; line-height: 1.18 !important; } .catalog-add-choice span { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.74rem !important; font-weight: 420 !important; line-height: 1.34 !important; text-transform: none !important; } .catalog-add-choice.is-muted, .catalog-add-choice:disabled { cursor: default !important; opacity: 0.58 !important; transform: none !important; } .catalog-add-section-label { color: rgba(216, 180, 254, 0.82) !important; font-size: 0.72rem !important; font-weight: 640 !important; letter-spacing: 0.04em !important; margin: 0 0 0.5rem !important; text-transform: uppercase !important; } @media (max-width: 820px) { .importzone-url-mode-grid, .importzone-detected-url-row, .catalog-add-choice-grid, .organize-catalog-add-grid { grid-template-columns: 1fr !important; } } .organize-catalog-body-field textarea { font: 400 0.92rem/1.52 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; padding: 0.8rem !important; resize: vertical !important; white-space: pre-wrap !important; } .importzone-primary-button { background: linear-gradient(135deg, rgba(37, 99, 235, 0.9), rgba(124, 58, 237, 0.82)) !important; border-color: rgba(191, 219, 254, 0.24) !important; color: rgba(255, 255, 255, 0.96) !important; } .importzone-preview-list { display: grid !important; gap: 0.72rem !important; } .importzone-preview-item { background: linear-gradient(135deg, rgba(10, 31, 55, 0.92), rgba(4, 15, 29, 0.92)) !important; border: 1px solid rgba(137, 161, 204, 0.13) !important; border-radius: 14px !important; display: grid !important; gap: 0.65rem !important; grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 0.36fr) !important; padding: 0.8rem !important; } .importzone-preview-question { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.12), transparent 12rem), linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(196, 181, 253, 0.12) !important; border-radius: 12px !important; display: grid !important; gap: 0.22rem !important; grid-column: 1 / -1 !important; padding: 0.72rem 0.8rem !important; } .importzone-preview-question span { color: rgba(196, 181, 253, 0.92) !important; font-size: 0.68rem !important; font-weight: 560 !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; } .importzone-preview-question strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.95rem !important; font-weight: 470 !important; line-height: 1.35 !important; } .importzone-preview-question small { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.78rem !important; line-height: 1.35 !important; } .importzone-preview-item label { display: grid !important; gap: 0.28rem !important; min-width: 0 !important; } .importzone-preview-item label span { color: rgba(191, 219, 254, 0.66) !important; font-size: 0.68rem !important; font-weight: 440 !important; text-transform: uppercase !important; } .importzone-preview-item input, .importzone-preview-item select, .importzone-preview-item textarea { background: rgba(2, 8, 17, 0.58) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; color: rgba(245, 249, 255, 0.92) !important; min-height: 2.4rem !important; padding: 0 0.7rem !important; } .importzone-preview-item textarea { font: 400 0.88rem/1.48 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; padding: 0.62rem 0.7rem !important; resize: vertical !important; } .importzone-preview-lines, .importzone-reference-chips, .importzone-preview-actions { grid-column: 1 / -1 !important; } .importzone-reference-chips { display: flex !important; flex-wrap: wrap !important; gap: 0.42rem !important; margin-top: -0.08rem !important; } .importzone-reference-chip { align-items: center !important; background: linear-gradient(135deg, rgba(34, 211, 238, 0.09), rgba(168, 85, 247, 0.08)) !important; border: 1px solid rgba(125, 211, 252, 0.16) !important; border-radius: 999px !important; color: rgba(219, 234, 254, 0.78) !important; display: inline-flex !important; font-size: 0.78rem !important; gap: 0.4rem !important; max-width: 100% !important; min-height: 1.95rem !important; overflow: hidden !important; padding: 0.28rem 0.62rem !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .importzone-reference-chip strong { color: rgba(125, 211, 252, 0.9) !important; font-size: 0.64rem !important; font-weight: 560 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } .importzone-preview-actions { display: flex !important; flex-wrap: wrap !important; gap: 0.45rem !important; } .importzone-preview-actions .secondary-button { border-radius: 999px !important; font-size: 0.78rem !important; min-height: 2rem !important; padding: 0.28rem 0.64rem !important; } .importzone-preview-item p { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.82rem !important; grid-column: 1 / -1 !important; line-height: 1.45 !important; margin: 0 !important; } .importzone-empty-state { border: 1px dashed rgba(148, 163, 184, 0.22) !important; border-radius: 14px !important; color: rgba(203, 213, 225, 0.68) !important; padding: 2rem !important; text-align: center !important; } .importzone-status[data-status-tone="success"] { color: rgba(134, 239, 172, 0.9) !important; } .importzone-status[data-status-tone="error"] { color: rgba(252, 165, 165, 0.92) !important; } /* P10OK ImportZone progressive intake workflow. */ .importzone-screen { background: radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.18), transparent 22rem), radial-gradient(circle at 70% 18%, rgba(14, 165, 233, 0.09), transparent 24rem), linear-gradient(145deg, rgba(5, 13, 27, 0.98), rgba(2, 8, 18, 0.98)) !important; border-color: rgba(137, 161, 204, 0.13) !important; max-width: 1500px !important; } .importzone-dev-preview-banner, .importzone-dev-gate { background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 18rem), linear-gradient(135deg, rgba(12, 25, 43, 0.86), rgba(5, 14, 27, 0.92)) !important; border: 1px solid rgba(94, 234, 212, 0.2) !important; border-radius: 16px !important; color: rgba(226, 232, 240, 0.92) !important; padding: 0.85rem 1rem !important; } .importzone-dev-preview-banner { align-items: center !important; display: flex !important; gap: 0.65rem !important; } .importzone-dev-preview-banner strong, .importzone-dev-gate strong { color: rgba(236, 253, 245, 0.96) !important; } .importzone-dev-gate { display: grid !important; min-height: 18rem !important; place-items: center !important; text-align: center !important; } .importzone-dev-gate[hidden], .importzone-dev-preview-banner[hidden] { display: none !important; } .importzone-screen.is-importzone-dev-gated .importzone-shell, .importzone-screen.is-importzone-dev-gated .importzone-bottom-bar { display: none !important; } body:has(.importzone-screen:not([hidden])) .card.app-screen.importzone-screen, body:has(.importzone-screen:not([hidden])) .importzone-screen.card { background: radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.18), transparent 22rem), radial-gradient(circle at 70% 18%, rgba(14, 165, 233, 0.09), transparent 24rem), linear-gradient(145deg, rgba(5, 13, 27, 0.98), rgba(2, 8, 18, 0.98)) !important; color: rgba(238, 245, 255, 0.92) !important; } .importzone-header { align-items: center !important; background: transparent !important; border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important; display: grid !important; gap: 0.9rem !important; grid-template-columns: auto minmax(0, 1fr) minmax(24rem, 0.9fr) !important; margin: -1.35rem -1.35rem 1rem !important; padding: 1.25rem 1.35rem 1rem !important; } .importzone-logo-mark { align-items: center !important; background: linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(79, 70, 229, 0.84)) !important; border-radius: 999px !important; box-shadow: 0 0 24px rgba(139, 92, 246, 0.34) !important; color: white !important; display: inline-flex !important; font-size: 1.15rem !important; font-weight: 650 !important; height: 2.6rem !important; justify-content: center !important; width: 2.6rem !important; } .importzone-header .screen-title { font-size: clamp(1.55rem, 2vw, 2.15rem) !important; font-weight: 560 !important; line-height: 1.05 !important; } .importzone-stepper { align-items: center !important; display: grid !important; gap: 0.7rem !important; grid-template-columns: 1fr 1fr 1fr !important; } .importzone-stepper span { align-items: center !important; color: rgba(203, 213, 225, 0.72) !important; display: flex !important; gap: 0.5rem !important; position: relative !important; } .importzone-stepper span:not(:last-child)::after { background: rgba(148, 163, 184, 0.24) !important; content: "" !important; height: 1px !important; left: calc(100% - 0.2rem) !important; position: absolute !important; right: -0.5rem !important; top: 50% !important; } .importzone-stepper strong { align-items: center !important; border: 1px solid rgba(148, 163, 184, 0.4) !important; border-radius: 999px !important; display: inline-flex !important; height: 2rem !important; justify-content: center !important; width: 2rem !important; } .importzone-stepper .is-active { color: rgba(216, 180, 254, 0.96) !important; } .importzone-stepper .is-active strong { background: linear-gradient(135deg, rgba(124, 58, 237, 0.98), rgba(79, 70, 229, 0.9)) !important; border-color: rgba(196, 181, 253, 0.48) !important; box-shadow: 0 0 20px rgba(124, 58, 237, 0.28) !important; } .importzone-shell { align-items: start !important; display: grid !important; gap: 0.85rem !important; grid-template-columns: minmax(16rem, 0.86fr) minmax(22rem, 1.28fr) minmax(18rem, 0.95fr) !important; } .importzone-input-panel, .importzone-preview-panel, .importzone-actions-panel { background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.10), transparent 14rem), linear-gradient(145deg, rgba(11, 25, 45, 0.82), rgba(4, 12, 24, 0.94)) !important; border: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 12px !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; display: grid !important; gap: 0.85rem !important; min-width: 0 !important; padding: 1rem !important; } .importzone-panel-heading { margin-bottom: 0 !important; } .importzone-panel-heading h3 { font-size: 1.02rem !important; font-weight: 520 !important; } .importzone-panel-heading p { font-size: 0.84rem !important; line-height: 1.42 !important; } .importzone-input-tabs { background: rgba(2, 8, 17, 0.38) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 10px !important; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; overflow: hidden !important; } .importzone-input-tabs button { background: transparent !important; border: 0 !important; border-radius: 0 !important; color: rgba(203, 213, 225, 0.75) !important; min-height: 2.7rem !important; } .importzone-input-tabs button.is-active { color: rgba(216, 180, 254, 0.96) !important; box-shadow: inset 0 -2px 0 rgba(168, 85, 247, 0.85) !important; } .importzone-unified-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.6rem !important; justify-content: space-between !important; margin-bottom: 0.85rem !important; } .importzone-drop-pad { background: linear-gradient(145deg, rgba(4, 13, 25, 0.78), rgba(10, 24, 44, 0.62)) !important; border: 1px dashed rgba(167, 139, 250, 0.32) !important; border-radius: 12px !important; display: grid !important; gap: 0.45rem !important; min-height: 18rem !important; padding: 0.9rem !important; text-align: center !important; } .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) { text-align: left !important; } .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) .importzone-drop-icon, .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) > strong, .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) > small { display: none !important; } .importzone-drop-pad.is-file-drag-over { background: radial-gradient(circle at 50% 0%, rgba(45, 212, 191, 0.22), transparent 62%), linear-gradient(145deg, rgba(5, 31, 42, 0.92), rgba(10, 24, 44, 0.74)) !important; border-color: rgba(45, 212, 191, 0.78) !important; box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.22), 0 18px 46px rgba(13, 148, 136, 0.22) !important; } .importzone-drop-icon { align-items: center !important; border: 2px solid rgba(168, 85, 247, 0.88) !important; border-radius: 9px !important; color: rgba(216, 180, 254, 0.98) !important; display: inline-flex !important; font-size: 1.4rem !important; height: 2.6rem !important; justify-content: center !important; justify-self: center !important; width: 2.2rem !important; } .importzone-drop-pad strong { color: rgba(248, 250, 252, 0.95) !important; font-size: 1rem !important; font-weight: 520 !important; } .importzone-drop-pad small { color: rgba(203, 213, 225, 0.63) !important; } .importzone-textarea { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; min-height: 12rem !important; text-align: left !important; } .importzone-drop-pad .importzone-textarea:focus { outline: 0 !important; } .importzone-recent-panel, .importzone-detected-text-card, .importzone-pdf-preview-card, .importzone-content-summary, .importzone-simple-url-suggestion { background: rgba(2, 8, 17, 0.38) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 11px !important; padding: 0.75rem !important; } .importzone-mini-heading { align-items: center !important; color: rgba(203, 213, 225, 0.64) !important; display: flex !important; font-size: 0.7rem !important; font-weight: 560 !important; justify-content: space-between !important; letter-spacing: 0.055em !important; text-transform: uppercase !important; } .importzone-recent-panel article { align-items: center !important; border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important; display: grid !important; gap: 0.12rem 0.65rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0.65rem 0 !important; } .importzone-recent-panel article:last-child { border-bottom: 0 !important; } .importzone-recent-panel strong { color: rgba(248, 250, 252, 0.9) !important; font-size: 0.84rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .importzone-recent-panel small { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.75rem !important; grid-column: 2 !important; } .importzone-recent-panel em { background: rgba(124, 58, 237, 0.34) !important; border-radius: 999px !important; color: rgba(221, 214, 254, 0.96) !important; font-size: 0.7rem !important; font-style: normal !important; grid-row: 1 / span 2 !important; padding: 0.16rem 0.5rem !important; } .importzone-recent-icon { align-items: center !important; background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.88)) !important; border-radius: 8px !important; color: white !important; display: inline-flex !important; font-size: 0.75rem !important; height: 2rem !important; justify-content: center !important; width: 2rem !important; } .importzone-recent-icon.is-pdf { background: linear-gradient(135deg, rgba(248, 250, 252, 0.92), rgba(226, 232, 240, 0.78)) !important; color: rgba(239, 68, 68, 0.95) !important; } .importzone-recent-icon.is-sheet { background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(22, 101, 52, 0.88)) !important; } .importzone-support-note { color: rgba(203, 213, 225, 0.58) !important; line-height: 1.45 !important; } .importzone-detected-text-card pre { color: rgba(226, 232, 240, 0.9) !important; font: 400 0.86rem/1.55 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; margin: 0.75rem 0 0 !important; max-height: 16rem !important; overflow: auto !important; white-space: pre-wrap !important; } .importzone-pdf-preview-card { display: grid !important; gap: 0.7rem !important; margin-top: 0.75rem !important; } .importzone-pdf-preview-card[hidden] { display: none !important; } .importzone-pdf-preview-card iframe { background: rgba(2, 8, 17, 0.7) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 12px !important; min-height: 24rem !important; width: 100% !important; } .importzone-pdf-preview-card p { color: rgba(203, 213, 225, 0.66) !important; font-size: 0.8rem !important; margin: 0 !important; } .importzone-url-promotion-panel { margin-top: 0 !important; } .importzone-detected-url-row { align-items: center !important; grid-template-columns: auto auto minmax(0, 1fr) minmax(8rem, 0.75fr) minmax(7rem, 0.5fr) !important; } .importzone-url-drag { color: rgba(148, 163, 184, 0.56) !important; font-size: 1rem !important; } .importzone-url-kind { align-items: center !important; background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.88)) !important; border-radius: 8px !important; color: white !important; display: inline-flex !important; height: 2rem !important; justify-content: center !important; text-transform: none !important; width: 2rem !important; } .importzone-actions-panel { position: sticky !important; top: 0.7rem !important; } .importzone-content-summary, .importzone-simple-url-suggestion { display: grid !important; gap: 0.32rem !important; } .importzone-content-summary strong, .importzone-simple-url-suggestion strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.82rem !important; text-transform: uppercase !important; } .importzone-content-summary span, .importzone-simple-url-suggestion small { color: rgba(203, 213, 225, 0.7) !important; font-size: 0.82rem !important; } .importzone-simple-url-suggestion { border-color: rgba(34, 197, 94, 0.28) !important; box-shadow: 0 0 22px rgba(34, 197, 94, 0.08) !important; } .importzone-simple-url-suggestion[hidden] { display: none !important; } .importzone-url-mode-grid { grid-template-columns: 1fr !important; } .importzone-url-mode-grid label { min-height: 0 !important; } .importzone-catalog-fields, .importzone-destination-panel { grid-template-columns: 1fr !important; } .importzone-destination-card { min-height: 0 !important; } .importzone-destination-card.is-recommended { border-color: rgba(168, 85, 247, 0.7) !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.08), 0 0 28px rgba(124, 58, 237, 0.22) !important; } .importzone-bottom-bar { background: linear-gradient(145deg, rgba(11, 25, 45, 0.82), rgba(4, 12, 24, 0.94)) !important; border: 1px solid rgba(137, 161, 204, 0.13) !important; border-radius: 12px !important; display: grid !important; gap: 0.8rem !important; grid-template-columns: repeat(4, minmax(0, 1fr)) auto !important; margin-top: 0.85rem !important; padding: 0.85rem 1rem !important; } .importzone-bottom-bar span { color: rgba(203, 213, 225, 0.66) !important; font-size: 0.82rem !important; } .importzone-bottom-bar strong { color: rgba(248, 250, 252, 0.9) !important; display: block !important; font-weight: 540 !important; } .importzone-stage-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.55rem !important; justify-content: end !important; } .importzone-detection-actions .secondary-button { background: rgba(12, 27, 48, 0.82) !important; border: 1px solid rgba(148, 163, 184, 0.22) !important; color: rgba(238, 245, 255, 0.94) !important; } .importzone-detection-actions .secondary-button:hover, .importzone-detection-actions .secondary-button:focus-visible { border-color: rgba(94, 234, 212, 0.46) !important; box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.14), 0 12px 28px rgba(13, 148, 136, 0.16) !important; } .importzone-detection-actions .importzone-primary-button { background: linear-gradient(135deg, rgba(20, 184, 166, 0.92), rgba(79, 70, 229, 0.88)) !important; border-color: rgba(153, 246, 228, 0.44) !important; color: #ffffff !important; } .importzone-screen[data-importzone-stage="intake"] .importzone-shell { grid-template-columns: minmax(0, 1fr) !important; } .importzone-screen[data-importzone-stage="intake"] .importzone-input-panel { justify-self: center !important; max-width: 58rem !important; width: min(100%, 58rem) !important; } .importzone-screen[data-importzone-stage="intake"] .importzone-drop-pad { min-height: 28rem !important; } .importzone-screen[data-importzone-stage="intake"] .importzone-preview-panel, .importzone-screen[data-importzone-stage="intake"] .importzone-actions-panel, .importzone-screen[data-importzone-stage="intake"] .importzone-bottom-bar { display: none !important; } .importzone-screen[data-importzone-stage="review"] .importzone-shell { grid-template-columns: minmax(0, 1fr) !important; } .importzone-screen[data-importzone-stage="review"] .importzone-actions-panel { display: none !important; } .importzone-screen[data-importzone-stage="review"] .importzone-input-panel { display: none !important; } .importzone-screen[data-importzone-stage="review"] .importzone-preview-panel { justify-self: stretch !important; max-width: none !important; width: 100% !important; } .importzone-screen[data-importzone-stage="save"] .importzone-shell { grid-template-columns: minmax(0, 1fr) !important; } .importzone-screen[data-importzone-stage="save"] .importzone-input-panel { display: none !important; } .importzone-screen[data-importzone-stage="save"] .importzone-actions-panel { display: grid !important; } .importzone-screen[data-importzone-stage="save"] .importzone-preview-panel { display: none !important; max-height: calc(100vh - 12rem) !important; overflow: auto !important; } .importzone-screen[data-importzone-stage="review"] .importzone-bottom-bar { display: grid !important; } .importzone-screen[data-importzone-stage="save"] .importzone-bottom-bar { display: none !important; } @media (max-width: 1180px) { .importzone-header, .importzone-shell, .importzone-bottom-bar { grid-template-columns: 1fr !important; } .importzone-actions-panel { position: static !important; } .importzone-stepper { max-width: 34rem !important; } .importzone-screen[data-importzone-stage] .importzone-shell { grid-template-columns: 1fr !important; } } .organize-catalog-workspace { display: grid !important; gap: 0.8rem !important; } .catalog-workspace-topbar, .organize-catalog-tools, .organize-catalog-list, .organize-catalog-detail, .organize-catalog-browser, .organize-catalog-viewer, .organize-catalog-actions { background: linear-gradient(145deg, rgba(9, 27, 49, 0.9), rgba(3, 12, 24, 0.94)) !important; border: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 16px !important; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; } .catalog-workspace-topbar { align-items: center !important; display: grid !important; gap: 1rem !important; grid-template-columns: auto minmax(0, 1fr) !important; padding: 0.7rem 0.85rem !important; } .catalog-workspace-brand { align-items: center !important; display: flex !important; gap: 0.75rem !important; min-width: 14rem !important; } .catalog-workspace-logo { align-items: center !important; background: radial-gradient(circle at 35% 30%, rgba(250, 204, 21, 0.92), rgba(168, 85, 247, 0.72) 62%, rgba(2, 8, 17, 0.86)) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; box-shadow: 0 0 28px rgba(168, 85, 247, 0.24) !important; color: #fff !important; display: inline-flex !important; font-weight: 780 !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } .catalog-workspace-brand h2 { color: rgba(250, 252, 255, 0.96) !important; font-size: 1.35rem !important; font-weight: 620 !important; letter-spacing: 0 !important; margin: 0 !important; } .catalog-workspace-brand p { color: rgba(203, 213, 225, 0.72) !important; font-size: 0.76rem !important; margin: 0 !important; } .catalog-workspace-controls { align-items: start !important; display: grid !important; gap: 0.7rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } .organize-catalog-tools { align-items: end !important; display: grid !important; gap: 0.55rem !important; grid-template-columns: minmax(13rem, 1.4fr) repeat(3, minmax(7rem, 0.55fr)) !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .organize-catalog-layout { display: grid !important; gap: 0.8rem !important; grid-template-columns: minmax(20rem, 0.78fr) minmax(0, 1.48fr) minmax(19rem, 0.82fr) !important; align-items: start !important; } .organize-catalog-list, .organize-catalog-detail, .organize-catalog-browser, .organize-catalog-viewer, .organize-catalog-actions { min-width: 0 !important; padding: 0.85rem !important; } .organize-catalog-browser, .organize-catalog-viewer, .organize-catalog-actions { display: grid !important; gap: 0.72rem !important; } .catalog-browser-header { align-items: center !important; display: flex !important; justify-content: space-between !important; } .catalog-browser-header strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.78rem !important; font-weight: 520 !important; letter-spacing: 0.035em !important; text-transform: uppercase !important; } .catalog-browser-header small, .catalog-row-link-count { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.76rem !important; } .organize-catalog-list { align-content: start !important; display: grid !important; gap: 0.55rem !important; max-height: 44rem !important; overflow: auto !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .catalog-browser-search { display: grid !important; gap: 0.28rem !important; } .catalog-browser-search span { color: rgba(191, 219, 254, 0.66) !important; font-size: 0.66rem !important; font-weight: 440 !important; text-transform: uppercase !important; } .catalog-browser-search input { background: rgba(2, 8, 17, 0.58) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; color: rgba(245, 249, 255, 0.92) !important; min-height: 2.35rem !important; padding: 0 0.7rem !important; } .organize-catalog-row { background: linear-gradient(135deg, rgba(11, 28, 50, 0.58), rgba(4, 15, 29, 0.7)) !important; border: 1px solid rgba(137, 161, 204, 0.09) !important; border-radius: 13px !important; color: rgba(245, 249, 255, 0.9) !important; cursor: pointer !important; display: grid !important; gap: 0.65rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-height: 4.55rem !important; padding: 0.62rem !important; text-align: left !important; } .organize-catalog-row:hover, .organize-catalog-row.is-selected { background: linear-gradient(135deg, rgba(76, 29, 149, 0.42), rgba(15, 42, 72, 0.58)) !important; border-color: rgba(168, 85, 247, 0.58) !important; box-shadow: 0 0 30px rgba(168, 85, 247, 0.17) !important; } .catalog-row-icon { align-items: center !important; background: linear-gradient(135deg, rgba(124, 58, 237, 0.86), rgba(14, 165, 233, 0.48)) !important; border-radius: 10px !important; color: rgba(255, 255, 255, 0.96) !important; display: inline-flex !important; font-size: 1rem !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } .catalog-icon-tile { align-items: center !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 22px rgba(124, 58, 237, 0.20) !important; color: rgba(255, 255, 255, 0.96) !important; display: inline-flex !important; flex: 0 0 auto !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } .catalog-icon-tile svg { fill: none !important; height: 1.25rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.85 !important; width: 1.25rem !important; } .catalog-icon-video { background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.88)) !important; } .catalog-icon-dropbox { background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(29, 78, 216, 0.88)) !important; } .catalog-icon-drive { background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(234, 179, 8, 0.86)) !important; } .catalog-icon-document { background: linear-gradient(135deg, rgba(139, 92, 246, 0.96), rgba(79, 70, 229, 0.9)) !important; } .catalog-icon-email { background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(180, 83, 9, 0.88)) !important; } .catalog-icon-audio { background: linear-gradient(135deg, rgba(168, 85, 247, 0.96), rgba(79, 70, 229, 0.88)) !important; } .catalog-icon-lesson { background: linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(14, 116, 144, 0.9)) !important; } .catalog-row-copy { min-width: 0 !important; } .organize-catalog-row strong { display: block !important; font-weight: 520 !important; line-height: 1.25 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-row-meta { align-content: center !important; display: grid !important; gap: 0.25rem !important; justify-items: end !important; min-width: 4rem !important; } .organize-catalog-row small, .organize-catalog-row em, .organize-catalog-detail p, .organize-catalog-detail-actions span { color: rgba(203, 213, 225, 0.65) !important; font-style: normal !important; } .organize-catalog-detail { display: grid !important; gap: 0.8rem !important; } .catalog-viewer-card { display: grid !important; gap: 0.85rem !important; } .catalog-viewer-header, .catalog-viewer-actions { align-items: start !important; display: flex !important; gap: 0.75rem !important; justify-content: space-between !important; } .catalog-viewer-actions { flex-wrap: wrap !important; justify-content: flex-end !important; } .catalog-viewer-header h3 { color: rgba(250, 252, 255, 0.96) !important; font-size: clamp(1.6rem, 3vw, 2.65rem) !important; font-weight: 430 !important; letter-spacing: 0 !important; line-height: 1.04 !important; margin: 0.08rem 0 0.35rem !important; } .catalog-viewer-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.42rem !important; margin-top: 0.55rem !important; } .catalog-viewer-meta span { background: rgba(125, 211, 252, 0.08) !important; border: 1px solid rgba(125, 211, 252, 0.14) !important; border-radius: 999px !important; color: rgba(191, 219, 254, 0.78) !important; font-size: 0.72rem !important; padding: 0.2rem 0.52rem !important; } .catalog-attached-references, .catalog-primary-reference, .catalog-links-found, .catalog-rich-text-viewer { background: linear-gradient(145deg, rgba(2, 8, 17, 0.52), rgba(8, 23, 42, 0.5)) !important; border: 1px solid rgba(137, 161, 204, 0.13) !important; border-radius: 14px !important; padding: 0.85rem !important; } .catalog-attached-references, .catalog-primary-reference, .catalog-links-found { display: grid !important; gap: 0.58rem !important; } .catalog-section-heading { display: grid !important; gap: 0.18rem !important; } .catalog-section-heading small { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.78rem !important; } .catalog-section-heading h4, .catalog-rich-text-viewer h4, .catalog-linked-group h4 { color: rgba(226, 232, 240, 0.82) !important; font-size: 0.72rem !important; font-weight: 520 !important; letter-spacing: 0.055em !important; margin: 0 !important; text-transform: uppercase !important; } .catalog-reference-card { align-items: center !important; background: linear-gradient(135deg, rgba(15, 42, 72, 0.64), rgba(2, 8, 17, 0.72)) !important; border: 1px solid rgba(125, 211, 252, 0.14) !important; border-radius: 13px !important; display: grid !important; gap: 0.65rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0.62rem !important; } .catalog-reference-card.is-found-link { border-color: rgba(196, 181, 253, 0.13) !important; } .catalog-reference-icon { align-items: center !important; background: radial-gradient(circle at 35% 30%, rgba(125, 211, 252, 0.34), rgba(168, 85, 247, 0.18) 60%, rgba(2, 8, 17, 0.8)) !important; border: 1px solid rgba(191, 219, 254, 0.16) !important; border-radius: 12px !important; color: rgba(248, 250, 252, 0.9) !important; display: inline-flex !important; height: 2.25rem !important; justify-content: center !important; width: 2.25rem !important; } .catalog-reference-copy { display: grid !important; gap: 0.12rem !important; min-width: 0 !important; } .catalog-reference-copy strong { color: rgba(248, 250, 252, 0.92) !important; font-weight: 520 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-reference-copy small { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.76rem !important; } .catalog-reference-copy em { color: rgba(125, 211, 252, 0.72) !important; font-size: 0.74rem !important; font-style: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-rich-text-viewer { display: grid !important; gap: 0.7rem !important; } .catalog-rich-text-viewer pre { background: rgba(2, 8, 17, 0.32) !important; border: 1px solid rgba(137, 161, 204, 0.08) !important; border-radius: 12px !important; color: rgba(226, 232, 240, 0.88) !important; font: 400 0.94rem/1.58 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; margin: 0 !important; max-height: 30rem !important; overflow: auto !important; padding: 0.82rem !important; white-space: pre-wrap !important; } .catalog-rich-text-viewer.is-empty p { margin: 0 !important; } .organize-catalog-detail-header { align-items: start !important; display: flex !important; justify-content: space-between !important; gap: 1rem !important; } .organize-catalog-detail-header h3 { color: rgba(250, 252, 255, 0.95) !important; font-size: 1.45rem !important; font-weight: 520 !important; margin: 0 !important; } .organize-catalog-meta { display: grid !important; gap: 0.65rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .organize-catalog-detail-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.75rem !important; } .organize-catalog-links, .modal-catalog-lookup { background: rgba(2, 8, 17, 0.38) !important; border: 1px solid rgba(137, 161, 204, 0.13) !important; border-radius: 14px !important; display: grid !important; gap: 0.58rem !important; padding: 0.75rem !important; } .catalog-attach-type-tabs { display: grid !important; gap: 0.45rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .catalog-attach-type-tabs button { background: rgba(2, 8, 17, 0.4) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 999px !important; color: rgba(226, 232, 240, 0.74) !important; cursor: pointer !important; min-height: 2rem !important; } .catalog-attach-type-tabs button.is-selected { border-color: rgba(196, 181, 253, 0.34) !important; color: rgba(255, 255, 255, 0.94) !important; box-shadow: 0 0 22px rgba(168, 85, 247, 0.12) !important; } .catalog-attach-target-row { display: grid !important; gap: 0.45rem !important; grid-template-columns: 1fr !important; background: rgba(2, 8, 17, 0.22) !important; border: 1px solid rgba(137, 161, 204, 0.08) !important; border-radius: 13px !important; padding: 0.45rem !important; } .catalog-attach-edit-target { border-radius: 999px !important; justify-self: start !important; white-space: nowrap !important; } .catalog-linked-group { display: grid !important; gap: 0.45rem !important; } .organize-catalog-metadata-editor { display: grid !important; gap: 0.7rem !important; } .organize-catalog-metadata-editor summary { color: rgba(248, 250, 252, 0.9) !important; cursor: pointer !important; font-weight: 520 !important; } .organize-catalog-links h4, .modal-catalog-lookup-header strong { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.95rem !important; font-weight: 520 !important; margin: 0 !important; } .organize-catalog-link-row, .modal-catalog-lookup-header { align-items: center !important; display: flex !important; gap: 0.75rem !important; justify-content: space-between !important; } .organize-catalog-link-row span, .modal-catalog-lookup-results button { min-width: 0 !important; } .organize-catalog-link-row strong, .modal-catalog-lookup-results span { color: rgba(245, 249, 255, 0.9) !important; display: block !important; font-weight: 500 !important; } .organize-catalog-link-row small, .modal-catalog-lookup-header span, .modal-catalog-lookup-results small, .organize-catalog-links p, .organize-catalog-attach-list > span { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.82rem !important; } .organize-catalog-attach-list, .modal-catalog-lookup-results { display: flex !important; flex-wrap: wrap !important; gap: 0.45rem !important; } .organize-catalog-links input, .modal-catalog-lookup input { background: rgba(2, 8, 17, 0.58) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 10px !important; color: rgba(245, 249, 255, 0.92) !important; min-height: 2.35rem !important; padding: 0 0.7rem !important; } .modal-catalog-lookup { margin: 0.8rem 0 !important; } .modal-catalog-lookup:empty { display: none !important; } .is-primary-attach-panel { border-color: rgba(139, 92, 246, 0.28) !important; box-shadow: 0 18px 42px rgba(6, 12, 27, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } .catalog-attach-help { margin: -0.15rem 0 0.1rem !important; } .organize-catalog-linked-list { display: grid !important; gap: 0.45rem !important; } .catalog-attach-target { align-items: flex-start !important; display: inline-flex !important; flex-direction: column !important; gap: 0.1rem !important; text-align: left !important; } .organize-catalog-empty { border: 1px dashed rgba(148, 163, 184, 0.22) !important; border-radius: 14px !important; color: rgba(203, 213, 225, 0.68) !important; padding: 1.5rem !important; text-align: center !important; } @media (max-width: 920px) { .importzone-shell { grid-template-columns: 1fr !important; } .importzone-preview-item { grid-template-columns: 1fr !important; } .importzone-destination-panel, .importzone-catalog-fields, .catalog-workspace-topbar, .catalog-workspace-controls, .organize-catalog-tools, .organize-catalog-layout, .organize-catalog-meta { grid-template-columns: 1fr !important; } .catalog-workspace-controls .organize-catalog-add-panel[open] { width: 100% !important; } } /* P10NG Active Schedule operational layer. */ .active-schedule-widget { align-items: center !important; background: radial-gradient(circle at 12% 42%, rgba(34, 211, 238, 0.24), transparent 4.6rem), radial-gradient(circle at 88% 0%, rgba(168, 85, 247, 0.18), transparent 5.8rem), linear-gradient(135deg, rgba(10, 31, 55, 0.96), rgba(8, 14, 34, 0.96)) !important; border: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 20px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24), 0 0 34px rgba(34, 211, 238, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; color: rgba(245, 249, 255, 0.94) !important; cursor: pointer !important; display: flex !important; gap: 0.68rem !important; justify-content: flex-start !important; margin: 0 0 0.72rem !important; min-height: 4.2rem !important; padding: 0.74rem 0.88rem !important; text-align: left !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; width: 100% !important; } .active-schedule-widget:hover, .active-schedule-widget:focus-visible { border-color: rgba(196, 181, 253, 0.28) !important; box-shadow: 0 22px 58px rgba(0, 0, 0, 0.32), 0 0 42px rgba(168, 85, 247, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; transform: translateY(-1px) !important; } .active-schedule-widget-icon, .active-schedule-drawer-icon, .active-schedule-option-icon { align-items: center !important; background: rgba(96, 165, 250, 0.13) !important; border: 1px solid rgba(147, 197, 253, 0.18) !important; border-radius: 999px !important; color: rgba(125, 211, 252, 0.95) !important; display: inline-flex !important; flex: 0 0 auto !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } .active-schedule-widget-icon { background: radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.16), transparent 1.1rem), linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(168, 85, 247, 0.18)) !important; } .active-schedule-widget-icon svg, .active-schedule-drawer-icon svg, .active-schedule-option-icon svg { fill: none !important; height: 1.08rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.8 !important; width: 1.08rem !important; } .active-schedule-widget-copy { display: grid !important; gap: 0.08rem !important; min-width: 0 !important; } .active-schedule-widget-copy small, .active-schedule-drawer-header small, .active-schedule-option-copy small, .organize-active-schedule-chip span, .organize-active-schedule-banner span, .organize-active-schedule-banner small { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 430 !important; } .active-schedule-widget-copy strong, .active-schedule-option-copy strong, .organize-active-schedule-chip strong, .organize-active-schedule-banner strong { color: rgba(250, 252, 255, 0.96) !important; font-size: 1rem !important; font-weight: 540 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress > .active-schedule-widget { flex: 0 0 auto !important; order: -2 !important; } body:has(.practice-dashboard:not([hidden])) .practice-rail-progress > .practice-rail-queue-button { order: -1 !important; } .active-schedule-widget-copy em { color: rgba(191, 219, 254, 0.62) !important; font-size: 0.78rem !important; font-style: normal !important; font-weight: 400 !important; } .active-schedule-drawer-shell { inset: 0 !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; transition: opacity 180ms ease !important; z-index: 90 !important; } body.active-schedule-drawer-open .active-schedule-drawer-shell { opacity: 1 !important; pointer-events: auto !important; } .active-schedule-drawer-scrim { background: rgba(2, 6, 16, 0.38) !important; inset: 0 !important; opacity: 0 !important; position: absolute !important; transition: opacity 160ms ease !important; } body.active-schedule-drawer-open .active-schedule-drawer-scrim { opacity: 1 !important; } .active-schedule-drawer { background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.18), transparent 42%), radial-gradient(circle at 95% 18%, rgba(45, 212, 191, 0.10), transparent 42%), linear-gradient(180deg, rgba(13, 20, 34, 0.98), rgba(6, 11, 22, 0.98)) !important; border-left: 0 !important; border-right: 1px solid rgba(221, 230, 247, 0.10) !important; box-shadow: 28px 0 70px rgba(0, 0, 0, 0.34) !important; box-sizing: border-box !important; color: #eef3ff !important; height: 100% !important; max-width: min(27rem, calc(100vw - 1.5rem)) !important; overflow-y: auto !important; padding: 1.25rem !important; pointer-events: auto !important; position: absolute !important; transform: translateX(-102%) !important; transition: transform 180ms ease !important; width: 24rem !important; } body.active-schedule-drawer-open .active-schedule-drawer { transform: translateX(0) !important; } .active-schedule-drawer-header { align-items: center !important; display: flex !important; gap: 0.72rem !important; justify-content: space-between !important; margin-bottom: 1rem !important; } .active-schedule-drawer-header > div { flex: 1 1 auto !important; min-width: 0 !important; } .active-schedule-drawer-header h3 { color: #eef3ff !important; font-size: 1.45rem !important; font-weight: 560 !important; line-height: 1.05 !important; margin: 0.12rem 0 0 !important; } .active-schedule-drawer-close { align-items: center !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(221, 230, 247, 0.10) !important; border-radius: 14px !important; color: #eef3ff !important; cursor: pointer !important; display: inline-flex !important; font-size: 1.2rem !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } .active-schedule-drawer-summary { color: rgba(232, 237, 250, 0.66) !important; font-size: 0.84rem !important; line-height: 1.35 !important; margin: 0 0 1rem !important; } .active-schedule-drawer-list { display: grid !important; gap: 0.55rem !important; } .active-schedule-option { align-items: center !important; background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(221, 230, 247, 0.075) !important; border-radius: 18px !important; cursor: pointer !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0.68rem !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .active-schedule-option:hover, .active-schedule-option:focus-within { background: rgba(139, 92, 246, 0.12) !important; border-color: rgba(167, 139, 250, 0.26) !important; box-shadow: 0 16px 38px rgba(0, 0, 0, 0.16) !important; transform: translateY(-1px) !important; } .active-schedule-option.is-active { background: rgba(139, 92, 246, 0.16) !important; border-color: rgba(167, 139, 250, 0.42) !important; box-shadow: none !important; } .active-schedule-option-copy { display: grid !important; min-width: 0 !important; } .active-schedule-option-actions { align-items: center !important; display: flex !important; gap: 0.38rem !important; } .active-schedule-option-actions button, .organize-active-schedule-banner button, .organize-schedule-use-button, .organize-active-schedule-chip { background: rgba(147, 197, 253, 0.1) !important; border: 1px solid rgba(147, 197, 253, 0.18) !important; border-radius: 999px !important; color: rgba(238, 245, 255, 0.92) !important; cursor: pointer !important; font-weight: 520 !important; min-height: 2rem !important; padding: 0 0.68rem !important; } .active-schedule-option-actions button { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(221, 230, 247, 0.10) !important; border-radius: 14px !important; color: rgba(238, 243, 255, 0.9) !important; font-size: 0.78rem !important; min-height: 1.85rem !important; padding: 0.28rem 0.58rem !important; } .active-schedule-option-actions em, .organize-schedule-current-pill { background: rgba(34, 197, 94, 0.13) !important; border: 1px solid rgba(134, 239, 172, 0.24) !important; border-radius: 999px !important; color: rgba(187, 247, 208, 0.9) !important; font-size: 0.76rem !important; font-style: normal !important; font-weight: 560 !important; padding: 0.38rem 0.62rem !important; } .organize-active-schedule-chip { align-items: start !important; display: grid !important; justify-items: start !important; line-height: 1.15 !important; padding: 0.46rem 0.78rem !important; } .organize-active-schedule-banner { align-items: center !important; background: linear-gradient(135deg, rgba(8, 27, 49, 0.92), rgba(4, 13, 28, 0.88)) !important; border: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 16px !important; display: flex !important; justify-content: space-between !important; margin: 0 0 0.9rem !important; padding: 0.8rem 0.95rem !important; } .organize-active-schedule-banner > div { display: grid !important; gap: 0.1rem !important; } @media (max-width: 720px) { .active-schedule-option { grid-template-columns: auto minmax(0, 1fr) !important; } .active-schedule-option-actions { grid-column: 1 / -1 !important; justify-content: flex-end !important; } .organize-active-schedule-banner { align-items: stretch !important; display: grid !important; gap: 0.6rem !important; } } /* Block runtime journey: move schedule visibility out of the old flat queue rail. */ body:has(.practice-dashboard:not([hidden])) .practice-rail-progress > .practice-rail-queue-button { display: none !important; } .schedule-journey-banner { margin-top: 1rem; padding: 0.85rem; border: 1px solid rgba(129, 140, 248, 0.28); border-radius: 22px; background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.24), transparent 34%), radial-gradient(circle at 92% 100%, rgba(45, 212, 191, 0.18), transparent 36%), linear-gradient(135deg, rgba(14, 24, 46, 0.92), rgba(5, 13, 26, 0.88)); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08); } .schedule-journey-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .schedule-journey-heading span { display: block; color: rgba(190, 204, 230, 0.68); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-journey-heading strong { display: block; color: rgba(248, 250, 252, 0.96); font-size: 1rem; font-weight: 650; } .schedule-journey-heading > button { white-space: nowrap; border-color: rgba(139, 92, 246, 0.38) !important; background: rgba(99, 102, 241, 0.14) !important; color: rgba(248, 250, 252, 0.94) !important; } .schedule-journey-blocks { display: flex; align-items: stretch; gap: 0.65rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: thin; } .schedule-journey-chip { --schedule-builder-accent: #a855f7; position: relative; display: grid; grid-template-columns: auto minmax(9rem, 1fr); grid-template-rows: auto auto; gap: 0.1rem 0.55rem; min-width: 13.5rem; padding: 0.72rem 0.82rem; border: 1px solid color-mix(in srgb, var(--schedule-builder-accent) 28%, rgba(148, 163, 184, 0.16)); border-radius: 17px; color: rgba(248, 250, 252, 0.92); text-align: left; background: linear-gradient(135deg, color-mix(in srgb, var(--schedule-builder-accent) 16%, transparent), rgba(8, 18, 35, 0.76)), rgba(15, 23, 42, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); cursor: pointer; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; } .schedule-journey-chip:hover, .schedule-journey-chip:focus-visible { transform: translateY(-1px); border-color: color-mix(in srgb, var(--schedule-builder-accent) 54%, rgba(255, 255, 255, 0.16)); box-shadow: 0 16px 34px color-mix(in srgb, var(--schedule-builder-accent) 18%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .schedule-journey-chip.is-current { background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--schedule-builder-accent) 36%, transparent), transparent 48%), linear-gradient(135deg, color-mix(in srgb, var(--schedule-builder-accent) 28%, rgba(12, 23, 43, 0.72)), rgba(11, 22, 40, 0.84)); border-color: color-mix(in srgb, var(--schedule-builder-accent) 72%, rgba(255, 255, 255, 0.18)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--schedule-builder-accent) 28%, transparent), 0 20px 42px color-mix(in srgb, var(--schedule-builder-accent) 22%, transparent); } .schedule-journey-chip.is-complete { opacity: 0.68; } .schedule-journey-chip > span { grid-row: 1 / 3; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: color-mix(in srgb, var(--schedule-builder-accent) 34%, rgba(255, 255, 255, 0.1)); color: white; font-size: 0.78rem; font-weight: 800; } .schedule-journey-chip strong { overflow: hidden; color: rgba(255, 255, 255, 0.96); font-size: 0.9rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .schedule-journey-chip small { overflow: hidden; color: rgba(203, 213, 225, 0.74); font-size: 0.76rem; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } #practiceQueueWorkspace .practice-queue-workspace-list { display: grid; gap: 0.8rem; } #practiceQueueWorkspace .practice-queue-workspace-block { display: grid; gap: 0.55rem; padding: 0.74rem; border: 1px solid rgba(129, 140, 248, 0.18); border-radius: 18px; background: rgba(10, 21, 39, 0.62); transition: box-shadow 180ms ease, border-color 180ms ease, transform 180ms ease; } #practiceQueueWorkspace .practice-queue-workspace-block.is-current, #practiceQueueWorkspace .practice-queue-workspace-block.is-inspected { border-color: rgba(139, 92, 246, 0.58); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.22), 0 20px 42px rgba(88, 80, 236, 0.16); } #practiceQueueWorkspace .practice-queue-workspace-block-heading { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; align-items: center; } #practiceQueueWorkspace .practice-queue-workspace-block-heading span { grid-column: 1; color: rgba(167, 139, 250, 0.82); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } #practiceQueueWorkspace .practice-queue-workspace-block-heading strong { grid-column: 1; color: rgba(248, 250, 252, 0.96); font-size: 1rem; } #practiceQueueWorkspace .practice-queue-workspace-block-heading em { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: 0.28rem 0.58rem; border-radius: 999px; color: rgba(226, 232, 240, 0.86); background: rgba(148, 163, 184, 0.12); font-size: 0.73rem; font-style: normal; font-weight: 700; } #practiceQueueWorkspace .practice-queue-workspace-block > ol { display: grid; gap: 0.42rem; margin: 0; padding: 0; list-style: none; } #practiceQueueWorkspace .practice-queue-workspace-empty-block { border: 1px dashed rgba(171, 139, 255, 0.24); border-radius: 14px; color: rgba(226, 232, 240, 0.62); padding: 0.72rem 0.82rem; background: rgba(6, 14, 27, 0.34); font-size: 0.9rem; } @media (max-width: 760px) { .schedule-journey-heading { align-items: stretch; flex-direction: column; } .schedule-journey-chip { min-width: 12rem; } } /* P10NG lock: keep the modern Schedules workspace out of the older pale schedule skin. */ html body:has(.organize-schedules-workspace) .app-shell > .app-header.header-with-nav { background: linear-gradient(180deg, rgba(4, 12, 24, 0.96), rgba(4, 12, 22, 0.92)) !important; border-color: rgba(105, 124, 164, 0.22) !important; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2) !important; } html body:has(.organize-schedules-workspace) .organize-workspace-shell:not([hidden]) { background: linear-gradient(180deg, rgba(2, 10, 20, 0.96), rgba(3, 13, 24, 0.98)) !important; border-color: rgba(125, 151, 194, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 56px rgba(0, 0, 0, 0.26) !important; grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr) !important; padding: 0 !important; } html body:has(.organize-schedules-workspace) .organize-workspace-main, html body:has(.organize-schedules-workspace) .organize-workspace-content, html body:has(.organize-schedules-workspace) .organize-context-card:has(.organize-schedules-workspace), html body:has(.organize-schedules-workspace) .organize-relationship-preview { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(238, 245, 255, 0.92) !important; padding: 0 !important; } html body:has(.organize-schedules-workspace) .organize-workspace-main { padding: 1.35rem 1.35rem 1.5rem !important; } html body:has(.organize-schedules-workspace) .organize-schedules-workspace { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; display: grid !important; gap: 1.1rem !important; grid-template-columns: minmax(0, 1fr) !important; margin: 0 !important; padding: 0 !important; } html body:has(.organize-schedules-workspace) .organize-schedules-modern-heading { align-items: center !important; display: flex !important; grid-column: 1 / -1 !important; height: auto !important; justify-content: space-between !important; min-height: auto !important; padding: 0.15rem 0.2rem 0.2rem !important; width: auto !important; } html body:has(.organize-schedules-workspace) .organize-schedules-modern-layout { display: grid !important; grid-column: 1 / -1 !important; grid-template-columns: minmax(12.5rem, 15rem) minmax(0, 1fr) !important; height: auto !important; width: auto !important; } html body:has(.organize-schedules-workspace) .organize-workspace-nav { background: linear-gradient(180deg, rgba(5, 16, 30, 0.94), rgba(3, 11, 22, 0.98)) !important; border-color: rgba(125, 151, 194, 0.16) !important; box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.035) !important; color: rgba(234, 242, 255, 0.86) !important; } html body:has(.organize-schedules-workspace) .organize-workspace-label, html body:has(.organize-schedules-workspace) .organize-nav-item { color: rgba(226, 236, 251, 0.76) !important; } html body:has(.organize-schedules-workspace) .organize-nav-item.is-selected { background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(37, 99, 235, 0.2)) !important; border-color: rgba(196, 181, 253, 0.2) !important; color: rgba(255, 255, 255, 0.96) !important; } html body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card, html body:has(.organize-schedules-workspace) .organize-source-pool-item, html body:has(.organize-schedules-workspace) .organize-schedule-section-empty { background: rgba(255, 255, 255, 0.035) !important; border-color: rgba(148, 163, 184, 0.12) !important; color: rgba(213, 225, 243, 0.72) !important; } html body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card strong, html body:has(.organize-schedules-workspace) .organize-schedule-card.is-selected strong, html body:has(.organize-schedules-workspace) .organize-schedule-summary-card h3, html body:has(.organize-schedules-workspace) .organize-schedule-summary-card b, html body:has(.organize-schedules-workspace) .organize-schedule-column-header span, html body:has(.organize-schedules-workspace) .organize-schedule-lane-header strong, html body:has(.organize-schedules-workspace) .organize-source-pool-item strong { color: rgba(245, 249, 255, 0.93) !important; } html body:has(.organize-schedules-workspace) .organize-custom-schedule-empty-card span, html body:has(.organize-schedules-workspace) .organize-schedule-card.is-selected small, html body:has(.organize-schedules-workspace) .organize-schedule-summary-card p, html body:has(.organize-schedules-workspace) .organize-schedule-summary-card em, html body:has(.organize-schedules-workspace) .organize-schedule-column-header strong, html body:has(.organize-schedules-workspace) .organize-schedule-lane-header span, html body:has(.organize-schedules-workspace) .organize-schedule-lane-guidance, html body:has(.organize-schedules-workspace) .organize-source-pool-item small { color: rgba(211, 224, 244, 0.7) !important; } html body:has(.organize-schedules-workspace) .organize-schedule-summary-note, html body:has(.organize-schedules-workspace) .organize-schedule-section-empty { color: rgba(200, 214, 236, 0.68) !important; } html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-summary-card h3, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-summary-card h3 small, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-column-header span, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-lane-header strong, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-source-pool-lane .organize-schedule-lane-header strong { color: rgba(248, 251, 255, 0.94) !important; } html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-summary-card p, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-summary-card em, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-summary-note, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-column-header strong, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-schedule-lane-header span, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-source-pool-lane .organize-schedule-lane-header span { color: rgba(211, 224, 244, 0.72) !important; } html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-source-pool-lane .organize-schedule-section-empty, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-source-pool-lane, html body:has(.organize-schedules-workspace) #organizeRelationshipPreview .organize-source-pool-item { background: rgba(255, 255, 255, 0.032) !important; border-color: rgba(148, 163, 184, 0.13) !important; color: rgba(210, 224, 244, 0.72) !important; } /* P10NG Activities workspace modernization. */ body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) { --activity-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; --activity-display-font: "Iowan Old Style", "Iowan", Georgia, serif; --activity-weight-heading: 560; --activity-weight-title: 460; --activity-weight-body: 340; --activity-weight-meta: 330; background: #061222 !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-shell { background: linear-gradient(180deg, #061222 0%, #071526 100%) !important; color: #eef5ff; margin: 0 auto !important; max-width: 1536px !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace { border-color: rgba(137, 161, 204, 0.14) !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.04rem 0.58rem !important; grid-template-columns: 2.45rem minmax(0, max-content) !important; grid-template-rows: auto auto !important; padding-left: 0 !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center !important; aspect-ratio: 1 !important; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 52%, transparent 53%), conic-gradient(from 18deg, #fef08a, #7dd3fc, #a855f7, #f472b6, #fef08a) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 24px rgba(168, 85, 247, 0.22) !important; color: #f8fbff !important; content: "Z" !important; display: inline-flex !important; font-family: var(--activity-ui-font) !important; font-size: 1.22rem !important; font-weight: 780 !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: rgba(248, 250, 255, 0.96) !important; font-family: var(--activity-ui-font) !important; font-size: 0.92rem !important; font-weight: 720 !important; grid-column: 2 !important; grid-row: 1 !important; letter-spacing: 0 !important; line-height: 1 !important; margin: 0 !important; white-space: nowrap !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: var(--activity-ui-font) !important; font-size: 0.62rem !important; font-weight: 650 !important; grid-column: 2 !important; grid-row: 2 !important; line-height: 1.05 !important; margin: 0 !important; white-space: nowrap !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace .organize-workspace-main, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace .organize-workspace-content, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace .organize-context-card, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-shell.is-modern-activities-workspace .organize-relationship-preview { background: transparent !important; box-shadow: none !important; min-height: 100%; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-context-header, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-goal-browser-panel { display: none !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-nav { background: linear-gradient(180deg, rgba(5, 16, 30, 0.96), rgba(4, 13, 24, 0.98)) !important; border-right: 1px solid rgba(137, 161, 204, 0.14) !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-workspace-label, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .organize-nav-item { font-family: var(--activity-ui-font) !important; letter-spacing: 0 !important; } .organize-activities-modern-workspace { color: #eef5ff; display: grid; font-family: var(--activity-ui-font); grid-template-rows: auto minmax(0, 1fr); min-height: 100%; } .organize-activities-modern-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .organize-activities-hero { align-items: start; background: linear-gradient(90deg, rgba(5, 14, 27, 1) 0%, rgba(5, 14, 27, 0.96) 36%, rgba(5, 14, 27, 0.24) 76%), linear-gradient(180deg, rgba(5, 14, 27, 0.06), rgba(5, 14, 27, 0.78)), url("assets/organize/activities-coast-hero.png?v=P10NG") center / cover no-repeat; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr) auto; min-height: clamp(12rem, 18vw, 15.2rem); padding: clamp(1.6rem, 3vw, 2.45rem) clamp(1.25rem, 3vw, 2.45rem) 1rem; } .organize-activities-hero-copy { max-width: 43rem; } .organize-activities-hero h2 { color: #fff; font-family: var(--activity-display-font) !important; font-size: clamp(2.6rem, 3.7vw, 3.65rem) !important; font-weight: var(--activity-weight-heading) !important; letter-spacing: 0 !important; line-height: 0.94; margin: 0 0 0.48rem !important; text-shadow: 0 12px 30px rgba(0, 0, 0, 0.42); } .organize-activities-hero-kicker, .organize-activities-hero-support { color: rgba(232, 240, 252, 0.88) !important; font-family: var(--activity-ui-font) !important; font-size: clamp(0.9rem, 1.08vw, 1.04rem) !important; font-weight: var(--activity-weight-body) !important; letter-spacing: 0 !important; line-height: 1.42 !important; margin: 0 !important; } .organize-activities-hero-kicker::after { background: #c084fc; content: ""; display: block; height: 2px; margin: 0.55rem 0 0.7rem !important; width: 2.65rem; } .organize-activities-new-action { align-items: center; appearance: none; background: rgba(234, 179, 8, 0.06); border: 1px solid rgba(250, 204, 21, 0.82); border-radius: 7px; color: #fde68a; cursor: pointer; display: inline-flex; font-family: var(--activity-ui-font) !important; font-size: 0.88rem; font-weight: 450; gap: 0.5rem; justify-self: end; min-height: 2.42rem; padding: 0.52rem 0.86rem; white-space: nowrap; } .organize-activities-new-action:hover { background: rgba(234, 179, 8, 0.12); box-shadow: 0 0 22px rgba(234, 179, 8, 0.14); } .organize-activities-new-action svg { height: 1rem; width: 1rem; } .organize-activities-list-panel { align-self: start; background: linear-gradient(180deg, rgba(5, 16, 30, 0.72), rgba(5, 13, 25, 0.62)) !important; border: 1px solid rgba(137, 161, 204, 0.08); border-radius: 9px; display: grid; gap: 0.82rem; margin: -0.35rem clamp(0.75rem, 1.6vw, 1.1rem) 0.72rem; max-height: calc(100vh - 18.2rem); overflow: auto; padding: 0.72rem 0.78rem 0.9rem; } .organize-activities-filter-bar { align-items: center; display: grid; gap: 0.48rem; grid-template-columns: minmax(9.4rem, 1.35fr) repeat(4, minmax(6rem, 0.66fr)) minmax(9.1rem, 0.9fr); } .organize-activities-filter-bar label { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.11); border-radius: 7px; color: rgba(206, 219, 239, 0.70); display: inline-flex; gap: 0.35rem; min-height: 2.1rem; min-width: 0; padding: 0 0.58rem; } .organize-activities-filter-bar label span, .organize-activities-filter-bar input, .organize-activities-filter-bar select { font-family: var(--activity-ui-font) !important; font-size: 0.78rem; font-weight: var(--activity-weight-meta) !important; letter-spacing: 0 !important; } .organize-activities-filter-bar label span { white-space: nowrap; } .organize-activities-filter-bar input, .organize-activities-filter-bar select { appearance: none; background: transparent; border: 0; color: rgba(244, 248, 255, 0.92); min-height: 1.9rem; min-width: 0; outline: 0; padding: 0; width: 100%; } .organize-activities-search svg { color: rgba(206, 219, 239, 0.72); height: 1rem; width: 1rem; } .organize-activities-count { color: rgba(230, 238, 250, 0.86); font-family: var(--activity-ui-font) !important; font-size: 0.88rem; font-weight: 460 !important; } .organize-activities-table { display: grid; gap: 0.18rem; } .organize-activities-table-head, .organize-activity-modern-row { display: grid; gap: clamp(0.7rem, 1.4vw, 1.2rem); grid-template-columns: minmax(15rem, 1.42fr) minmax(6.8rem, 0.62fr) minmax(5.8rem, 0.52fr) minmax(6.8rem, 0.62fr) minmax(6.5rem, 0.58fr) minmax(7.8rem, 0.68fr); } .organize-activities-table-head { color: rgba(198, 212, 234, 0.66); font-family: var(--activity-ui-font) !important; font-size: 0.68rem; font-weight: 540 !important; letter-spacing: 0.075em !important; padding: 0 1rem 0.34rem; text-transform: uppercase; } .organize-activities-list { background: linear-gradient(180deg, rgba(5, 16, 30, 0.48), rgba(5, 13, 25, 0.32)) !important; border: 1px solid rgba(137, 161, 204, 0.065); border-radius: 9px; display: grid; overflow: hidden; } .organize-activity-modern-row { align-items: center; appearance: none; background: transparent; border: 0; border-bottom: 1px solid rgba(137, 161, 204, 0.065); color: inherit; cursor: pointer; font: inherit; min-height: 4.45rem; padding: 0.72rem 1rem; text-align: left; transition: background var(--zb-ease), box-shadow var(--zb-ease), filter var(--zb-ease); } .organize-activity-modern-row:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--activity-accent) 7%, transparent), rgba(255, 255, 255, 0.024) 44%, transparent) !important; box-shadow: inset 1px 0 0 color-mix(in srgb, var(--activity-accent) 62%, transparent), 0 10px 26px rgba(0, 0, 0, 0.10) !important; } .organize-activity-modern-row:last-child { border-bottom: 0; } .organize-activity-modern-title { align-items: center; display: grid; gap: 0.86rem; grid-template-columns: 2.72rem minmax(0, 1fr); min-width: 0; } .organize-activity-modern-icon { align-items: center; background: color-mix(in srgb, var(--activity-accent) 7%, transparent); border: 1px solid color-mix(in srgb, var(--activity-accent) 82%, transparent); border-radius: 999px; color: var(--activity-accent); display: inline-flex; height: 2.55rem; justify-content: center; width: 2.55rem; } .organize-activity-modern-icon svg { height: 1.28rem; width: 1.28rem; } .organize-activity-modern-title strong { color: rgba(248, 251, 255, 0.93); display: block; font-family: var(--activity-ui-font) !important; font-size: 0.9rem !important; font-weight: var(--activity-weight-title) !important; line-height: 1.14 !important; margin-bottom: 0.18rem !important; } .organize-activity-modern-title small { color: rgba(218, 229, 246, 0.66) !important; display: block; font-family: var(--activity-ui-font) !important; font-size: 0.79rem !important; font-weight: var(--activity-weight-body) !important; line-height: 1.34 !important; } .organize-activity-modern-category, .organize-activity-modern-priority, .organize-activity-modern-priority em, .organize-activity-modern-frequency, .organize-activity-modern-frequency em, .organize-activity-modern-linked, .organize-activity-modern-linked em, .organize-activity-modern-engaged, .organize-activity-modern-engaged em { color: rgba(234, 241, 252, 0.78); font-family: var(--activity-ui-font) !important; font-size: 0.8rem !important; font-style: normal; font-weight: var(--activity-weight-meta) !important; } .organize-activity-modern-priority, .organize-activity-modern-linked, .organize-activity-modern-engaged { align-items: center; display: inline-flex; gap: 0.38rem; } .organize-activity-modern-priority i { background: currentColor; border-radius: 999px; display: inline-block; height: 0.48rem; width: 0.48rem; } .organize-activity-modern-priority.is-high { color: #ff4d6d; } .organize-activity-modern-priority.is-medium { color: #facc15; } .organize-activity-modern-priority.is-low { color: #2ed573; } .organize-activity-modern-linked svg { color: #c084fc; } .organize-activity-modern-engaged svg { color: #2ed573; } .organize-activity-modern-linked svg, .organize-activity-modern-engaged svg { height: 1rem; width: 1rem; } .organize-activities-note { align-items: center; border: 1px solid rgba(137, 161, 204, 0.09); border-radius: 8px; color: rgba(218, 229, 246, 0.68); display: flex; font-family: var(--activity-ui-font) !important; font-size: 0.78rem; font-weight: var(--activity-weight-meta); gap: 0.56rem; margin: 0; min-height: 2.25rem; padding: 0.58rem 0.78rem; } .organize-activities-note svg { height: 1rem; width: 1rem; } .organize-activities-empty { color: rgba(218, 229, 246, 0.78); display: grid; gap: 0.2rem; padding: 1.1rem; } .organize-activities-empty strong { color: rgba(248, 251, 255, 0.92); } .organize-goal-modern-title strong, .organize-drill-modern-title strong, .organize-song-modern-title strong, .organize-solo-modern-title strong, .organize-activity-modern-title strong { font-weight: var(--zb-weight-title, 470) !important; } .organize-drills-table-head, .organize-songs-table-head, .organize-solos-table-head, .organize-activities-table-head, .organize-activity-modern-category, .organize-activity-modern-priority, .organize-activity-modern-frequency, .organize-activity-modern-linked, .organize-activity-modern-engaged { font-weight: var(--zb-weight-meta, 330) !important; } @media (max-width: 1100px) { .organize-activities-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organize-activities-table-head { display: none; } .organize-activity-modern-row { grid-template-columns: minmax(0, 1fr); } } /* P10NG: keep Activities on the same centered dark Organize header as the other modern workspaces. */ body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-shell { margin-left: auto !important; margin-right: auto !important; max-width: min(100%, 1360px) !important; padding: clamp(0.5rem, 1.1vw, 0.86rem) clamp(0.55rem, 1.35vw, 1.25rem) 1rem !important; width: 100% !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav { align-items: center !important; background: linear-gradient(180deg, rgba(6, 16, 31, 0.95), rgba(5, 13, 25, 0.9)) !important; border: 1px solid rgba(137, 161, 204, 0.20) !important; border-radius: 15px 15px 0 0 !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.24) !important; display: grid !important; gap: 1rem !important; grid-template-columns: minmax(12.5rem, 0.82fr) minmax(30rem, max-content) minmax(7rem, 0.82fr) !important; margin: 0 !important; min-height: 4.05rem !important; padding: 0.48rem 1.12rem !important; position: relative !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav::before { background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.68), transparent) !important; bottom: -1px !important; content: "" !important; height: 1px !important; left: 0 !important; position: absolute !important; right: 0 !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .app-nav, body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] { background: transparent !important; border: 0 !important; box-shadow: none !important; display: flex !important; flex-wrap: nowrap !important; gap: clamp(1.05rem, 2vw, 2rem) !important; grid-column: 2 !important; justify-content: center !important; justify-self: center !important; margin: 0 !important; padding: 0 !important; width: auto !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.70) !important; font-family: var(--activity-ui-font) !important; font-size: 0.9rem !important; font-style: normal !important; font-weight: 430 !important; min-height: 2rem !important; padding: 0.28rem 0 0.48rem !important; text-align: center !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected { color: rgba(248, 251, 255, 0.96) !important; font-style: normal !important; font-weight: 560 !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { background: linear-gradient(90deg, #a855f7, #6d5dfc) !important; bottom: -0.42rem !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .header-utility-bar { align-items: center !important; display: flex !important; grid-column: 3 !important; justify-content: flex-end !important; justify-self: stretch !important; } body:has(.organize-workspace-shell.is-modern-activities-workspace:not([hidden])) .app-header.header-with-nav .pwa-update-status { background: rgba(255, 255, 255, 0.07) !important; border-color: rgba(226, 232, 240, 0.13) !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.62rem !important; font-style: normal !important; padding: 0.32rem 0.5rem !important; } /* P10NG MyZone personal ocean banner. */ body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] { background: radial-gradient(circle at 16% 0%, rgba(56, 189, 248, 0.10), transparent 25rem), linear-gradient(180deg, rgba(5, 16, 30, 0.96), rgba(4, 12, 23, 0.98)) !important; border-color: rgba(137, 161, 204, 0.14) !important; color: #eef5ff !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header { align-items: end !important; background: linear-gradient(90deg, rgba(4, 12, 23, 0.96) 0%, rgba(4, 12, 23, 0.78) 34%, rgba(4, 12, 23, 0.28) 76%), linear-gradient(180deg, rgba(4, 12, 23, 0.1), rgba(4, 12, 23, 0.74)), url("assets/myzone/ocean-rocks-banner.png?v=P10NG") center 52% / cover no-repeat !important; border: 1px solid rgba(137, 161, 204, 0.12) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 24px 58px rgba(0, 0, 0, 0.18) !important; display: flex !important; min-height: clamp(10.5rem, 18vw, 15rem) !important; overflow: hidden !important; padding: clamp(1.4rem, 2.8vw, 2.35rem) !important; position: relative !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header::after { background: radial-gradient(circle at 22% 48%, rgba(56, 189, 248, 0.10), transparent 20rem); content: ""; inset: 0; pointer-events: none; position: absolute; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header > div { max-width: 37rem !important; position: relative !important; z-index: 1 !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .screen-title { color: rgba(255, 255, 255, 0.98) !important; font-family: var(--zb-display-font, "Iowan Old Style", Georgia, serif) !important; font-size: clamp(2.45rem, 4vw, 3.7rem) !important; font-weight: 560 !important; letter-spacing: 0 !important; line-height: 0.96 !important; margin: 0 0 0.5rem !important; text-shadow: 0 18px 34px rgba(0, 0, 0, 0.45) !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .section-note { color: rgba(229, 238, 250, 0.82) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(0.9rem, 1.12vw, 1.06rem) !important; font-weight: 340 !important; line-height: 1.42 !important; margin: 0 !important; max-width: 31rem !important; text-shadow: 0 10px 24px rgba(0, 0, 0, 0.46) !important; } /* MyZone refinement: replace the image banner with a compact dashboard header. */ body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header { align-items: center !important; background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.12), transparent 13rem), linear-gradient(135deg, rgba(7, 18, 34, 0.88), rgba(18, 17, 43, 0.74)) !important; border-color: rgba(190, 209, 238, 0.18) !important; border-radius: 0.86rem !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 34px rgba(2, 8, 23, 0.16) !important; gap: 0.72rem !important; min-height: 0 !important; overflow: visible !important; padding: 0.62rem 0.72rem !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header::after { display: none !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header > div { max-width: none !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .screen-title { color: rgba(250, 253, 255, 0.98) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 1.3rem !important; font-weight: 600 !important; line-height: 1.08 !important; margin: 0 0 0.14rem !important; text-shadow: 0 2px 10px rgba(2, 8, 23, 0.48) !important; -webkit-text-fill-color: rgba(250, 253, 255, 0.98) !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .section-note { color: rgba(215, 228, 246, 0.84) !important; font-size: 0.9rem !important; font-weight: 400 !important; line-height: 1.28 !important; max-width: none !important; text-shadow: none !important; -webkit-text-fill-color: rgba(215, 228, 246, 0.84) !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .button-row { display: flex !important; flex: 0 0 auto !important; gap: 0.42rem !important; justify-content: flex-end !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header #refreshLogButton, body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header #clearLogButton { align-items: center !important; display: inline-flex !important; font-size: 0.82rem !important; min-height: 2rem !important; padding: 0.4rem 0.62rem !important; } @media (max-width: 900px) { body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header { align-items: stretch !important; display: grid !important; gap: 0.5rem !important; grid-template-columns: 1fr !important; height: auto !important; min-height: 0 !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .section-note { display: block !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header > div { min-width: 0 !important; width: 100% !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .button-row { display: grid !important; flex: none !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; justify-content: stretch !important; position: static !important; width: 100% !important; } body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header #refreshLogButton, body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header #clearLogButton { justify-content: center !important; width: 100% !important; } } @media (max-width: 600px) { body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .section-note, body:has([data-screen-panel="log"]:not([hidden])) [data-screen-panel="log"] > .section-header .button-row { display: none !important; } } /* P10NG Schedules workspace modernization. */ body:has(.organize-schedules-workspace) { --schedule-ui-font: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; background: linear-gradient(180deg, #020914 0%, #061321 52%, #030914 100%) !important; } body:has(.organize-schedules-workspace) .organize-context-header, body:has(.organize-schedules-workspace) .organize-goal-browser-panel { display: none !important; } body:has(.organize-schedules-workspace) .organize-workspace-shell, body:has(.organize-schedules-workspace) .organize-workspace-main, body:has(.organize-schedules-workspace) .organize-workspace-content, body:has(.organize-schedules-workspace) .organize-context-card, body:has(.organize-schedules-workspace) .organize-relationship-preview { background: transparent !important; box-shadow: none !important; } body:has(.organize-schedules-workspace) .organize-workspace-shell { grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr) !important; } .organize-schedules-workspace { color: #eef5ff; display: grid !important; font-family: var(--schedule-ui-font) !important; gap: 1rem; min-height: 100%; } .organize-schedules-workspace svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .organize-schedules-modern-heading { align-items: center; display: flex; gap: 1rem; justify-content: space-between; padding: 0.1rem 0.1rem 0; } .organize-schedules-modern-heading h2 { color: rgba(250, 252, 255, 0.98); font-family: var(--schedule-ui-font) !important; font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 520; letter-spacing: 0 !important; line-height: 1.05; margin: 0 0 0.28rem; } .organize-schedules-modern-heading p { color: rgba(220, 231, 248, 0.74); font-size: 0.92rem; font-weight: 340; margin: 0; } .organize-schedules-modern-actions { align-items: center; display: flex; gap: 0.7rem; } .organize-schedule-template-action, .organize-schedule-primary-action, .organize-schedule-panel-title button, .organize-schedule-settings-link { align-items: center; appearance: none; border-radius: 8px; cursor: pointer; display: inline-flex; font: inherit; gap: 0.45rem; min-height: 2.35rem; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease; } .organize-schedule-template-action { background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(148, 163, 184, 0.18); color: rgba(235, 242, 252, 0.88); padding: 0 0.85rem; } .organize-schedule-primary-action, .organize-schedules-workspace .organize-create-schedule-button.organize-schedule-primary-action { background: linear-gradient(135deg, #1d6fff, #075be8) !important; border: 1px solid rgba(96, 165, 250, 0.55) !important; color: #fff !important; font-weight: 470 !important; padding: 0 1rem !important; } .organize-schedule-primary-action svg { height: 1.05rem; width: 1.05rem; } .organize-schedules-modern-layout { display: grid; gap: 1rem; grid-template-columns: minmax(12.5rem, 15rem) minmax(0, 1fr); } body:has(.organize-schedules-workspace) .organize-schedule-selector { align-self: start; background: linear-gradient(180deg, rgba(8, 18, 31, 0.88), rgba(5, 13, 24, 0.92)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 10px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 46px rgba(0, 0, 0, 0.14) !important; display: grid !important; gap: 0.45rem !important; padding: 0.82rem !important; } .organize-schedule-panel-title { align-items: center; color: rgba(245, 249, 255, 0.9); display: flex; font-size: 0.76rem; font-weight: 520; justify-content: space-between; letter-spacing: 0.02em; margin: 0.2rem 0 0.4rem; text-transform: uppercase; } .organize-schedule-panel-title button { background: transparent; border: 0; color: #3b82f6; justify-content: center; min-height: 1.8rem; padding: 0; width: 1.8rem; } body:has(.organize-schedules-workspace) .organize-schedule-card { align-items: center !important; background: transparent !important; border: 1px solid transparent !important; border-radius: 8px !important; color: rgba(234, 242, 253, 0.78) !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: 2rem minmax(0, 1fr) auto !important; padding: 0.52rem !important; text-align: left !important; } body:has(.organize-schedules-workspace) .organize-schedule-card:hover { background: rgba(45, 94, 168, 0.12) !important; border-color: rgba(96, 165, 250, 0.16) !important; } body:has(.organize-schedules-workspace) .organize-schedule-card.is-selected { background: linear-gradient(90deg, rgba(37, 99, 235, 0.26), rgba(59, 130, 246, 0.08)) !important; border-color: rgba(96, 165, 250, 0.24) !important; color: #fff !important; } .organize-schedule-card-icon, .organize-schedule-block-icon, .organize-source-pool-icon, .organize-schedule-summary-icon { align-items: center; background: rgba(37, 99, 235, 0.16); border-radius: 7px; color: #3b82f6; display: inline-flex; height: 2rem; justify-content: center; width: 2rem; } .organize-schedule-card-icon svg, .organize-schedule-block-icon svg, .organize-source-pool-icon svg { height: 1.12rem; width: 1.12rem; } body:has(.organize-schedules-workspace) .organize-schedule-card strong { display: block; font-size: 0.86rem !important; font-weight: 520 !important; line-height: 1.12; } body:has(.organize-schedules-workspace) .organize-schedule-card small { color: rgba(164, 243, 181, 0.8); display: block; font-size: 0.68rem; font-weight: 420; margin-top: 0.2rem; } body:has(.organize-schedules-workspace) .organize-schedule-active-badge { align-items: center; background: #2563eb !important; border-radius: 999px !important; color: #fff !important; display: inline-flex; font-size: 0.7rem !important; font-style: normal !important; height: 1.25rem; justify-content: center; width: 1.25rem; } .organize-schedule-template-stack { border-top: 1px solid rgba(137, 161, 204, 0.12); display: grid; gap: 0.55rem; margin-top: 0.65rem; padding-top: 0.75rem; } .organize-schedule-template-stack > span { align-items: center; color: rgba(226, 236, 250, 0.76); display: flex; font-size: 0.82rem; gap: 0.55rem; } .organize-schedule-template-stack svg { color: #8b5cf6; height: 1.05rem; width: 1.05rem; } body:has(.organize-schedules-workspace) .organize-schedule-surface { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } .organize-schedule-summary-card { align-items: center; background: linear-gradient(90deg, rgba(7, 20, 37, 0.58), rgba(7, 18, 34, 0.28)) !important; border: 1px solid rgba(137, 161, 204, 0.11) !important; border-radius: 14px; display: grid; gap: 0.7rem; grid-template-columns: minmax(0, 1.3fr) minmax(15rem, 0.9fr); margin-bottom: 0.85rem; padding: 0.82rem 0.9rem; } .organize-schedule-summary-main { align-items: center; display: grid; gap: 0.72rem; grid-template-columns: 2.45rem minmax(0, 1fr); } .organize-schedule-summary-icon { background: rgba(132, 204, 22, 0.1); border: 1px solid rgba(132, 204, 22, 0.16); border-radius: 12px; color: #84cc16; height: 2.32rem; width: 2.32rem; } .organize-schedule-summary-icon svg { height: 1.55rem; width: 1.55rem; } .organize-schedule-summary-main h3 { align-items: center; color: rgba(250, 252, 255, 0.94); display: flex; font-size: 0.98rem; font-weight: 520; gap: 0.5rem; margin: 0 0 0.35rem; } .organize-schedule-summary-main h3 small { border: 1px solid rgba(132, 204, 22, 0.55); border-radius: 4px; color: #a3e635; font-size: 0.62rem; padding: 0.1rem 0.28rem; text-transform: uppercase; } .organize-schedule-summary-main p { color: rgba(220, 231, 248, 0.72); font-size: 0.82rem; margin: 0; } .organize-schedule-settings-link { background: rgba(37, 99, 235, 0.09); border: 1px solid rgba(96, 165, 250, 0.2); color: #60a5fa; font-size: 0.75rem; margin-top: 0.65rem; min-height: 2rem; padding: 0 0.72rem; } .organize-schedule-summary-stats { align-content: center; display: flex; flex-wrap: wrap; gap: 0.34rem; justify-content: flex-end; } .organize-schedule-summary-stats span { align-items: center; background: rgba(255, 255, 255, 0.026); border: 1px solid rgba(137, 161, 204, 0.09); border-radius: 999px; display: inline-flex; gap: 0.24rem; min-height: 1.72rem; padding: 0.18rem 0.48rem; } .organize-schedule-summary-stats b { color: rgba(250, 252, 255, 0.95); font-size: 0.82rem; font-weight: 520; } .organize-schedule-summary-stats em { color: rgba(203, 213, 225, 0.72); font-size: 0.64rem; font-style: normal; } .organize-schedule-summary-note { align-items: center; border: 0; border-radius: 999px; color: rgba(203, 213, 225, 0.72); display: flex; font-size: 0.72rem; gap: 0.4rem; grid-column: 1 / -1; margin: 0; padding: 0; } .organize-schedule-summary-note svg { color: #60a5fa; height: 1rem; width: 1rem; } body:has(.organize-schedules-workspace) .organize-schedule-board { display: grid !important; gap: 1rem !important; grid-template-columns: minmax(0, 1fr) minmax(15rem, 17.5rem) !important; } body:has(.organize-schedules-workspace.is-eligible-hidden) .organize-schedule-board { grid-template-columns: minmax(0, 1fr) !important; } body:has(.organize-schedules-workspace.is-eligible-hidden) .organize-source-pools { display: none !important; } body:has(.organize-schedules-workspace) .organize-today-schedule, body:has(.organize-schedules-workspace) .organize-source-pools { background: radial-gradient(circle at 18% 0%, rgba(56, 189, 248, 0.06), transparent 18rem), linear-gradient(180deg, rgba(7, 19, 35, 0.8), rgba(3, 11, 22, 0.78)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 20px 46px rgba(0, 0, 0, 0.18) !important; padding: 1rem !important; } body:has(.organize-schedules-workspace) .organize-today-schedule { min-height: 26rem; } body:has(.organize-schedules-workspace) .organize-source-pools { background: linear-gradient(180deg, rgba(6, 17, 31, 0.52), rgba(5, 13, 24, 0.46)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; } body:has(.organize-schedules-workspace) .organize-schedule-column-header { align-items: center; border-bottom: 1px solid rgba(137, 161, 204, 0.09); display: flex; justify-content: space-between; margin-bottom: 0.85rem; padding-bottom: 0.72rem; } body:has(.organize-schedules-workspace) .organize-schedule-column-header span { color: rgba(191, 219, 254, 0.86); font-size: 0.72rem; font-weight: 520; letter-spacing: 0.06em; text-transform: uppercase; } body:has(.organize-schedules-workspace) .organize-schedule-column-header strong { color: rgba(235, 242, 252, 0.86); display: block; font-size: 0.9rem; font-weight: 360; margin-top: 0.18rem; } body:has(.organize-schedules-workspace) .organize-schedule-column-header em { color: rgba(203, 213, 225, 0.76); font-size: 0.78rem; font-style: normal; } body:has(.organize-schedules-workspace) .organize-schedule-flow { display: grid !important; gap: 0.78rem !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane { background: radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.08), transparent 14rem), linear-gradient(135deg, rgba(14, 32, 55, 0.92), rgba(6, 18, 34, 0.86)) !important; border: 1px solid rgba(137, 161, 204, 0.15) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 30px rgba(0, 0, 0, 0.22), 0 0 28px rgba(96, 165, 250, 0.08), 0 0 46px rgba(168, 85, 247, 0.04) !important; padding: 0.86rem 0.9rem !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-collapsed { padding-block: 0.72rem !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-expanded { padding-bottom: 0.92rem !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-collapsed .organize-schedule-lane-guidance, body:has(.organize-schedules-workspace) .organize-schedule-lane.is-collapsed .organize-schedule-lane-control { display: none !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-protected-daily { background: radial-gradient(circle at 10% 0%, rgba(96, 165, 250, 0.12), transparent 13rem), linear-gradient(135deg, rgba(18, 41, 70, 0.88), rgba(8, 21, 39, 0.84)) !important; border-color: rgba(96, 165, 250, 0.26) !important; box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 28px rgba(0, 0, 0, 0.18), 0 0 34px rgba(96, 165, 250, 0.12) !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-reorderable-pool { cursor: grab; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-reorderable-pool:active { cursor: grabbing; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-reorderable-pool:hover { border-color: rgba(196, 181, 253, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 34px rgba(0, 0, 0, 0.25), 0 0 26px rgba(168, 85, 247, 0.08) !important; transform: translateY(-1px); } body:has(.organize-schedules-workspace) .organize-schedule-pool { border-color: rgba(132, 204, 22, 0.22) !important; } body:has(.organize-schedules-workspace) .organize-schedule-songs { border-color: rgba(168, 85, 247, 0.24) !important; } body:has(.organize-schedules-workspace) .organize-schedule-solos { border-color: rgba(249, 115, 22, 0.24) !important; } body:has(.organize-schedules-workspace) .organize-schedule-activity { border-color: rgba(34, 211, 238, 0.24) !important; } body:has(.organize-schedules-workspace) .organize-schedule-lane-header { align-items: center; display: grid; gap: 0.82rem; grid-template-columns: 2.15rem 2.55rem minmax(0, 1fr) auto; } .organize-schedule-block-order { align-items: center; background: rgba(3, 10, 20, 0.38); border: 1px solid rgba(96, 165, 250, 0.24); border-radius: 999px; color: rgba(191, 219, 254, 0.9); display: inline-flex; font-size: 0.9rem; font-weight: 520; height: 2rem; justify-content: center; width: 2rem; } body:has(.organize-schedules-workspace) .organize-schedule-block-icon { border-radius: 12px; height: 2.45rem; width: 2.45rem; } .organize-schedule-block-order svg { height: 1.1rem; width: 1.1rem; } body:has(.organize-schedules-workspace) .organize-schedule-lane-header strong { color: rgba(250, 252, 255, 0.94); display: block; font-size: 1rem; font-weight: 540; margin: 0; } body:has(.organize-schedules-workspace) .organize-schedule-lane-header span, body:has(.organize-schedules-workspace) .organize-schedule-lane-guidance { color: rgba(203, 213, 225, 0.72); font-size: 0.78rem; font-weight: 330; margin: 0.16rem 0 0; } body:has(.organize-schedules-workspace) .organize-schedule-lane-actions { align-items: center; display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; } body:has(.organize-schedules-workspace) .organize-schedule-lane-actions em { color: rgba(235, 242, 252, 0.88); font-size: 0.78rem; font-style: normal; font-weight: 520; white-space: nowrap; } .organize-schedule-section-toggle { align-items: center; appearance: none; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.13); border-radius: 999px; color: rgba(226, 236, 250, 0.78); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.7rem; gap: 0.28rem; min-height: 1.72rem; padding: 0 0.56rem; transition: background 160ms ease, border-color 160ms ease, color 160ms ease; } .organize-schedule-section-toggle svg { height: 0.82rem; transform: rotate(90deg); transition: transform 160ms ease; width: 0.82rem; } .organize-schedule-section-toggle[aria-expanded="true"] svg { transform: rotate(-90deg); } .organize-schedule-section-toggle:hover, .organize-schedule-section-toggle:focus-visible { background: rgba(168, 85, 247, 0.14); border-color: rgba(196, 181, 253, 0.22); color: rgba(255, 255, 255, 0.94); } body:has(.organize-schedules-workspace) .organize-schedule-lane-control { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.12); border-radius: 7px; display: inline-flex; gap: 0.32rem; padding: 0.28rem 0.38rem; } .organize-schedule-lock-badge, .organize-schedule-reorder-actions { align-items: center; display: inline-flex; gap: 0.28rem; } .organize-schedule-drag-handle { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.12); border-radius: 999px; color: rgba(226, 236, 250, 0.72); cursor: grab; display: inline-flex; font-size: 0.9rem; height: 1.72rem; justify-content: center; letter-spacing: -0.12em; width: 2rem; } .organize-schedule-drag-handle:active { cursor: grabbing; } .organize-schedule-lock-badge { border: 1px solid rgba(96, 165, 250, 0.26); border-radius: 999px; color: rgba(191, 219, 254, 0.9); font-size: 0.68rem; font-weight: 500; min-height: 1.72rem; padding: 0 0.54rem; } .organize-schedule-lock-badge svg { height: 0.84rem; width: 0.84rem; } .organize-schedule-reorder-actions { background: rgba(255, 255, 255, 0.032); border: 1px solid rgba(137, 161, 204, 0.12); border-radius: 999px; padding: 0.12rem; } .organize-schedule-reorder-actions button { align-items: center; appearance: none; background: transparent; border: 0; border-radius: 999px; color: rgba(226, 236, 250, 0.78); cursor: pointer; display: inline-flex; font: inherit; font-size: 0.84rem; height: 1.45rem; justify-content: center; padding: 0; transition: background 160ms ease, color 160ms ease; width: 1.45rem; } .organize-schedule-reorder-actions button:hover:not(:disabled), .organize-schedule-reorder-actions button:focus-visible:not(:disabled) { background: rgba(168, 85, 247, 0.16); color: rgba(255, 255, 255, 0.96); } .organize-schedule-reorder-actions button:disabled { color: rgba(148, 163, 184, 0.26); cursor: default; } body:has(.organize-schedules-workspace) .organize-schedule-lane-control span { color: rgba(203, 213, 225, 0.68); font-size: 0.66rem; } body:has(.organize-schedules-workspace) .organize-schedule-lane-control input, body:has(.organize-schedules-workspace) .organize-schedule-lane-control select { background: transparent; border: 0; color: rgba(250, 252, 255, 0.9); font-size: 0.72rem; outline: 0; } body:has(.organize-schedules-workspace) .organize-schedule-items { display: grid; gap: 0.32rem; margin: 0.72rem 0 0; padding: 0; } body:has(.organize-schedules-workspace) .organize-schedule-items[hidden] { display: none !important; } body:has(.organize-schedules-workspace) .organize-schedule-item { align-items: center; background: linear-gradient(135deg, rgba(12, 28, 50, 0.86), rgba(5, 17, 32, 0.76)); border: 1px solid rgba(148, 163, 184, 0.14); border-radius: 10px; display: grid; gap: 0.6rem; grid-template-columns: 1.8rem minmax(0, 1fr); list-style: none; padding: 0.48rem 0.56rem; } body:has(.organize-schedules-workspace) .organize-schedule-item > span:first-child { color: rgba(148, 163, 184, 0.72); font-size: 0.7rem; font-weight: 520; } body:has(.organize-schedules-workspace) .organize-schedule-item-content { background: transparent !important; border: 0 !important; color: inherit !important; cursor: pointer; display: grid !important; gap: 0.08rem !important; padding: 0 !important; text-align: left !important; } body:has(.organize-schedules-workspace) .organize-schedule-item-content strong { color: rgba(250, 252, 255, 0.96); font-size: 0.82rem; font-weight: 520; } body:has(.organize-schedules-workspace) .organize-schedule-item-content em, body:has(.organize-schedules-workspace) .organize-schedule-section-empty, body:has(.organize-schedules-workspace) .organize-schedule-more { color: rgba(211, 224, 244, 0.78); font-size: 0.72rem; font-style: normal; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-dragging, body:has(.organize-schedules-workspace) .organize-schedule-item.is-dragging, body:has(.organize-schedules-workspace) .organize-custom-source-item.is-dragging { opacity: 0.55; } body:has(.organize-schedules-workspace) .organize-schedule-lane.is-drag-over, body:has(.organize-schedules-workspace) .organize-schedule-item.is-drag-over, body:has(.organize-schedules-workspace) .organize-custom-schedule-flow.is-drag-over { border-color: rgba(196, 181, 253, 0.42) !important; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.18), 0 0 30px rgba(168, 85, 247, 0.18) !important; } body:has(.organize-schedules-workspace) .organize-source-pool-flow, body:has(.organize-schedules-workspace) .organize-source-pool-items { display: grid; gap: 0.42rem; margin: 0; padding: 0; } body:has(.organize-schedules-workspace) .organize-source-pool-lane { display: grid; gap: 0.45rem; } body:has(.organize-schedules-workspace) .organize-source-pool-lane .organize-schedule-lane-header { border: 0; grid-template-columns: 2.1rem minmax(0, 1fr) auto; padding: 0; } body:has(.organize-schedules-workspace) .organize-source-pool-item { align-items: center; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(137, 161, 204, 0.09); border-radius: 8px; display: grid; gap: 0.55rem; grid-template-columns: 2rem minmax(0, 1fr); list-style: none; padding: 0.52rem; } body:has(.organize-schedules-workspace) .organize-source-pool-item strong { color: rgba(245, 249, 255, 0.9); display: block; font-size: 0.78rem; font-weight: 470; } body:has(.organize-schedules-workspace) .organize-source-pool-item small { color: rgba(203, 213, 225, 0.62); display: block; font-size: 0.68rem; margin-top: 0.12rem; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-today-schedule, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-source-pools { background: radial-gradient(circle at 14% 0%, rgba(96, 165, 250, 0.065), transparent 18rem), linear-gradient(180deg, rgba(4, 14, 27, 0.94), rgba(2, 8, 17, 0.9)) !important; border-color: rgba(137, 161, 204, 0.16) !important; color: rgba(238, 245, 255, 0.9) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-schedule-summary-card { display: none !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-schedule-board { gap: 0.85rem !important; grid-template-columns: minmax(0, 1fr) minmax(13.25rem, 15rem) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-today-schedule { min-height: 24rem !important; min-width: 0 !important; overflow: hidden !important; padding: 0.82rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-source-pools { min-width: 0 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-today-schedule > .organize-schedule-column-header { align-items: start !important; background: linear-gradient(135deg, rgba(8, 24, 43, 0.78), rgba(3, 12, 24, 0.62)) !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; border-radius: 14px !important; display: grid !important; gap: 0.55rem !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto auto !important; align-content: start !important; row-gap: 0.38rem !important; box-sizing: border-box !important; height: auto !important; margin-bottom: 0.72rem !important; min-height: 5.25rem !important; max-height: none !important; overflow: hidden !important; padding: 0.48rem 0.52rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-title-block { align-items: center !important; display: grid !important; gap: 0.42rem !important; grid-template-columns: minmax(0, 1.2fr) minmax(8rem, 0.8fr) !important; min-width: 0 !important; width: 100% !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-behavior-field { margin: 0 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions { align-items: center !important; display: flex !important; flex: none !important; gap: 0.28rem !important; justify-content: flex-end !important; min-width: 0 !important; width: 100% !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions em, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-header-actions button { align-items: center !important; background: rgba(226, 236, 250, 0.1) !important; border: 1px solid rgba(203, 213, 225, 0.18) !important; border-radius: 999px !important; color: rgba(245, 249, 255, 0.9) !important; display: inline-flex !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 520 !important; justify-content: center !important; min-height: 1.72rem !important; padding: 0 0.5rem !important; white-space: nowrap !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls { display: grid !important; gap: 0.42rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin: -0.12rem 0 0.65rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-search { grid-column: 1 / -1 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls label { align-items: center !important; background: linear-gradient(135deg, rgba(4, 14, 27, 0.92), rgba(2, 8, 17, 0.84)) !important; border: 1px solid rgba(148, 163, 184, 0.15) !important; border-radius: 11px !important; color: rgba(211, 224, 244, 0.76) !important; display: flex !important; gap: 0.28rem !important; min-height: 2.05rem !important; padding: 0 0.48rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls label:focus-within { border-color: rgba(196, 181, 253, 0.3) !important; box-shadow: 0 0 20px rgba(168, 85, 247, 0.11) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls svg { color: rgba(191, 219, 254, 0.74) !important; flex: 0 0 auto !important; height: 0.94rem !important; width: 0.94rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls span { color: rgba(191, 219, 254, 0.68) !important; font-size: 0.6rem !important; font-weight: 430 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls input, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls select { appearance: none !important; background: transparent !important; border: 0 !important; color: rgba(245, 249, 255, 0.9) !important; font: inherit !important; font-size: 0.7rem !important; font-weight: 360 !important; min-width: 0 !important; outline: 0 !important; width: 100% !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-controls input::placeholder { color: rgba(203, 213, 225, 0.48) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field input { background: rgba(2, 8, 17, 0.42) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 10px !important; color: rgba(250, 252, 255, 0.94) !important; font-size: 0.88rem !important; min-width: 0 !important; width: 100% !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field { align-items: center !important; background: linear-gradient(135deg, rgba(4, 14, 27, 0.78), rgba(2, 8, 17, 0.7)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 10px !important; display: flex !important; gap: 0.38rem !important; min-height: 2.28rem !important; min-width: 0 !important; padding: 0 0.62rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-name-field span { color: rgba(191, 219, 254, 0.68) !important; display: none !important; flex: 0 0 0 !important; font-size: 0.56rem !important; font-weight: 430 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; width: 0 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-behavior-field { align-items: center !important; background: linear-gradient(135deg, rgba(4, 14, 27, 0.78), rgba(2, 8, 17, 0.7)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 10px !important; display: flex !important; gap: 0.38rem !important; margin: 0 !important; max-width: none !important; min-height: 2.28rem !important; min-width: 0 !important; padding: 0 0.62rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-behavior-field span { color: rgba(191, 219, 254, 0.68) !important; flex: 0 0 auto !important; font-size: 0.56rem !important; font-weight: 430 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; overflow: hidden !important; text-overflow: clip !important; white-space: nowrap !important; display: none !important; width: 0 !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-behavior-field select { appearance: none !important; background: transparent !important; border: 0 !important; color: rgba(245, 249, 255, 0.92) !important; font: inherit !important; font-size: 0.72rem !important; font-weight: 370 !important; min-width: 0 !important; outline: 0 !important; width: 100% !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-source-pools > .organize-schedule-column-header { align-items: center !important; margin-bottom: 0.55rem !important; padding-bottom: 0.52rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-source-pools > .organize-schedule-column-header strong { font-size: 0.82rem !important; margin-top: 0.04rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions { align-items: flex-end !important; display: grid !important; gap: 0.24rem !important; justify-items: end !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions em, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions button { min-height: 1.55rem !important; padding: 0 0.48rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-behavior-field:focus-within { border-color: rgba(196, 181, 253, 0.3) !important; box-shadow: 0 0 20px rgba(168, 85, 247, 0.11) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-list .organize-schedule-section-empty { background: linear-gradient(135deg, rgba(8, 24, 43, 0.94), rgba(3, 12, 24, 0.9)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 12px !important; color: rgba(238, 245, 255, 0.9) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.18), 0 0 22px rgba(96, 165, 250, 0.045) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-items { gap: 0.58rem !important; margin-top: 0.15rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item { background: radial-gradient(circle at 12% 0%, rgba(96, 165, 250, 0.08), transparent 12rem), linear-gradient(135deg, rgba(12, 31, 54, 0.96), rgba(4, 15, 29, 0.92)) !important; border-radius: 15px !important; gap: 0.72rem !important; grid-template-columns: 2.25rem minmax(0, 1fr) minmax(6.9rem, auto) !important; min-height: 4.45rem !important; padding: 0.7rem 0.76rem !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, opacity 160ms ease !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item .organize-schedule-item-content { min-width: 0 !important; overflow: hidden !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item .organize-schedule-item-content strong, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item .organize-schedule-item-content em { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions { align-items: center !important; display: flex !important; gap: 0.42rem !important; justify-content: flex-end !important; min-width: 6.9rem !important; white-space: nowrap !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions .organize-schedule-drag-handle { flex: 0 0 auto !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions button { align-items: center !important; display: inline-flex !important; flex: 0 0 auto !important; min-height: 1.8rem !important; padding: 0 0.64rem !important; white-space: nowrap !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item > span:first-child { align-items: center !important; background: rgba(191, 219, 254, 0.1) !important; border: 1px solid rgba(191, 219, 254, 0.18) !important; border-radius: 999px !important; color: rgba(235, 242, 252, 0.88) !important; display: inline-flex !important; height: 1.9rem !important; justify-content: center !important; width: 1.9rem !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item:hover, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item:hover { border-color: rgba(196, 181, 253, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 28px rgba(0, 0, 0, 0.22), 0 0 26px rgba(168, 85, 247, 0.12) !important; transform: translateY(-1px) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item.is-included { background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.1), transparent 9rem), linear-gradient(135deg, rgba(8, 24, 43, 0.95), rgba(3, 12, 24, 0.9)) !important; border-color: rgba(74, 222, 128, 0.24) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item.is-included small { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(74, 222, 128, 0.22) !important; color: rgba(187, 247, 208, 0.9) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item { cursor: grab; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item:active, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item:active { cursor: grabbing; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item strong, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item span, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty strong { color: rgba(250, 252, 255, 0.96) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-item em, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item em, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item small, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-empty span, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-list .organize-schedule-section-empty { color: rgba(211, 224, 244, 0.76) !important; } html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-schedule-actions button, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-actions button, html body:has(.organize-schedules-workspace.is-custom-schedule) .organize-custom-source-item small { background: rgba(255, 255, 255, 0.045) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 999px !important; color: rgba(226, 236, 250, 0.82) !important; } @media (max-width: 1180px) { .organize-schedules-modern-layout, body:has(.organize-schedules-workspace) .organize-schedule-board { grid-template-columns: 1fr !important; } } /* P10LN final event-backed nav preview: class-driven highlight always wins last. */ .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected), body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected), .organize-workspace-shell .organize-nav-item.is-hover-preview, .preferences-screen .preferences-sidebar button.is-hover-preview, .preferences-screen .preferences-nav button.is-hover-preview { background: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(56, 189, 248, 0.1)) !important; border-color: rgba(196, 181, 253, 0.22) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 22px rgba(168, 85, 247, 0.17) !important; color: rgba(250, 252, 255, 0.98) !important; text-decoration: none !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important; transform: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after { opacity: 0 !important; } /* P10LN event-backed nav preview: same visible highlight even when legacy hover rules vary. */ .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected), body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected), .organize-workspace-shell .organize-nav-item.is-hover-preview, .preferences-screen .preferences-sidebar button.is-hover-preview, .preferences-screen .preferences-nav button.is-hover-preview { background: linear-gradient(135deg, rgba(168, 85, 247, 0.24), rgba(56, 189, 248, 0.1)) !important; border-color: rgba(196, 181, 253, 0.22) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 22px rgba(168, 85, 247, 0.17) !important; color: rgba(250, 252, 255, 0.98) !important; text-decoration: none !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important; transform: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-hover-preview:not(.is-selected)::after { opacity: 0 !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected.is-hover-preview::after { opacity: 1 !important; } /* P10LL interaction contract: one rule set for top nav and Practice side rail. */ .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { --zb-nav-hover-bg: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(56, 189, 248, 0.08)); --zb-nav-hover-ring: rgba(196, 181, 253, 0.18); --zb-nav-hover-glow: rgba(168, 85, 247, 0.14); background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; color: rgba(238, 242, 250, 0.64) !important; cursor: pointer !important; position: relative !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, text-shadow 160ms ease, transform 160ms ease !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before { content: none !important; display: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after { background: #a855f7 !important; border-radius: 999px !important; bottom: -0.16rem !important; box-shadow: none !important; content: "" !important; display: block !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.72) !important; transform-origin: center !important; width: 1.8rem !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible { background: var(--zb-nav-hover-bg) !important; border-color: var(--zb-nav-hover-ring) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 18px var(--zb-nav-hover-glow) !important; color: rgba(250, 252, 255, 0.96) !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.16) !important; transform: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(250, 252, 255, 0.98) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible { background: var(--zb-nav-hover-bg) !important; border-color: var(--zb-nav-hover-ring) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 18px var(--zb-nav-hover-glow) !important; color: rgba(250, 252, 255, 1) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { border-radius: 12px !important; justify-content: flex-start !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after { bottom: 0.34rem !important; left: 0.82rem !important; right: auto !important; transform: scaleX(0.72) !important; transform-origin: left center !important; width: 1.65rem !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: scaleX(1) !important; } .organize-workspace-shell .organize-nav-item, .preferences-screen .preferences-sidebar button, .preferences-screen .preferences-nav button { text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease !important; } .organize-workspace-shell .organize-nav-item:hover, .organize-workspace-shell .organize-nav-item:focus-visible, .preferences-screen .preferences-sidebar button:hover, .preferences-screen .preferences-sidebar button:focus-visible, .preferences-screen .preferences-nav button:hover, .preferences-screen .preferences-nav button:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(56, 189, 248, 0.07)) !important; border-color: rgba(196, 181, 253, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025), 0 0 18px rgba(168, 85, 247, 0.12) !important; color: rgba(250, 252, 255, 0.96) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:focus, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:focus-visible { border: 0 !important; box-shadow: none !important; outline: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has([data-screen-panel="tools"]:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after, body:has([data-screen-panel="system"]:not([hidden])) .app-header.header-with-nav .app-nav-button:hover::after { opacity: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has([data-screen-panel="log"]:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has([data-screen-panel="tools"]:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has([data-screen-panel="system"]:not([hidden])) .app-header.header-with-nav .app-nav-button.is-selected::after { opacity: 1 !important; } body:has(.app-shell) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.62rem !important; font-weight: 650 !important; grid-column: 2 !important; grid-row: 2 !important; letter-spacing: 0 !important; line-height: 1.05 !important; margin: 0 !important; max-width: none !important; text-shadow: none !important; white-space: nowrap !important; } body:has(.app-shell) .app-header.header-with-nav .brand-support, body:has(.app-shell) .app-header.header-with-nav .brand-block .app-build-line { display: none !important; } /* P10LJ identity hard sync: make Preferences and Goals match the Drills upper-left mark. */ body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block { align-items: center !important; display: grid !important; gap: 0.04rem 0.58rem !important; grid-template-columns: 2.45rem minmax(0, max-content) !important; grid-template-rows: auto auto !important; padding-left: 0 !important; position: relative !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block::before, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-block::before, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block::before { align-items: center !important; aspect-ratio: 1 !important; background: radial-gradient(circle at 50% 52%, rgba(5, 13, 25, 0.98) 0 52%, transparent 53%), conic-gradient(from 18deg, #fef08a, #7dd3fc, #a855f7, #f472b6, #fef08a) !important; border-radius: 999px !important; box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.22), 0 0 24px rgba(168, 85, 247, 0.22) !important; color: #f8fbff !important; content: "Z" !important; display: inline-flex !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 1.22rem !important; font-weight: 780 !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; height: 2.35rem !important; justify-content: center !important; left: auto !important; letter-spacing: 0 !important; line-height: 1 !important; position: static !important; top: auto !important; transform: none !important; width: 2.35rem !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-block h1 { color: rgba(248, 250, 255, 0.96) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.92rem !important; font-weight: 720 !important; grid-column: 2 !important; grid-row: 1 !important; letter-spacing: 0 !important; line-height: 1 !important; margin: 0 !important; text-shadow: none !important; white-space: nowrap !important; } body:has(.preferences-screen:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.practice-dashboard:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-goals-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-drills-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-songs-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline, body:has(.organize-workspace-shell.is-modern-solos-workspace:not([hidden])) .app-header.header-with-nav .brand-tagline { color: #c084fc !important; display: block !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: 0.62rem !important; font-weight: 650 !important; grid-column: 2 !important; grid-row: 2 !important; letter-spacing: 0 !important; line-height: 1.05 !important; margin: 0 !important; max-width: none !important; text-shadow: none !important; white-space: nowrap !important; } /* P10LK nav preview correction: active uses underline; hover uses highlight. */ body:has(.app-shell) .app-header.header-with-nav .app-nav-button { background: transparent !important; border-radius: 999px !important; color: rgba(238, 242, 250, 0.62) !important; padding: 0.34rem 0.66rem !important; transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, text-shadow 160ms ease !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:hover, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(56, 189, 248, 0.07)) !important; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.14), 0 10px 24px rgba(0, 0, 0, 0.18), 0 0 18px rgba(168, 85, 247, 0.12) !important; color: rgba(250, 252, 255, 0.95) !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected { background: transparent !important; box-shadow: none !important; color: rgba(250, 252, 255, 0.98) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:hover, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(56, 189, 248, 0.05)) !important; box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.12), 0 0 16px rgba(168, 85, 247, 0.1) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button:not(.is-selected):hover::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button:not(.is-selected):focus-visible::after { opacity: 0 !important; transform: translateX(-50%) scaleX(0.72) !important; } body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:hover::after, body:has(.app-shell) .app-header.header-with-nav .app-nav-button.is-selected:focus-visible::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } /* P10LM true final cascade lock: hover highlights, active underlines, no hover underlines. */ .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { background: transparent !important; border: 1px solid transparent !important; border-radius: 999px !important; box-shadow: none !important; color: rgba(238, 242, 250, 0.64) !important; cursor: pointer !important; position: relative !important; text-decoration: none !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, text-shadow 160ms ease !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::before { content: none !important; display: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after { background: #a855f7 !important; border-radius: 999px !important; bottom: -0.16rem !important; box-shadow: none !important; content: "" !important; display: block !important; height: 1px !important; left: 50% !important; opacity: 0 !important; position: absolute !important; right: auto !important; transform: translateX(-50%) scaleX(0.72) !important; transform-origin: center !important; width: 1.8rem !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(56, 189, 248, 0.09)) !important; border-color: rgba(196, 181, 253, 0.2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 20px rgba(168, 85, 247, 0.15) !important; color: rgba(250, 252, 255, 0.98) !important; text-shadow: 0 0 14px rgba(196, 181, 253, 0.18) !important; transform: none !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: rgba(250, 252, 255, 0.98) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(56, 189, 248, 0.07)) !important; border-color: rgba(196, 181, 253, 0.16) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 0 18px rgba(168, 85, 247, 0.12) !important; color: rgba(250, 252, 255, 1) !important; } .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: translateX(-50%) scaleX(1) !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button { border-radius: 12px !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:active::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button:not(.is-selected):focus-visible::after { bottom: 0.34rem !important; left: 0.82rem !important; opacity: 0 !important; right: auto !important; transform: scaleX(0.72) !important; transform-origin: left center !important; width: 1.65rem !important; } body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:hover::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:focus-visible::after, body:has(.practice-dashboard:not([hidden])) .app-shell header.app-header.header-with-nav > nav.app-nav[aria-label="Main app navigation"] > button.app-nav-button.is-selected:active::after { opacity: 1 !important; transform: scaleX(1) !important; } .organize-workspace-shell .organize-nav-item:hover, .organize-workspace-shell .organize-nav-item:focus-visible, .preferences-screen .preferences-sidebar button:hover, .preferences-screen .preferences-sidebar button:focus-visible, .preferences-screen .preferences-nav button:hover, .preferences-screen .preferences-nav button:focus-visible { background: linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(56, 189, 248, 0.09)) !important; border-color: rgba(196, 181, 253, 0.2) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035), 0 0 20px rgba(168, 85, 247, 0.15) !important; color: rgba(250, 252, 255, 0.98) !important; text-decoration: none !important; } /* P10NG: final Practice hero clearance lock. Keep the card and its title below the header band. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1.25rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-items: start !important; align-content: start !important; margin-top: 0 !important; padding-top: clamp(2.75rem, 4vw, 4.1rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; margin-top: clamp(0.85rem, 1.45vw, 1.45rem) !important; padding-top: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.25rem, 4.1vw, 3.95rem) !important; line-height: 1.03 !important; margin-top: 0.1rem !important; padding-top: 0.08rem !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 1rem !important; } } /* P10NG EOF LOCK: root-cause Practice hero stack reset. This must remain last. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.9rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { align-content: start !important; align-items: start !important; display: grid !important; min-height: clamp(18rem, 22vw, 23rem) !important; overflow: hidden !important; padding: clamp(1.55rem, 2.4vw, 2.35rem) !important; row-gap: clamp(0.8rem, 1.35vw, 1.35rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { align-self: start !important; display: flex !important; flex-direction: column !important; gap: 0.62rem !important; justify-content: flex-start !important; margin: 0 !important; max-width: min(48rem, 64%) !important; min-height: 0 !important; padding: 0 !important; transform: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .eyebrow { order: 1 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2.05rem, 3.2vw, 3.7rem) !important; line-height: 1.08 !important; margin: 0 !important; max-width: 18ch !important; order: 2 !important; overflow-wrap: anywhere !important; padding: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemMeta { font-size: clamp(0.9rem, 1.05vw, 1.05rem) !important; line-height: 1.25 !important; margin: 0 !important; order: 3 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription { line-height: 1.48 !important; margin: 0 !important; max-width: 42rem !important; order: 4 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemContextBadges { order: 5 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemInstructionsPanel { order: 6 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-stats, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-goal-chips { display: none !important; } @media (max-height: 820px) and (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="flow"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player, body[data-dashboard-mode="essentials"]:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { margin-top: 0.75rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: 17.5rem !important; padding: 1.35rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(2rem, 3.1vw, 3.2rem) !important; } } @media (max-width: 760px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: 21rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { max-width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { max-width: 100% !important; } } /* P10NG: Practice runtime action hierarchy and current-item utility polish. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: clamp(18.5rem, 23vw, 24rem) !important; padding-right: clamp(1.5rem, 2.6vw, 2.5rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { max-width: min(58rem, 72%) !important; padding-right: clamp(5.5rem, 10vw, 9rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { max-width: 22ch !important; } .current-item-utility-actions { align-items: center !important; display: flex !important; gap: 0.42rem !important; justify-content: flex-end !important; position: absolute !important; right: clamp(1rem, 1.9vw, 1.45rem) !important; top: clamp(1rem, 1.9vw, 1.45rem) !important; z-index: 8 !important; } .current-item-utility-button, body:has(.practice-dashboard:not([hidden])) .current-item-utility-button { align-items: center !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.022)) !important; border: 1px solid rgba(221, 230, 247, 0.105) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; color: rgba(232, 238, 248, 0.78) !important; display: inline-flex !important; font-size: 0.74rem !important; font-weight: 540 !important; gap: 0.34rem !important; height: 2.1rem !important; min-height: 2.1rem !important; min-width: 0 !important; padding: 0 0.66rem !important; width: auto !important; } .current-item-utility-button span { color: rgba(196, 181, 253, 0.92) !important; font-size: 0.88rem !important; line-height: 1 !important; } .current-item-utility-button strong { font: inherit !important; line-height: 1 !important; } .current-item-utility-button:hover, .current-item-utility-button:focus-visible { background: linear-gradient(135deg, rgba(167, 139, 250, 0.16), rgba(45, 212, 191, 0.07)) !important; border-color: rgba(196, 181, 253, 0.24) !important; color: rgba(250, 252, 255, 0.96) !important; } .current-item-delete-button:hover, .current-item-delete-button:focus-visible { background: linear-gradient(135deg, rgba(244, 63, 94, 0.16), rgba(167, 139, 250, 0.07)) !important; border-color: rgba(251, 113, 133, 0.26) !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions { grid-template-columns: minmax(9rem, 1.16fr) minmax(8.8rem, 1.02fr) minmax(8.2rem, 0.96fr) minmax(7.6rem, 0.9fr) minmax(7rem, 0.74fr) !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions :is(#notesCurrentItemButton, #editCurrentItemButton, #deleteCurrentItemButton) { display: none !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #funItemButton { opacity: 0.74 !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #funItemButton:hover, body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #funItemButton:focus-visible { opacity: 1 !important; } .current-item-instructions-panel { max-width: min(62rem, 78%) !important; } .current-item-instructions-body { max-height: min(24rem, 42vh) !important; } .current-item-context-badge[data-current-reference-badge="true"] { background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(139, 92, 246, 0.14)) !important; } .current-item-context-badge[data-current-reminder-badge="true"] { background: linear-gradient(135deg, rgba(245, 158, 11, 0.24), rgba(20, 184, 166, 0.14)) !important; border-color: rgba(250, 204, 21, 0.28) !important; color: rgba(255, 249, 230, 0.94) !important; } .quick-start-item-actions { align-items: center !important; display: flex !important; gap: 0.45rem !important; } .quick-start-delete-button { align-items: center !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(248, 113, 113, 0.15) !important; border-radius: 999px !important; color: rgba(252, 165, 165, 0.74) !important; cursor: pointer !important; display: inline-flex !important; font-size: 0.82rem !important; height: 2.15rem !important; justify-content: center !important; min-height: 2.15rem !important; padding: 0 !important; width: 2.15rem !important; } .quick-start-delete-button:hover, .quick-start-delete-button:focus-visible { background: rgba(244, 63, 94, 0.14) !important; border-color: rgba(248, 113, 113, 0.32) !important; color: rgba(255, 228, 230, 0.94) !important; } @media (max-width: 860px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { max-width: 100% !important; padding-right: 0 !important; padding-top: 2.85rem !important; } .current-item-utility-actions { left: clamp(1rem, 4vw, 1.3rem) !important; right: clamp(1rem, 4vw, 1.3rem) !important; top: clamp(0.9rem, 3vw, 1.1rem) !important; justify-content: flex-start !important; } .current-item-utility-button { font-size: 0.7rem !important; height: 1.95rem !important; min-height: 1.95rem !important; padding: 0 0.56rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions #funItemButton { grid-column: 1 / -1 !important; } .current-item-instructions-panel { max-width: 100% !important; } .quick-start-item-actions { align-self: stretch !important; justify-content: space-between !important; } } /* P10NG: visible per-item delete affordance for modern Organize lists. */ .organize-goal-modern-row, .organize-drill-modern-row, .organize-song-modern-row, .organize-solo-modern-row, .organize-activity-modern-row { position: relative !important; } .organize-goal-modern-row .organize-goal-modern-main, .organize-drill-modern-row, .organize-song-modern-row, .organize-solo-modern-row, .organize-activity-modern-row { padding-right: clamp(7.65rem, 8.6vw, 8.35rem) !important; } .organize-modern-row-archive { align-items: center !important; background: linear-gradient(135deg, rgba(20, 184, 166, 0.11), rgba(59, 130, 246, 0.045)) !important; border: 1px solid rgba(94, 234, 212, 0.18) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; color: rgba(204, 251, 241, 0.78) !important; cursor: pointer !important; display: inline-flex !important; font-family: var(--goals-ui-font) !important; font-size: 0.7rem !important; font-weight: 760 !important; height: 2.08rem !important; justify-content: center !important; min-height: 2.08rem !important; opacity: 0.82 !important; padding: 0 0.7rem !important; position: absolute !important; right: clamp(3.05rem, 4.2vw, 3.55rem) !important; text-transform: none !important; top: 50% !important; transform: translateY(-50%) !important; transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important; white-space: nowrap !important; z-index: 8 !important; } .organize-modern-row-delete { align-items: center !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)) !important; border: 1px solid rgba(248, 113, 113, 0.16) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; color: rgba(252, 165, 165, 0.72) !important; cursor: pointer !important; display: inline-flex !important; height: 2.08rem !important; justify-content: center !important; min-height: 2.08rem !important; opacity: 0.82 !important; padding: 0 !important; position: absolute !important; right: clamp(0.7rem, 1.35vw, 1rem) !important; top: 50% !important; transform: translateY(-50%) !important; transition: opacity 150ms ease, background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 150ms ease !important; width: 2.08rem !important; z-index: 8 !important; } .organize-modern-row-delete svg { display: block !important; height: 1rem !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1rem !important; } .organize-modern-row-delete:hover, .organize-modern-row-delete:focus-visible { background: linear-gradient(135deg, rgba(244, 63, 94, 0.18), rgba(139, 92, 246, 0.08)) !important; border-color: rgba(251, 113, 133, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(244, 63, 94, 0.14) !important; color: rgba(255, 228, 230, 0.96) !important; opacity: 1 !important; } .organize-modern-row-archive:hover, .organize-modern-row-archive:focus-visible { background: linear-gradient(135deg, rgba(20, 184, 166, 0.2), rgba(59, 130, 246, 0.09)) !important; border-color: rgba(94, 234, 212, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 18px rgba(20, 184, 166, 0.13) !important; color: rgba(240, 253, 250, 0.98) !important; opacity: 1 !important; } @media (hover: hover) and (pointer: fine) { .organize-modern-row-archive, .organize-modern-row-delete { opacity: 0.58 !important; } .organize-drill-modern-row:hover .organize-modern-row-archive, .organize-song-modern-row:hover .organize-modern-row-archive, .organize-solo-modern-row:hover .organize-modern-row-archive, .organize-activity-modern-row:hover .organize-modern-row-archive, .organize-modern-row-archive:focus-visible, .organize-goal-modern-row:hover .organize-modern-row-delete, .organize-drill-modern-row:hover .organize-modern-row-delete, .organize-song-modern-row:hover .organize-modern-row-delete, .organize-solo-modern-row:hover .organize-modern-row-delete, .organize-activity-modern-row:hover .organize-modern-row-delete, .organize-modern-row-delete:focus-visible { opacity: 1 !important; } } @media (max-width: 760px) { .organize-goal-modern-row .organize-goal-modern-main, .organize-drill-modern-row, .organize-song-modern-row, .organize-solo-modern-row, .organize-activity-modern-row { padding-right: 7.2rem !important; } .organize-modern-row-archive { height: 2.24rem !important; min-height: 2.24rem !important; opacity: 0.9 !important; right: 3.3rem !important; } .organize-modern-row-delete { height: 2.24rem !important; min-height: 2.24rem !important; opacity: 0.9 !important; width: 2.24rem !important; } } /* P10NI: make Catalog reference attachment visible and list-like. */ .organize-catalog-links.is-primary-attach-panel, .modal-catalog-lookup { background: radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.16), transparent 34%), linear-gradient(145deg, rgba(10, 23, 44, 0.92), rgba(4, 12, 24, 0.86)) !important; border: 1px solid rgba(168, 85, 247, 0.32) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 48px rgba(0, 0, 0, 0.24), 0 0 28px rgba(124, 58, 237, 0.08) !important; padding: 0.95rem !important; } .modal-catalog-lookup-header div { display: grid !important; gap: 0.16rem !important; min-width: 0 !important; } .modal-catalog-lookup-header small, .reference-direct-header span { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.78rem !important; font-weight: 420 !important; } .modal-catalog-lookup-controls { display: grid !important; gap: 0.55rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } .organize-catalog-attach-list, .modal-catalog-lookup-results, .catalog-selected-list { display: grid !important; gap: 0.48rem !important; } .catalog-attach-target, .catalog-lookup-result, .catalog-selected-row { align-items: center !important; background: linear-gradient(135deg, rgba(16, 32, 58, 0.86), rgba(7, 18, 34, 0.78)) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 13px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; color: rgba(238, 244, 255, 0.88) !important; cursor: pointer !important; display: grid !important; gap: 0.72rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; justify-items: stretch !important; min-height: 3.2rem !important; padding: 0.62rem 0.72rem !important; text-align: left !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; width: 100% !important; } .catalog-attach-target:hover, .catalog-attach-target:focus-visible, .catalog-lookup-result:hover, .catalog-lookup-result:focus-visible { background: linear-gradient(135deg, rgba(24, 44, 78, 0.96), rgba(10, 28, 52, 0.92)) !important; border-color: rgba(167, 139, 250, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 24px rgba(139, 92, 246, 0.12) !important; transform: translateY(-1px) !important; } .catalog-selected-row { border-color: rgba(45, 212, 191, 0.22) !important; cursor: default !important; } .catalog-selected-row:hover { transform: none !important; } .catalog-selected-row .secondary-button { min-height: 2rem !important; padding: 0.28rem 0.62rem !important; } .catalog-attach-target-icon, .catalog-lookup-result-icon, .catalog-selected-row .catalog-lookup-result-icon { align-items: center !important; background: rgba(139, 92, 246, 0.14) !important; border: 1px solid rgba(167, 139, 250, 0.22) !important; border-radius: 999px !important; color: rgba(216, 180, 254, 0.92) !important; display: inline-flex !important; height: 2rem !important; justify-content: center !important; width: 2rem !important; } .catalog-attach-target-icon svg { height: 1rem !important; stroke: currentColor !important; width: 1rem !important; } .catalog-attach-target-copy, .catalog-lookup-result-copy { display: grid !important; gap: 0.12rem !important; min-width: 0 !important; } .catalog-attach-target-copy strong, .catalog-lookup-result-copy strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.9rem !important; font-weight: 560 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-attach-target-copy small, .catalog-lookup-result-copy small { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.78rem !important; } .catalog-attach-target em, .catalog-lookup-result em { background: rgba(45, 212, 191, 0.1) !important; border: 1px solid rgba(45, 212, 191, 0.22) !important; border-radius: 999px !important; color: rgba(153, 246, 228, 0.88) !important; font-size: 0.72rem !important; font-style: normal !important; font-weight: 560 !important; padding: 0.24rem 0.48rem !important; } .reference-direct-header { border-top: 1px solid rgba(148, 163, 184, 0.12) !important; display: grid !important; gap: 0.14rem !important; margin-top: 0.72rem !important; padding-top: 0.78rem !important; } .reference-direct-header strong { color: rgba(248, 250, 252, 0.88) !important; font-size: 0.88rem !important; font-weight: 540 !important; } @media (max-width: 760px) { .modal-catalog-lookup-controls { grid-template-columns: 1fr !important; } } /* P10NK runtime cleanup: reminders surface in the current item, notes are session-only. */ body:has(.practice-dashboard:not([hidden])) .current-item-reminder-preview { align-items: start !important; background: radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.16), transparent 38%), linear-gradient(135deg, rgba(22, 32, 50, 0.72), rgba(8, 18, 32, 0.62)) !important; border: 1px solid rgba(250, 204, 21, 0.18) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 24px rgba(250, 204, 21, 0.06) !important; display: grid !important; gap: 0.22rem !important; margin-top: 0.72rem !important; max-width: min(42rem, 100%) !important; padding: 0.64rem 0.76rem !important; } body:has(.practice-dashboard:not([hidden])) .current-item-reminder-preview[hidden] { display: none !important; } body:has(.practice-dashboard:not([hidden])) .current-item-reminder-preview strong { color: rgba(253, 224, 71, 0.9) !important; font-size: 0.68rem !important; font-weight: 680 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } body:has(.practice-dashboard:not([hidden])) .current-item-reminder-preview span { color: rgba(248, 250, 252, 0.86) !important; font-size: 0.88rem !important; line-height: 1.35 !important; } body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox summary span:first-child { font-size: 0 !important; } body:has(.practice-dashboard:not([hidden])) #currentItemReminderBox summary span:first-child::after { content: "Reminders" !important; font-size: 0.95rem !important; } body:has(.organize-workspace-shell:not([hidden])) #rotationPlanningPanel.rotation-planning-panel { background: linear-gradient(135deg, rgba(8, 20, 38, 0.82), rgba(4, 11, 22, 0.74)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; margin-block: 0.75rem !important; padding: 0.85rem 1rem !important; } body:has(.organize-workspace-shell:not([hidden])) #rotationPlanningPanel .section-header { align-items: center !important; margin-bottom: 0.62rem !important; } body:has(.organize-workspace-shell:not([hidden])) #rotationPlanningTitle { font-size: 1rem !important; font-weight: 560 !important; margin: 0 !important; } body:has(.organize-workspace-shell:not([hidden])) #rotationPlanningHint { font-size: 0.82rem !important; margin: 0.12rem 0 0 !important; } body:has(.organize-workspace-shell:not([hidden])) #rotationPlanningPanel .field-grid { grid-template-columns: minmax(10rem, 15rem) minmax(10rem, 15rem) !important; } /* P10NQ Catalog mockup match: premium dense reference workspace. */ body:has(.organize-catalog-workspace) .organize-relationship-preview { background: radial-gradient(circle at 16% 0%, rgba(124, 58, 237, 0.16), transparent 28rem), radial-gradient(circle at 82% 14%, rgba(14, 165, 233, 0.08), transparent 25rem), linear-gradient(180deg, #030914 0%, #06111f 52%, #030812 100%) !important; border-color: rgba(148, 163, 184, 0.12) !important; } body:has(.organize-catalog-workspace) .organize-catalog-workspace { background: linear-gradient(135deg, rgba(4, 12, 23, 0.96), rgba(2, 8, 17, 0.98)) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 18px !important; box-shadow: 0 28px 90px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; gap: 0.72rem !important; padding: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-topbar { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0.2rem 0.15rem 0.62rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand h2 { font-size: 1.42rem !important; font-weight: 650 !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand p { display: none !important; } body:has(.organize-catalog-workspace) .catalog-workspace-controls { grid-template-columns: minmax(0, 1fr) auto auto !important; } body:has(.organize-catalog-workspace) .catalog-toolbar-utilities { display: flex !important; gap: 0.45rem !important; } body:has(.organize-catalog-workspace) .catalog-toolbar-utilities .secondary-button, body:has(.organize-catalog-workspace) .organize-catalog-tools input, body:has(.organize-catalog-workspace) .organize-catalog-tools select, body:has(.organize-catalog-workspace) .catalog-browser-search input { background: rgba(2, 8, 17, 0.62) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; } body:has(.organize-catalog-workspace) .organize-catalog-tools label span, body:has(.organize-catalog-workspace) .catalog-browser-search span { display: none !important; } body:has(.organize-catalog-workspace) .organize-catalog-layout { grid-template-columns: minmax(21rem, 0.86fr) minmax(0, 1.62fr) minmax(19rem, 0.86fr) !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { background: linear-gradient(145deg, rgba(8, 21, 39, 0.78), rgba(3, 10, 20, 0.88)) !important; border: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 16px !important; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser { padding: 0.85rem !important; } body:has(.organize-catalog-workspace) .catalog-browser-header { border-bottom: 1px solid rgba(148, 163, 184, 0.09) !important; padding-bottom: 0.65rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-list { gap: 0 !important; max-height: 43.5rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-row { background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important; border-radius: 0 !important; box-shadow: none !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-height: 4.6rem !important; padding: 0.72rem 0.58rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-row.is-selected { background: linear-gradient(90deg, rgba(109, 40, 217, 0.34), rgba(15, 42, 72, 0.18)) !important; border: 1px solid rgba(168, 85, 247, 0.65) !important; border-radius: 12px !important; box-shadow: 0 0 0 1px rgba(196, 181, 253, 0.06), 0 0 30px rgba(124, 58, 237, 0.18) !important; margin: 0.18rem 0 !important; } body:has(.organize-catalog-workspace) .catalog-row-icon, body:has(.organize-catalog-workspace) .catalog-selected-icon { border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; box-shadow: 0 0 18px rgba(124, 58, 237, 0.2) !important; } body:has(.organize-catalog-workspace) .catalog-selected-icon { height: 3.2rem !important; width: 3.2rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header { align-items: start !important; background: transparent !important; display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; padding: 0.15rem 0 0.6rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header h3 { color: rgba(248, 250, 252, 0.96) !important; font-size: clamp(1.18rem, 1.8vw, 1.55rem) !important; font-weight: 650 !important; line-height: 1.15 !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header > div:not(.catalog-viewer-actions) { min-width: 0 !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header > div:not(.catalog-viewer-actions) > p:not(.eyebrow) { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.82rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .secondary-button, body:has(.organize-catalog-workspace) .catalog-reference-card .secondary-button { background: rgba(15, 23, 42, 0.72) !important; border-color: rgba(148, 163, 184, 0.18) !important; border-radius: 8px !important; color: rgba(248, 250, 252, 0.94) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-open-reference { background: linear-gradient(135deg, #7c3aed, #4f46e5) !important; border-color: rgba(196, 181, 253, 0.28) !important; } body:has(.organize-catalog-workspace) .catalog-attached-references { display: none !important; } body:has(.organize-catalog-workspace) .catalog-links-found, body:has(.organize-catalog-workspace) .catalog-rich-text-viewer, body:has(.organize-catalog-workspace) .organize-catalog-links, body:has(.organize-catalog-workspace) .organize-catalog-metadata-editor { background: linear-gradient(145deg, rgba(6, 18, 34, 0.76), rgba(3, 10, 20, 0.86)) !important; border: 1px solid rgba(137, 161, 204, 0.13) !important; border-radius: 12px !important; } body:has(.organize-catalog-workspace) .catalog-reference-card { background: linear-gradient(135deg, rgba(11, 31, 55, 0.78), rgba(2, 8, 17, 0.82)) !important; border-color: rgba(137, 161, 204, 0.12) !important; border-radius: 10px !important; } body:has(.organize-catalog-workspace) .catalog-rich-text-viewer pre { background: rgba(2, 8, 17, 0.26) !important; border-color: rgba(137, 161, 204, 0.08) !important; max-height: 21rem !important; } body:has(.organize-catalog-workspace) .catalog-linked-summary { align-items: center !important; background: rgba(15, 23, 42, 0.48) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 10px !important; color: rgba(248, 250, 252, 0.86) !important; cursor: pointer !important; display: grid !important; gap: 0.55rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-height: 2.55rem !important; padding: 0.45rem 0.58rem !important; text-align: left !important; } body:has(.organize-catalog-workspace) .catalog-linked-icon { align-items: center !important; background: rgba(124, 58, 237, 0.18) !important; border-radius: 8px !important; color: rgba(196, 181, 253, 0.95) !important; display: inline-flex !important; height: 1.85rem !important; justify-content: center !important; width: 1.85rem !important; } body:has(.organize-catalog-workspace) .catalog-linked-icon svg { height: 1rem !important; width: 1rem !important; } body:has(.organize-catalog-workspace) .catalog-linked-summary em, body:has(.organize-catalog-workspace) .catalog-details-list dd { background: rgba(124, 58, 237, 0.26) !important; border-radius: 999px !important; color: rgba(221, 214, 254, 0.96) !important; font-style: normal !important; min-width: 1.45rem !important; padding: 0.12rem 0.45rem !important; text-align: center !important; } body:has(.organize-catalog-workspace) .catalog-details-list { display: grid !important; gap: 0.5rem !important; margin: 0 !important; } body:has(.organize-catalog-workspace) .catalog-details-list div { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: 0.5rem !important; } body:has(.organize-catalog-workspace) .catalog-details-list dt { color: rgba(203, 213, 225, 0.58) !important; } body:has(.organize-catalog-workspace) .catalog-details-list dd { background: transparent !important; color: rgba(248, 250, 252, 0.88) !important; margin: 0 !important; padding: 0 !important; } /* P10NR Catalog visual-match tightening: dense mockup-grade chrome and cards. */ body:has(.organize-catalog-workspace) .organize-workspace-content, body:has(.organize-catalog-workspace) .organize-relationship-preview { overflow: hidden !important; } body:has(.organize-catalog-workspace) .organize-catalog-workspace { min-height: min(52rem, calc(100vh - 7rem)) !important; padding: 0.88rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-topbar { align-items: center !important; display: grid !important; gap: 0.95rem !important; grid-template-columns: minmax(10rem, 12.5rem) minmax(0, 1fr) !important; min-height: 3.3rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand { gap: 0.78rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-logo { background: radial-gradient(circle at 35% 18%, rgba(254, 240, 138, 0.94), rgba(124, 58, 237, 0.92) 58%, rgba(14, 165, 233, 0.76)) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: 999px !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18), 0 0 28px rgba(168, 85, 247, 0.26) !important; color: #ffffff !important; font-size: 1.1rem !important; height: 2.35rem !important; width: 2.35rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand h2 { letter-spacing: -0.01em !important; line-height: 1 !important; } body:has(.organize-catalog-workspace) .catalog-workspace-controls { align-items: center !important; display: grid !important; gap: 0.5rem !important; grid-template-columns: minmax(0, 1fr) auto auto !important; } body:has(.organize-catalog-workspace) .organize-catalog-tools { align-items: center !important; background: transparent !important; border: 0 !important; box-shadow: none !important; display: grid !important; gap: 0.46rem !important; grid-template-columns: minmax(10rem, 1.2fr) repeat(3, minmax(4.8rem, 0.48fr)) !important; padding: 0 !important; } body:has(.organize-catalog-workspace) .organize-catalog-tools input, body:has(.organize-catalog-workspace) .organize-catalog-tools select, body:has(.organize-catalog-workspace) .catalog-browser-search input { border-radius: 8px !important; color: rgba(248, 250, 252, 0.9) !important; font-size: 0.78rem !important; min-height: 2.42rem !important; } body:has(.organize-catalog-workspace) .catalog-toolbar-utilities .secondary-button { border-radius: 8px !important; font-size: 0.76rem !important; min-height: 2.42rem !important; padding-inline: 0.52rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-controls .organize-catalog-add-panel { position: relative !important; } body:has(.organize-catalog-workspace) .catalog-workspace-controls .organize-catalog-add-panel summary { background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(79, 70, 229, 0.9)) !important; border: 1px solid rgba(196, 181, 253, 0.26) !important; border-radius: 8px !important; box-shadow: 0 12px 30px rgba(91, 33, 182, 0.26) !important; color: white !important; font-size: 0.78rem !important; min-height: 2.42rem !important; padding: 0.55rem 0.7rem !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .organize-catalog-layout { align-items: stretch !important; gap: 0.86rem !important; grid-template-columns: minmax(14.5rem, 0.75fr) minmax(0, 1.8fr) minmax(13.2rem, 0.8fr) !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { align-content: start !important; backdrop-filter: blur(18px) !important; grid-auto-rows: auto !important; min-height: 0 !important; } body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { overflow: auto !important; } body:has(.organize-catalog-workspace) .catalog-browser-header strong, body:has(.organize-catalog-workspace) .modal-catalog-lookup-header strong, body:has(.organize-catalog-workspace) .catalog-section-heading h4 { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.78rem !important; font-weight: 720 !important; letter-spacing: 0.025em !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-browser-header small, body:has(.organize-catalog-workspace) .modal-catalog-lookup-header small, body:has(.organize-catalog-workspace) .catalog-section-heading small { color: rgba(186, 196, 215, 0.62) !important; font-size: 0.72rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-row strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.84rem !important; font-weight: 640 !important; line-height: 1.2 !important; } body:has(.organize-catalog-workspace) .organize-catalog-row small, body:has(.organize-catalog-workspace) .organize-catalog-row em { color: rgba(203, 213, 225, 0.68) !important; font-size: 0.71rem !important; line-height: 1.25 !important; } body:has(.organize-catalog-workspace) .catalog-row-icon { align-items: center !important; color: white !important; display: inline-flex !important; font-size: 1rem !important; height: 2.35rem !important; justify-content: center !important; width: 2.35rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-card { display: grid !important; gap: 0.9rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-meta { display: flex !important; flex-wrap: wrap !important; gap: 0.42rem !important; margin-top: 0.6rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-meta span { background: rgba(124, 58, 237, 0.24) !important; border: 1px solid rgba(196, 181, 253, 0.14) !important; border-radius: 999px !important; color: rgba(221, 214, 254, 0.96) !important; font-size: 0.68rem !important; padding: 0.2rem 0.5rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.45rem !important; grid-column: 2 !important; justify-content: flex-start !important; margin-top: 0.52rem !important; } body:has(.organize-catalog-workspace) .catalog-icon-action { align-items: center !important; display: inline-flex !important; height: 2.24rem !important; justify-content: center !important; padding: 0 !important; width: 2.24rem !important; } body:has(.organize-catalog-workspace) .organize-modern-row-delete { background: rgba(15, 23, 42, 0.7) !important; border: 1px solid rgba(248, 113, 113, 0.16) !important; border-radius: 8px !important; height: 2.24rem !important; min-height: 2.24rem !important; opacity: 0.76 !important; width: 2.24rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-card { align-items: center !important; display: grid !important; gap: 0.75rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-icon { align-items: center !important; background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(124, 58, 237, 0.82)) !important; border-radius: 10px !important; color: white !important; display: inline-flex !important; font-size: 1.1rem !important; height: 3rem !important; justify-content: center !important; width: 3.8rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-copy strong { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.86rem !important; font-weight: 640 !important; } body:has(.organize-catalog-workspace) .catalog-reference-copy small { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-copy em { color: rgba(96, 165, 250, 0.92) !important; display: block !important; font-size: 0.76rem !important; font-style: normal !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .catalog-rich-text-viewer pre { color: rgba(226, 232, 240, 0.9) !important; font-family: var(--font-sans, inherit) !important; font-size: 0.86rem !important; line-height: 1.56 !important; white-space: pre-wrap !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs { background: rgba(2, 8, 17, 0.28) !important; border-radius: 10px !important; display: grid !important; gap: 0.28rem !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; padding: 0.25rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs button { background: transparent !important; border: 0 !important; border-radius: 8px !important; color: rgba(203, 213, 225, 0.74) !important; cursor: pointer !important; font-size: 0.74rem !important; min-height: 2rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs button.is-selected { background: rgba(124, 58, 237, 0.28) !important; box-shadow: inset 0 -2px 0 rgba(192, 132, 252, 0.95) !important; color: white !important; } body:has(.organize-catalog-workspace) .catalog-attach-target-row { display: grid !important; gap: 0.36rem !important; grid-template-columns: minmax(0, 1fr) auto !important; } body:has(.organize-catalog-workspace) .catalog-attach-target { background: rgba(15, 23, 42, 0.46) !important; border-color: rgba(148, 163, 184, 0.1) !important; border-radius: 9px !important; display: grid !important; gap: 0.45rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-width: 0 !important; text-align: left !important; } body:has(.organize-catalog-workspace) .catalog-attach-edit-target { background: linear-gradient(135deg, rgba(124, 58, 237, 0.74), rgba(79, 70, 229, 0.72)) !important; border-color: rgba(196, 181, 253, 0.18) !important; border-radius: 9px !important; color: white !important; white-space: nowrap !important; } @media (max-width: 1180px) { body:has(.organize-catalog-workspace) .catalog-workspace-topbar, body:has(.organize-catalog-workspace) .catalog-workspace-controls, body:has(.organize-catalog-workspace) .organize-catalog-tools, body:has(.organize-catalog-workspace) .organize-catalog-layout { grid-template-columns: 1fr !important; } } /* P10NR Catalog shell repair: remove the old light Organize wrapper from this workspace. */ body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .overview-card[data-screen-panel="manage"] { display: none !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace { background: radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.16), transparent 26rem), radial-gradient(circle at 88% 14%, rgba(14, 165, 233, 0.09), transparent 22rem), linear-gradient(180deg, rgba(3, 9, 18, 0.98), rgba(2, 7, 15, 0.99)) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 18px !important; box-shadow: 0 32px 90px rgba(0, 0, 0, 0.38) !important; gap: 0 !important; grid-template-columns: minmax(10.5rem, 13.4rem) minmax(0, 1fr) !important; padding: 0 !important; overflow: hidden !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-workspace-nav { background: radial-gradient(circle at 0% 12%, rgba(124, 58, 237, 0.13), transparent 16rem), linear-gradient(180deg, rgba(5, 16, 31, 0.94), rgba(2, 8, 17, 0.98)) !important; border-right: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 0 !important; box-shadow: none !important; color: rgba(226, 232, 240, 0.82) !important; padding: 1.15rem 0.82rem !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-workspace-label { color: rgba(203, 213, 225, 0.7) !important; font-size: 0.7rem !important; font-weight: 650 !important; letter-spacing: 0.09em !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-nav-item { color: rgba(226, 232, 240, 0.72) !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-nav-item.is-selected { background: linear-gradient(90deg, rgba(124, 58, 237, 0.46), rgba(30, 64, 175, 0.22)) !important; border-color: rgba(196, 181, 253, 0.28) !important; box-shadow: inset 3px 0 0 rgba(192, 132, 252, 0.96), 0 14px 34px rgba(91, 33, 182, 0.18) !important; color: rgba(255, 255, 255, 0.94) !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-workspace-main { background: transparent !important; padding: 0.95rem !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-workspace-content { display: block !important; min-width: 0 !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-context-card { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-context-header { display: none !important; } body:has(.organize-workspace-shell.is-catalog-workspace:not([hidden])) .organize-workspace-shell.is-catalog-workspace .organize-relationship-preview { border: 0 !important; border-radius: 16px !important; min-height: calc(100vh - 10.5rem) !important; padding: 0 !important; } body:has(.organize-catalog-workspace) .organize-catalog-workspace { align-content: start !important; grid-auto-rows: auto !important; min-height: calc(100vh - 10.5rem) !important; } body:has(.organize-catalog-workspace) .catalog-workspace-topbar { align-self: start !important; height: auto !important; min-height: 0 !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header h3 { color: rgba(248, 250, 252, 0.96) !important; font-size: clamp(1.18rem, 1.65vw, 1.52rem) !important; max-width: 36rem !important; } /* P10NS Catalog fidelity pass: richer cards, cleaner toolbar, and full attach drawer. */ body:has(.organize-catalog-workspace) .organize-catalog-workspace { background: radial-gradient(circle at 12% 6%, rgba(168, 85, 247, 0.24), transparent 18rem), radial-gradient(circle at 82% 10%, rgba(14, 165, 233, 0.12), transparent 22rem), radial-gradient(circle at 45% 100%, rgba(74, 222, 128, 0.06), transparent 18rem), linear-gradient(145deg, rgba(5, 13, 25, 0.99), rgba(1, 5, 12, 0.995)) !important; border-color: rgba(196, 181, 253, 0.20) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 28px 80px rgba(0, 0, 0, 0.34) !important; } body:has(.organize-catalog-workspace) .catalog-workspace-controls { grid-template-columns: minmax(0, 1fr) minmax(5.4rem, auto) auto !important; } body:has(.organize-catalog-workspace) .catalog-toolbar-utilities { display: block !important; } body:has(.organize-catalog-workspace) .catalog-sort-control { display: block !important; } body:has(.organize-catalog-workspace) .catalog-sort-control span { display: none !important; } body:has(.organize-catalog-workspace) .catalog-sort-control select { background: rgba(2, 8, 17, 0.62) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 8px !important; color: rgba(248, 250, 252, 0.9) !important; font-size: 0.78rem !important; min-height: 2.42rem !important; padding: 0.42rem 0.62rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { background: radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.13), transparent 15rem), linear-gradient(160deg, rgba(10, 24, 44, 0.86), rgba(3, 9, 19, 0.94)) !important; border-color: rgba(167, 139, 250, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 48px rgba(0, 0, 0, 0.24) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row { border: 1px solid transparent !important; border-bottom-color: rgba(148, 163, 184, 0.075) !important; border-radius: 12px !important; gap: 0.7rem !important; margin: 0.08rem 0 !important; min-height: 4.25rem !important; padding: 0.66rem !important; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:hover { background: rgba(124, 58, 237, 0.12) !important; border-color: rgba(196, 181, 253, 0.20) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important; transform: translateY(-1px) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row.is-selected { background: radial-gradient(circle at 0% 0%, rgba(192, 132, 252, 0.34), transparent 68%), linear-gradient(90deg, rgba(91, 33, 182, 0.58), rgba(15, 42, 72, 0.28)) !important; border-color: rgba(168, 85, 247, 0.78) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px rgba(196, 181, 253, 0.08), 0 0 42px rgba(168, 85, 247, 0.30) !important; } body:has(.organize-catalog-workspace) .catalog-row-copy strong { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; } body:has(.organize-catalog-workspace) .catalog-row-meta { align-items: end !important; display: flex !important; flex-direction: column !important; gap: 0.28rem !important; } body:has(.organize-catalog-workspace) .catalog-row-meta em { background: rgba(124, 58, 237, 0.24) !important; border: 1px solid rgba(196, 181, 253, 0.14) !important; border-radius: 999px !important; color: rgba(221, 214, 254, 0.92) !important; font-style: normal !important; max-width: 6.5rem !important; overflow: hidden !important; padding: 0.12rem 0.42rem !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .organize-catalog-row { align-items: start !important; grid-template-columns: auto minmax(0, 1fr) !important; min-height: 6.85rem !important; overflow: visible !important; padding-bottom: 1.2rem !important; padding-top: 0.78rem !important; row-gap: 0 !important; } body:has(.organize-catalog-workspace) .organize-catalog-row.is-selected { min-height: 7.35rem !important; padding-bottom: 1.55rem !important; } body:has(.organize-catalog-workspace) .catalog-row-copy { align-self: start !important; display: grid !important; gap: 0.34rem !important; min-width: 0 !important; } body:has(.organize-catalog-workspace) .catalog-row-copy strong { -webkit-line-clamp: 2 !important; line-height: 1.18 !important; white-space: normal !important; } body:has(.organize-catalog-workspace) .catalog-row-copy small { display: block !important; line-height: 1.28 !important; } body:has(.organize-catalog-workspace) .catalog-row-meta { align-items: center !important; display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 0.32rem !important; justify-content: flex-start !important; margin-top: 0.32rem !important; min-width: 0 !important; padding-bottom: 0.16rem !important; position: static !important; } body:has(.organize-catalog-workspace) .catalog-row-meta em { max-width: min(12rem, 100%) !important; } body:has(.organize-catalog-workspace) .catalog-row-link-count { background: rgba(15, 23, 42, 0.45) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 999px !important; color: rgba(203, 213, 225, 0.78) !important; padding: 0.12rem 0.42rem !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header { align-items: start !important; background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.14), transparent 16rem), linear-gradient(145deg, rgba(6, 18, 34, 0.56), rgba(3, 10, 20, 0.28)) !important; border: 1px solid rgba(137, 161, 204, 0.10) !important; border-radius: 14px !important; gap: 0.9rem !important; padding: 0.86rem !important; } body:has(.organize-catalog-workspace) .catalog-selected-icon { height: 3.7rem !important; width: 3.7rem !important; } body:has(.organize-catalog-workspace) .catalog-selected-icon svg { height: 1.9rem !important; width: 1.9rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-icon { height: 2.25rem !important; width: 2.25rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header h3 { font-size: clamp(1.4rem, 2.1vw, 2.05rem) !important; font-weight: 650 !important; letter-spacing: -0.01em !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header .eyebrow { color: rgba(196, 181, 253, 0.78) !important; letter-spacing: 0.14em !important; } body:has(.organize-catalog-workspace) .catalog-title-kicker { color: rgba(148, 163, 184, 0.78) !important; font-size: 0.7rem !important; font-weight: 560 !important; letter-spacing: 0.12em !important; margin: 0.15rem 0 0.08rem !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-entry-identity-line { color: rgba(226, 232, 240, 0.72) !important; font-size: 0.86rem !important; font-weight: 440 !important; line-height: 1.4 !important; margin-top: 0.2rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .secondary-button, body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-open-reference { min-height: 2.28rem !important; padding-inline: 0.82rem !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-danger-action { border-color: rgba(251, 113, 133, 0.28) !important; color: rgba(254, 205, 211, 0.9) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-danger-action:hover { background: rgba(190, 18, 60, 0.16) !important; border-color: rgba(251, 113, 133, 0.42) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-resource-delete-action { background: linear-gradient(135deg, rgba(180, 83, 9, 0.16), rgba(127, 29, 29, 0.10)), rgba(15, 23, 42, 0.76) !important; border-color: rgba(245, 158, 11, 0.26) !important; color: rgba(255, 237, 213, 0.94) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-resource-delete-action:not(:disabled):hover, body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-resource-delete-action:not(:disabled):focus-visible { background: linear-gradient(135deg, rgba(180, 83, 9, 0.24), rgba(127, 29, 29, 0.16)), rgba(15, 23, 42, 0.88) !important; border-color: rgba(251, 191, 36, 0.42) !important; color: rgba(255, 251, 235, 0.98) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-resource-delete-action:disabled { background: rgba(15, 23, 42, 0.44) !important; border-color: rgba(148, 163, 184, 0.18) !important; color: rgba(203, 213, 225, 0.58) !important; } body:has(.organize-catalog-workspace) .catalog-resource-delete-note { color: rgba(226, 232, 240, 0.72) !important; flex-basis: 100% !important; font-size: 0.78rem !important; line-height: 1.35 !important; max-width: 18rem !important; text-align: right !important; } body:has(.organize-catalog-workspace) .organize-catalog-metadata-editor.is-open { background: radial-gradient(circle at 12% 0%, rgba(124, 58, 237, 0.13), transparent 12rem), linear-gradient(145deg, rgba(3, 14, 28, 0.78), rgba(7, 16, 30, 0.62)) !important; border: 1px solid rgba(196, 181, 253, 0.18) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 44px rgba(0, 0, 0, 0.2) !important; display: grid !important; gap: 0.8rem !important; padding: 0.9rem !important; } body:has(.organize-catalog-workspace) .catalog-edit-actions { justify-content: flex-end !important; } body:has(.organize-catalog-workspace) .catalog-attached-references, body:has(.organize-catalog-workspace) .catalog-primary-reference { display: grid !important; } body:has(.organize-catalog-workspace) .catalog-links-found, body:has(.organize-catalog-workspace) .catalog-attached-references, body:has(.organize-catalog-workspace) .catalog-primary-reference, body:has(.organize-catalog-workspace) .catalog-rich-text-viewer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 14px 38px rgba(0, 0, 0, 0.12) !important; padding: 0.86rem !important; } body:has(.organize-catalog-workspace) .catalog-reference-card { min-height: 4.2rem !important; } .catalog-reference-video-card { align-items: stretch !important; grid-template-columns: 1fr !important; } .catalog-reference-video-header { align-items: center !important; display: grid !important; gap: 0.65rem !important; grid-template-columns: auto minmax(0, 1fr) !important; } .catalog-reference-video-frame { aspect-ratio: 16 / 9 !important; background: rgba(2, 8, 17, 0.72) !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; border-radius: 12px !important; overflow: hidden !important; width: 100% !important; } .catalog-reference-video-frame iframe { border: 0 !important; height: 100% !important; width: 100% !important; } .catalog-reference-pdf-frame { aspect-ratio: 4 / 3 !important; } .catalog-reference-video-actions { display: flex !important; justify-content: flex-end !important; } .catalog-media-viewer { background: radial-gradient(circle at 16% 0%, rgba(124, 58, 237, 0.16), transparent 16rem), linear-gradient(145deg, rgba(2, 8, 17, 0.72), rgba(8, 23, 42, 0.64)) !important; border: 1px solid rgba(137, 161, 204, 0.16) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 42px rgba(0, 0, 0, 0.22) !important; display: grid !important; gap: 0.72rem !important; overflow: hidden !important; padding: 0.78rem !important; } .catalog-media-frame { aspect-ratio: 16 / 9 !important; background: radial-gradient(circle at 50% 44%, rgba(124, 58, 237, 0.16), transparent 42%), linear-gradient(135deg, rgba(15, 23, 42, 0.86), rgba(2, 6, 23, 0.96)) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 12px !important; overflow: hidden !important; width: 100% !important; } .catalog-media-frame iframe, .catalog-media-frame object { border: 0 !important; height: 100% !important; width: 100% !important; } .catalog-media-actions { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.52rem !important; justify-content: flex-end !important; } .catalog-media-audio, .catalog-media-link, .catalog-media-text { align-items: center !important; grid-template-columns: auto minmax(0, 1fr) auto !important; } .catalog-media-audio strong, .catalog-media-link strong, .catalog-media-text strong { color: rgba(248, 250, 252, 0.94) !important; display: block !important; font-size: 1rem !important; font-weight: 620 !important; } .catalog-media-audio small, .catalog-media-link small, .catalog-media-text small, .catalog-media-link em { color: rgba(203, 213, 225, 0.62) !important; display: block !important; font-size: 0.78rem !important; font-style: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-media-audio audio { margin-top: 0.42rem !important; max-width: 100% !important; width: 100% !important; } .catalog-media-large-icon { height: 3.4rem !important; width: 3.4rem !important; } .catalog-media-large-icon svg { height: 1.72rem !important; width: 1.72rem !important; } .catalog-media-expanded { inset: 0 !important; pointer-events: none !important; position: fixed !important; z-index: 125 !important; } .catalog-media-expanded-scrim { background: rgba(1, 5, 12, 0.74) !important; border: 0 !important; inset: 0 !important; pointer-events: auto !important; position: absolute !important; } .catalog-media-expanded-panel { background: radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.22), transparent 22rem), linear-gradient(160deg, rgba(8, 18, 34, 0.98), rgba(2, 6, 14, 0.995)) !important; border: 1px solid rgba(196, 181, 253, 0.20) !important; border-radius: 18px !important; box-shadow: 0 30px 110px rgba(0, 0, 0, 0.58) !important; display: grid !important; gap: 1rem !important; left: 50% !important; max-height: calc(100vh - 3rem) !important; max-width: min(72rem, calc(100vw - 3rem)) !important; overflow: auto !important; padding: 1rem !important; pointer-events: auto !important; position: absolute !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: min(72rem, calc(100vw - 3rem)) !important; } .catalog-media-expanded-panel header { align-items: start !important; display: flex !important; gap: 1rem !important; justify-content: space-between !important; position: relative !important; z-index: 2 !important; } .catalog-media-expanded-panel h3 { color: rgba(248, 250, 252, 0.96) !important; font-size: clamp(1.3rem, 2vw, 2rem) !important; margin: 0.1rem 0 0 !important; } .catalog-media-expanded-panel p:not(.eyebrow) { color: rgba(203, 213, 225, 0.62) !important; margin: 0.25rem 0 0 !important; } .catalog-media-expanded-panel .catalog-media-frame { aspect-ratio: 16 / 9 !important; } .catalog-media-expanded-panel .catalog-media-viewer { min-height: 0 !important; } body:has(.organize-catalog-workspace) .catalog-icon-video { background: linear-gradient(135deg, rgba(239, 68, 68, 0.98), rgba(185, 28, 28, 0.88)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-dropbox { background: linear-gradient(135deg, rgba(59, 130, 246, 0.98), rgba(29, 78, 216, 0.88)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-drive { background: linear-gradient(135deg, rgba(34, 197, 94, 0.96), rgba(234, 179, 8, 0.86)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-document { background: linear-gradient(135deg, rgba(139, 92, 246, 0.96), rgba(79, 70, 229, 0.9)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-email { background: linear-gradient(135deg, rgba(245, 158, 11, 0.96), rgba(180, 83, 9, 0.88)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-audio { background: linear-gradient(135deg, rgba(168, 85, 247, 0.96), rgba(79, 70, 229, 0.88)) !important; } body:has(.organize-catalog-workspace) .catalog-icon-lesson { background: linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(14, 116, 144, 0.9)) !important; } body:has(.organize-catalog-workspace) .catalog-rich-text-viewer pre { background: linear-gradient(145deg, rgba(2, 8, 17, 0.58), rgba(10, 22, 39, 0.28)) !important; border: 1px solid rgba(137, 161, 204, 0.11) !important; border-radius: 12px !important; padding: 0.82rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-compact-summary { align-items: stretch !important; display: grid !important; gap: 0.46rem !important; grid-template-columns: 1fr !important; } body:has(.organize-catalog-workspace) .catalog-attach-compact-summary span, body:has(.organize-catalog-workspace) .catalog-attach-quiet { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.78rem !important; line-height: 1.35 !important; } body:has(.organize-catalog-workspace) .catalog-open-attach-picker { justify-content: center !important; background: linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(79, 70, 229, 0.74)) !important; border-color: rgba(196, 181, 253, 0.18) !important; color: white !important; white-space: nowrap !important; width: 100% !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel { gap: 0.52rem !important; padding: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .modal-catalog-lookup-header { gap: 0.42rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .modal-catalog-lookup-header strong { font-size: 0.78rem !important; letter-spacing: 0.04em !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .modal-catalog-lookup-header small { display: block !important; font-size: 0.69rem !important; line-height: 1.24 !important; max-width: 12rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .catalog-attach-type-tabs { border-radius: 9px !important; gap: 0.18rem !important; padding: 0.18rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .catalog-attach-type-tabs button { font-size: 0.68rem !important; min-height: 1.7rem !important; padding-inline: 0.22rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .catalog-attach-compact-summary span { background: rgba(15, 23, 42, 0.46) !important; border: 1px solid rgba(148, 163, 184, 0.10) !important; border-radius: 9px !important; color: rgba(226, 232, 240, 0.76) !important; font-size: 0.72rem !important; padding: 0.42rem 0.5rem !important; text-align: center !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel .catalog-open-attach-picker { min-height: 2rem !important; padding-block: 0.34rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-actions { gap: 0.58rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel { gap: 0.48rem !important; padding: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .modal-catalog-lookup-header { align-items: center !important; gap: 0.45rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .modal-catalog-lookup-header small { display: none !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .organize-catalog-linked-list { gap: 0.34rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .catalog-linked-summary { min-height: 2rem !important; padding: 0.28rem 0.44rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .catalog-linked-icon { height: 1.48rem !important; width: 1.48rem !important; } body:has(.organize-catalog-workspace) .catalog-relationship-panel .catalog-linked-summary span:not(.catalog-linked-icon) { font-size: 0.78rem !important; } body:has(.organize-catalog-workspace) .catalog-attach-panel button.catalog-open-attach-picker.secondary-button { background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(79, 70, 229, 0.84)) !important; border-color: rgba(196, 181, 253, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 28px rgba(91, 33, 182, 0.20) !important; color: rgba(255, 255, 255, 0.96) !important; } body:has(.organize-catalog-workspace) .catalog-attach-target-copy strong { color: rgba(248, 250, 252, 0.92) !important; display: block !important; font-size: 0.82rem !important; font-weight: 620 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .catalog-attach-target-copy small, body:has(.organize-catalog-workspace) .catalog-attach-target-copy em { color: rgba(203, 213, 225, 0.62) !important; display: block !important; font-size: 0.72rem !important; font-style: normal !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .catalog-attach-workspace { inset: 0 !important; pointer-events: none !important; position: fixed !important; z-index: 120 !important; } .catalog-attach-scrim { background: rgba(2, 6, 16, 0.48) !important; border: 0 !important; cursor: default !important; inset: 0 !important; pointer-events: auto !important; position: absolute !important; } .catalog-attach-drawer { background: radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.25), transparent 18rem), radial-gradient(circle at 100% 22%, rgba(14, 165, 233, 0.13), transparent 16rem), linear-gradient(180deg, rgba(10, 20, 36, 0.985), rgba(3, 9, 18, 0.995)) !important; border-left: 1px solid rgba(196, 181, 253, 0.22) !important; box-shadow: -32px 0 96px rgba(0, 0, 0, 0.52) !important; color: rgba(248, 250, 252, 0.94) !important; display: grid !important; gap: 0.9rem !important; grid-template-rows: auto auto auto auto minmax(0, 1fr) !important; height: 100vh !important; padding: 1.08rem !important; pointer-events: auto !important; position: absolute !important; right: 0 !important; top: 0 !important; width: min(34rem, calc(100vw - 1.5rem)) !important; } .catalog-attach-drawer-header { align-items: start !important; display: flex !important; gap: 1rem !important; justify-content: space-between !important; } .catalog-attach-drawer-header h3 { color: rgba(248, 250, 252, 0.96) !important; font-size: 1.45rem !important; font-weight: 650 !important; margin: 0.15rem 0 0 !important; } .catalog-attach-drawer-header p:not(.eyebrow) { color: rgba(203, 213, 225, 0.64) !important; font-size: 0.82rem !important; line-height: 1.35 !important; margin: 0.25rem 0 0 !important; } .catalog-attach-close { align-items: center !important; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 999px !important; color: white !important; cursor: pointer !important; display: inline-flex !important; font-size: 1.25rem !important; height: 2.4rem !important; justify-content: center !important; width: 2.4rem !important; } .catalog-attach-drawer-search span { color: rgba(203, 213, 225, 0.62) !important; display: block !important; font-size: 0.72rem !important; margin-bottom: 0.3rem !important; } .catalog-attach-drawer-search input { background: rgba(2, 8, 17, 0.66) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 12px !important; color: white !important; min-height: 2.65rem !important; padding: 0.55rem 0.72rem !important; width: 100% !important; } .catalog-attach-drawer-filters { display: grid !important; gap: 0.5rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .catalog-attach-drawer-filters label { background: linear-gradient(145deg, rgba(15, 23, 42, 0.58), rgba(2, 8, 17, 0.68)) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 12px !important; display: grid !important; gap: 0.18rem !important; padding: 0.44rem 0.5rem !important; } .catalog-attach-drawer-filters span { color: rgba(203, 213, 225, 0.54) !important; font-size: 0.62rem !important; font-weight: 620 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .catalog-attach-drawer-filters select { appearance: none !important; background: transparent !important; border: 0 !important; color: rgba(248, 250, 252, 0.92) !important; font: 520 0.78rem/1.2 "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; min-height: 1.35rem !important; outline: 0 !important; } .catalog-attach-picker-list { align-content: start !important; display: grid !important; gap: 0.62rem !important; grid-auto-rows: max-content !important; min-height: 0 !important; overflow: auto !important; padding-right: 0.18rem !important; } .catalog-attach-picker-row { align-items: center !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.16), transparent 70%), linear-gradient(145deg, rgba(16, 34, 58, 0.82), rgba(5, 12, 24, 0.92)) !important; border: 1px solid rgba(167, 139, 250, 0.16) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 14px 34px rgba(0, 0, 0, 0.18) !important; display: grid !important; gap: 0.68rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-height: 4.9rem !important; padding: 0.72rem !important; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease !important; } .catalog-attach-picker-row:hover { border-color: rgba(196, 181, 253, 0.30) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 42px rgba(0, 0, 0, 0.24), 0 0 28px rgba(124, 58, 237, 0.12) !important; transform: translateY(-1px) !important; } .catalog-attach-picker-actions { display: flex !important; gap: 0.42rem !important; } .catalog-attach-workspace .catalog-attach-picker-actions .secondary-button { background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 9px !important; color: rgba(248, 250, 252, 0.92) !important; min-height: 2.15rem !important; padding-inline: 0.72rem !important; white-space: nowrap !important; } .catalog-attach-workspace .catalog-attach-picker-actions .catalog-attach-target { background: linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(79, 70, 229, 0.76)) !important; border-color: rgba(196, 181, 253, 0.18) !important; color: white !important; } .catalog-attach-workspace .catalog-attach-picker-actions .catalog-attach-edit-target { background: rgba(15, 23, 42, 0.82) !important; border-color: rgba(196, 181, 253, 0.14) !important; color: rgba(248, 250, 252, 0.9) !important; } .catalog-attach-state-pill { align-items: center !important; background: rgba(34, 197, 94, 0.13) !important; border: 1px solid rgba(74, 222, 128, 0.22) !important; border-radius: 999px !important; color: rgba(187, 247, 208, 0.9) !important; display: inline-flex !important; font-size: 0.74rem !important; font-weight: 620 !important; min-height: 2.05rem !important; padding: 0.28rem 0.72rem !important; white-space: nowrap !important; } @media (max-width: 760px) { .catalog-attach-drawer { width: 100vw !important; } .catalog-attach-drawer-filters { grid-template-columns: 1fr !important; } .catalog-attach-picker-row { grid-template-columns: auto minmax(0, 1fr) !important; } .catalog-attach-picker-actions { grid-column: 1 / -1 !important; } } /* P10NO Catalog phase four: selected practice items should be inspectable before editing. */ body:has(.organize-catalog-workspace) .catalog-record-viewer-card .catalog-viewer-header h3, body:has(.organize-catalog-workspace) .catalog-viewer-card .catalog-viewer-header h3, body:has(.organize-catalog-workspace) .organize-catalog-viewer h3 { color: rgba(255, 255, 255, 0.98) !important; opacity: 1 !important; text-shadow: 0 0 24px rgba(196, 181, 253, 0.18) !important; } body:has(.organize-catalog-workspace) .catalog-record-viewer-card .catalog-title-kicker, body:has(.organize-catalog-workspace) .catalog-record-viewer-card .eyebrow { color: rgba(216, 180, 254, 0.84) !important; } body:has(.organize-catalog-workspace) .catalog-record-settings { background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.12), transparent 13rem), linear-gradient(145deg, rgba(8, 22, 41, 0.76), rgba(3, 10, 20, 0.88)) !important; border: 1px solid rgba(137, 161, 204, 0.14) !important; border-radius: 14px !important; display: grid !important; gap: 0.78rem !important; padding: 0.9rem !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-grid { display: grid !important; gap: 0.58rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body:has(.organize-catalog-workspace) .catalog-record-setting { background: linear-gradient(145deg, rgba(15, 30, 52, 0.72), rgba(5, 14, 27, 0.84)) !important; border: 1px solid rgba(148, 163, 184, 0.11) !important; border-radius: 12px !important; display: grid !important; gap: 0.18rem !important; min-width: 0 !important; padding: 0.66rem 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-record-setting span { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.66rem !important; font-weight: 620 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-record-setting strong { color: rgba(248, 250, 252, 0.94) !important; font-size: 0.84rem !important; font-weight: 560 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-grid { display: none !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-list { display: grid !important; gap: 0.42rem !important; margin: 0 !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-list div { align-items: baseline !important; border-bottom: 1px solid rgba(148, 163, 184, 0.08) !important; display: grid !important; gap: 0.9rem !important; grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr) !important; padding: 0.32rem 0 !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-list dt { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.72rem !important; font-weight: 620 !important; letter-spacing: 0.04em !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-record-settings-list dd { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.88rem !important; font-weight: 480 !important; line-height: 1.35 !important; margin: 0 !important; overflow-wrap: anywhere !important; } body:has(.organize-catalog-workspace) .catalog-start-item-button, body:has(.organize-catalog-workspace) .catalog-record-panel-start { background: linear-gradient(135deg, rgba(34, 197, 94, 0.86), rgba(16, 185, 129, 0.72)) !important; border-color: rgba(187, 247, 208, 0.24) !important; color: rgba(255, 255, 255, 0.96) !important; } body:has(.organize-catalog-workspace) .catalog-attached-references { display: grid !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-panel { display: grid !important; gap: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-list, body:has(.organize-catalog-workspace) .catalog-record-reference-results { display: grid !important; gap: 0.48rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-reference, body:has(.organize-catalog-workspace) .catalog-record-reference-result { align-items: center !important; background: rgba(15, 23, 42, 0.46) !important; border: 1px solid rgba(148, 163, 184, 0.1) !important; border-radius: 11px !important; display: grid !important; gap: 0.5rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; padding: 0.5rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-reference strong, body:has(.organize-catalog-workspace) .catalog-record-reference-result strong { color: rgba(248, 250, 252, 0.92) !important; display: block !important; font-size: 0.8rem !important; font-weight: 590 !important; line-height: 1.2 !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-reference small, body:has(.organize-catalog-workspace) .catalog-record-reference-result small { color: rgba(203, 213, 225, 0.62) !important; display: block !important; font-size: 0.7rem !important; line-height: 1.25 !important; } body:has(.organize-catalog-workspace) .catalog-record-attach-existing { display: grid !important; gap: 0.58rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attach-existing[hidden] { display: none !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-empty { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.14), transparent 72%), rgba(15, 23, 42, 0.34) !important; border: 1px dashed rgba(196, 181, 253, 0.18) !important; border-radius: 13px !important; color: rgba(215, 226, 244, 0.70) !important; font-size: 0.83rem !important; font-weight: 360 !important; line-height: 1.45 !important; margin: 0 !important; padding: 0.85rem !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-compact-actions { display: flex !important; justify-content: stretch !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-compact-actions > button { width: 100% !important; } body:has(.organize-catalog-workspace) .catalog-record-attach-heading { align-items: center !important; display: flex !important; gap: 0.75rem !important; justify-content: space-between !important; } body:has(.organize-catalog-workspace) .catalog-record-attach-heading strong { color: rgba(248, 250, 252, 0.9) !important; font-size: 0.8rem !important; font-weight: 650 !important; letter-spacing: 0.02em !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-record-attach-existing .catalog-browser-search input { width: 100% !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-filters { display: grid !important; gap: 0.42rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-filters label { display: grid !important; gap: 0.22rem !important; min-width: 0 !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-filters span { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.64rem !important; font-weight: 620 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-filters select { background: rgba(2, 8, 17, 0.62) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 9px !important; color: rgba(248, 250, 252, 0.9) !important; font-size: 0.75rem !important; min-height: 2.18rem !important; min-width: 0 !important; padding: 0.38rem 0.55rem !important; width: 100% !important; } @media (max-width: 640px) { body:has(.organize-catalog-workspace) .catalog-record-settings-list div { grid-template-columns: 1fr !important; gap: 0.15rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-reference, body:has(.organize-catalog-workspace) .catalog-record-reference-result { grid-template-columns: auto minmax(0, 1fr) !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-reference .secondary-button, body:has(.organize-catalog-workspace) .catalog-record-reference-result .secondary-button { grid-column: 1 / -1 !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-filters { grid-template-columns: 1fr !important; } } @media (max-width: 980px) { body:has(.organize-catalog-workspace) .catalog-record-settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { body:has(.organize-catalog-workspace) .catalog-record-settings-grid { grid-template-columns: 1fr !important; } } /* P10NT Catalog polish: translucent musician-reference browser surfaces. */ body[data-current-screen="catalog"] { background: radial-gradient(circle at 12% 4%, rgba(139, 92, 246, 0.22), transparent 28rem), radial-gradient(circle at 88% 12%, rgba(34, 211, 238, 0.10), transparent 24rem), radial-gradient(circle at 52% 100%, rgba(16, 185, 129, 0.06), transparent 28rem), linear-gradient(145deg, #020711 0%, #06101f 48%, #02050d 100%) !important; } body:has(.organize-catalog-workspace) .organize-catalog-workspace { isolation: isolate !important; overflow: hidden !important; position: relative !important; } body:has(.organize-catalog-workspace) .organize-catalog-workspace::before { background: radial-gradient(circle at 16% 2%, rgba(192, 132, 252, 0.18), transparent 18rem), linear-gradient(90deg, rgba(255, 255, 255, 0.035), transparent 35%, rgba(255, 255, 255, 0.018)) !important; content: "" !important; inset: 0 !important; pointer-events: none !important; position: absolute !important; z-index: -1 !important; } body:has(.organize-catalog-workspace) .catalog-workspace-topbar, body:has(.organize-catalog-workspace) .catalog-unified-filter-rail, body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox, body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { -webkit-backdrop-filter: blur(22px) saturate(1.18) !important; backdrop-filter: blur(22px) saturate(1.18) !important; background: radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.16), transparent 16rem), radial-gradient(circle at 100% 18%, rgba(45, 212, 191, 0.055), transparent 16rem), linear-gradient(145deg, rgba(13, 27, 48, 0.68), rgba(3, 10, 22, 0.78)) !important; border: 1px solid rgba(180, 198, 232, 0.13) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), inset 0 -1px 0 rgba(255, 255, 255, 0.018), 0 22px 58px rgba(0, 0, 0, 0.26) !important; } body:has(.organize-catalog-workspace) .catalog-workspace-topbar { border-radius: 20px !important; padding: 1rem !important; } body:has(.organize-catalog-workspace) .catalog-workspace-logo { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.44), transparent 28%), linear-gradient(145deg, rgba(124, 58, 237, 1), rgba(14, 165, 233, 0.86)) !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 0 26px rgba(139, 92, 246, 0.44), 0 14px 32px rgba(0, 0, 0, 0.34) !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand h2 { color: #ffffff !important; font-weight: 760 !important; letter-spacing: -0.01em !important; -webkit-text-fill-color: #ffffff !important; } body:has(.organize-catalog-workspace) .catalog-workspace-brand p { color: rgba(219, 229, 246, 0.70) !important; font-weight: 420 !important; } body:has(.organize-catalog-workspace) .organize-catalog-tools input, body:has(.organize-catalog-workspace) .organize-catalog-tools select, body:has(.organize-catalog-workspace) .catalog-sort-control select, body:has(.organize-catalog-workspace) .catalog-browser-search input { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; background: rgba(1, 8, 18, 0.62) !important; border-color: rgba(163, 181, 214, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.14) !important; } body:has(.organize-catalog-workspace) .organize-catalog-tools input:focus, body:has(.organize-catalog-workspace) .organize-catalog-tools select:focus, body:has(.organize-catalog-workspace) .catalog-sort-control select:focus, body:has(.organize-catalog-workspace) .catalog-browser-search input:focus { border-color: rgba(196, 181, 253, 0.50) !important; box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.22), 0 0 34px rgba(124, 58, 237, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; } body:has(.organize-catalog-workspace) .catalog-unified-filter-rail { border-radius: 18px !important; gap: 0.62rem !important; padding: 0.72rem !important; } body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row { align-items: start !important; display: grid !important; gap: 0.82rem !important; grid-template-columns: minmax(0, 1fr) minmax(22rem, 24rem) !important; margin: 0.85rem 0 !important; } body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row .catalog-unified-filter-rail { margin: 0 !important; } body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button { background: rgba(255, 255, 255, 0.038) !important; border-color: rgba(180, 198, 232, 0.11) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important; color: rgba(225, 234, 249, 0.70) !important; font-weight: 520 !important; transition: background 160ms ease, color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button:hover { background: rgba(139, 92, 246, 0.14) !important; border-color: rgba(196, 181, 253, 0.22) !important; color: rgba(255, 255, 255, 0.92) !important; transform: translateY(-1px) !important; } body:has(.organize-catalog-workspace) .catalog-unified-filter-rail button.is-selected { background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.15), transparent 46%), linear-gradient(135deg, rgba(124, 58, 237, 0.74), rgba(79, 70, 229, 0.52)) !important; border-color: rgba(216, 202, 255, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 12px 30px rgba(91, 33, 182, 0.24), 0 0 26px rgba(139, 92, 246, 0.20) !important; color: #ffffff !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { border-radius: 20px !important; } body:has(.organize-catalog-workspace) .catalog-browser-header strong, body:has(.organize-catalog-workspace) .modal-catalog-lookup-header strong, body:has(.organize-catalog-workspace) .catalog-section-heading h4 { color: rgba(250, 252, 255, 0.96) !important; font-weight: 720 !important; letter-spacing: 0.01em !important; -webkit-text-fill-color: rgba(250, 252, 255, 0.96) !important; } body:has(.organize-catalog-workspace) .catalog-browser-header small, body:has(.organize-catalog-workspace) .modal-catalog-lookup-header small, body:has(.organize-catalog-workspace) .catalog-section-heading small { color: rgba(203, 213, 225, 0.58) !important; font-weight: 420 !important; } body:has(.organize-catalog-workspace) .organize-catalog-list { gap: 0.46rem !important; padding-right: 0.12rem !important; } body:has(.organize-catalog-workspace) .organize-catalog-row { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.085), transparent 62%), linear-gradient(145deg, rgba(18, 35, 60, 0.44), rgba(4, 12, 26, 0.42)) !important; border-color: rgba(163, 181, 214, 0.08) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 10px 24px rgba(0, 0, 0, 0.12) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:hover { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.20), transparent 68%), linear-gradient(145deg, rgba(25, 48, 79, 0.62), rgba(5, 14, 29, 0.56)) !important; border-color: rgba(196, 181, 253, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 16px 36px rgba(0, 0, 0, 0.20), 0 0 22px rgba(124, 58, 237, 0.10) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row.is-selected { background: radial-gradient(circle at 0% 0%, rgba(216, 180, 254, 0.34), transparent 70%), radial-gradient(circle at 98% 0%, rgba(45, 212, 191, 0.08), transparent 48%), linear-gradient(135deg, rgba(95, 40, 184, 0.62), rgba(7, 28, 52, 0.62)) !important; border-color: rgba(196, 181, 253, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 0 0 1px rgba(216, 202, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.26), 0 0 40px rgba(168, 85, 247, 0.24) !important; } body:has(.organize-catalog-workspace) .catalog-row-icon, body:has(.organize-catalog-workspace) .catalog-reference-icon, body:has(.organize-catalog-workspace) .catalog-selected-icon, body:has(.organize-catalog-workspace) .catalog-attach-target-icon, body:has(.organize-catalog-workspace) .catalog-linked-icon { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20), 0 10px 22px rgba(0, 0, 0, 0.22), 0 0 22px color-mix(in srgb, currentColor 18%, transparent) !important; } body:has(.organize-catalog-workspace) .catalog-row-copy strong { color: rgba(255, 255, 255, 0.95) !important; font-weight: 690 !important; letter-spacing: 0 !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.95) !important; } body:has(.organize-catalog-workspace) .catalog-row-copy small { color: rgba(210, 222, 242, 0.63) !important; } body:has(.organize-catalog-workspace) .catalog-row-meta em, body:has(.organize-catalog-workspace) .catalog-row-link-count, body:has(.organize-catalog-workspace) .catalog-viewer-meta span { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; background: rgba(139, 92, 246, 0.16) !important; border: 1px solid rgba(216, 202, 255, 0.14) !important; color: rgba(226, 232, 255, 0.86) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-card, body:has(.organize-catalog-workspace) .catalog-links-found, body:has(.organize-catalog-workspace) .catalog-attached-references, body:has(.organize-catalog-workspace) .catalog-primary-reference, body:has(.organize-catalog-workspace) .catalog-rich-text-viewer, body:has(.organize-catalog-workspace) .catalog-record-settings, body:has(.organize-catalog-workspace) .organize-catalog-metadata-editor.is-open, body:has(.organize-catalog-workspace) .organize-catalog-links { -webkit-backdrop-filter: blur(18px) saturate(1.12) !important; backdrop-filter: blur(18px) saturate(1.12) !important; background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 18rem), linear-gradient(145deg, rgba(12, 27, 48, 0.58), rgba(3, 10, 22, 0.56)) !important; border: 1px solid rgba(166, 185, 216, 0.12) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 18px 48px rgba(0, 0, 0, 0.18) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.20), transparent 18rem), radial-gradient(circle at 100% 0%, rgba(45, 212, 191, 0.08), transparent 16rem), linear-gradient(145deg, rgba(18, 35, 60, 0.58), rgba(5, 12, 24, 0.50)) !important; border-color: rgba(196, 181, 253, 0.16) !important; border-radius: 18px !important; } body:has(.organize-catalog-workspace) .catalog-viewer-header h3 { color: #ffffff !important; font-weight: 740 !important; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.34) !important; -webkit-text-fill-color: #ffffff !important; } body:has(.organize-catalog-workspace) .catalog-title-kicker, body:has(.organize-catalog-workspace) .catalog-viewer-header .eyebrow { color: rgba(196, 181, 253, 0.84) !important; } body:has(.organize-catalog-workspace) .catalog-media-viewer, body:has(.organize-catalog-workspace) .catalog-reference-card, body:has(.organize-catalog-workspace) .catalog-record-attached-reference, body:has(.organize-catalog-workspace) .catalog-record-reference-result, body:has(.organize-catalog-workspace) .catalog-attach-picker-row { -webkit-backdrop-filter: blur(16px) saturate(1.10) !important; backdrop-filter: blur(16px) saturate(1.10) !important; background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.14), transparent 70%), linear-gradient(145deg, rgba(17, 36, 61, 0.62), rgba(4, 12, 26, 0.58)) !important; border-color: rgba(173, 191, 224, 0.13) !important; } body:has(.organize-catalog-workspace) .catalog-media-frame, body:has(.organize-catalog-workspace) .catalog-reference-video-frame, body:has(.organize-catalog-workspace) .catalog-rich-text-viewer pre { background: radial-gradient(circle at 50% 35%, rgba(124, 58, 237, 0.15), transparent 44%), linear-gradient(145deg, rgba(1, 7, 18, 0.82), rgba(7, 19, 36, 0.62)) !important; border-color: rgba(173, 191, 224, 0.12) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .secondary-button, body:has(.organize-catalog-workspace) .catalog-open-reference, body:has(.organize-catalog-workspace) .catalog-record-reference-result .secondary-button, body:has(.organize-catalog-workspace) .catalog-record-attached-reference .secondary-button, body:has(.organize-catalog-workspace) .catalog-attach-workspace .secondary-button { -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; background: rgba(255, 255, 255, 0.055) !important; border: 1px solid rgba(196, 181, 253, 0.16) !important; border-radius: 11px !important; color: rgba(248, 250, 252, 0.90) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-archive-action { background: linear-gradient(135deg, rgba(20, 184, 166, 0.14), rgba(59, 130, 246, 0.06)) !important; border-color: rgba(94, 234, 212, 0.24) !important; color: rgba(204, 251, 241, 0.92) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .secondary-button:hover, body:has(.organize-catalog-workspace) .catalog-open-reference:hover, body:has(.organize-catalog-workspace) .catalog-record-reference-result .secondary-button:hover, body:has(.organize-catalog-workspace) .catalog-record-attached-reference .secondary-button:hover { background: rgba(139, 92, 246, 0.22) !important; border-color: rgba(216, 202, 255, 0.32) !important; } body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-archive-action:hover, body:has(.organize-catalog-workspace) .catalog-viewer-actions .catalog-archive-action:focus-visible { background: linear-gradient(135deg, rgba(20, 184, 166, 0.24), rgba(59, 130, 246, 0.12)) !important; border-color: rgba(94, 234, 212, 0.42) !important; color: rgba(240, 253, 250, 0.98) !important; } body:has(.organize-catalog-workspace) .catalog-add-launch-button, body:has(.organize-catalog-workspace) .importzone-primary-button, body:has(.organize-catalog-workspace) .catalog-start-item-button, body:has(.organize-catalog-workspace) .catalog-open-attach-picker { background: radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.20), transparent 36%), linear-gradient(135deg, rgba(139, 92, 246, 0.96), rgba(79, 70, 229, 0.90)) !important; border-color: rgba(216, 202, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), 0 16px 34px rgba(91, 33, 182, 0.26), 0 0 26px rgba(139, 92, 246, 0.15) !important; color: #ffffff !important; } body:has(.organize-catalog-workspace) .catalog-danger-action { background: rgba(127, 29, 29, 0.18) !important; border-color: rgba(251, 113, 133, 0.25) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow { -webkit-backdrop-filter: blur(4px) !important; backdrop-filter: blur(4px) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-scrim { background: radial-gradient(circle at 48% 18%, rgba(124, 58, 237, 0.24), transparent 34%), rgba(1, 7, 19, 0.70) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-panel.organize-catalog-add-panel { -webkit-backdrop-filter: blur(24px) saturate(1.16) !important; backdrop-filter: blur(24px) saturate(1.16) !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.30), transparent 18rem), radial-gradient(circle at 100% 8%, rgba(45, 212, 191, 0.10), transparent 16rem), linear-gradient(145deg, rgba(12, 25, 46, 0.88), rgba(3, 10, 22, 0.92)) !important; border-color: rgba(216, 202, 255, 0.34) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 36px 110px rgba(0, 0, 0, 0.62), 0 0 58px rgba(124, 58, 237, 0.20) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice { -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.22), transparent 70%), linear-gradient(145deg, rgba(19, 39, 66, 0.64), rgba(4, 12, 26, 0.56)) !important; border-color: rgba(180, 198, 232, 0.14) !important; border-radius: 16px !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice:hover, body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice.is-selected { background: radial-gradient(circle at 0% 0%, rgba(216, 180, 254, 0.28), transparent 70%), linear-gradient(145deg, rgba(35, 57, 88, 0.72), rgba(8, 18, 36, 0.64)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 48px rgba(0, 0, 0, 0.28), 0 0 32px rgba(139, 92, 246, 0.16) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice-icon { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.30), transparent 32%), linear-gradient(135deg, rgba(139, 92, 246, 0.98), rgba(14, 165, 233, 0.78)) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .modal-close-button { align-items: center !important; background: rgba(15, 23, 42, 0.62) !important; border: 1px solid rgba(216, 202, 255, 0.18) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 22px rgba(0, 0, 0, 0.18) !important; color: rgba(226, 232, 240, 0.9) !important; display: inline-flex !important; height: 2.12rem !important; justify-content: center !important; min-height: 2.12rem !important; min-width: 2.12rem !important; padding: 0 !important; width: 2.12rem !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions .secondary-button { background: rgba(15, 23, 42, 0.68) !important; border: 1px solid rgba(216, 202, 255, 0.18) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 10px 22px rgba(0, 0, 0, 0.18) !important; color: rgba(234, 241, 252, 0.88) !important; min-height: 2.42rem !important; padding: 0.55rem 1rem !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions .secondary-button:not(:disabled):hover, body:has(.organize-catalog-workspace) .catalog-add-flow .modal-close-button:not(:disabled):hover { background: rgba(30, 41, 59, 0.78) !important; border-color: rgba(216, 202, 255, 0.34) !important; color: rgba(248, 250, 252, 0.96) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions .importzone-primary-button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%), linear-gradient(135deg, rgba(124, 58, 237, 0.94), rgba(14, 165, 233, 0.58)) !important; border-color: rgba(216, 202, 255, 0.3) !important; color: #ffffff !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions button:disabled { background: rgba(30, 41, 59, 0.48) !important; border-color: rgba(148, 163, 184, 0.16) !important; box-shadow: none !important; color: rgba(203, 213, 225, 0.54) !important; cursor: not-allowed !important; opacity: 1 !important; } body:has(.organize-catalog-workspace) .catalog-add-flow input, body:has(.organize-catalog-workspace) .catalog-add-flow select, body:has(.organize-catalog-workspace) .catalog-add-flow textarea { background: rgba(1, 8, 18, 0.66) !important; border-color: rgba(173, 191, 224, 0.15) !important; } body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox { align-content: start; background: radial-gradient(circle at 12% 12%, rgba(168, 85, 247, 0.22), transparent 10rem), radial-gradient(circle at 96% 80%, rgba(45, 212, 191, 0.07), transparent 9rem), linear-gradient(135deg, rgba(18, 34, 62, 0.78), rgba(4, 13, 28, 0.82)); border: 1px solid rgba(196, 181, 253, 0.16); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 18px 40px rgba(0, 0, 0, 0.18); display: grid; gap: 0.58rem; min-height: 0; padding: 0.72rem; } body:has(.organize-catalog-workspace) .catalog-quick-add-heading { align-items: baseline; display: flex; gap: 0.45rem; justify-content: space-between; min-width: 0; } body:has(.organize-catalog-workspace) .catalog-quick-add-heading strong { color: rgba(214, 226, 245, 0.72); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } body:has(.organize-catalog-workspace) .catalog-quick-add-heading span { color: rgba(203, 213, 225, 0.48); font-size: 0.68rem; font-weight: 440; line-height: 1.2; overflow: hidden; text-align: right; text-overflow: ellipsis; white-space: nowrap; } body:has(.organize-catalog-workspace) .catalog-quick-add-grid { display: grid; gap: 0.42rem; grid-template-columns: repeat(3, minmax(0, 1fr)); } body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox button { align-items: center; background: linear-gradient(145deg, rgba(31, 44, 72, 0.92), rgba(10, 19, 35, 0.92)); border: 1px solid rgba(190, 207, 236, 0.16); border-radius: 13px; color: rgba(242, 246, 255, 0.9); cursor: pointer; display: flex; font-size: 0.72rem; font-weight: 600; gap: 0.34rem; justify-content: flex-start; min-height: 2.18rem; min-width: 0; padding: 0.34rem 0.4rem; text-align: left; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease; } body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox button:hover, body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox button:focus-visible { background: linear-gradient(135deg, rgba(124, 58, 237, 0.46), rgba(14, 165, 233, 0.16)); border-color: rgba(196, 181, 253, 0.42); box-shadow: 0 0 24px rgba(124, 58, 237, 0.18); color: rgba(255, 255, 255, 0.98); transform: translateY(-1px); } body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox button > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body:has(.organize-catalog-workspace) .catalog-quick-add-icon { align-items: center; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.22), transparent 38%), linear-gradient(145deg, rgba(124, 58, 237, 0.86), rgba(14, 165, 233, 0.46)); border: 1px solid rgba(216, 202, 255, 0.18); border-radius: 10px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(0, 0, 0, 0.18); color: rgba(255, 255, 255, 0.92); display: inline-flex; flex: 0 0 auto; height: 1.48rem; justify-content: center; width: 1.48rem; } body:has(.organize-catalog-workspace) .catalog-quick-add-icon svg { fill: none; height: 0.92rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; width: 0.92rem; } body:has(.organize-catalog-workspace) [data-catalog-quick-add="song"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(99, 102, 241, 0.96), rgba(14, 165, 233, 0.56)); } body:has(.organize-catalog-workspace) [data-catalog-quick-add="drill"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(16, 185, 129, 0.86), rgba(59, 130, 246, 0.66)); } body:has(.organize-catalog-workspace) [data-catalog-quick-add="solo"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(245, 158, 11, 0.92), rgba(168, 85, 247, 0.68)); } body:has(.organize-catalog-workspace) [data-catalog-quick-add="activity"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(20, 184, 166, 0.90), rgba(59, 130, 246, 0.58)); } body:has(.organize-catalog-workspace) [data-catalog-quick-add="reference"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(139, 92, 246, 0.94), rgba(99, 102, 241, 0.70)); } body:has(.organize-catalog-workspace) [data-catalog-quick-add="url"] .catalog-quick-add-icon { background: linear-gradient(145deg, rgba(239, 68, 68, 0.92), rgba(124, 58, 237, 0.70)); } body:has(.organize-catalog-workspace) .catalog-attach-drawer, body:has(.organize-catalog-workspace) .catalog-media-expanded-panel { -webkit-backdrop-filter: blur(26px) saturate(1.16) !important; backdrop-filter: blur(26px) saturate(1.16) !important; background: radial-gradient(circle at 12% 0%, rgba(168, 85, 247, 0.28), transparent 20rem), radial-gradient(circle at 100% 24%, rgba(45, 212, 191, 0.10), transparent 17rem), linear-gradient(180deg, rgba(10, 22, 40, 0.92), rgba(3, 9, 18, 0.96)) !important; border-color: rgba(216, 202, 255, 0.26) !important; } body:has(.organize-catalog-workspace) .catalog-attach-scrim, body:has(.organize-catalog-workspace) .catalog-media-expanded-scrim { -webkit-backdrop-filter: blur(5px) !important; backdrop-filter: blur(5px) !important; background: rgba(1, 6, 16, 0.56) !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs { background: rgba(1, 8, 18, 0.46) !important; border: 1px solid rgba(173, 191, 224, 0.11) !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs button { color: rgba(219, 229, 246, 0.72) !important; } body:has(.organize-catalog-workspace) .catalog-attach-type-tabs button.is-selected { background: rgba(139, 92, 246, 0.58) !important; color: #ffffff !important; } @media (max-width: 980px) { body:has(.organize-catalog-workspace) .catalog-workspace-topbar, body:has(.organize-catalog-workspace) .catalog-unified-filter-rail, body:has(.organize-catalog-workspace) .catalog-quick-add-toolbox, body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-viewer, body:has(.organize-catalog-workspace) .organize-catalog-actions { border-radius: 16px !important; } body:has(.organize-catalog-workspace) .catalog-filter-toolbox-row { grid-template-columns: 1fr !important; } body:has(.organize-catalog-workspace) .catalog-quick-add-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { body:has(.organize-catalog-workspace) .catalog-quick-add-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* P10NX Catalog star treatment: stronger musical identity and type-color language. */ body:has(.organize-catalog-workspace) .organize-catalog-row { overflow: hidden !important; position: relative !important; } body:has(.organize-catalog-workspace) .organize-catalog-row::before { background: linear-gradient(180deg, rgba(168, 85, 247, 0.86), rgba(14, 165, 233, 0.70)) !important; border-radius: 999px !important; content: "" !important; inset: 0 auto 0 0 !important; opacity: 0.34 !important; position: absolute !important; width: 3px !important; } body:has(.organize-catalog-workspace) .organize-catalog-row::after { background: radial-gradient(circle at 0% 30%, rgba(168, 85, 247, 0.20), transparent 62%) !important; content: "" !important; inset: 0 !important; opacity: 0.64 !important; pointer-events: none !important; position: absolute !important; z-index: 0 !important; } body:has(.organize-catalog-workspace) .organize-catalog-row > * { position: relative !important; z-index: 1 !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-goal)::before { background: linear-gradient(180deg, #a78bfa, #38bdf8) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-drill)::before { background: linear-gradient(180deg, #22c55e, #38bdf8) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-song)::before { background: linear-gradient(180deg, #f97316, #facc15) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-solo)::before { background: linear-gradient(180deg, #ec4899, #8b5cf6) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-activity)::before { background: linear-gradient(180deg, #14b8a6, #84cc16) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-icon-video)::before { background: linear-gradient(180deg, #ef4444, #f97316) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-icon-document)::before, body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-icon-lesson)::before { background: linear-gradient(180deg, #8b5cf6, #06b6d4) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-goal)::after { background: radial-gradient(circle at 0% 32%, rgba(167, 139, 250, 0.28), transparent 64%) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-drill)::after { background: radial-gradient(circle at 0% 32%, rgba(34, 197, 94, 0.22), transparent 64%) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-song)::after { background: radial-gradient(circle at 0% 32%, rgba(249, 115, 22, 0.22), transparent 64%) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-solo)::after { background: radial-gradient(circle at 0% 32%, rgba(236, 72, 153, 0.22), transparent 64%) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:has(.catalog-record-activity)::after { background: radial-gradient(circle at 0% 32%, rgba(20, 184, 166, 0.22), transparent 64%) !important; } body:has(.organize-catalog-workspace) .catalog-row-icon, body:has(.organize-catalog-workspace) .catalog-selected-icon { align-items: center !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 14px !important; color: #ffffff !important; display: inline-flex !important; flex: 0 0 auto !important; justify-content: center !important; overflow: hidden !important; position: relative !important; } body:has(.organize-catalog-workspace) .catalog-row-icon::before, body:has(.organize-catalog-workspace) .catalog-selected-icon::before { background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.38), transparent 25%), radial-gradient(circle at 78% 86%, rgba(255, 255, 255, 0.12), transparent 30%) !important; content: "" !important; inset: 0 !important; pointer-events: none !important; position: absolute !important; } body:has(.organize-catalog-workspace) .catalog-row-icon svg, body:has(.organize-catalog-workspace) .catalog-selected-icon svg { color: #ffffff !important; fill: none !important; height: 1.35rem !important; position: relative !important; stroke: currentColor !important; stroke-linecap: round !important; stroke-linejoin: round !important; stroke-width: 1.9 !important; width: 1.35rem !important; z-index: 1 !important; } body:has(.organize-catalog-workspace) .catalog-row-icon svg circle, body:has(.organize-catalog-workspace) .catalog-row-icon svg rect, body:has(.organize-catalog-workspace) .catalog-row-icon svg path, body:has(.organize-catalog-workspace) .catalog-selected-icon svg circle, body:has(.organize-catalog-workspace) .catalog-selected-icon svg rect, body:has(.organize-catalog-workspace) .catalog-selected-icon svg path { fill: none !important; stroke: currentColor !important; } body:has(.organize-catalog-workspace) .catalog-record-goal { background: linear-gradient(145deg, #7c3aed, #0ea5e9) !important; box-shadow: 0 0 24px rgba(124, 58, 237, 0.38), 0 12px 28px rgba(0, 0, 0, 0.30) !important; } body:has(.organize-catalog-workspace) .catalog-record-drill { background: linear-gradient(145deg, #16a34a, #0284c7) !important; box-shadow: 0 0 24px rgba(34, 197, 94, 0.30), 0 12px 28px rgba(0, 0, 0, 0.30) !important; } body:has(.organize-catalog-workspace) .catalog-record-song { background: linear-gradient(145deg, #f97316, #7c3aed) !important; box-shadow: 0 0 24px rgba(249, 115, 22, 0.30), 0 12px 28px rgba(0, 0, 0, 0.30) !important; } body:has(.organize-catalog-workspace) .catalog-record-solo { background: linear-gradient(145deg, #ec4899, #6366f1) !important; box-shadow: 0 0 24px rgba(236, 72, 153, 0.30), 0 12px 28px rgba(0, 0, 0, 0.30) !important; } body:has(.organize-catalog-workspace) .catalog-record-activity { background: linear-gradient(145deg, #14b8a6, #65a30d) !important; box-shadow: 0 0 24px rgba(20, 184, 166, 0.30), 0 12px 28px rgba(0, 0, 0, 0.30) !important; } body:has(.organize-catalog-workspace) .organize-catalog-row:hover .catalog-row-icon, body:has(.organize-catalog-workspace) .organize-catalog-row.is-selected .catalog-row-icon { transform: translateY(-1px) scale(1.04) !important; } body:has(.organize-catalog-workspace) .catalog-row-meta em { text-transform: capitalize !important; } /* P10NX Catalog micro-polish: make the calm browse state feel intentional. */ body:has(.organize-catalog-workspace) .catalog-calm-empty-state, body:has(.organize-catalog-workspace) .organize-catalog-viewer > .organize-catalog-empty { align-items: flex-start !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.20), transparent 17rem), radial-gradient(circle at 100% 18%, rgba(45, 212, 191, 0.11), transparent 18rem), linear-gradient(145deg, rgba(15, 30, 54, 0.60), rgba(2, 8, 19, 0.76)) !important; border: 1px solid rgba(184, 204, 238, 0.14) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.065), 0 24px 70px rgba(0, 0, 0, 0.28), 0 0 42px rgba(124, 58, 237, 0.10) !important; justify-content: center !important; overflow: hidden !important; position: relative !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state::before, body:has(.organize-catalog-workspace) .organize-catalog-viewer > .organize-catalog-empty::before { background: linear-gradient(90deg, rgba(168, 85, 247, 0.74), rgba(45, 212, 191, 0.34), transparent) !important; border-radius: 999px !important; content: "" !important; height: 2px !important; left: clamp(1.35rem, 4vw, 2.1rem) !important; opacity: 0.72 !important; position: absolute !important; top: clamp(1.25rem, 3vw, 1.75rem) !important; width: min(13rem, 42%) !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state::after, body:has(.organize-catalog-workspace) .organize-catalog-viewer > .organize-catalog-empty::after { background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.14), transparent 14%), conic-gradient(from 180deg, rgba(168, 85, 247, 0.08), rgba(45, 212, 191, 0.08), rgba(168, 85, 247, 0.08)) !important; border: 1px solid rgba(216, 202, 255, 0.10) !important; border-radius: 26px !important; content: "" !important; height: 8rem !important; opacity: 0.44 !important; position: absolute !important; right: -2.4rem !important; top: -2.4rem !important; transform: rotate(14deg) !important; width: 8rem !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state > *, body:has(.organize-catalog-workspace) .organize-catalog-viewer > .organize-catalog-empty > * { max-width: 42rem !important; position: relative !important; z-index: 1 !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state strong { color: rgba(252, 253, 255, 0.98) !important; display: block !important; font-size: clamp(1.65rem, 3vw, 2.65rem) !important; font-weight: 560 !important; letter-spacing: 0 !important; line-height: 1.04 !important; margin-bottom: 0.9rem !important; text-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state span { color: rgba(218, 229, 247, 0.74) !important; display: block !important; font-size: 1rem !important; font-weight: 360 !important; line-height: 1.62 !important; max-width: 39rem !important; } body:has(.organize-catalog-workspace) .catalog-calm-empty-state span + span { margin-top: 0.42rem !important; } body:has(.organize-catalog-workspace) .catalog-header-action-cluster { align-items: center !important; display: inline-flex !important; gap: 0.5rem !important; position: relative !important; } body:has(.organize-catalog-workspace) .catalog-header-icon-button { align-items: center !important; background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(196, 181, 253, 0.18) !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.20) !important; color: rgba(241, 245, 249, 0.90) !important; cursor: pointer !important; display: inline-flex !important; font-size: 1.15rem !important; font-weight: 780 !important; height: 2.45rem !important; justify-content: center !important; line-height: 1 !important; min-height: 2.45rem !important; min-width: 2.45rem !important; padding: 0 !important; position: relative !important; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease !important; width: 2.45rem !important; } body:has(.organize-catalog-workspace) .catalog-header-icon-button:hover, body:has(.organize-catalog-workspace) .catalog-header-icon-button:focus-visible { background: rgba(30, 41, 59, 0.82) !important; border-color: rgba(216, 202, 255, 0.34) !important; color: rgba(255, 255, 255, 0.98) !important; transform: translateY(-1px) !important; } body:has(.organize-catalog-workspace) .catalog-add-primary-button { background: radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.36), transparent 32%), linear-gradient(135deg, #2563eb 0%, #0ea5e9 78%, #38bdf8 100%) !important; border-color: rgba(191, 219, 254, 0.68) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 18px 42px rgba(37, 99, 235, 0.34), 0 0 30px rgba(14, 165, 233, 0.20) !important; font-size: 1.96rem !important; height: 3.08rem !important; min-height: 3.08rem !important; min-width: 3.08rem !important; text-shadow: 0 2px 10px rgba(255, 255, 255, 0.18) !important; width: 3.08rem !important; } body:has(.organize-catalog-workspace) .catalog-add-primary-button:hover, body:has(.organize-catalog-workspace) .catalog-add-primary-button:focus-visible { background: radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.38), transparent 34%), linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%) !important; border-color: rgba(219, 234, 254, 0.82) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 22px 54px rgba(37, 99, 235, 0.42), 0 0 38px rgba(14, 165, 233, 0.28) !important; transform: translateY(-1px) scale(1.02) !important; } body:has(.organize-catalog-workspace) .catalog-selection-empty-state, body:has(.organize-catalog-workspace) .catalog-first-item-empty-state { gap: 0.3rem !important; } body:has(.organize-catalog-workspace) .catalog-selection-empty-new-user { align-items: start !important; background: rgba(15, 23, 42, 0.56) !important; border: 1px solid rgba(216, 202, 255, 0.16) !important; border-radius: 16px !important; display: grid !important; gap: 0.18rem !important; margin-top: 1rem !important; max-width: 31rem !important; padding: 0.86rem 1rem 0.86rem 3rem !important; position: relative !important; } body:has(.organize-catalog-workspace) .catalog-selection-empty-new-user::before { align-items: center !important; background: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.28), transparent 34%), linear-gradient(135deg, rgba(124, 58, 237, 0.96), rgba(14, 165, 233, 0.70)) !important; border: 1px solid rgba(216, 202, 255, 0.28) !important; border-radius: 12px !important; box-shadow: 0 0 24px rgba(124, 58, 237, 0.22) !important; color: #ffffff !important; content: "↗" !important; display: inline-flex !important; font-size: 1rem !important; height: 1.72rem !important; justify-content: center !important; left: 0.82rem !important; position: absolute !important; top: 0.86rem !important; width: 1.72rem !important; } body:has(.organize-catalog-workspace) .catalog-selection-empty-new-user span { color: rgba(218, 229, 247, 0.78) !important; font-size: 0.9rem !important; line-height: 1.42 !important; margin: 0 !important; } body:has(.organize-catalog-workspace) .catalog-selection-empty-new-user span:first-child { color: rgba(252, 253, 255, 0.96) !important; font-weight: 760 !important; } body:has(.organize-catalog-workspace) .catalog-empty-plus-pill { align-items: center !important; background: radial-gradient(circle at 26% 18%, rgba(255, 255, 255, 0.28), transparent 34%), linear-gradient(135deg, rgba(124, 58, 237, 0.96), rgba(14, 165, 233, 0.70)) !important; border: 1px solid rgba(216, 202, 255, 0.28) !important; border-radius: 9px !important; box-shadow: 0 0 18px rgba(124, 58, 237, 0.22) !important; color: #ffffff !important; display: inline-flex !important; font-size: 1rem !important; font-weight: 800 !important; height: 1.45rem !important; justify-content: center !important; line-height: 1 !important; margin: 0 0.16rem !important; vertical-align: -0.18rem !important; width: 1.45rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-header-actions { align-items: center !important; display: flex !important; flex: 0 0 auto !important; flex-wrap: wrap !important; gap: 0.5rem !important; justify-content: flex-end !important; } body:has(.importzone-screen:not([hidden])) .importzone-header .importzone-help-button { background: rgba(15, 23, 42, 0.58) !important; border: 1px solid rgba(125, 211, 252, 0.24) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 18px rgba(14, 165, 233, 0.10) !important; color: rgba(224, 242, 254, 0.94) !important; font-weight: 700 !important; } body:has(.importzone-screen:not([hidden])) .importzone-header .importzone-help-button:hover, body:has(.importzone-screen:not([hidden])) .importzone-header .importzone-help-button:focus-visible { background: rgba(14, 116, 144, 0.22) !important; border-color: rgba(125, 211, 252, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 24px rgba(14, 165, 233, 0.16) !important; color: #ffffff !important; } body:has(.organize-catalog-workspace) .organize-catalog-actions > .organize-catalog-empty { align-items: center !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.18), transparent 14rem), linear-gradient(145deg, rgba(11, 23, 42, 0.54), rgba(2, 8, 18, 0.70)) !important; border-color: rgba(184, 204, 238, 0.13) !important; border-radius: 18px !important; color: rgba(221, 231, 248, 0.74) !important; font-weight: 390 !important; justify-content: center !important; min-height: 8.4rem !important; padding: 1.6rem !important; text-align: center !important; } body:has(.organize-catalog-workspace) .organize-catalog-browser, body:has(.organize-catalog-workspace) .organize-catalog-actions, body:has(.organize-catalog-workspace) .organize-catalog-viewer { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 22px 72px rgba(0, 0, 0, 0.25), 0 0 44px rgba(99, 102, 241, 0.055) !important; } body:has(.organize-catalog-workspace) .catalog-filter-chip:hover, body:has(.organize-catalog-workspace) .catalog-filter-chip:focus-visible { background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.14), transparent 58%), linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(14, 165, 233, 0.13)) !important; border-color: rgba(216, 202, 255, 0.26) !important; box-shadow: 0 0 20px rgba(139, 92, 246, 0.14) !important; } body:has(.organize-catalog-workspace) #rotationPlanningPanel { display: none !important; } /* P10NY System + Preferences cleanup: keep advanced tools inside a calmer glassy system surface. */ body:has(.system-screen:not([hidden])), body:has(.preferences-screen:not([hidden])), body:has(.tools-screen:not([hidden])) { background: radial-gradient(circle at 12% 10%, rgba(124, 58, 237, 0.20), transparent 28rem), radial-gradient(circle at 78% 18%, rgba(20, 184, 166, 0.14), transparent 30rem), linear-gradient(135deg, #060914 0%, #07121d 52%, #040910 100%) !important; } .system-screen, .preferences-screen, .tools-screen.advanced-screen { background: radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.20), transparent 23rem), radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.13), transparent 25rem), linear-gradient(145deg, rgba(12, 23, 38, 0.86), rgba(3, 10, 20, 0.94)) !important; border: 1px solid rgba(175, 198, 235, 0.14) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 28px 90px rgba(0, 0, 0, 0.32), 0 0 80px rgba(99, 102, 241, 0.10) !important; color: rgba(245, 248, 255, 0.94) !important; } .app-screen.card.system-screen, .app-screen.card.preferences-screen, .app-screen.card.tools-screen.advanced-screen { background: radial-gradient(circle at 10% 0%, rgba(139, 92, 246, 0.20), transparent 23rem), radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.13), transparent 25rem), linear-gradient(145deg, rgba(12, 23, 38, 0.86), rgba(3, 10, 20, 0.94)) !important; color: rgba(245, 248, 255, 0.94) !important; } .system-screen .section-header, .preferences-screen .section-header, .tools-screen .section-header { border-bottom: 1px solid rgba(190, 207, 238, 0.11) !important; margin-bottom: 1rem !important; padding-bottom: 1rem !important; } .system-screen .screen-title, .preferences-screen .screen-title, .tools-screen .screen-title { color: rgba(252, 253, 255, 0.98) !important; font-family: "Avenir Next", Avenir, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(2rem, 4vw, 3.35rem) !important; font-weight: 520 !important; letter-spacing: 0 !important; line-height: 0.98 !important; text-shadow: 0 18px 44px rgba(0, 0, 0, 0.38) !important; } .app-screen.system-screen > .section-header h2.screen-title, .app-screen.preferences-screen > .section-header h2.screen-title, .app-screen.tools-screen > .section-header h2.screen-title { color: rgba(252, 253, 255, 0.98) !important; font-size: clamp(2rem, 4vw, 3.35rem) !important; font-weight: 520 !important; } .system-screen .section-note, .preferences-screen .section-note, .tools-screen .section-note { color: rgba(213, 225, 244, 0.68) !important; font-weight: 360 !important; letter-spacing: 0 !important; } .system-grid { align-items: stretch !important; display: grid !important; gap: 1rem !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .system-screen .placeholder-panel, .system-health-panel, .preferences-intro, .preferences-group, .tools-screen .advanced-tool-card { background: radial-gradient(circle at 8% 0%, rgba(139, 92, 246, 0.18), transparent 13rem), radial-gradient(circle at 100% 10%, rgba(45, 212, 191, 0.09), transparent 14rem), linear-gradient(145deg, rgba(15, 29, 48, 0.74), rgba(5, 13, 25, 0.82)) !important; border: 1px solid rgba(183, 203, 238, 0.13) !important; border-radius: 18px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 54px rgba(0, 0, 0, 0.24), 0 0 38px rgba(99, 102, 241, 0.055) !important; color: rgba(242, 247, 255, 0.92) !important; } .system-screen .placeholder-panel:hover, .preferences-group:hover, .tools-screen .advanced-tool-card:hover { border-color: rgba(199, 180, 255, 0.27) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 22px 68px rgba(0, 0, 0, 0.30), 0 0 48px rgba(139, 92, 246, 0.12) !important; transform: translateY(-1px) !important; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } .system-screen .placeholder-panel > strong, .system-health-panel h3, .preferences-group h3, .tools-screen .advanced-tool-card .tool-card-header h3 { color: rgba(250, 252, 255, 0.96) !important; font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-weight: 560 !important; letter-spacing: 0 !important; } .system-screen .placeholder-panel p, .system-health-panel p, .preferences-group p, .preference-row small, .tools-screen .advanced-tool-card .tool-card-note { color: rgba(213, 225, 244, 0.66) !important; font-weight: 360 !important; line-height: 1.55 !important; } .system-section-kicker, .preferences-group-heading > span, .preferences-group .eyebrow, .tools-screen .eyebrow { color: rgba(203, 181, 255, 0.92) !important; font-size: 0.72rem !important; font-weight: 620 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; } .system-tools-panel { overflow: hidden !important; position: relative !important; } .system-health-panel { grid-column: 1 / -1 !important; } .system-tools-preview { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; margin: 0.9rem 0 1rem !important; } .system-tools-preview span { background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(14, 165, 233, 0.12)) !important; border: 1px solid rgba(216, 202, 255, 0.20) !important; border-radius: 999px !important; color: rgba(244, 247, 255, 0.90) !important; font-size: 0.78rem !important; font-weight: 470 !important; padding: 0.38rem 0.65rem !important; } .system-primary-action, .preferences-screen .secondary-button, .tools-screen .secondary-button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 58%), linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(67, 56, 202, 0.76)) !important; border: 1px solid rgba(216, 202, 255, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 16px 34px rgba(88, 28, 135, 0.25) !important; color: rgba(255, 255, 255, 0.96) !important; font-weight: 560 !important; } .preferences-shell { background: transparent !important; border: 0 !important; box-shadow: none !important; } .preferences-group-heading { align-items: center !important; } .preference-row { background: rgba(4, 12, 24, 0.46) !important; border: 1px solid rgba(182, 201, 234, 0.10) !important; border-radius: 14px !important; } .preference-row strong { color: rgba(246, 249, 255, 0.94) !important; font-weight: 520 !important; } .preference-row :is(input[type="text"], input[type="number"], select, textarea), .preferences-screen select, .preferences-screen input { background: rgba(2, 9, 19, 0.78) !important; border-color: rgba(175, 198, 235, 0.16) !important; color: rgba(248, 251, 255, 0.94) !important; } .tools-screen .tools-workspace-grid { gap: 1rem !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } @media (max-width: 920px) { .system-grid, .tools-screen .tools-workspace-grid { grid-template-columns: 1fr !important; } } /* P10NZ Add/Edit modal polish: modern dark item editors without changing the underlying forms. */ #editModalBackdrop.modal-backdrop:not([hidden]), #addRecordModalBackdrop.modal-backdrop:not([hidden]) { align-items: center !important; background: radial-gradient(circle at 50% 18%, rgba(139, 92, 246, 0.22), transparent 25rem), rgba(0, 4, 12, 0.72) !important; backdrop-filter: blur(18px) saturate(1.08) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; padding: clamp(1rem, 3vw, 2.4rem) !important; z-index: 1400 !important; } #editModalBackdrop .modal-card, #addRecordModalBackdrop .modal-card { background: radial-gradient(circle at 12% 0%, rgba(139, 92, 246, 0.22), transparent 20rem), radial-gradient(circle at 92% 16%, rgba(45, 212, 191, 0.12), transparent 24rem), linear-gradient(145deg, rgba(13, 25, 43, 0.96), rgba(3, 10, 21, 0.98)) !important; border: 1px solid rgba(190, 207, 238, 0.16) !important; border-radius: 22px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 34px 110px rgba(0, 0, 0, 0.54), 0 0 76px rgba(109, 40, 217, 0.18) !important; color: rgba(244, 248, 255, 0.94) !important; overflow: hidden !important; width: min(72rem, calc(100vw - 2rem)) !important; } #addRecordModalBackdrop .modal-card { width: min(64rem, calc(100vw - 2rem)) !important; } #editModalBackdrop .modal-card > .modal-header, #addRecordModalBackdrop .modal-card > .modal-header { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.28), transparent 18rem), linear-gradient(180deg, rgba(19, 32, 55, 0.96), rgba(9, 18, 34, 0.94)) !important; border-bottom: 1px solid rgba(199, 211, 238, 0.12) !important; padding: 1.05rem 1.25rem !important; } #editModalBackdrop .modal-header .eyebrow, #addRecordModalBackdrop .modal-header .eyebrow { color: rgba(205, 186, 255, 0.92) !important; font-size: 0.72rem !important; font-weight: 680 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; } #editModalBackdrop .modal-header h2, #addRecordModalBackdrop .modal-header h2 { color: rgba(252, 253, 255, 0.98) !important; font-family: "Avenir Next", Avenir, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(1.55rem, 3vw, 2.35rem) !important; font-weight: 560 !important; letter-spacing: 0 !important; line-height: 1.04 !important; margin: 0.1rem 0 0 !important; } #editModalBackdrop .modal-close-button, #addRecordModalBackdrop .modal-close-button { align-items: center !important; background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(216, 202, 255, 0.18) !important; border-radius: 999px !important; color: rgba(255, 255, 255, 0.88) !important; display: inline-flex !important; height: 2.25rem !important; justify-content: center !important; min-width: 2.25rem !important; padding: 0 !important; } #editModalBackdrop .modal-scroll-body, #addRecordModalBackdrop .modal-scroll-body { background: radial-gradient(circle at 0% 28%, rgba(14, 165, 233, 0.07), transparent 20rem), linear-gradient(180deg, rgba(3, 10, 22, 0.12), rgba(2, 7, 16, 0.38)) !important; padding: 1.1rem 1.25rem 1.35rem !important; } #editModalBackdrop :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section, .goal-linked-items-box), #addRecordModalBackdrop :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section, .goal-linked-items-box, .modal-intro, .goal-guidance-examples) { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 14rem), linear-gradient(145deg, rgba(14, 28, 47, 0.70), rgba(5, 14, 27, 0.82)) !important; border: 1px solid rgba(184, 204, 238, 0.12) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 38px rgba(0, 0, 0, 0.18) !important; color: rgba(241, 246, 255, 0.92) !important; padding: 0.9rem !important; } #editModalBackdrop :is(.desktop-timing-defaults-grid, .planning-fields, .reference-add-grid, .add-reference-grid), #addRecordModalBackdrop :is(.desktop-timing-defaults-grid, .planning-fields, .reference-add-grid, .add-reference-grid, #addRecordStatusCategoryFields, #addRecordGoalFields) { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #editModalBackdrop[data-mobile-sheet="goal"] :is(.field-grid, .goal-guidance-examples), #addRecordModalBackdrop[data-mobile-sheet="goal"] :is(.field-grid, .goal-guidance-examples) { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 14rem), linear-gradient(145deg, rgba(14, 28, 47, 0.70), rgba(5, 14, 27, 0.82)) !important; border: 1px solid rgba(184, 204, 238, 0.12) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 38px rgba(0, 0, 0, 0.18) !important; color: rgba(241, 246, 255, 0.92) !important; } #editModalBackdrop[data-mobile-sheet="goal"] .field-grid .field, #addRecordModalBackdrop[data-mobile-sheet="goal"] .field-grid .field { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #editModalBackdrop :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox), #addRecordModalBackdrop :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox) { background: linear-gradient(145deg, rgba(18, 33, 54, 0.78), rgba(6, 16, 31, 0.86)) !important; border: 1px solid rgba(184, 204, 238, 0.13) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 12px 30px rgba(0, 0, 0, 0.16) !important; color: rgba(242, 247, 255, 0.88) !important; padding: 0.82rem 0.9rem !important; } #addRecordModalBackdrop .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop .goal-guidance-examples button, #editModalBackdrop .goal-guidance-examples .goal-example-toggle, #editModalBackdrop .goal-guidance-examples button { background: linear-gradient(135deg, rgba(124, 58, 237, 0.26), rgba(14, 165, 233, 0.12)) !important; border: 1px solid rgba(216, 202, 255, 0.18) !important; border-radius: 999px !important; color: rgba(245, 248, 255, 0.90) !important; font-weight: 520 !important; } #addRecordModalBackdrop .goal-guidance-examples .goal-example-toggle { width: auto !important; } #addRecordModalBackdrop .goal-example-picker, #editModalBackdrop .goal-example-picker { gap: 0.45rem !important; } @media (min-width: 761px) { #editModalBackdrop .mobile-goal-sheet-action, #addRecordModalBackdrop .mobile-goal-sheet-action { display: none !important; } } #editModalBackdrop .field-grid, #addRecordModalBackdrop .field-grid, #editModalBackdrop .desktop-timing-defaults-grid, #addRecordModalBackdrop .desktop-timing-defaults-grid { gap: 0.78rem !important; } #editModalBackdrop label, #addRecordModalBackdrop label, #editModalBackdrop .linked-goals-header strong, #addRecordModalBackdrop .linked-goals-header strong, #editModalBackdrop .desktop-timing-defaults-header h3, #addRecordModalBackdrop .desktop-timing-defaults-header h3, #editModalBackdrop .reference-direct-header strong, #addRecordModalBackdrop .reference-direct-header strong { color: rgba(246, 249, 255, 0.94) !important; font-weight: 560 !important; letter-spacing: 0 !important; } #editModalBackdrop :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .desktop-timing-defaults-header p, .reference-direct-header span, .linked-goals-header span, .goal-linked-items-box p), #addRecordModalBackdrop :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .desktop-timing-defaults-header p, .reference-direct-header span, .linked-goals-header span, .goal-linked-items-box p) { color: rgba(213, 225, 244, 0.62) !important; font-weight: 360 !important; } #editModalBackdrop :is(input, select, textarea), #addRecordModalBackdrop :is(input, select, textarea) { background: rgba(2, 9, 19, 0.76) !important; border: 1px solid rgba(176, 197, 231, 0.16) !important; border-radius: 13px !important; color: rgba(250, 252, 255, 0.96) !important; font-weight: 430 !important; } #editModalBackdrop :is(input, select, textarea)::placeholder, #addRecordModalBackdrop :is(input, select, textarea)::placeholder { color: rgba(198, 211, 234, 0.42) !important; } #editModalBackdrop :is(input, select, textarea):focus, #addRecordModalBackdrop :is(input, select, textarea):focus { border-color: rgba(196, 181, 253, 0.44) !important; box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.16) !important; outline: none !important; } #editModalBackdrop .linked-goals-list, #addRecordModalBackdrop .linked-goals-list, #editModalBackdrop .reference-edit-list, #addRecordModalBackdrop .reference-edit-list, #editModalBackdrop .modal-catalog-lookup, #addRecordModalBackdrop .modal-catalog-lookup { background: rgba(2, 9, 19, 0.38) !important; border: 1px solid rgba(184, 204, 238, 0.10) !important; border-radius: 14px !important; padding: 0.55rem !important; } #editModalBackdrop .catalog-lookup-result, #addRecordModalBackdrop .catalog-lookup-result, #editModalBackdrop .catalog-selected-row, #addRecordModalBackdrop .catalog-selected-row, #editModalBackdrop .linked-goal-option, #addRecordModalBackdrop .linked-goal-option { background: linear-gradient(135deg, rgba(30, 45, 72, 0.76), rgba(9, 21, 39, 0.86)) !important; border: 1px solid rgba(190, 207, 238, 0.13) !important; border-radius: 13px !important; color: rgba(242, 247, 255, 0.90) !important; } #editModalBackdrop .linked-goal-option > span, #addRecordModalBackdrop .linked-goal-option > span { color: rgba(236, 249, 255, 0.95) !important; font-size: 0.94rem !important; font-weight: 520 !important; letter-spacing: 0 !important; line-height: 1.28 !important; text-shadow: 0 0 16px rgba(125, 211, 252, 0.16) !important; } #editModalBackdrop .linked-goal-option:hover, #editModalBackdrop .linked-goal-option:focus-within, #addRecordModalBackdrop .linked-goal-option:hover, #addRecordModalBackdrop .linked-goal-option:focus-within { background: radial-gradient(circle at 0% 50%, rgba(45, 212, 191, 0.10), transparent 16rem), linear-gradient(135deg, rgba(36, 55, 86, 0.82), rgba(12, 27, 49, 0.90)) !important; border-color: rgba(125, 211, 252, 0.26) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 0 0 1px rgba(125, 211, 252, 0.06), 0 12px 28px rgba(0, 0, 0, 0.16) !important; } #editModalBackdrop .linked-goal-option:hover > span, #editModalBackdrop .linked-goal-option:focus-within > span, #addRecordModalBackdrop .linked-goal-option:hover > span, #addRecordModalBackdrop .linked-goal-option:focus-within > span, #editModalBackdrop .linked-goal-option input:checked + span, #addRecordModalBackdrop .linked-goal-option input:checked + span { color: #ffffff !important; font-weight: 560 !important; text-shadow: 0 0 18px rgba(94, 234, 212, 0.22) !important; } #editModalBackdrop .modal-footer-actions, #editModalBackdrop form > .button-row:last-child, #addRecordModalBackdrop .modal-footer-actions, #addRecordModalBackdrop form > .button-row:last-child { background: linear-gradient(180deg, rgba(8, 17, 31, 0.94), rgba(3, 10, 21, 0.98)) !important; border-top: 1px solid rgba(199, 211, 238, 0.12) !important; box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.22) !important; padding: 0.85rem 1.25rem 1rem !important; } #editModalBackdrop .modal-footer-actions button:not(.secondary-button), #addRecordModalBackdrop .modal-footer-actions button:not(.secondary-button) { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 56%), linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(67, 56, 202, 0.84)) !important; border: 1px solid rgba(216, 202, 255, 0.30) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.17), 0 18px 38px rgba(88, 28, 135, 0.30) !important; color: white !important; font-weight: 620 !important; } #editModalBackdrop .modal-footer-actions .secondary-button, #addRecordModalBackdrop .modal-footer-actions .secondary-button { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(216, 202, 255, 0.16) !important; border-radius: 999px !important; color: rgba(234, 241, 252, 0.88) !important; } /* Song modal cleanup: songs keep identity, timing, goals, references, and instructions while scheduling moves to Schedule Builder blocks. */ #editModalBackdrop[data-record-type="song"] .modal-card, #addRecordModalBackdrop[data-record-type="song"] .modal-card { width: min(58rem, calc(100vw - 2rem)) !important; } #editModalBackdrop[data-record-type="song"] .modal-scroll-body, #addRecordModalBackdrop[data-record-type="song"] .modal-scroll-body { background: radial-gradient(circle at 12% 8%, rgba(96, 165, 250, 0.10), transparent 20rem), radial-gradient(circle at 88% 14%, rgba(168, 85, 247, 0.12), transparent 22rem), linear-gradient(180deg, rgba(7, 17, 32, 0.62), rgba(2, 8, 18, 0.82)) !important; display: grid !important; gap: 0.95rem !important; } #editModalBackdrop[data-record-type="song"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section), #addRecordModalBackdrop[data-record-type="song"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section) { background: radial-gradient(circle at 0% 0%, rgba(124, 58, 237, 0.16), transparent 13rem), linear-gradient(145deg, rgba(22, 38, 62, 0.86), rgba(8, 19, 36, 0.92)) !important; border-color: rgba(202, 220, 252, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.22), 0 0 34px rgba(67, 56, 202, 0.07) !important; } #editModalBackdrop[data-record-type="song"] :is(.planning-fields, #addRecordStatusCategoryFields), #addRecordModalBackdrop[data-record-type="song"] :is(.planning-fields, #addRecordStatusCategoryFields) { grid-template-columns: minmax(0, 1fr) !important; } #editModalBackdrop[data-record-type="song"] .planning-fields .field:not([hidden]), #addRecordModalBackdrop[data-record-type="song"] .planning-fields .field:not([hidden]) { background: linear-gradient(145deg, rgba(17, 31, 52, 0.72), rgba(7, 18, 35, 0.84)) !important; border: 1px solid rgba(184, 204, 238, 0.12) !important; border-radius: 15px !important; padding: 0.82rem !important; } #editModalBackdrop[data-record-type="song"] .desktop-timing-defaults-header h3, #addRecordModalBackdrop[data-record-type="song"] .desktop-timing-defaults-header h3, #editModalBackdrop[data-record-type="song"] .linked-goals-header strong, #addRecordModalBackdrop[data-record-type="song"] .linked-goals-header strong { color: rgba(255, 255, 255, 0.98) !important; font-weight: 620 !important; } #editModalBackdrop[data-record-type="song"] .desktop-timing-defaults-header p, #addRecordModalBackdrop[data-record-type="song"] .desktop-timing-defaults-header p { max-width: 42rem !important; } /* Drill modal cleanup: drills describe the work; scheduling cadence belongs to Schedule Builder blocks. */ #editModalBackdrop[data-record-type="drill"] .modal-card, #addRecordModalBackdrop[data-record-type="drill"] .modal-card { width: min(60rem, calc(100vw - 2rem)) !important; } #editModalBackdrop[data-record-type="drill"] .modal-scroll-body, #addRecordModalBackdrop[data-record-type="drill"] .modal-scroll-body { background: radial-gradient(circle at 10% 10%, rgba(45, 212, 191, 0.10), transparent 20rem), radial-gradient(circle at 88% 8%, rgba(96, 165, 250, 0.12), transparent 22rem), linear-gradient(180deg, rgba(6, 18, 32, 0.64), rgba(2, 8, 18, 0.84)) !important; display: grid !important; gap: 0.95rem !important; } #editModalBackdrop[data-record-type="drill"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section), #addRecordModalBackdrop[data-record-type="drill"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section) { background: radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.14), transparent 13rem), linear-gradient(145deg, rgba(20, 39, 61, 0.87), rgba(7, 19, 35, 0.93)) !important; border-color: rgba(186, 230, 253, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.22), 0 0 34px rgba(14, 165, 233, 0.06) !important; } #editModalBackdrop[data-record-type="drill"] .planning-fields, #addRecordModalBackdrop[data-record-type="drill"] .planning-fields { grid-template-columns: minmax(0, 1fr) !important; } #editModalBackdrop[data-record-type="drill"] .planning-fields .field:not([hidden]), #addRecordModalBackdrop[data-record-type="drill"] .planning-fields .field:not([hidden]) { background: linear-gradient(145deg, rgba(17, 34, 54, 0.74), rgba(7, 18, 35, 0.86)) !important; border: 1px solid rgba(184, 224, 255, 0.13) !important; border-radius: 15px !important; padding: 0.82rem !important; } #editModalBackdrop[data-record-type="drill"] .desktop-timing-defaults-header h3, #addRecordModalBackdrop[data-record-type="drill"] .desktop-timing-defaults-header h3, #editModalBackdrop[data-record-type="drill"] .linked-goals-header strong, #addRecordModalBackdrop[data-record-type="drill"] .linked-goals-header strong { color: rgba(255, 255, 255, 0.98) !important; font-weight: 620 !important; } #editModalBackdrop[data-record-type="drill"] .desktop-timing-defaults-header p, #addRecordModalBackdrop[data-record-type="drill"] .desktop-timing-defaults-header p { max-width: 44rem !important; } /* Solo modal cleanup: solos keep parent song, musical notes, goals, references, and metronome defaults. */ #editModalBackdrop[data-record-type="solo"] .modal-card, #addRecordModalBackdrop[data-record-type="solo"] .modal-card { width: min(58rem, calc(100vw - 2rem)) !important; } #editModalBackdrop[data-record-type="solo"] .modal-scroll-body, #addRecordModalBackdrop[data-record-type="solo"] .modal-scroll-body { background: radial-gradient(circle at 12% 8%, rgba(168, 85, 247, 0.12), transparent 20rem), radial-gradient(circle at 88% 10%, rgba(251, 146, 60, 0.08), transparent 22rem), linear-gradient(180deg, rgba(9, 16, 33, 0.66), rgba(3, 8, 18, 0.86)) !important; display: grid !important; gap: 0.95rem !important; } #editModalBackdrop[data-record-type="solo"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section), #addRecordModalBackdrop[data-record-type="solo"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section) { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.15), transparent 13rem), linear-gradient(145deg, rgba(25, 33, 57, 0.88), rgba(9, 17, 33, 0.93)) !important; border-color: rgba(216, 180, 254, 0.17) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.22), 0 0 34px rgba(168, 85, 247, 0.07) !important; } /* Activity modal cleanup: activities can hold richer instructions while schedule blocks own cadence. */ #editModalBackdrop[data-record-type="activity"] .modal-card, #addRecordModalBackdrop[data-record-type="activity"] .modal-card { width: min(60rem, calc(100vw - 2rem)) !important; } #editModalBackdrop[data-record-type="activity"] .modal-scroll-body, #addRecordModalBackdrop[data-record-type="activity"] .modal-scroll-body { background: radial-gradient(circle at 10% 10%, rgba(52, 211, 153, 0.10), transparent 20rem), radial-gradient(circle at 88% 10%, rgba(56, 189, 248, 0.10), transparent 22rem), linear-gradient(180deg, rgba(6, 20, 32, 0.66), rgba(2, 8, 18, 0.86)) !important; display: grid !important; gap: 0.95rem !important; } #editModalBackdrop[data-record-type="activity"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section), #addRecordModalBackdrop[data-record-type="activity"] :is(.field, .linked-goals-mock, .modal-references-box, .desktop-timing-defaults-section) { background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 13rem), linear-gradient(145deg, rgba(19, 43, 56, 0.87), rgba(7, 19, 35, 0.93)) !important; border-color: rgba(153, 246, 228, 0.16) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.22), 0 0 34px rgba(20, 184, 166, 0.06) !important; } #editModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .planning-fields, #addRecordModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .planning-fields { grid-template-columns: minmax(0, 1fr) !important; } #editModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .planning-fields .field:not([hidden]), #addRecordModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .planning-fields .field:not([hidden]) { background: linear-gradient(145deg, rgba(17, 32, 53, 0.74), rgba(7, 18, 35, 0.86)) !important; border: 1px solid rgba(205, 224, 255, 0.12) !important; border-radius: 15px !important; padding: 0.82rem !important; } #editModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .desktop-timing-defaults-header h3, #addRecordModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .desktop-timing-defaults-header h3, #editModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .linked-goals-header strong, #addRecordModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .linked-goals-header strong { color: rgba(255, 255, 255, 0.98) !important; font-weight: 620 !important; } #editModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .desktop-timing-defaults-header p, #addRecordModalBackdrop:is([data-record-type="solo"], [data-record-type="activity"]) .desktop-timing-defaults-header p { max-width: 44rem !important; } @media (max-width: 760px) { #editModalBackdrop .modal-card, #addRecordModalBackdrop .modal-card { border-radius: 22px 22px 0 0 !important; width: 100% !important; } } @media (min-width: 761px) { #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .field-grid, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .field-grid, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .planning-fields, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .planning-fields, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .reference-add-grid, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .reference-add-grid { background: transparent !important; border: 0 !important; box-shadow: none !important; gap: 0.78rem !important; padding: 0 !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card form > .field, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card form > .field, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-mock, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-mock, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .modal-references-box, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .modal-references-box, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .add-reference-create-box, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .add-reference-create-box { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.13), transparent 14rem), linear-gradient(145deg, rgba(14, 28, 47, 0.70), rgba(5, 14, 27, 0.82)) !important; border: 1px solid rgba(184, 204, 238, 0.12) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 14px 38px rgba(0, 0, 0, 0.18) !important; color: rgba(241, 246, 255, 0.92) !important; margin: 0 !important; padding: 0.9rem !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .field-grid > .field, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .field-grid > .field, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .planning-fields .field, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .planning-fields .field, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .reference-add-grid .field, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .reference-add-grid .field { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card label, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card label, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples strong, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples strong, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-mock strong, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-mock strong, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box strong, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box strong { color: rgba(246, 249, 255, 0.94) !important; font-weight: 560 !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples::after, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-guidance-examples::after { color: rgba(213, 225, 244, 0.62) !important; content: "Example goals for inspiration." !important; font-weight: 360 !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box p, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .goal-linked-items-box p, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-empty, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-goals-empty, #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .record-meta, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .record-meta { color: rgba(213, 225, 244, 0.62) !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-item-row, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-item-row { background: linear-gradient(135deg, rgba(30, 45, 72, 0.76), rgba(9, 21, 39, 0.86)) !important; border: 1px solid rgba(190, 207, 238, 0.13) !important; color: rgba(242, 247, 255, 0.90) !important; } #editModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-item-name, #addRecordModalBackdrop[data-mobile-sheet="goal"] .modal-card .linked-item-name { color: rgba(242, 247, 255, 0.90) !important; } } /* P10NZ Add-to-Catalog chooser refinement: keep the first choice screen inside the dark Catalog language. */ #guidanceModalBackdrop.modal-backdrop:not([hidden]) { align-items: center !important; background: radial-gradient(circle at 48% 18%, rgba(124, 58, 237, 0.24), transparent 28rem), radial-gradient(circle at 84% 12%, rgba(45, 212, 191, 0.10), transparent 26rem), rgba(0, 4, 12, 0.74) !important; -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; backdrop-filter: blur(18px) saturate(1.08) !important; } #guidanceModalBackdrop .guidance-modal-card { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.24), transparent 18rem), radial-gradient(circle at 100% 12%, rgba(45, 212, 191, 0.10), transparent 18rem), linear-gradient(145deg, rgba(12, 25, 46, 0.94), rgba(3, 10, 22, 0.98)) !important; border: 1px solid rgba(216, 202, 255, 0.22) !important; border-radius: 24px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 36px 110px rgba(0, 0, 0, 0.62), 0 0 60px rgba(124, 58, 237, 0.18) !important; color: rgba(244, 248, 255, 0.94) !important; max-width: min(58rem, calc(100vw - 2rem)) !important; overflow: hidden !important; width: min(58rem, calc(100vw - 2rem)) !important; } #guidanceModalBackdrop .modal-header { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.26), transparent 18rem), linear-gradient(180deg, rgba(20, 34, 57, 0.92), rgba(8, 17, 32, 0.86)) !important; border-bottom: 1px solid rgba(199, 211, 238, 0.12) !important; padding: 1.15rem 1.25rem 1rem !important; } #guidanceModalBackdrop .modal-header .eyebrow { color: rgba(205, 186, 255, 0.92) !important; font-size: 0.72rem !important; font-weight: 660 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; } #guidanceModalBackdrop .modal-header h2 { color: rgba(252, 253, 255, 0.98) !important; font-family: "Avenir Next", Avenir, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif !important; font-size: clamp(1.45rem, 2.6vw, 2.15rem) !important; font-weight: 560 !important; letter-spacing: 0 !important; line-height: 1.04 !important; } #guidanceModalBackdrop .guidance-modal-message { border-bottom: 1px solid rgba(184, 204, 238, 0.10) !important; color: rgba(213, 225, 244, 0.70) !important; font-weight: 360 !important; line-height: 1.5 !important; margin: 0 !important; padding: 1rem 1.25rem !important; } #guidanceModalBackdrop .guidance-modal-body { padding: 1.1rem 1.25rem 1.25rem !important; } #guidanceModalBackdrop .guidance-choice-grid { gap: 0.78rem !important; margin: 0 !important; } #guidanceModalBackdrop .guidance-choice-card, #guidanceModalBackdrop .guidance-choice-card.is-primary, #guidanceModalBackdrop .guidance-choice-card.is-selected, #guidanceModalBackdrop .guidance-choice-card[aria-selected="true"], #guidanceModalBackdrop .guidance-choice-card[aria-pressed="true"] { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.20), transparent 70%), linear-gradient(145deg, rgba(18, 37, 63, 0.70), rgba(4, 12, 26, 0.78)) !important; border: 1px solid rgba(180, 198, 232, 0.14) !important; border-radius: 17px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 14px 34px rgba(0, 0, 0, 0.18) !important; color: rgba(242, 247, 255, 0.92) !important; padding: 0.92rem 1rem !important; } #guidanceModalBackdrop .guidance-choice-card:hover, #guidanceModalBackdrop .guidance-choice-card:focus-visible { background: radial-gradient(circle at 0% 0%, rgba(216, 180, 254, 0.28), transparent 70%), linear-gradient(145deg, rgba(35, 57, 88, 0.78), rgba(8, 18, 36, 0.76)) !important; border-color: rgba(216, 202, 255, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 18px 48px rgba(0, 0, 0, 0.30), 0 0 34px rgba(139, 92, 246, 0.16) !important; transform: translateY(-1px) !important; } #guidanceModalBackdrop .guidance-choice-kicker { color: rgba(192, 177, 255, 0.86) !important; font-size: 0.68rem !important; font-weight: 620 !important; letter-spacing: 0.08em !important; } #guidanceModalBackdrop .guidance-choice-card strong { color: rgba(252, 253, 255, 0.98) !important; font-size: 1rem !important; font-weight: 560 !important; } #guidanceModalBackdrop .guidance-choice-card span:not(.guidance-choice-kicker), #guidanceModalBackdrop .guidance-choice-card em { color: rgba(213, 225, 244, 0.70) !important; font-size: 0.82rem !important; font-weight: 360 !important; line-height: 1.42 !important; } #guidanceModalBackdrop .modal-footer-actions { background: linear-gradient(180deg, rgba(8, 17, 31, 0.94), rgba(3, 10, 21, 0.98)) !important; border-top: 1px solid rgba(199, 211, 238, 0.12) !important; padding: 0.85rem 1.25rem 1rem !important; } #guidanceModalBackdrop .modal-footer-actions .secondary-button { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(216, 202, 255, 0.16) !important; border-radius: 999px !important; color: rgba(234, 241, 252, 0.88) !important; } #guidanceModalBackdrop.is-archive-choice-modal .guidance-modal-card { max-width: min(34rem, calc(100vw - 2rem)) !important; width: min(34rem, calc(100vw - 2rem)) !important; } #guidanceModalBackdrop.is-archive-choice-modal .guidance-modal-body { display: block !important; } .archive-choice-dialog { display: grid; gap: 0.72rem; } .archive-choice-dialog > p { color: rgba(226, 232, 240, 0.78) !important; font-size: 0.92rem !important; line-height: 1.42 !important; margin: 0 !important; } .archive-choice-option { align-items: start; background: radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.12), transparent 10rem), linear-gradient(145deg, rgba(15, 23, 42, 0.76), rgba(5, 12, 24, 0.82)); border: 1px solid rgba(148, 163, 184, 0.16); border-radius: 14px; cursor: pointer; display: grid; gap: 0.68rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.82rem 0.9rem; } .archive-choice-option:hover, .archive-choice-option:focus-within { border-color: rgba(94, 234, 212, 0.38); box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.12), 0 14px 32px rgba(8, 47, 73, 0.16); } .archive-choice-option input { accent-color: #14b8a6; margin-top: 0.12rem; } .archive-choice-option span { display: grid; gap: 0.22rem; min-width: 0; } .archive-choice-option strong { color: rgba(248, 250, 252, 0.96) !important; font-size: 0.94rem !important; line-height: 1.2 !important; } .archive-choice-option small { color: rgba(203, 213, 225, 0.74) !important; font-size: 0.82rem !important; line-height: 1.35 !important; } .add-record-reference-launcher { align-items: center !important; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.14), transparent 14rem), linear-gradient(135deg, rgba(12, 26, 48, 0.64), rgba(3, 10, 22, 0.72)) !important; border: 1px solid rgba(184, 204, 238, 0.11) !important; border-radius: 15px !important; display: flex !important; gap: 1rem !important; justify-content: space-between !important; padding: 0.85rem !important; } .add-record-reference-launcher strong { color: rgba(248, 251, 255, 0.94) !important; display: block !important; font-weight: 560 !important; } .add-record-reference-launcher small { color: rgba(213, 225, 244, 0.62) !important; display: block !important; font-weight: 360 !important; line-height: 1.35 !important; margin-top: 0.16rem !important; } .add-record-reference-launcher .secondary-button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.16), transparent 56%), linear-gradient(135deg, rgba(124, 58, 237, 0.72), rgba(67, 56, 202, 0.70)) !important; border: 1px solid rgba(216, 202, 255, 0.24) !important; border-radius: 999px !important; color: white !important; flex: 0 0 auto !important; font-weight: 560 !important; } .add-record-reference-details { display: grid !important; gap: 0.8rem !important; margin-top: 0.8rem !important; } .add-record-reference-details[hidden] { display: none !important; } /* Schedule Builder prototype workspace. */ .schedule-builder-screen { background: radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.24), transparent 24rem), radial-gradient(circle at 86% 14%, rgba(20, 184, 166, 0.18), transparent 24rem), linear-gradient(145deg, #05101f, #020812 72%, #020611) !important; background-color: #020812 !important; border: 1px solid rgba(159, 183, 226, 0.16) !important; border-radius: 24px !important; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; margin-inline: auto !important; max-width: 1500px !important; overflow: hidden !important; padding: 1.1rem !important; } #scheduleBuilderScreen.schedule-builder-screen.card.app-screen { background: radial-gradient(circle at 18% 0%, rgba(124, 58, 237, 0.24), transparent 24rem), radial-gradient(circle at 86% 14%, rgba(20, 184, 166, 0.18), transparent 24rem), linear-gradient(145deg, #05101f, #020812 72%, #020611) !important; background-color: #020812 !important; } .schedule-builder-shell { display: grid; gap: 1rem; } .schedule-builder-header { align-items: center; background: linear-gradient(135deg, rgba(19, 34, 61, 0.94), rgba(8, 17, 33, 0.88)), radial-gradient(circle at 70% 20%, rgba(168, 85, 247, 0.18), transparent 18rem); border: 1px solid rgba(185, 203, 237, 0.13); border-radius: 20px; display: flex; gap: 1rem; justify-content: space-between; padding: 1.15rem 1.25rem; } .schedule-builder-eyebrow, .schedule-builder-panel-heading p, .schedule-builder-block-type, .schedule-builder-status span { color: rgba(199, 210, 254, 0.86); font-family: "Avenir Next", Avenir, "SF Pro Text", "Helvetica Neue", Inter, system-ui, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; } .schedule-builder-header h2 { color: rgba(250, 252, 255, 0.98); font-family: "Avenir Next", Avenir, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 560; letter-spacing: 0; line-height: 1; margin: 0.22rem 0 0; } .schedule-builder-header p:not(.schedule-builder-eyebrow), .schedule-builder-panel-heading span, .schedule-builder-status strong { color: rgba(214, 226, 245, 0.68); font-weight: 380; line-height: 1.45; margin: 0.35rem 0 0; } .schedule-builder-status { background: rgba(5, 12, 25, 0.7); border: 1px solid rgba(197, 216, 245, 0.14); border-radius: 18px; box-shadow: inset 0 0 26px rgba(168, 85, 247, 0.08); min-width: 12rem; padding: 0.8rem 0.95rem; text-align: right; } .schedule-builder-status strong { color: rgba(244, 248, 255, 0.92); display: block; font-weight: 520; } .schedule-builder-help-panel { background: linear-gradient(135deg, rgba(13, 27, 50, 0.78), rgba(5, 13, 27, 0.88)), radial-gradient(circle at 100% 0%, rgba(124, 58, 237, 0.16), transparent 18rem); border: 1px solid rgba(180, 202, 240, 0.14); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); overflow: hidden; } .schedule-builder-help-panel summary { align-items: center; cursor: pointer; display: flex; gap: 0.8rem; justify-content: space-between; list-style: none; padding: 0.86rem 1rem; } .schedule-builder-help-panel summary::-webkit-details-marker { display: none; } .schedule-builder-help-panel summary span { color: rgba(167, 139, 250, 0.86); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-builder-help-panel summary strong { color: rgba(245, 248, 255, 0.94); font-size: 1rem; font-weight: 560; } .schedule-builder-help-panel summary::after { border: 1px solid rgba(199, 210, 254, 0.18); border-radius: 999px; color: rgba(226, 232, 240, 0.74); content: "Open"; font-size: 0.76rem; padding: 0.32rem 0.68rem; } .schedule-builder-help-panel[open] summary::after { content: "Close"; } .schedule-builder-help-grid { border-top: 1px solid rgba(190, 207, 236, 0.1); display: grid; gap: 0.7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0.95rem; } .schedule-builder-help-grid article { background: rgba(5, 13, 27, 0.55); border: 1px solid rgba(148, 163, 184, 0.12); border-radius: 15px; padding: 0.82rem; } .schedule-builder-help-grid h3 { color: rgba(250, 252, 255, 0.94); font-size: 0.98rem; font-weight: 620; margin: 0 0 0.42rem; } .schedule-builder-help-grid p { color: rgba(213, 225, 244, 0.72); font-size: 0.86rem; line-height: 1.45; margin: 0.34rem 0 0; } .schedule-builder-grid { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(230px, 0.78fr) minmax(430px, 1.45fr) minmax(300px, 0.95fr); min-height: 0; } .schedule-builder-panel { background: linear-gradient(145deg, rgba(11, 25, 46, 0.94), rgba(3, 10, 22, 0.96)), radial-gradient(circle at 10% 0%, rgba(168, 85, 247, 0.12), transparent 15rem); border: 1px solid rgba(184, 204, 238, 0.13); border-radius: 20px; box-shadow: 0 24px 58px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.035); min-width: 0; max-height: min(82vh, 900px); overflow: hidden; padding: 1rem; } .schedule-builder-type-panel, .schedule-builder-current-panel, .schedule-builder-catalog-panel { display: grid; min-height: 0; } .schedule-builder-type-panel { grid-template-rows: auto auto minmax(0, 1fr); } .schedule-builder-catalog-panel { grid-template-rows: auto minmax(0, 1fr); } .schedule-builder-panel-heading { align-items: flex-start; border-bottom: 1px solid rgba(190, 207, 236, 0.10); display: flex; gap: 0.8rem; justify-content: space-between; margin-bottom: 0.9rem; padding-bottom: 0.85rem; } .schedule-builder-current-heading { align-items: center; } .schedule-builder-header-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 0.42rem; justify-content: flex-end; max-width: 24rem; } .schedule-builder-compact-heading { margin-bottom: 0.7rem; padding-bottom: 0.68rem; } .schedule-builder-small-button, .schedule-builder-icon-button { border-radius: 999px !important; font-size: 0.72rem !important; padding: 0.42rem 0.7rem !important; } .schedule-builder-picker-row { cursor: pointer; } .schedule-builder-picker-row:not(.is-added):hover { border-color: rgba(125, 211, 252, 0.36) !important; box-shadow: 0 14px 30px rgba(14, 165, 233, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; transform: translateY(-1px); } @media (max-width: 1100px) { .schedule-builder-help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .schedule-builder-help-grid { grid-template-columns: 1fr; } } .schedule-builder-plus-button { align-items: center; aspect-ratio: 1; display: inline-flex !important; font-size: 1rem !important; justify-content: center; min-height: 2.08rem; padding: 0 !important; width: 2.08rem; } .schedule-builder-type-list, .schedule-builder-block-list, .schedule-builder-editor, .schedule-builder-schedule-list { display: flex; flex-direction: column; gap: 0.75rem; min-height: 0; overflow: auto; padding-right: 0.12rem; } .schedule-builder-current-panel { grid-template-rows: auto minmax(0, 1fr) auto; min-height: min(76vh, 760px); } .schedule-builder-block-list { align-content: start; max-height: none; overflow: auto; padding-bottom: 1rem; } .schedule-builder-schedule-section { border-bottom: 1px solid rgba(190, 207, 236, 0.08); display: grid; margin-bottom: 0.85rem; min-height: 0; padding-bottom: 0.85rem; } .schedule-builder-schedule-current { align-items: center; background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.20), transparent 9rem), linear-gradient(145deg, rgba(23, 40, 74, 0.96), rgba(8, 18, 34, 0.96)); border: 1px solid rgba(167, 139, 250, 0.48); border-radius: 15px; color: rgba(238, 244, 255, 0.9); cursor: pointer; display: grid; gap: 0.65rem; grid-template-columns: auto minmax(0, 1fr); padding: 0.72rem; text-align: left; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; width: 100%; } .schedule-builder-schedule-current:hover, .schedule-builder-schedule-current:focus-visible { border-color: rgba(216, 180, 254, 0.62); box-shadow: 0 0 28px rgba(124, 58, 237, 0.18); transform: translateY(-1px); } .schedule-builder-schedule-current strong { color: rgba(250, 252, 255, 0.96); display: block; font-size: 0.9rem; font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schedule-builder-schedule-current small { color: rgba(214, 226, 245, 0.6); display: block; font-size: 0.72rem; margin-top: 0.12rem; } .schedule-builder-schedule-current em { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; color: rgba(214, 226, 245, 0.72); font-size: 0.68rem; font-style: normal; grid-column: 2; justify-self: start; margin-top: -0.18rem; padding: 0.24rem 0.5rem; white-space: nowrap; } .schedule-builder-schedule-tray { background: rgba(2, 8, 18, 0.28); border: 1px solid rgba(190, 207, 236, 0.08); border-radius: 15px; display: grid; gap: 0.65rem; margin-top: 0.65rem; max-height: 18rem; overflow: hidden; padding: 0.65rem; } .schedule-builder-tray-actions { display: flex; flex-wrap: wrap; gap: 0.42rem; justify-content: space-between; } .schedule-builder-tray-actions span { color: rgba(214, 226, 245, 0.72); font-size: 0.72rem; font-weight: 760; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-builder-schedule-tray .schedule-builder-schedule-list { max-height: 13.5rem; } .schedule-builder-schedule-card { align-items: stretch; background: linear-gradient(145deg, rgba(13, 27, 51, 0.94), rgba(5, 12, 25, 0.92)); border: 1px solid rgba(184, 204, 238, 0.12); border-radius: 15px; color: rgba(238, 244, 255, 0.86); display: grid; gap: 0.55rem; padding: 0.72rem; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .schedule-builder-schedule-card:hover, .schedule-builder-schedule-card:focus-within { background: linear-gradient(135deg, rgba(124, 58, 237, 0.22), rgba(14, 165, 233, 0.08)); border-color: rgba(196, 181, 253, 0.28); box-shadow: 0 0 24px rgba(124, 58, 237, 0.14); } .schedule-builder-schedule-card.is-selected { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.22), transparent 9rem), linear-gradient(145deg, rgba(23, 40, 74, 0.96), rgba(8, 18, 34, 0.96)); border-color: rgba(167, 139, 250, 0.48); box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.1), 0 14px 30px rgba(0, 0, 0, 0.22); } .schedule-builder-schedule-card.is-archived { align-items: center; background: linear-gradient(145deg, rgba(17, 25, 43, 0.68), rgba(5, 12, 25, 0.74)); border-color: rgba(184, 204, 238, 0.08); grid-template-columns: auto minmax(0, 1fr); opacity: 0.74; } .schedule-builder-schedule-card.is-archived:hover, .schedule-builder-schedule-card.is-archived:focus-within { background: linear-gradient(145deg, rgba(31, 38, 60, 0.74), rgba(8, 16, 31, 0.78)); border-color: rgba(184, 204, 238, 0.14); box-shadow: none; transform: none; } .schedule-builder-schedule-select { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: grid; gap: 0.65rem; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; padding: 0; text-align: left; width: 100%; } .schedule-builder-schedule-select:hover, .schedule-builder-schedule-select:focus-visible { outline: none; } .schedule-builder-schedule-select em { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; color: rgba(214, 226, 245, 0.72); font-size: 0.66rem; font-style: normal; padding: 0.22rem 0.48rem; white-space: nowrap; } .schedule-builder-schedule-card-actions { display: flex; flex-wrap: wrap; gap: 0.32rem; justify-content: flex-end; } .schedule-builder-archive-pocket { border-top: 1px solid rgba(190, 207, 236, 0.08); display: grid; gap: 0.58rem; margin-top: 0.22rem; padding-top: 0.72rem; } .schedule-builder-archive-pocket > div:first-child { display: grid; gap: 0.12rem; } .schedule-builder-archive-pocket > div:first-child strong { color: rgba(222, 232, 250, 0.76); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-builder-archive-pocket > div:first-child span { color: rgba(177, 189, 212, 0.58); font-size: 0.72rem; } .schedule-builder-archive-row { align-items: center; background: rgba(4, 12, 26, 0.54); border: 1px solid rgba(184, 204, 238, 0.08); border-radius: 13px; display: grid; gap: 0.45rem; grid-template-columns: minmax(0, 1fr); padding: 0.58rem; } .schedule-builder-archive-row strong { color: rgba(238, 244, 255, 0.78); display: block; font-size: 0.78rem; font-weight: 590; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schedule-builder-archive-row small { color: rgba(177, 189, 212, 0.54); display: block; font-size: 0.68rem; margin-top: 0.1rem; } .schedule-builder-archive-row .schedule-builder-schedule-card-actions { justify-content: flex-start; } .schedule-builder-schedule-card strong, .schedule-builder-schedule-select strong { color: rgba(250, 252, 255, 0.94); display: block; font-size: 0.86rem; font-weight: 610; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schedule-builder-schedule-card small, .schedule-builder-schedule-select small { color: rgba(214, 226, 245, 0.58); display: block; font-size: 0.72rem; line-height: 1.25; margin-top: 0.14rem; } .schedule-builder-schedule-card .schedule-builder-icon-button { align-self: center; padding-inline: 0.54rem !important; } .schedule-builder-small-button.danger { background: rgba(127, 29, 29, 0.18) !important; border-color: rgba(248, 113, 113, 0.24) !important; color: rgba(254, 202, 202, 0.9) !important; } .schedule-builder-schedule-name-input { background: rgba(2, 8, 18, 0.62); border: 1px solid rgba(184, 204, 238, 0.12); border-radius: 12px; color: rgba(250, 252, 255, 0.96); display: block; font-size: 1.12rem; font-weight: 580; margin: 0.28rem 0 0.12rem; max-width: 28rem; min-height: 2.35rem; padding: 0.45rem 0.66rem; width: min(100%, 28rem); } .schedule-builder-type-card { align-items: flex-start; background: linear-gradient(145deg, rgba(15, 31, 58, 0.96), rgba(5, 13, 27, 0.96)); border: 1px solid rgba(184, 204, 238, 0.12); border-radius: 17px; color: rgba(238, 244, 255, 0.86); cursor: pointer; display: flex; gap: 0.85rem; min-height: 7rem; overflow: hidden; padding: 0.82rem; text-align: left; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease; } .schedule-builder-type-card[draggable="true"], .schedule-builder-block-card[draggable="true"], .schedule-builder-picker-row[draggable="true"] { cursor: grab; } .schedule-builder-type-card.is-dragging, .schedule-builder-block-card.is-dragging, .schedule-builder-picker-row.is-dragging { opacity: 0.56; transform: scale(0.985); } .schedule-builder-type-card:hover, .schedule-builder-type-card:focus-visible, .schedule-builder-block-card:hover, .schedule-builder-block-card:focus-within { border-color: rgba(196, 181, 253, 0.36); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28), 0 0 28px rgba(124, 58, 237, 0.18); transform: translateY(-1px); } .schedule-builder-type-icon { align-items: center; aspect-ratio: 1; background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 44%), linear-gradient(135deg, rgba(124, 58, 237, 0.88), rgba(37, 99, 235, 0.78)); border: 1px solid rgba(216, 202, 255, 0.28); border-radius: 14px; box-shadow: 0 0 24px rgba(124, 58, 237, 0.22); color: white; display: inline-flex; flex: 0 0 2.5rem; font-weight: 760; justify-content: center; line-height: 1; } .schedule-builder-type-card strong, .schedule-builder-block-copy strong, .schedule-builder-editor-title strong, .schedule-builder-member-row strong { color: rgba(250, 252, 255, 0.96); display: block; font-size: 0.98rem; font-weight: 590; line-height: 1.16; } .schedule-builder-type-card small, .schedule-builder-block-copy small, .schedule-builder-member-row small, .schedule-builder-field-note { color: rgba(214, 226, 245, 0.66); display: block; font-size: 0.82rem; font-weight: 360; line-height: 1.35; margin-top: 0.18rem; } .schedule-builder-type-card span:not(.schedule-builder-type-icon) { display: block; min-width: 0; } .schedule-builder-type-card small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .schedule-builder-type-card em { color: rgba(177, 189, 212, 0.58); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 0.72rem; font-style: normal; line-height: 1.28; margin-top: 0.36rem; overflow: hidden; } .schedule-builder-block-card { background: linear-gradient(145deg, rgba(12, 27, 49, 0.98), rgba(5, 13, 27, 0.98)); border: 1px solid rgba(184, 204, 238, 0.13); border-radius: 18px; flex: 0 0 auto; overflow: hidden; transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .schedule-builder-block-card.is-selected { background: radial-gradient(circle at 0% 22%, color-mix(in srgb, var(--schedule-builder-accent) 22%, transparent), transparent 15rem), linear-gradient(145deg, rgba(18, 36, 66, 0.99), rgba(6, 15, 31, 0.99)); border-color: color-mix(in srgb, var(--schedule-builder-accent) 68%, rgba(255, 255, 255, 0.22)); box-shadow: 0 22px 52px rgba(0, 0, 0, 0.36), 0 0 0 1px color-mix(in srgb, var(--schedule-builder-accent) 28%, transparent), 0 0 42px color-mix(in srgb, var(--schedule-builder-accent) 26%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.055), inset 4px 0 0 color-mix(in srgb, var(--schedule-builder-accent) 82%, white 8%); transform: translateY(-1px); } .schedule-builder-block-card.is-drop-preview { border-color: rgba(125, 211, 252, 0.68) !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.3), 0 0 36px rgba(34, 211, 238, 0.24), inset 0 0 24px rgba(34, 211, 238, 0.08); } .schedule-builder-block-card.is-newly-added { animation: scheduleBuilderPulse 1150ms ease; } @keyframes scheduleBuilderPulse { 0% { box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.72), 0 0 44px rgba(168, 85, 247, 0.36); transform: translateY(-2px); } 100% { box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32), 0 0 0 rgba(168, 85, 247, 0); transform: translateY(0); } } .schedule-builder-block-main { align-items: center; background: transparent; border: 0; color: inherit; cursor: pointer; display: grid; gap: 0.75rem; grid-template-columns: auto minmax(0, 1fr) auto; padding: 0.78rem 0.9rem 0.58rem; text-align: left; width: 100%; } .schedule-builder-block-index { align-items: center; background: rgba(226, 232, 240, 0.12); border: 1px solid rgba(226, 232, 240, 0.18); border-radius: 999px; color: rgba(248, 250, 252, 0.9); display: inline-flex; font-weight: 680; height: 2rem; justify-content: center; width: 2rem; } .schedule-builder-block-copy { min-width: 0; } .schedule-builder-block-meta { color: rgba(214, 226, 245, 0.76); display: grid; gap: 0.32rem; justify-items: end; white-space: nowrap; } .schedule-builder-block-meta span { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 999px; font-size: 0.72rem; padding: 0.25rem 0.52rem; } .schedule-builder-block-meta .schedule-builder-target-badge { background: linear-gradient(135deg, color-mix(in srgb, var(--schedule-builder-accent) 38%, rgba(255, 255, 255, 0.08)), rgba(124, 58, 237, 0.18)); border-color: color-mix(in srgb, var(--schedule-builder-accent) 56%, rgba(255, 255, 255, 0.18)); color: rgba(250, 252, 255, 0.96); font-weight: 740; letter-spacing: 0.04em; text-transform: uppercase; } .schedule-builder-block-actions { align-items: center; border-top: 1px solid rgba(190, 207, 236, 0.08); display: flex; gap: 0.45rem; justify-content: flex-end; padding: 0.45rem 0.62rem 0.62rem; } .schedule-builder-block-items { background: rgba(2, 8, 18, 0.28); border-top: 1px solid rgba(190, 207, 236, 0.07); display: grid; gap: 0.35rem; max-height: 7.4rem; overflow: auto; padding: 0.52rem 0.8rem; } .schedule-builder-block-card.is-expanded .schedule-builder-block-items { max-height: 10.5rem; } .schedule-builder-block-items p, .schedule-builder-block-items em { color: rgba(214, 226, 245, 0.54); font-size: 0.74rem; font-style: normal; margin: 0; } .schedule-builder-block-item-row, .schedule-builder-picker-row { align-items: center; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; display: grid; gap: 0.5rem; grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; padding: 0.42rem 0.5rem; } .schedule-builder-block-item-row span:not(.schedule-builder-mini-icon), .schedule-builder-picker-row strong { color: rgba(247, 250, 255, 0.93); font-size: 0.78rem; font-weight: 560; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .schedule-builder-block-item-row small, .schedule-builder-picker-row small { color: rgba(214, 226, 245, 0.58); font-size: 0.7rem; text-transform: capitalize; } .schedule-builder-mini-icon { align-items: center; background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.24), transparent 48%), linear-gradient(135deg, rgba(124, 58, 237, 0.82), rgba(14, 165, 233, 0.58)); border: 1px solid rgba(216, 202, 255, 0.2); border-radius: 10px; color: white; display: inline-flex; font-size: 0.72rem; font-weight: 740; height: 1.72rem; justify-content: center; width: 1.72rem; } .schedule-builder-icon-button.danger { color: rgba(252, 165, 165, 0.92) !important; } .schedule-builder-estimate { align-items: center; background: radial-gradient(circle at 10% 20%, rgba(34, 211, 238, 0.14), transparent 16rem), linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(124, 58, 237, 0.10)); border: 1px solid rgba(125, 211, 252, 0.18); border-radius: 18px; display: flex; gap: 0.85rem; justify-content: space-between; margin-top: 0.85rem; padding: 0.9rem 1rem; } .schedule-builder-inline-editor { border-top: 1px solid rgba(190, 207, 236, 0.08); display: grid; gap: 0.68rem; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.78rem 0.9rem; } .schedule-builder-inline-editor label, .schedule-builder-advanced-settings label, .schedule-builder-settings-group label { display: grid; gap: 0.32rem; } .schedule-builder-inline-editor label span, .schedule-builder-advanced-settings label span, .schedule-builder-settings-group label span { color: rgba(214, 226, 245, 0.7); font-size: 0.68rem; font-weight: 720; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-builder-inline-editor input, .schedule-builder-inline-editor select, .schedule-builder-advanced-settings input, .schedule-builder-advanced-settings select, .schedule-builder-settings-group input, .schedule-builder-settings-group select { background: rgba(2, 8, 18, 0.82); border: 1px solid rgba(184, 204, 238, 0.14); border-radius: 11px; color: rgba(248, 250, 252, 0.94); min-height: 2.35rem; padding: 0.55rem 0.68rem; } .schedule-builder-settings-group { border-top: 1px solid rgba(190, 207, 236, 0.08); display: grid; gap: 0.68rem; grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 0.72rem; } .schedule-builder-settings-group p { color: rgba(199, 210, 254, 0.84); font-size: 0.74rem; font-weight: 700; grid-column: 1 / -1; letter-spacing: 0.08em; margin: 0; text-transform: uppercase; } .schedule-builder-advanced-settings { grid-column: 1 / -1; } .schedule-builder-advanced-settings summary { color: rgba(199, 210, 254, 0.84); cursor: pointer; font-size: 0.74rem; font-weight: 700; } .schedule-builder-advanced-settings > div { display: grid; gap: 0.68rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.65rem; } .schedule-builder-estimate span { color: rgba(199, 210, 254, 0.78); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .schedule-builder-estimate strong { color: rgba(250, 252, 255, 0.98); font-size: 1.25rem; font-weight: 620; } .schedule-builder-estimate small { color: rgba(214, 226, 245, 0.62); font-weight: 360; } .schedule-builder-editor-card { background: linear-gradient(150deg, rgba(14, 30, 56, 0.98), rgba(5, 13, 27, 0.98)); border: 1px solid rgba(184, 204, 238, 0.13); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); display: grid; gap: 0.85rem; padding: 0.95rem; } .schedule-builder-editor-title { align-items: center; display: flex; gap: 0.8rem; } .schedule-builder-editor-title p { color: rgba(199, 210, 254, 0.78); font-size: 0.72rem; font-weight: 720; letter-spacing: 0.08em; margin: 0 0 0.16rem; text-transform: uppercase; } .schedule-builder-editor label { display: grid; gap: 0.34rem; } .schedule-builder-editor label span, .schedule-builder-membership-heading strong { color: rgba(214, 226, 245, 0.74); font-size: 0.74rem; font-weight: 720; letter-spacing: 0.07em; text-transform: uppercase; } .schedule-builder-editor input, .schedule-builder-editor select { background: rgba(2, 8, 18, 0.82); border: 1px solid rgba(184, 204, 238, 0.14); border-radius: 12px; color: rgba(248, 250, 252, 0.94); min-height: 2.65rem; padding: 0.65rem 0.78rem; } .schedule-builder-editor input[readonly] { color: rgba(214, 226, 245, 0.62); } .schedule-builder-checkbox { align-items: center; display: flex !important; gap: 0.65rem !important; } .schedule-builder-checkbox input { min-height: 0; } .schedule-builder-membership { border-top: 1px solid rgba(190, 207, 236, 0.10); display: grid; gap: 0.72rem; margin-top: 0.2rem; padding-top: 0.85rem; } .schedule-builder-picker { background: radial-gradient(circle at 15% 0%, rgba(124, 58, 237, 0.16), transparent 12rem), linear-gradient(145deg, rgba(10, 22, 42, 0.9), rgba(2, 8, 18, 0.86)); border: 1px solid rgba(184, 204, 238, 0.12); border-radius: 16px; display: grid; gap: 0.68rem; padding: 0.75rem; } .schedule-builder-catalog-browser { display: grid; gap: 0.75rem; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; } .schedule-builder-catalog-summary { align-items: baseline; background: linear-gradient(135deg, rgba(124, 58, 237, 0.13), rgba(14, 165, 233, 0.07)); border: 1px solid rgba(196, 181, 253, 0.14); border-radius: 14px; display: flex; gap: 0.42rem; padding: 0.65rem 0.75rem; } .schedule-builder-catalog-summary strong { color: rgba(250, 252, 255, 0.96); font-size: 1.05rem; } .schedule-builder-catalog-summary span { color: rgba(214, 226, 245, 0.62); font-size: 0.8rem; } .schedule-builder-catalog-list { max-height: none; min-height: 0; } .schedule-builder-picker-heading { align-items: baseline; display: flex; gap: 0.6rem; justify-content: space-between; } .schedule-builder-picker-heading strong { color: rgba(250, 252, 255, 0.92); font-size: 0.83rem; font-weight: 620; } .schedule-builder-picker-heading span { color: rgba(214, 226, 245, 0.54); font-size: 0.72rem; text-align: right; } .schedule-builder-picker-controls { display: grid; gap: 0.55rem; grid-template-columns: minmax(0, 1fr) auto; } .schedule-builder-picker-list { display: grid; gap: 0.45rem; max-height: 17rem; overflow: auto; padding-right: 0.1rem; } .schedule-builder-picker-row { border-radius: 14px; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .schedule-builder-picker-row:hover, .schedule-builder-picker-row:focus-within { background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(14, 165, 233, 0.08)); border-color: rgba(196, 181, 253, 0.24); box-shadow: 0 0 20px rgba(124, 58, 237, 0.14); transform: translateY(-1px); } .schedule-builder-picker-row.is-added { opacity: 0.62; } .schedule-builder-membership-heading, .schedule-builder-add-item-row, .schedule-builder-member-row { align-items: center; display: flex; gap: 0.65rem; justify-content: space-between; } .schedule-builder-membership-heading span { background: rgba(124, 58, 237, 0.18); border: 1px solid rgba(196, 181, 253, 0.18); border-radius: 999px; color: rgba(237, 233, 254, 0.82); font-size: 0.72rem; padding: 0.26rem 0.58rem; } .schedule-builder-add-item-row select { min-width: 0; width: 100%; } .schedule-builder-member-list { display: grid; gap: 0.55rem; } .schedule-builder-member-row { background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 14px; padding: 0.65rem; } .schedule-builder-empty { align-items: center; background: rgba(7, 16, 31, 0.92); border: 1px dashed rgba(196, 181, 253, 0.24); border-radius: 18px; color: rgba(214, 226, 245, 0.62); display: flex; justify-content: center; min-height: 8rem; padding: 1rem; text-align: center; } .schedule-builder-empty.schedule-builder-compact-empty { background: linear-gradient(135deg, rgba(15, 23, 42, 0.36), rgba(2, 8, 20, 0.32)); border-color: rgba(148, 163, 184, 0.3); border-radius: 0.68rem; column-gap: 0.82rem; display: grid; grid-template-columns: auto minmax(0, 24rem); justify-content: center; min-height: clamp(3.9rem, 6.5vh, 4.9rem); padding: 0.62rem 0.82rem; row-gap: 0.08rem; text-align: left; } .schedule-builder-screen .secondary-button, .schedule-builder-screen button.secondary-button { background: linear-gradient(145deg, rgba(23, 38, 64, 0.96), rgba(8, 17, 31, 0.96)) !important; border: 1px solid rgba(190, 207, 236, 0.18) !important; color: rgba(234, 241, 252, 0.88) !important; } .schedule-builder-screen .secondary-button:hover, .schedule-builder-screen button.secondary-button:hover { background: linear-gradient(135deg, rgba(124, 58, 237, 0.34), rgba(14, 165, 233, 0.14)) !important; border-color: rgba(196, 181, 253, 0.34) !important; color: rgba(252, 253, 255, 0.98) !important; } .schedule-builder-screen .schedule-builder-icon-button.danger { background: linear-gradient(145deg, rgba(69, 18, 31, 0.72), rgba(20, 10, 19, 0.92)) !important; border-color: rgba(252, 165, 165, 0.18) !important; color: rgba(252, 165, 165, 0.92) !important; } .schedule-builder-accent-purple { --schedule-builder-accent: #a855f7; } .schedule-builder-accent-blue { --schedule-builder-accent: #38bdf8; } .schedule-builder-accent-green { --schedule-builder-accent: #34d399; } .schedule-builder-accent-amber { --schedule-builder-accent: #f59e0b; } .schedule-builder-accent-pink { --schedule-builder-accent: #f472b6; } .schedule-builder-accent-teal { --schedule-builder-accent: #2dd4bf; } .schedule-builder-accent-purple, .schedule-builder-accent-blue, .schedule-builder-accent-green, .schedule-builder-accent-amber, .schedule-builder-accent-pink, .schedule-builder-accent-teal { border-color: color-mix(in srgb, var(--schedule-builder-accent) 28%, rgba(184, 204, 238, 0.13)) !important; } .schedule-builder-accent-purple .schedule-builder-type-icon, .schedule-builder-accent-blue .schedule-builder-type-icon, .schedule-builder-accent-green .schedule-builder-type-icon, .schedule-builder-accent-amber .schedule-builder-type-icon, .schedule-builder-accent-pink .schedule-builder-type-icon, .schedule-builder-accent-teal .schedule-builder-type-icon { background: radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 44%), linear-gradient(135deg, var(--schedule-builder-accent), rgba(67, 56, 202, 0.78)); box-shadow: 0 0 24px color-mix(in srgb, var(--schedule-builder-accent) 30%, transparent); } @media (max-width: 1100px) { .schedule-builder-grid { height: auto; grid-template-columns: 1fr; } .schedule-builder-header, .schedule-builder-estimate, .schedule-builder-add-item-row { align-items: stretch; flex-direction: column; } .schedule-builder-status { text-align: left; } .schedule-builder-type-list, .schedule-builder-block-list, .schedule-builder-editor { max-height: none; } } @media (max-width: 720px) { .schedule-builder-screen { border-radius: 18px !important; padding: 0.75rem !important; } .schedule-builder-block-main { grid-template-columns: auto minmax(0, 1fr); } .schedule-builder-block-meta { grid-column: 1 / -1; justify-items: start; padding-left: 2.75rem; } .schedule-builder-block-actions { flex-wrap: wrap; } .schedule-builder-inline-editor, .schedule-builder-advanced-settings > div, .schedule-builder-settings-group { grid-template-columns: 1fr; } } /* Practice schedule journey compression: keep the new block strip visible without disturbing the metronome, countdown, or recorder sizing. */ body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .current-item-references-box, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-companion-grid + .current-item-references-box { margin-bottom: 0 !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner.schedule-journey-banner { margin-top: 0.42rem !important; padding: 0.62rem 0.7rem !important; border-radius: 18px !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading { gap: 0.65rem !important; margin-bottom: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading span { font-size: 0.6rem !important; letter-spacing: 0.075em !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading strong { font-size: 0.86rem !important; line-height: 1.08 !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading > button { min-height: 2.25rem !important; padding: 0.42rem 0.68rem !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-blocks { gap: 0.45rem !important; padding-bottom: 0.04rem !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-chip { grid-template-columns: auto minmax(7.6rem, 1fr) !important; min-width: 11.1rem !important; padding: 0.48rem 0.58rem !important; border-radius: 14px !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-chip > span { width: 1.58rem !important; height: 1.58rem !important; font-size: 0.72rem !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-chip strong { font-size: 0.8rem !important; line-height: 1.08 !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-chip small { font-size: 0.66rem !important; line-height: 1.16 !important; } @media (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: clamp(16.75rem, 20.5vw, 21.25rem) !important; padding: clamp(1.25rem, 2vw, 1.85rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { gap: 0.48rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(1.95rem, 3vw, 3.45rem) !important; line-height: 1.06 !important; } body:has(.practice-dashboard:not([hidden])) .practice-action-strip.hero-actions { gap: 0.42rem !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner.schedule-journey-banner { align-items: center !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: minmax(9rem, 0.5fr) minmax(0, 1fr) auto !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading { display: contents !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading > div { grid-column: 1 !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-heading > button { grid-column: 3 !important; grid-row: 1 !important; } body:has(.practice-dashboard:not([hidden])) .schedule-journey-blocks { grid-column: 2 !important; grid-row: 1 !important; } } /* Practice dashboard vertical-space cleanup: final live override loaded after base styles. */ @media (min-width: 761px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player { gap: clamp(0.48rem, 0.7vw, 0.68rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card { min-height: clamp(14.25rem, 18.2vw, 17rem) !important; padding: clamp(0.95rem, 1.45vw, 1.45rem) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card .practice-focus-copy { box-sizing: border-box !important; display: grid !important; gap: 0.34rem !important; max-width: min(51rem, 100%) !important; padding: 0 !important; width: min(51rem, 100%) !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card h3#currentItemName { font-size: clamp(1.82rem, 2.55vw, 3.05rem) !important; line-height: 1.045 !important; max-width: min(100%, 48rem) !important; width: auto !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player > .practice-focus-card #currentItemDescription { max-width: min(100%, 42rem) !important; width: auto !important; } } /* Library two-panel experiment: picker + full item workspace. */ body:has(.organize-catalog-workspace) .organize-catalog-layout { align-items: stretch !important; display: grid !important; gap: 0.95rem !important; grid-template-columns: minmax(19rem, 0.82fr) minmax(0, 1.88fr) !important; } body:has(.organize-catalog-workspace) .organize-catalog-actions { display: none !important; } body:has(.organize-catalog-workspace) .organize-catalog-viewer { min-width: 0 !important; overflow: auto !important; } body:has(.organize-catalog-workspace) .organize-catalog-viewer > .catalog-viewer-card { min-height: 100% !important; } body:has(.organize-catalog-workspace) .catalog-record-viewer-card .catalog-record-reference-panel, body:has(.organize-catalog-workspace) .catalog-viewer-card .catalog-relationship-panel, body:has(.organize-catalog-workspace) .catalog-viewer-card .catalog-attach-panel { margin-top: 0.9rem !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-panel .modal-catalog-lookup-header, body:has(.organize-catalog-workspace) .catalog-relationship-panel .modal-catalog-lookup-header, body:has(.organize-catalog-workspace) .catalog-attach-panel .modal-catalog-lookup-header { align-items: center !important; } @media (min-width: 1220px) { body:has(.organize-catalog-workspace) .organize-catalog-layout { grid-template-columns: minmax(20rem, 0.7fr) minmax(0, 1.9fr) !important; } } @media (max-width: 980px) { body:has(.organize-catalog-workspace) .organize-catalog-layout { grid-template-columns: minmax(0, 1fr) !important; } } /* Practice desktop sizing contract: keep Metronome, Countdown, and Recorder on one row. */ @media (min-width: 1120px) { body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid { align-items: stretch !important; display: grid !important; grid-auto-flow: row !important; grid-template-areas: "metronome timer recorder" "references references references" !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-template-rows: auto auto !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iMetronomeCard, .embedded-zonebeat-card, .metronome-card) { grid-area: metronome !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > :is(#p03iTimerCard, .compact-countdown-card, .countdown-card) { grid-area: timer !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > #quickRecordPanel { grid-area: recorder !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } body:has(.practice-dashboard:not([hidden])) .practice-dashboard #sessionPanel.practice-player .practice-companion-grid > .current-item-references-box { grid-area: references !important; max-width: none !important; min-width: 0 !important; width: 100% !important; } } /* Practice Notes panel cleanup: keep the drawer as the single interactive surface. */ #practiceNotesWorkspace.practice-notes-workspace { inset: 0 !important; opacity: 0 !important; pointer-events: none !important; position: fixed !important; transition: opacity 160ms ease !important; z-index: 90 !important; } body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace { opacity: 1 !important; pointer-events: none !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-scrim { background: rgba(2, 6, 16, 0.48) !important; inset: 0 !important; pointer-events: none !important; position: absolute !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer { box-sizing: border-box !important; display: grid !important; gap: 1rem !important; grid-template-rows: auto auto minmax(0, 1fr) auto !important; height: min(100vh, calc(100vh - 1.2rem)) !important; max-width: min(32rem, calc(100vw - 1.25rem)) !important; padding: 1.05rem !important; pointer-events: auto !important; position: absolute !important; right: 0.6rem !important; top: 0.6rem !important; transform: translateX(1rem) !important; transition: transform 180ms ease !important; width: min(32rem, calc(100vw - 1.25rem)) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer { transform: translateX(0) !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-header { align-items: start !important; display: flex !important; gap: 0.85rem !important; justify-content: space-between !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-header small, body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-header small { color: rgba(153, 246, 228, 0.94) !important; display: block !important; font-size: 0.72rem !important; font-weight: 800 !important; letter-spacing: 0.075em !important; line-height: 1.1 !important; margin: 0 0 0.18rem !important; text-transform: uppercase !important; text-shadow: 0 1px 10px rgba(20, 184, 166, 0.16) !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-header h3, body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-header h3 { color: rgba(248, 250, 252, 0.98) !important; font-size: clamp(1.15rem, 2.1vw, 1.55rem) !important; font-weight: 860 !important; letter-spacing: 0 !important; line-height: 1.08 !important; margin: 0 !important; text-shadow: 0 1px 14px rgba(2, 6, 23, 0.28) !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-summary, body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-summary { color: rgba(226, 232, 240, 0.84) !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-close { align-items: center !important; display: inline-flex !important; flex: 0 0 2.35rem !important; font-size: 0.95rem !important; height: 2.35rem !important; justify-content: center !important; max-width: 2.35rem !important; min-width: 2.35rem !important; padding: 0 !important; width: 2.35rem !important; } body.practice-notes-workspace-open [data-zb-pv2-action="notes"].is-notes-open { align-items: center !important; display: inline-flex !important; font-size: 0.68rem !important; height: 2.2rem !important; justify-content: center !important; left: 0.55rem !important; max-width: 2.9rem !important; min-width: 2.9rem !important; padding: 0 !important; position: fixed !important; top: 0.55rem !important; width: 2.9rem !important; z-index: 96 !important; } #practiceNotesWorkspace.practice-notes-workspace .practice-notes-drawer-body { min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-body { min-height: 0 !important; } #practiceNotesWorkspace .practice-notes-drawer-grid, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-grid { align-content: start !important; display: grid !important; gap: 0.85rem !important; grid-template-columns: 1fr !important; grid-template-rows: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; width: auto !important; z-index: auto !important; } #practiceNotesWorkspace :is(#currentItemNotesBox.practice-tool-card, #currentItemReminderBox.practice-tool-card, .practice-notes-history-panel), body.practice-notes-workspace-open #practiceNotesWorkspace :is(#currentItemNotesBox.practice-tool-card, #currentItemReminderBox.practice-tool-card, .practice-notes-history-panel) { align-content: start !important; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.06), transparent 10rem), linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.034)) !important; border: 1px solid rgba(221, 230, 247, 0.13) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055) !important; box-sizing: border-box !important; display: grid !important; gap: 0.7rem !important; margin: 0 !important; min-height: 0 !important; padding: 0.95rem !important; width: 100% !important; } #practiceNotesWorkspace #currentItemNotesBox.practice-tool-card { order: 1 !important; } #practiceNotesWorkspace #currentItemReminderBox.practice-tool-card { order: 2 !important; } #practiceNotesWorkspace .practice-notes-history-panel { order: 3 !important; } #practiceNotesWorkspace :is(.current-item-notes-header, .practice-notes-history-heading), body.practice-notes-workspace-open #practiceNotesWorkspace :is(.current-item-notes-header, .practice-notes-history-heading) { display: grid !important; gap: 0.22rem !important; margin: 0 !important; padding: 0 !important; } #practiceNotesWorkspace #currentItemReminderBox summary, body.practice-notes-workspace-open #practiceNotesWorkspace #currentItemReminderBox summary { align-items: center !important; display: flex !important; gap: 0.5rem !important; justify-content: space-between !important; margin: 0 !important; padding: 0 !important; } #practiceNotesWorkspace :is(.current-item-notes-header label, #currentItemReminderBox summary span:first-child, .practice-notes-history-heading span), body.practice-notes-workspace-open #practiceNotesWorkspace :is(.current-item-notes-header label, #currentItemReminderBox summary span:first-child, .practice-notes-history-heading span) { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.96rem !important; font-weight: 820 !important; line-height: 1.2 !important; margin: 0 !important; } #practiceNotesWorkspace :is(.current-item-notes-header > span, #currentItemReminderBox > p, .practice-notes-history-heading small, .practice-notes-history-empty), body.practice-notes-workspace-open #practiceNotesWorkspace :is(.current-item-notes-header > span, #currentItemReminderBox > p, .practice-notes-history-heading small, .practice-notes-history-empty) { color: rgba(203, 213, 225, 0.68) !important; display: block !important; font-size: 0.78rem !important; line-height: 1.38 !important; margin: 0 !important; } #practiceNotesWorkspace .practice-notes-history-panel[aria-readonly="true"] { opacity: 0.96 !important; } #practiceNotesWorkspace .practice-notes-history-list, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-list { display: grid !important; gap: 0.55rem !important; max-height: min(20rem, 34vh) !important; overflow: auto !important; padding-right: 0.2rem !important; } #practiceNotesWorkspace .practice-notes-history-item, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-item { background: rgba(2, 7, 18, 0.2) !important; border: 1px solid rgba(221, 230, 247, 0.08) !important; border-left-color: rgba(148, 163, 184, 0.24) !important; border-radius: 12px !important; display: grid !important; gap: 0.24rem !important; padding: 0.68rem 0.72rem !important; } #practiceNotesWorkspace .practice-notes-history-empty, body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-history-empty { background: rgba(2, 7, 18, 0.2) !important; border: 1px solid rgba(221, 230, 247, 0.08) !important; border-radius: 12px !important; min-height: 0 !important; padding: 0.72rem !important; } /* Library detail empty-section cleanup: summarize missing content without large placeholder cards. */ body:has(.organize-catalog-workspace) .catalog-record-summary-chips { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.38rem !important; margin-top: 0.62rem !important; } body:has(.organize-catalog-workspace) .catalog-record-summary-chips span { background: rgba(15, 23, 42, 0.46) !important; border: 1px solid rgba(148, 163, 184, 0.14) !important; border-radius: 999px !important; color: rgba(226, 232, 240, 0.84) !important; font-size: 0.74rem !important; font-weight: 560 !important; line-height: 1.15 !important; padding: 0.26rem 0.58rem !important; white-space: nowrap !important; } body:has(.organize-catalog-workspace) .catalog-record-summary-chips span.is-present { background: rgba(20, 184, 166, 0.13) !important; border-color: rgba(94, 234, 212, 0.24) !important; color: rgba(204, 251, 241, 0.92) !important; } body:has(.organize-catalog-workspace) .catalog-record-summary-chips span.is-missing { background: rgba(245, 158, 11, 0.10) !important; border-color: rgba(251, 191, 36, 0.20) !important; color: rgba(253, 230, 138, 0.88) !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-status { align-items: center !important; background: linear-gradient(145deg, rgba(6, 18, 34, 0.58), rgba(3, 10, 20, 0.50)) !important; border: 1px solid rgba(137, 161, 204, 0.12) !important; border-radius: 12px !important; display: flex !important; flex-wrap: wrap !important; gap: 0.7rem !important; justify-content: space-between !important; padding: 0.62rem 0.7rem !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-status span { color: rgba(226, 232, 240, 0.78) !important; font-size: 0.82rem !important; line-height: 1.2 !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-status strong { color: rgba(248, 250, 252, 0.92) !important; font-weight: 620 !important; } body:has(.organize-catalog-workspace) .catalog-record-reference-status .secondary-button { min-height: 2.14rem !important; padding: 0.42rem 0.76rem !important; } body:has(.organize-catalog-workspace) .catalog-record-attached-list:empty { display: none !important; } /* ImportZone workspace optimization */ body:has(.importzone-screen:not([hidden])) .importzone-screen.card { min-height: calc(100vh - 7.5rem) !important; padding-bottom: 1rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-header { gap: 0.55rem !important; grid-template-columns: auto minmax(0, 1fr) auto auto !important; margin: -0.95rem -0.95rem 0.65rem !important; padding: 0.72rem 0.95rem 0.62rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-logo-mark { font-size: 0.9rem !important; height: 2rem !important; width: 2rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-header .screen-title { font-size: 1.28rem !important; line-height: 1.05 !important; } body:has(.importzone-screen:not([hidden])) .importzone-header .section-note { font-size: 0.82rem !important; line-height: 1.25 !important; margin-top: 0.12rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-stepper { gap: 0.42rem !important; grid-template-columns: repeat(3, auto) !important; justify-content: end !important; } body:has(.importzone-screen:not([hidden])) .importzone-stepper span { font-size: 0.78rem !important; gap: 0.3rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-stepper span:not(:last-child)::after { display: none !important; } body:has(.importzone-screen:not([hidden])) .importzone-stepper strong { height: 1.45rem !important; width: 1.45rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-return-button, body:has(.importzone-screen:not([hidden])) .importzone-unified-actions .secondary-button, body:has(.importzone-screen:not([hidden])) .importzone-stage-actions .secondary-button, body:has(.importzone-screen:not([hidden])) .importzone-save-footer .secondary-button { min-height: 2.15rem !important; padding: 0.42rem 0.74rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-shell { gap: 0.65rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-input-panel, body:has(.importzone-screen:not([hidden])) .importzone-preview-panel, body:has(.importzone-screen:not([hidden])) .importzone-actions-panel { gap: 0.62rem !important; padding: 0.78rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-input-panel { position: relative !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-input-panel { max-width: 76rem !important; width: min(100%, 76rem) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-panel-heading { display: none !important; } body:has(.importzone-screen:not([hidden])) .importzone-unified-actions { gap: 0.45rem !important; justify-content: flex-end !important; margin-bottom: 0 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-text-cleanup-row { left: 0.78rem !important; margin: 0 !important; position: absolute !important; top: 0.78rem !important; z-index: 2 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-text-cleanup-button { min-height: 2.15rem !important; padding: 0.42rem 0.7rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad { align-content: center !important; border-radius: 14px !important; gap: 0.7rem !important; padding: clamp(1.2rem, 2.6vw, 2.4rem) !important; transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad { background: radial-gradient(circle at 50% 6%, rgba(45, 212, 191, 0.22), transparent 20rem), radial-gradient(circle at 88% 0%, rgba(129, 140, 248, 0.20), transparent 19rem), radial-gradient(circle at 12% 100%, rgba(14, 165, 233, 0.10), transparent 18rem), linear-gradient(145deg, rgba(8, 24, 42, 0.88), rgba(4, 12, 24, 0.78)) !important; border: 1.5px dashed rgba(125, 211, 252, 0.52) !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.10), 0 30px 80px rgba(2, 8, 17, 0.34), 0 0 42px rgba(45, 212, 191, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 38px rgba(125, 211, 252, 0.035) !important; min-height: clamp(31rem, calc(100vh - 16rem), 48rem) !important; place-items: center stretch !important; text-align: center !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-message { align-content: center !important; display: grid !important; gap: 0.74rem !important; justify-items: center !important; justify-self: center !important; max-width: 52rem !important; width: min(100%, 52rem) !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-icon { background: linear-gradient(145deg, rgba(45, 212, 191, 0.34), rgba(99, 102, 241, 0.32)) !important; border-color: rgba(153, 246, 228, 0.45) !important; box-shadow: 0 20px 46px rgba(13, 148, 136, 0.20), 0 0 30px rgba(125, 211, 252, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.16) !important; font-size: 2rem !important; height: 4.75rem !important; line-height: 1 !important; width: 4.75rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-kicker { background: rgba(15, 23, 42, 0.42) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 999px !important; color: rgba(153, 246, 228, 0.92) !important; font-size: 0.72rem !important; font-weight: 740 !important; letter-spacing: 0.08em !important; line-height: 1 !important; padding: 0.38rem 0.66rem !important; text-transform: uppercase !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad strong { display: block !important; font-size: clamp(1.7rem, 3vw, 2.55rem) !important; font-weight: 780 !important; justify-self: center !important; line-height: 0.98 !important; max-width: 42rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-or { color: rgba(125, 211, 252, 0.72) !important; font-size: 0.84rem !important; font-weight: 650 !important; line-height: 1.45 !important; text-transform: uppercase !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad small { color: rgba(207, 219, 239, 0.78) !important; font-size: clamp(0.9rem, 1.18vw, 1.05rem) !important; justify-self: center !important; line-height: 1.5 !important; max-width: 44rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list { display: flex !important; flex-wrap: wrap !important; gap: 0.52rem !important; justify-content: center !important; list-style: none !important; margin: 0.12rem 0 0 !important; max-width: 46rem !important; padding: 0 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list [role="listitem"] { align-items: center !important; background: linear-gradient(145deg, rgba(15, 23, 42, 0.62), rgba(8, 18, 34, 0.50)) !important; border: 1px solid rgba(125, 211, 252, 0.19) !important; border-radius: 999px !important; color: rgba(235, 245, 255, 0.88) !important; display: inline-flex !important; font-size: 0.82rem !important; font-weight: 620 !important; gap: 0.42rem !important; line-height: 1.12 !important; padding: 0.36rem 0.66rem 0.36rem 0.42rem !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list [role="listitem"]::before { content: none !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list [role="listitem"] > span { align-items: center !important; background: rgba(45, 212, 191, 0.12) !important; border: 1px solid rgba(94, 234, 212, 0.18) !important; border-radius: 999px !important; display: inline-flex !important; height: 1.38rem !important; justify-content: center !important; width: 1.38rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-separator { align-items: center !important; color: rgba(125, 211, 252, 0.68) !important; display: grid !important; gap: 0.7rem !important; grid-template-columns: minmax(2.8rem, 1fr) auto minmax(2.8rem, 1fr) !important; margin-top: 0.15rem !important; max-width: 24rem !important; width: min(100%, 24rem) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-separator span { background: linear-gradient(90deg, transparent, rgba(125, 211, 252, 0.22), transparent) !important; height: 1px !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-separator b { background: rgba(15, 23, 42, 0.52) !important; border: 1px solid rgba(125, 211, 252, 0.16) !important; border-radius: 999px !important; color: rgba(203, 213, 225, 0.78) !important; font-size: 0.68rem !important; letter-spacing: 0.08em !important; line-height: 1 !important; padding: 0.34rem 0.48rem !important; text-transform: uppercase !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-prompt { color: rgba(226, 232, 240, 0.76) !important; font-size: 0.86rem !important; font-weight: 650 !important; line-height: 1.2 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-textarea { background: rgba(2, 8, 17, 0.48) !important; border: 1px solid rgba(148, 163, 184, 0.18) !important; border-radius: 14px !important; box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.032) !important; height: clamp(9rem, 19vh, 12.5rem) !important; min-height: clamp(9rem, 19vh, 12.5rem) !important; max-width: 54rem !important; padding: 1rem !important; width: min(100%, 54rem) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-textarea:focus { border-color: rgba(125, 211, 252, 0.42) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.20), 0 0 0 1px rgba(125, 211, 252, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad.is-file-drag-over { background: radial-gradient(circle at 50% 8%, rgba(45, 212, 191, 0.38), transparent 22rem), radial-gradient(circle at 82% 0%, rgba(96, 165, 250, 0.24), transparent 18rem), linear-gradient(145deg, rgba(6, 35, 47, 0.98), rgba(6, 20, 35, 0.88)) !important; border-color: rgba(94, 234, 212, 0.88) !important; box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.28), 0 28px 72px rgba(13, 148, 136, 0.28), 0 0 46px rgba(45, 212, 191, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important; transform: translateY(-1px) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad.is-file-drag-over .importzone-drop-icon { background: linear-gradient(135deg, rgba(45, 212, 191, 0.56), rgba(96, 165, 250, 0.46)) !important; border-color: rgba(204, 251, 241, 0.66) !important; box-shadow: 0 20px 44px rgba(13, 148, 136, 0.24), 0 0 26px rgba(94, 234, 212, 0.28) !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) .importzone-drop-message { display: none !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) .importzone-textarea { height: auto !important; min-height: clamp(28rem, calc(100vh - 18rem), 43rem) !important; max-width: 100% !important; width: 100% !important; } @media (max-width: 700px) { body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-screen.card { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad { gap: 0.46rem !important; min-height: auto !important; padding: 0.88rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-message { gap: 0.38rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-icon { font-size: 1.72rem !important; height: 3.25rem !important; width: 3.25rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad strong { font-size: clamp(1.32rem, 7.4vw, 1.72rem) !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-drop-pad small { font-size: 0.78rem !important; line-height: 1.36 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list { gap: 0.28rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list [role="listitem"] { font-size: 0.68rem !important; padding: 0.25rem 0.44rem 0.25rem 0.32rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-supported-list [role="listitem"] > span { height: 1.16rem !important; width: 1.16rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-separator { gap: 0.48rem !important; margin-top: 0 !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-paste-prompt { font-size: 0.8rem !important; } body:has(.importzone-screen[data-importzone-stage="intake"]:not([hidden])) .importzone-textarea { height: clamp(6.6rem, 15vh, 8rem) !important; min-height: clamp(6.6rem, 15vh, 8rem) !important; padding: 0.82rem !important; } body:has(.importzone-screen:not([hidden])) .importzone-drop-pad:has(.importzone-textarea:not(:placeholder-shown)) .importzone-textarea { height: auto !important; min-height: clamp(20rem, calc(100vh - 20rem), 34rem) !important; } } body:has(.importzone-screen:not([hidden])) .importzone-recent-panel, body:has(.importzone-screen:not([hidden])) .importzone-support-note { display: none !important; } body:has(.importzone-screen:not([hidden])) .importzone-bottom-bar { gap: 0.52rem !important; margin-top: 0.62rem !important; padding: 0.6rem 0.72rem !important; } body:has(.importzone-screen[data-importzone-stage="review"]:not([hidden])) .importzone-preview-panel { background: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.12), transparent 18rem), radial-gradient(circle at 96% 10%, rgba(251, 191, 36, 0.08), transparent 18rem), linear-gradient(145deg, rgba(8, 24, 42, 0.92), rgba(4, 12, 24, 0.96)) !important; border-color: rgba(125, 211, 252, 0.18) !important; box-shadow: 0 30px 82px rgba(2, 8, 17, 0.34), 0 0 38px rgba(45, 212, 191, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important; justify-self: center !important; max-width: 78rem !important; padding: clamp(0.9rem, 1.8vw, 1.25rem) !important; width: min(100%, 78rem) !important; } body:has(.importzone-screen[data-importzone-stage="review"]:not([hidden])) .importzone-panel-heading { align-items: center !important; border-bottom: 1px solid rgba(148, 163, 184, 0.10) !important; margin-bottom: 0.18rem !important; padding-bottom: 0.72rem !important; } body:has(.importzone-screen[data-importzone-stage="review"]:not([hidden])) .importzone-panel-heading h3 { font-size: clamp(1.25rem, 2vw, 1.72rem) !important; font-weight: 720 !important; line-height: 1.08 !important; } body:has(.importzone-screen[data-importzone-stage="review"]:not([hidden])) .importzone-panel-heading p { max-width: 38rem !important; } body:has(.importzone-screen[data-importzone-stage="review"]:not([hidden])) .importzone-detection-card { background: transparent !important; border: 0 !important; padding: 0 !important; } .importzone-guided-card { background: radial-gradient(circle at 16% 0%, rgba(45, 212, 191, 0.18), transparent 20rem), radial-gradient(circle at 88% 8%, rgba(129, 140, 248, 0.12), transparent 18rem), linear-gradient(145deg, rgba(11, 31, 52, 0.88), rgba(3, 12, 24, 0.94)) !important; border: 1px solid rgba(125, 211, 252, 0.22) !important; border-radius: 18px !important; box-shadow: 0 24px 72px rgba(0, 0, 0, 0.28), 0 0 42px rgba(45, 212, 191, 0.11), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; display: grid !important; gap: 1rem !important; padding: clamp(1rem, 2.1vw, 1.55rem) !important; } .importzone-guided-hero { align-items: center !important; display: grid !important; gap: 1rem !important; grid-template-columns: auto minmax(0, 1fr) auto !important; } .importzone-guided-icon { align-items: center !important; background: linear-gradient(145deg, rgba(45, 212, 191, 0.30), rgba(99, 102, 241, 0.24)) !important; border: 1px solid rgba(153, 246, 228, 0.35) !important; border-radius: 16px !important; box-shadow: 0 20px 42px rgba(13, 148, 136, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important; display: inline-flex !important; font-size: 2rem !important; height: 4.35rem !important; justify-content: center !important; width: 4.35rem !important; } .importzone-guided-kicker { color: rgba(153, 246, 228, 0.88) !important; display: block !important; font-size: 0.72rem !important; font-weight: 760 !important; letter-spacing: 0.08em !important; line-height: 1 !important; margin-bottom: 0.34rem !important; text-transform: uppercase !important; } .importzone-guided-hero h4 { color: rgba(203, 213, 225, 0.72) !important; font-size: 0.94rem !important; font-weight: 560 !important; line-height: 1.25 !important; margin: 0 0 0.2rem !important; } .importzone-guided-type { color: rgba(248, 250, 252, 0.98) !important; display: block !important; font-size: clamp(1.55rem, 3vw, 2.35rem) !important; font-weight: 780 !important; line-height: 1.04 !important; } .importzone-guided-confidence { align-content: center !important; background: rgba(2, 8, 17, 0.42) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 999px !important; display: grid !important; gap: 0.12rem !important; justify-items: center !important; min-width: 6.4rem !important; padding: 0.52rem 0.78rem !important; } .importzone-guided-confidence small { color: rgba(203, 213, 225, 0.62) !important; font-size: 0.66rem !important; font-weight: 700 !important; letter-spacing: 0.07em !important; line-height: 1 !important; text-transform: uppercase !important; } .importzone-guided-confidence strong { color: rgba(153, 246, 228, 0.96) !important; font-size: 0.94rem !important; font-weight: 760 !important; } .importzone-guided-why { background: rgba(2, 8, 17, 0.30) !important; border: 1px solid rgba(148, 163, 184, 0.12) !important; border-radius: 14px !important; display: grid !important; gap: 0.55rem !important; padding: 0.86rem 0.95rem !important; } .importzone-guided-why > strong, .importzone-guided-title-card > span, .importzone-guided-preview-card > span { color: rgba(153, 246, 228, 0.82) !important; font-size: 0.72rem !important; font-weight: 740 !important; letter-spacing: 0.07em !important; line-height: 1 !important; text-transform: uppercase !important; } .importzone-guided-why ul { display: grid !important; gap: 0.32rem !important; list-style: none !important; margin: 0 !important; padding: 0 !important; } .importzone-guided-why li { color: rgba(226, 232, 240, 0.84) !important; font-size: 0.93rem !important; line-height: 1.42 !important; padding-left: 1.15rem !important; position: relative !important; } .importzone-guided-why li::before { background: rgba(45, 212, 191, 0.84) !important; border-radius: 999px !important; content: "" !important; height: 0.38rem !important; left: 0.12rem !important; position: absolute !important; top: 0.52rem !important; width: 0.38rem !important; } .importzone-guided-detected { display: grid !important; gap: 0.75rem !important; grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr) !important; } .importzone-guided-title-card, .importzone-guided-preview-card { background: linear-gradient(145deg, rgba(15, 23, 42, 0.56), rgba(8, 18, 34, 0.46)) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 14px !important; display: grid !important; gap: 0.55rem !important; min-width: 0 !important; padding: 0.86rem 0.95rem !important; } .importzone-guided-title-card strong { color: rgba(248, 250, 252, 0.96) !important; display: block !important; font-size: clamp(1.06rem, 1.6vw, 1.34rem) !important; font-weight: 700 !important; line-height: 1.18 !important; overflow-wrap: anywhere !important; } .importzone-guided-preview-card ol { display: grid !important; gap: 0.26rem !important; margin: 0 !important; padding-left: 1.1rem !important; } .importzone-guided-preview-card li, .importzone-guided-preview-empty { color: rgba(226, 232, 240, 0.80) !important; font-size: 0.88rem !important; line-height: 1.38 !important; margin: 0 !important; } .importzone-guided-note { color: rgba(203, 213, 225, 0.72) !important; font-size: 0.92rem !important; line-height: 1.45 !important; margin: -0.12rem 0 0 !important; } .importzone-guided-question { align-items: center !important; background: linear-gradient(135deg, rgba(45, 212, 191, 0.12), rgba(251, 191, 36, 0.06)) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 14px !important; display: grid !important; gap: 0.8rem !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 0.85rem 0.95rem !important; } .importzone-guided-question strong { color: rgba(248, 250, 252, 0.95) !important; display: block !important; font-size: 1.03rem !important; font-weight: 740 !important; line-height: 1.18 !important; } .importzone-guided-question span { color: rgba(203, 213, 225, 0.72) !important; display: block !important; font-size: 0.84rem !important; line-height: 1.35 !important; margin-top: 0.16rem !important; } .importzone-guided-continue { min-width: 12rem !important; } .importzone-guided-choice-grid { display: grid !important; gap: 0.58rem !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .importzone-guided-choice { align-items: center !important; background: linear-gradient(145deg, rgba(15, 23, 42, 0.66), rgba(8, 18, 34, 0.56)) !important; border: 1px solid rgba(148, 163, 184, 0.16) !important; border-radius: 14px !important; color: rgba(238, 245, 255, 0.92) !important; cursor: pointer !important; display: grid !important; gap: 0.58rem !important; grid-template-columns: auto minmax(0, 1fr) !important; min-height: 4.65rem !important; padding: 0.72rem !important; text-align: left !important; } .importzone-guided-choice:hover, .importzone-guided-choice:focus-visible { border-color: rgba(125, 211, 252, 0.42) !important; box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.14), 0 14px 34px rgba(13, 148, 136, 0.12) !important; outline: 0 !important; } .importzone-guided-choice.is-selected { background: linear-gradient(145deg, rgba(20, 184, 166, 0.24), rgba(37, 99, 235, 0.18)) !important; border-color: rgba(94, 234, 212, 0.58) !important; box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.16), 0 16px 38px rgba(13, 148, 136, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.07) !important; } .importzone-guided-choice-icon { align-items: center !important; background: rgba(2, 8, 17, 0.44) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 999px !important; display: inline-flex !important; font-size: 0.98rem !important; height: 2rem !important; justify-content: center !important; width: 2rem !important; } .importzone-guided-choice.is-selected .importzone-guided-choice-icon { background: rgba(45, 212, 191, 0.22) !important; border-color: rgba(153, 246, 228, 0.48) !important; color: rgba(240, 253, 250, 0.98) !important; font-weight: 820 !important; } .importzone-guided-choice strong { color: rgba(248, 250, 252, 0.94) !important; display: block !important; font-size: 0.9rem !important; font-weight: 720 !important; line-height: 1.15 !important; } .importzone-guided-choice small { color: rgba(203, 213, 225, 0.64) !important; display: block !important; font-size: 0.76rem !important; line-height: 1.25 !important; margin-top: 0.14rem !important; } .importzone-guided-secondary-actions { display: flex !important; flex-wrap: wrap !important; gap: 0.52rem !important; } .importzone-guided-details, .importzone-original-import-card, .importzone-advanced-preview-details { background: rgba(2, 8, 17, 0.34) !important; border: 1px solid rgba(148, 163, 184, 0.13) !important; border-radius: 14px !important; display: grid !important; padding: 0 !important; } .importzone-guided-details summary, .importzone-original-import-card summary, .importzone-advanced-preview-details summary { align-items: center !important; color: rgba(226, 232, 240, 0.86) !important; cursor: pointer !important; display: grid !important; gap: 0.22rem 0.8rem !important; grid-template-columns: minmax(0, 1fr) auto !important; list-style: none !important; min-height: 3.15rem !important; padding: 0.76rem 0.9rem !important; } .importzone-guided-details summary::-webkit-details-marker, .importzone-original-import-card summary::-webkit-details-marker, .importzone-advanced-preview-details summary::-webkit-details-marker { display: none !important; } .importzone-guided-details summary::after, .importzone-original-import-card summary::after, .importzone-advanced-preview-details summary::after { align-items: center !important; background: rgba(15, 23, 42, 0.72) !important; border: 1px solid rgba(125, 211, 252, 0.18) !important; border-radius: 999px !important; color: rgba(153, 246, 228, 0.92) !important; content: "+" !important; display: inline-flex !important; font-size: 1rem !important; font-weight: 720 !important; height: 1.65rem !important; justify-content: center !important; line-height: 1 !important; width: 1.65rem !important; } .importzone-guided-details[open] summary::after, .importzone-original-import-card[open] summary::after, .importzone-advanced-preview-details[open] summary::after { content: "-" !important; } .importzone-guided-details summary span, .importzone-original-import-card summary span, .importzone-advanced-preview-details summary span { color: rgba(248, 250, 252, 0.92) !important; font-size: 0.84rem !important; font-weight: 720 !important; line-height: 1.2 !important; } .importzone-guided-details summary small, .importzone-original-import-card summary small, .importzone-advanced-preview-details summary small { color: rgba(203, 213, 225, 0.58) !important; font-size: 0.74rem !important; grid-column: 1 !important; line-height: 1.25 !important; } .importzone-guided-detail-grid { border-top: 1px solid rgba(148, 163, 184, 0.10) !important; display: grid !important; gap: 0.56rem !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; padding: 0.78rem 0.9rem 0.9rem !important; } .importzone-guided-detail-grid div { background: rgba(15, 23, 42, 0.40) !important; border: 1px solid rgba(148, 163, 184, 0.10) !important; border-radius: 10px !important; display: grid !important; gap: 0.24rem !important; min-width: 0 !important; padding: 0.58rem !important; } .importzone-guided-detail-grid span { color: rgba(153, 246, 228, 0.72) !important; font-size: 0.64rem !important; font-weight: 760 !important; letter-spacing: 0.06em !important; line-height: 1.1 !important; text-transform: uppercase !important; } .importzone-guided-detail-grid strong { color: rgba(226, 232, 240, 0.82) !important; font-size: 0.78rem !important; font-weight: 560 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } .importzone-original-import-card pre { border-top: 1px solid rgba(148, 163, 184, 0.10) !important; margin: 0 !important; max-height: 18rem !important; padding: 0.85rem 0.9rem !important; } .importzone-advanced-preview-details .importzone-preview-list { border-top: 1px solid rgba(148, 163, 184, 0.10) !important; padding: 0.85rem 0.9rem 0.95rem !important; } @media (max-width: 900px) { .importzone-guided-hero, .importzone-guided-question, .importzone-guided-detected { grid-template-columns: 1fr !important; } .importzone-guided-confidence { justify-self: start !important; } .importzone-guided-choice-grid { grid-template-columns: 1fr !important; } .importzone-guided-detail-grid { grid-template-columns: 1fr !important; } .importzone-guided-continue { justify-self: stretch !important; min-width: 0 !important; } } @media (max-width: 700px) { html:has(.importzone-screen:not([hidden])) { height: auto !important; min-height: 100vh !important; overflow: auto !important; } body:has(.importzone-screen:not([hidden])) { height: auto !important; min-height: 100vh !important; overflow: visible !important; } body:has(.importzone-screen:not([hidden])) .app-nav { display: none !important; } body:has(.importzone-screen:not([hidden])) .app-shell { height: auto !important; min-height: 100vh !important; overflow: visible !important; padding-bottom: 1rem !important; } body:has(.importzone-screen:not([hidden])) .card.app-screen.importzone-screen, body:has(.importzone-screen:not([hidden])) .importzone-screen.card { height: auto !important; max-height: none !important; overflow: visible !important; } } @media (max-width: 1180px) { body:has(.importzone-screen:not([hidden])) .importzone-header { grid-template-columns: auto minmax(0, 1fr) !important; } body:has(.importzone-screen:not([hidden])) .importzone-stepper { grid-column: 1 / -1 !important; justify-content: start !important; } } /* Active schedule rail lock: keep the practice journey as a sliding one-row strip. */ body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner.schedule-journey-banner, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner.schedule-journey-banner { box-sizing: border-box !important; overflow: hidden !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-blocks, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-blocks { align-items: stretch !important; display: flex !important; flex-wrap: nowrap !important; min-width: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain !important; scroll-behavior: smooth !important; scroll-padding-inline: 0.6rem !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-chip, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-chip { flex: 0 0 clamp(13.8rem, 22vw, 18rem) !important; max-width: 18rem !important; min-width: 13.8rem !important; scroll-snap-align: center !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-chip strong, body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-chip small, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-chip strong, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-chip small { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } @media (min-width: 900px) { body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner.schedule-journey-banner, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner.schedule-journey-banner { align-items: stretch !important; display: grid !important; gap: 0.62rem !important; grid-template-columns: minmax(13.75rem, 18rem) minmax(0, 1fr) !important; height: 6.35rem !important; max-height: 6.35rem !important; min-height: 6.35rem !important; padding: 0.62rem 0.7rem !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-heading, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-heading { align-items: center !important; display: grid !important; gap: 0.5rem !important; grid-column: 1 !important; grid-row: 1 !important; grid-template-columns: minmax(0, 1fr) auto !important; height: 100% !important; margin: 0 !important; min-height: 0 !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-heading > div, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-heading > div { align-self: center !important; grid-column: 1 !important; min-width: 0 !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-heading > button, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-heading > button { align-self: center !important; grid-column: 2 !important; grid-row: 1 !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-blocks, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-blocks { grid-column: 2 !important; grid-row: 1 !important; height: 100% !important; max-height: 100% !important; padding: 0.04rem 0.08rem 0.34rem !important; } body:has(.practice-dashboard:not([hidden])) #scheduleJourneyBanner .schedule-journey-chip, body:has(.practice-dashboard:not([hidden])) .practice-dashboard #scheduleJourneyBanner .schedule-journey-chip { align-self: stretch !important; height: calc(100% - 0.08rem) !important; } } /* Full schedule drawer readability: allow item titles to breathe instead of truncating immediately. */ body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-block > ol { gap: 0.54rem !important; } body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-item, body.practice-queue-workspace-open #practiceQueueWorkspaceList > .practice-queue-workspace-item { align-items: center !important; grid-template-columns: auto minmax(0, 1fr) auto !important; min-height: 4.35rem !important; padding: 0.78rem 0.84rem !important; } body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-copy { align-content: center !important; gap: 0.18rem !important; min-height: 2.7rem !important; } body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-copy strong { color: rgba(248, 250, 252, 0.94) !important; display: -webkit-box !important; font-size: 0.92rem !important; line-height: 1.2 !important; max-height: 2.42em !important; overflow: hidden !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; text-overflow: ellipsis !important; white-space: normal !important; } body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-copy small { font-size: 0.72rem !important; line-height: 1.18 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } body.practice-queue-workspace-open #practiceQueueWorkspace .practice-queue-workspace-actions { align-items: center !important; } /* Schedule Builder focused-block rows: contain wrapped text inside each item card. */ .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-item-row { align-items: center !important; grid-template-columns: auto auto minmax(0, 1fr) auto !important; min-height: 4.95rem !important; overflow: hidden !important; padding-block: 0.62rem !important; } .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy { align-content: center !important; gap: 0.16rem !important; min-width: 0 !important; overflow: hidden !important; } .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy strong { -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; display: -webkit-box !important; line-height: 1.16 !important; max-height: 2.35em !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: normal !important; } .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy small, .schedule-builder-screen .schedule-builder-advanced-block-row.is-focused .schedule-builder-advanced-row-copy em { display: block !important; line-height: 1.18 !important; max-width: 100% !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* Soft modal pilot: apply the warmer treatment only to Add/Edit Goal. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-modal-overlay, #editModalBackdrop.zb-soft-modal-overlay { background: radial-gradient(circle at 24% 16%, rgba(245, 158, 11, 0.1), transparent 18rem), radial-gradient(circle at 84% 12%, rgba(151, 162, 118, 0.08), transparent 20rem), rgba(5, 8, 14, 0.76) !important; -webkit-backdrop-filter: blur(12px) saturate(1.08) !important; backdrop-filter: blur(12px) saturate(1.08) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal { background-color: #222324 !important; background-image: radial-gradient(circle at 8% 0%, rgba(245, 158, 11, 0.09), transparent 18rem), radial-gradient(circle at 92% 12%, rgba(151, 162, 118, 0.055), transparent 20rem), linear-gradient(145deg, #2a2b2b 0%, #222324 48%, #151718 100%) !important; border: 1px solid rgba(224, 176, 104, 0.24) !important; box-shadow: inset 0 1px 0 rgba(242, 238, 230, 0.09), 0 34px 96px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(245, 158, 11, 0.04), 0 0 34px rgba(245, 158, 11, 0.065) !important; color: #f2eee6 !important; -webkit-text-fill-color: #f2eee6 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal > .modal-header.zb-soft-modal-header, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal > .modal-header.zb-soft-modal-header { background-color: #282827 !important; background-image: radial-gradient(circle at 12% 0%, rgba(245, 184, 91, 0.12), transparent 14rem), linear-gradient(135deg, rgba(45, 45, 43, 0.98), rgba(29, 30, 31, 0.98)) !important; border-bottom: 1px solid rgba(224, 176, 104, 0.18) !important; color: #f2eee6 !important; -webkit-text-fill-color: #f2eee6 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-subtitle, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-subtitle { color: rgba(255, 203, 126, 0.94) !important; -webkit-text-fill-color: rgba(255, 203, 126, 0.94) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-title, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-title { color: #f4f0e8 !important; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) !important; -webkit-text-fill-color: #f4f0e8 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-body, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-body { background: linear-gradient(180deg, rgba(232, 228, 220, 0.028), rgba(232, 228, 220, 0.008)) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .field-grid.zb-soft-modal-field > .field, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .field-grid.zb-soft-modal-field > .field { background: radial-gradient(circle at 0% 0%, rgba(232, 228, 220, 0.05), transparent 12rem), linear-gradient(145deg, rgba(49, 50, 51, 0.9), rgba(33, 34, 35, 0.9)) !important; border: 1px solid rgba(224, 176, 104, 0.13) !important; box-shadow: inset 0 1px 0 rgba(232, 228, 220, 0.055), 0 14px 32px rgba(0, 0, 0, 0.18) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-label, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-label, #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong), #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong) { color: rgba(242, 238, 230, 0.96) !important; -webkit-text-fill-color: rgba(242, 238, 230, 0.96) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta), #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta) { color: rgba(211, 207, 198, 0.76) !important; -webkit-text-fill-color: rgba(211, 207, 198, 0.76) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input), #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input) { background-color: rgba(238, 235, 228, 0.96) !important; background-image: linear-gradient(180deg, rgba(246, 244, 239, 0.97), rgba(231, 227, 219, 0.95)) !important; border: 1px solid rgba(224, 176, 104, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 9px 18px rgba(0, 0, 0, 0.14) !important; color: #232426 !important; color-scheme: light !important; caret-color: #956013 !important; -webkit-text-fill-color: #232426 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input)::placeholder, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input)::placeholder { color: rgba(96, 94, 89, 0.54) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(96, 94, 89, 0.54) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input):focus, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal :is(input.zb-soft-modal-input, select.zb-soft-modal-input, textarea.zb-soft-modal-input):focus { background-color: rgba(244, 241, 234, 0.98) !important; border-color: rgba(245, 184, 91, 0.86) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; color: #1f2021 !important; outline: none !important; -webkit-text-fill-color: #1f2021 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .goal-guidance-examples button, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-modal-overlay .modal-card.zb-soft-modal .goal-guidance-examples button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.18), transparent 4rem), linear-gradient(135deg, rgba(64, 64, 62, 0.82), rgba(45, 50, 47, 0.82)) !important; border: 1px solid rgba(224, 176, 104, 0.24) !important; color: #f2eee6 !important; -webkit-text-fill-color: #f2eee6 !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-footer, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-footer { background: linear-gradient(180deg, rgba(30, 31, 32, 0.98), rgba(20, 21, 22, 0.98)) !important; border-top: 1px solid rgba(224, 176, 104, 0.16) !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: #d58a2d !important; background-image: linear-gradient(135deg, #ffd18a, #d58a2d) !important; border: 1px solid rgba(255, 229, 184, 0.56) !important; color: #21160c !important; box-shadow: 0 14px 30px rgba(213, 138, 45, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; -webkit-text-fill-color: #21160c !important; } #addRecordModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-actions .secondary-button, #editModalBackdrop.zb-soft-modal-overlay .zb-soft-modal-actions .secondary-button { background-color: rgba(232, 228, 220, 0.08) !important; background-image: linear-gradient(135deg, rgba(232, 228, 220, 0.1), rgba(49, 50, 51, 0.42)) !important; border: 1px solid rgba(232, 228, 220, 0.15) !important; color: rgba(242, 238, 230, 0.88) !important; -webkit-text-fill-color: rgba(242, 238, 230, 0.88) !important; } } /* Soft Light Studio modal pilot: final Add/Edit Goal cascade override. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 23% 16%, rgba(245, 184, 91, 0.17), transparent 18rem), radial-gradient(circle at 84% 12%, rgba(94, 234, 212, 0.08), transparent 20rem), rgba(4, 7, 13, 0.76) !important; -webkit-backdrop-filter: blur(12px) saturate(1.05) !important; backdrop-filter: blur(12px) saturate(1.05) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #e7e0d3 !important; background-image: radial-gradient(circle at 8% 0%, rgba(245, 184, 91, 0.22), transparent 18rem), radial-gradient(circle at 94% 12%, rgba(255, 255, 255, 0.5), transparent 18rem), linear-gradient(145deg, #f1ece3 0%, #e7e0d3 50%, #d8d0c1 100%) !important; border: 1px solid rgba(124, 102, 67, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 34px 96px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 42px rgba(216, 145, 46, 0.12) !important; color: #25282d !important; color-scheme: light !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #eee7dc !important; background-image: radial-gradient(circle at 12% 0%, rgba(245, 184, 91, 0.22), transparent 14rem), linear-gradient(135deg, rgba(249, 245, 236, 0.99), rgba(225, 217, 205, 0.99)) !important; border-bottom: 1px solid rgba(216, 145, 46, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 255, 255, 0.42) !important; color: #25282d !important; -webkit-text-fill-color: #25282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle { color: #9c681d !important; -webkit-text-fill-color: #9c681d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong) { color: rgba(37, 40, 45, 0.94) !important; text-shadow: none !important; -webkit-text-fill-color: rgba(37, 40, 45, 0.94) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button { background-color: rgba(46, 45, 41, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(46, 45, 41, 0.05)) !important; border-color: rgba(46, 45, 41, 0.18) !important; color: #303238 !important; -webkit-text-fill-color: #303238 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: linear-gradient(180deg, rgba(255, 253, 248, 0.36), rgba(225, 217, 204, 0.18)) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field { background-color: #d4ccbe !important; background-image: radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.3), transparent 12rem), linear-gradient(145deg, rgba(218, 210, 198, 0.95), rgba(202, 193, 180, 0.92)) !important; border: 1px solid rgba(121, 105, 78, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54), 0 14px 32px rgba(49, 40, 26, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field { background: transparent !important; border: 0 !important; box-shadow: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta) { color: #68635a !important; -webkit-text-fill-color: #68635a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #fbfaf6 !important; background-image: linear-gradient(180deg, #fffdf9, #f1eee6) !important; border: 1px solid rgba(151, 119, 68, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 18px rgba(49, 40, 26, 0.11) !important; color: #22262b !important; color-scheme: light !important; caret-color: #9c681d !important; -webkit-text-fill-color: #22262b !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder { color: rgba(93, 88, 80, 0.58) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(93, 88, 80, 0.58) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus { background-color: #fffdf8 !important; border-color: rgba(216, 145, 46, 0.88) !important; box-shadow: 0 0 0 3px rgba(216, 145, 46, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; color: #1f2328 !important; outline: none !important; -webkit-text-fill-color: #1f2328 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button { background-color: rgba(255, 253, 248, 0.54) !important; background-image: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.42), transparent 5rem), linear-gradient(135deg, rgba(255, 253, 248, 0.52), rgba(216, 145, 46, 0.13)) !important; border: 1px solid rgba(151, 119, 68, 0.28) !important; color: #292c31 !important; -webkit-text-fill-color: #292c31 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer { background-color: #d7cebf !important; background-image: linear-gradient(180deg, rgba(219, 211, 198, 0.96), rgba(205, 196, 183, 0.98)) !important; border-top: 1px solid rgba(121, 105, 78, 0.24) !important; box-shadow: 0 -14px 30px rgba(49, 40, 26, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: #d8912e !important; background-image: linear-gradient(135deg, #ffd18a, #b8711e) !important; border: 1px solid rgba(255, 231, 191, 0.64) !important; color: #21160c !important; box-shadow: 0 14px 30px rgba(184, 113, 30, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.48) !important; -webkit-text-fill-color: #21160c !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button { background-color: rgba(48, 48, 44, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(48, 48, 44, 0.08)) !important; border: 1px solid rgba(48, 48, 44, 0.22) !important; color: #2f3338 !important; -webkit-text-fill-color: #2f3338 !important; } } /* Soft Light Studio modal pilot: cool teal color pass for Add/Edit Goal only. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 23% 16%, rgba(45, 212, 191, 0.18), transparent 18rem), radial-gradient(circle at 84% 12%, rgba(14, 165, 233, 0.08), transparent 20rem), rgba(4, 7, 13, 0.76) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #e3eeee !important; background-image: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.22), transparent 18rem), radial-gradient(circle at 94% 12%, rgba(255, 255, 255, 0.58), transparent 18rem), linear-gradient(145deg, #f3fbfa 0%, #e3eeee 50%, #d5e3e3 100%) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 34px 96px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.34), 0 0 42px rgba(20, 184, 166, 0.14) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #eaf6f5 !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.24), transparent 14rem), linear-gradient(135deg, rgba(248, 253, 252, 0.99), rgba(218, 235, 234, 0.99)) !important; border-bottom: 1px solid rgba(20, 184, 166, 0.32) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .goal-linked-items-box strong, .goal-guidance-examples strong) { color: rgba(32, 48, 54, 0.96) !important; -webkit-text-fill-color: rgba(32, 48, 54, 0.96) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button { background-color: rgba(15, 118, 110, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(15, 118, 110, 0.06)) !important; border-color: rgba(15, 118, 110, 0.2) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:hover, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button:focus-visible { background-color: rgba(20, 184, 166, 0.16) !important; border-color: rgba(15, 118, 110, 0.34) !important; color: #203036 !important; -webkit-text-fill-color: #203036 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: radial-gradient(circle at 0% 22%, rgba(45, 212, 191, 0.06), transparent 20rem), linear-gradient(180deg, rgba(249, 254, 253, 0.42), rgba(216, 234, 234, 0.2)) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples) { background-color: #d7e9e8 !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(226, 242, 241, 0.96), rgba(205, 225, 225, 0.93)) !important; border: 1px solid rgba(15, 118, 110, 0.22) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 14px 32px rgba(12, 74, 80, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field { background: transparent !important; border: 0 !important; box-shadow: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-list, .linked-goal-option, .warmup-role-toggle, .goal-example-picker), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-list, .linked-goal-option, .warmup-role-toggle, .goal-example-picker) { background-color: rgba(242, 253, 251, 0.48) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.44), rgba(45, 212, 191, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.16) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goal-option:hover, .linked-goal-option:focus-within), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goal-option:hover, .linked-goal-option:focus-within) { background-color: rgba(204, 251, 241, 0.64) !important; border-color: rgba(20, 184, 166, 0.36) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta) { color: #5e7375 !important; -webkit-text-fill-color: #5e7375 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #fbfefd !important; background-image: linear-gradient(180deg, #ffffff, #edf7f5) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #1f2f35 !important; caret-color: #0f766e !important; -webkit-text-fill-color: #1f2f35 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder { color: rgba(82, 104, 107, 0.62) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(82, 104, 107, 0.62) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus { background-color: #fdfffe !important; border-color: rgba(20, 184, 166, 0.84) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.92) !important; color: #17282d !important; -webkit-text-fill-color: #17282d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) { background-color: rgba(15, 118, 110, 0.08) !important; border-color: rgba(15, 118, 110, 0.22) !important; color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .goal-guidance-examples button { background-color: rgba(241, 253, 251, 0.62) !important; background-image: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.48), transparent 5rem), linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(20, 184, 166, 0.14)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer { background-color: #d4e5e4 !important; background-image: linear-gradient(180deg, rgba(220, 238, 237, 0.96), rgba(202, 224, 224, 0.98)) !important; border-top: 1px solid rgba(15, 118, 110, 0.22) !important; box-shadow: 0 -14px 30px rgba(12, 74, 80, 0.1) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: #14b8a6 !important; background-image: linear-gradient(135deg, #99f6e4, #0f766e) !important; border: 1px solid rgba(204, 251, 241, 0.66) !important; color: #042f2e !important; box-shadow: 0 14px 30px rgba(15, 118, 110, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; -webkit-text-fill-color: #042f2e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button { background-color: rgba(15, 118, 110, 0.08) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.38), rgba(15, 118, 110, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #21343a !important; -webkit-text-fill-color: #21343a !important; } } /* Soft Light Studio modal pilot: keep panel text readable on cool teal surfaces. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-mock, .goal-linked-items-box, .goal-guidance-examples) { color: #203036 !important; -webkit-text-fill-color: #203036 !important; } } /* Shared item editor light modal tuning: richer cool-teal studio surface. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 18% 14%, rgba(45, 212, 191, 0.2), transparent 19rem), radial-gradient(circle at 82% 8%, rgba(56, 189, 248, 0.1), transparent 22rem), radial-gradient(circle at 72% 88%, rgba(94, 234, 212, 0.08), transparent 24rem), rgba(3, 7, 18, 0.78) !important; -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08); } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { --zb-item-modal-ink: #172b31; --zb-item-modal-muted: #51686d; --zb-item-modal-teal: #0f766e; --zb-item-modal-teal-bright: #14b8a6; background-color: #d5e8ed !important; background-image: radial-gradient(circle at 7% 0%, rgba(45, 212, 191, 0.28), transparent 19rem), radial-gradient(circle at 90% 9%, rgba(255, 255, 255, 0.52), transparent 17rem), linear-gradient(145deg, #edf8f8 0%, #d9eaee 48%, #c6dce3 100%) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 36px 96px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(255, 255, 255, 0.24), 0 0 44px rgba(20, 184, 166, 0.16) !important; color: var(--zb-item-modal-ink) !important; color-scheme: light; -webkit-text-fill-color: var(--zb-item-modal-ink) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #dceff2 !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.3), transparent 14rem), linear-gradient(135deg, rgba(245, 252, 251, 0.98), rgba(205, 228, 234, 0.98)) !important; border-bottom: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 10px 24px rgba(12, 74, 80, 0.07) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-title { color: #14282e !important; text-shadow: none !important; -webkit-text-fill-color: #14282e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-subtitle { color: #0f766e !important; letter-spacing: 0.045em !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: radial-gradient(circle at 0% 20%, rgba(45, 212, 191, 0.08), transparent 20rem), linear-gradient(180deg, rgba(247, 253, 252, 0.34), rgba(197, 220, 227, 0.24)) !important; padding-bottom: clamp(1.4rem, 2.5vw, 2.2rem) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-form, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-form { color: var(--zb-item-modal-ink) !important; -webkit-text-fill-color: var(--zb-item-modal-ink) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field { background-color: rgba(205, 225, 231, 0.84) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.15), transparent 12rem), linear-gradient(145deg, rgba(229, 244, 245, 0.84), rgba(194, 216, 224, 0.74)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 12px 28px rgba(12, 74, 80, 0.09) !important; color: var(--zb-item-modal-ink) !important; -webkit-text-fill-color: var(--zb-item-modal-ink) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal #addRecordReferenceField.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal #modalReferencesBox.zb-soft-light-modal-field { background-color: rgba(202, 225, 231, 0.9) !important; background-image: radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.2), transparent 14rem), radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.38), transparent 14rem), linear-gradient(145deg, rgba(229, 244, 245, 0.94), rgba(191, 215, 224, 0.9)) !important; border: 1px solid rgba(15, 118, 110, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 16px 34px rgba(12, 74, 80, 0.12) !important; display: grid !important; gap: 0.85rem !important; margin-bottom: 0.75rem !important; padding: clamp(0.95rem, 1.8vw, 1.15rem) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .add-record-reference-launcher, #editModalBackdrop.zb-soft-light-modal-overlay .modal-catalog-lookup-header, #editModalBackdrop.zb-soft-light-modal-overlay .reference-direct-header, #addRecordModalBackdrop.zb-soft-light-modal-overlay .reference-direct-header { background-color: rgba(240, 251, 250, 0.66) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(45, 212, 191, 0.12)) !important; border: 1px solid rgba(15, 118, 110, 0.18) !important; border-radius: 16px !important; color: #173037 !important; -webkit-text-fill-color: #173037 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .add-record-reference-launcher { align-items: center !important; display: flex !important; gap: 1rem !important; justify-content: space-between !important; padding: 0.9rem 1rem !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .add-record-reference-launcher small, #editModalBackdrop.zb-soft-light-modal-overlay .modal-catalog-lookup-header small, #editModalBackdrop.zb-soft-light-modal-overlay .reference-direct-header span, #addRecordModalBackdrop.zb-soft-light-modal-overlay .reference-direct-header span { color: #557077 !important; -webkit-text-fill-color: #557077 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay :is(#addRecordReferenceToggle.secondary-button, .modal-references-box .secondary-button), #editModalBackdrop.zb-soft-light-modal-overlay .modal-references-box .secondary-button { background-color: rgba(226, 247, 245, 0.96) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #0b4f4a !important; opacity: 1 !important; -webkit-text-fill-color: #0b4f4a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay :is(#addRecordReferenceToggle.secondary-button, .modal-references-box .secondary-button):hover:not(:disabled), #editModalBackdrop.zb-soft-light-modal-overlay .modal-references-box .secondary-button:hover:not(:disabled) { background-color: rgba(204, 251, 241, 0.98) !important; border-color: rgba(13, 148, 136, 0.46) !important; color: #083f3a !important; -webkit-text-fill-color: #083f3a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .reference-add-grid, #editModalBackdrop.zb-soft-light-modal-overlay .reference-add-grid, #addRecordModalBackdrop.zb-soft-light-modal-overlay .catalog-selected-list, #editModalBackdrop.zb-soft-light-modal-overlay .catalog-selected-list, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-catalog-lookup, #editModalBackdrop.zb-soft-light-modal-overlay .modal-catalog-lookup { background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--zb-item-modal-ink) !important; -webkit-text-fill-color: var(--zb-item-modal-ink) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .catalog-selected-row, #editModalBackdrop.zb-soft-light-modal-overlay .catalog-selected-row, #addRecordModalBackdrop.zb-soft-light-modal-overlay .reference-row, #editModalBackdrop.zb-soft-light-modal-overlay .reference-row { background-color: rgba(238, 249, 248, 0.62) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(45, 212, 191, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.18) !important; color: #173037 !important; -webkit-text-fill-color: #173037 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-label, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .reference-direct-header strong, .modal-catalog-lookup-header strong, .add-record-reference-launcher strong, .goal-linked-items-box strong, .goal-guidance-examples strong, .desktop-timing-defaults-header h3, .things-focus-inline-box strong), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.linked-goals-header strong, .reference-direct-header strong, .modal-catalog-lookup-header strong, .add-record-reference-launcher strong, .goal-linked-items-box strong, .goal-guidance-examples strong, .desktop-timing-defaults-header h3, .things-focus-inline-box strong) { color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta, .desktop-timing-defaults-header p, .things-focus-inline-box small), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.field-help, .compact-field-help, .section-note, .reference-edit-note, .speech-field-hint, .linked-goals-header span, .goal-linked-items-box p, .goal-linked-items-box small, .goal-guidance-examples > span, .modal-intro, .linked-goals-empty, .record-meta, .desktop-timing-defaults-header p, .things-focus-inline-box small) { color: var(--zb-item-modal-muted) !important; -webkit-text-fill-color: var(--zb-item-modal-muted) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #f5fbfb !important; background-image: linear-gradient(180deg, #fbffff, #edf7f7) !important; border: 1px solid rgba(15, 118, 110, 0.3) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #152a30 !important; color-scheme: light !important; caret-color: var(--zb-item-modal-teal) !important; -webkit-text-fill-color: #152a30 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input)::placeholder { color: rgba(69, 91, 96, 0.64) !important; opacity: 1 !important; -webkit-text-fill-color: rgba(69, 91, 96, 0.64) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input):focus { background-color: #fbffff !important; border-color: rgba(20, 184, 166, 0.88) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; color: #10252a !important; outline: none !important; -webkit-text-fill-color: #10252a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) { background-color: rgba(226, 247, 245, 0.9) !important; border-color: rgba(15, 118, 110, 0.28) !important; color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .modal-close-button { background-color: rgba(226, 247, 245, 0.82) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.54), rgba(20, 184, 166, 0.12)) !important; border-color: rgba(15, 118, 110, 0.26) !important; color: #173037 !important; -webkit-text-fill-color: #173037 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-footer { background-color: rgba(202, 222, 228, 0.97) !important; background-image: linear-gradient(180deg, rgba(221, 239, 240, 0.97), rgba(194, 215, 223, 0.99)) !important; border-top: 1px solid rgba(15, 118, 110, 0.26) !important; box-shadow: 0 -12px 26px rgba(12, 74, 80, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.42) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions button:not(.secondary-button):not(.danger-button):not(.danger-solid-button) { background-color: var(--zb-item-modal-teal-bright) !important; background-image: linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border: 1px solid rgba(204, 251, 241, 0.72) !important; box-shadow: 0 14px 30px rgba(15, 118, 110, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-actions .secondary-button { background-color: rgba(237, 247, 247, 0.68) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(15, 118, 110, 0.08)) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; color: #173037 !important; -webkit-text-fill-color: #173037 !important; } } /* Shared item editor final tuning: richer depth and collapsed optional guidance. */ @media (min-width: 761px) { #addRecordModalBackdrop.zb-soft-light-modal-overlay, #editModalBackdrop.zb-soft-light-modal-overlay { background: radial-gradient(circle at 18% 14%, rgba(45, 212, 191, 0.24), transparent 20rem), radial-gradient(circle at 84% 9%, rgba(56, 189, 248, 0.13), transparent 23rem), radial-gradient(circle at 72% 88%, rgba(94, 234, 212, 0.1), transparent 24rem), rgba(3, 7, 18, 0.8) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #c7dfe6 !important; background-image: radial-gradient(circle at 7% 0%, rgba(45, 212, 191, 0.34), transparent 20rem), radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.46), transparent 18rem), linear-gradient(145deg, #e5f4f5 0%, #cfe3ea 48%, #b8d2dc 100%) !important; border-color: rgba(15, 118, 110, 0.38) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 38px 100px rgba(0, 0, 0, 0.54), 0 0 0 1px rgba(255, 255, 255, 0.2), 0 0 48px rgba(20, 184, 166, 0.18) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #d3eaee !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.34), transparent 14rem), linear-gradient(135deg, rgba(240, 251, 250, 0.98), rgba(195, 222, 230, 0.98)) !important; border-bottom-color: rgba(15, 118, 110, 0.4) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: radial-gradient(circle at 0% 20%, rgba(45, 212, 191, 0.11), transparent 20rem), linear-gradient(180deg, rgba(236, 249, 248, 0.36), rgba(180, 207, 218, 0.28)) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop.zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field { background-color: rgba(216, 235, 239, 0.9) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 12rem), linear-gradient(145deg, rgba(236, 249, 249, 0.9), rgba(207, 228, 235, 0.84)) !important; border-color: rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.64), 0 14px 30px rgba(12, 74, 80, 0.11) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal #addRecordReferenceField.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal #modalReferencesBox.zb-soft-light-modal-field { background-color: rgba(214, 236, 240, 0.94) !important; background-image: radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.24), transparent 14rem), radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.42), transparent 14rem), linear-gradient(145deg, rgba(237, 250, 250, 0.96), rgba(202, 225, 233, 0.92)) !important; border-color: rgba(15, 118, 110, 0.34) !important; margin-bottom: 1rem !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #f8fdfd !important; background-image: linear-gradient(180deg, #ffffff, #eff8f8) !important; border-color: rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.94), 0 9px 20px rgba(12, 74, 80, 0.11) !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field { align-items: center !important; display: grid !important; gap: 0.65rem !important; grid-template-columns: minmax(0, 1fr) auto !important; padding: 0.85rem 0.95rem !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field > span, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field > span, #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field .goal-example-picker, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field .goal-example-picker { grid-column: 1 / -1 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed { min-height: 3.15rem !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed > span, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed > span, #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed .goal-example-picker, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed .goal-example-picker { display: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-toggle, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-toggle { align-items: center !important; background-color: rgba(226, 247, 245, 0.96) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #0b4f4a !important; display: inline-flex !important; font-size: 0.78rem !important; font-weight: 850 !important; justify-content: center !important; justify-self: end !important; min-height: 2.05rem !important; padding: 0.34rem 0.72rem !important; -webkit-text-fill-color: #0b4f4a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-button, #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-button { background-color: rgba(245, 253, 252, 0.72) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(20, 184, 166, 0.1)) !important; border-color: rgba(15, 118, 110, 0.26) !important; } } /* Goal editor reference polish: slightly richer teal workspace and lighter inspiration row. */ @media (min-width: 761px) { #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal { background-color: #bfd9e2 !important; background-image: radial-gradient(circle at 7% 0%, rgba(45, 212, 191, 0.38), transparent 20rem), radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.42), transparent 18rem), linear-gradient(145deg, #e0f1f3 0%, #c9e0e8 48%, #afccd8 100%) !important; border-color: rgba(15, 118, 110, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 38px 104px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 50px rgba(20, 184, 166, 0.2) !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal > .modal-header.zb-soft-light-modal-header { background-color: #cfe8ee !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.38), transparent 14rem), linear-gradient(135deg, rgba(236, 250, 249, 0.98), rgba(188, 219, 229, 0.98)) !important; border-bottom-color: rgba(15, 118, 110, 0.44) !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .zb-soft-light-modal-body, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .zb-soft-light-modal-body { background: radial-gradient(circle at 0% 18%, rgba(45, 212, 191, 0.13), transparent 19rem), linear-gradient(180deg, rgba(232, 248, 247, 0.38), rgba(170, 201, 214, 0.3)) !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .zb-soft-light-modal-field:not(.field-grid), #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal .field-grid.zb-soft-light-modal-field > .field { background-color: rgba(221, 240, 244, 0.93) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.16), transparent 11rem), linear-gradient(145deg, rgba(239, 251, 251, 0.92), rgba(211, 232, 239, 0.86)) !important; border-color: rgba(15, 118, 110, 0.3) !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input), #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(input.zb-soft-light-modal-input, select.zb-soft-light-modal-input, textarea.zb-soft-light-modal-input) { background-color: #f9fefe !important; background-image: linear-gradient(180deg, #ffffff, #f1fafa) !important; border-color: rgba(15, 118, 110, 0.36) !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field { background-color: rgba(229, 244, 246, 0.74) !important; background-image: linear-gradient(135deg, rgba(247, 253, 253, 0.64), rgba(20, 184, 166, 0.08)) !important; border-color: rgba(15, 118, 110, 0.2) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 8px 18px rgba(12, 74, 80, 0.06) !important; grid-template-columns: minmax(0, 1fr) auto !important; min-height: 0 !important; padding: 0.62rem 0.78rem !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field.is-collapsed { align-items: center !important; grid-template-rows: auto !important; min-height: 2.75rem !important; row-gap: 0 !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field::after, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples.zb-soft-light-modal-field::after { content: none !important; display: none !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-toggle, #editModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay .goal-guidance-examples .goal-example-toggle { background-color: rgba(239, 251, 250, 0.82) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important; min-height: 1.9rem !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay #addRecordGoalIntro.zb-soft-light-modal-field { background-color: rgba(229, 244, 246, 0.72) !important; background-image: linear-gradient(135deg, rgba(248, 253, 253, 0.68), rgba(20, 184, 166, 0.08)) !important; border-color: rgba(15, 118, 110, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.56), 0 8px 18px rgba(12, 74, 80, 0.06) !important; font-size: 0.9rem !important; line-height: 1.45 !important; } #addRecordModalBackdrop[data-record-type="goal"].zb-soft-light-modal-overlay #addRecordGoalIntro.zb-soft-light-modal-field strong { color: #0f766e !important; margin-right: 0.35rem !important; -webkit-text-fill-color: #0f766e !important; } } /* Edit modal system completion: shared controls and secondary dialogs. */ #addRecordModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples[hidden], #editModalBackdrop.zb-soft-light-modal-overlay .goal-guidance-examples[hidden], #addRecordModalBackdrop:not([data-record-type="goal"]) .goal-guidance-examples, #editModalBackdrop:not([data-record-type="goal"]) .goal-guidance-examples { display: none !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) { align-items: center !important; background-color: rgba(222, 247, 246, 0.96) !important; background-image: radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.72), transparent 60%), linear-gradient(135deg, rgba(236, 253, 251, 0.96), rgba(20, 184, 166, 0.2)) !important; border: 1px solid rgba(15, 118, 110, 0.36) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74), 0 8px 18px rgba(12, 74, 80, 0.12) !important; color: #0b5f58 !important; display: inline-flex !important; justify-content: center !important; opacity: 1 !important; -webkit-text-fill-color: #0b5f58 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button):hover, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button):focus-visible, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button):hover, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button):focus-visible { background-color: rgba(204, 251, 241, 0.98) !important; border-color: rgba(13, 148, 136, 0.52) !important; box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18), 0 12px 24px rgba(12, 74, 80, 0.15) !important; color: #083f3a !important; -webkit-text-fill-color: #083f3a !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) svg, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.speech-mic-button, .text-cleanup-button) svg { color: currentColor !important; stroke: currentColor !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle), #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) { background-color: rgba(228, 244, 247, 0.82) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.13), transparent 10rem), linear-gradient(145deg, rgba(244, 253, 253, 0.78), rgba(207, 228, 235, 0.76)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; border-radius: 15px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 10px 22px rgba(12, 74, 80, 0.08) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) span, #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) strong, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) span, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) strong { color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) small, #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal :is(.checkbox-row, .compact-checkbox, .desktop-timing-checkbox, .warmup-role-toggle) small { color: #51686d !important; -webkit-text-fill-color: #51686d !important; } #addRecordModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal input[type="checkbox"], #editModalBackdrop.zb-soft-light-modal-overlay .modal-card.zb-soft-light-modal input[type="checkbox"] { accent-color: #0f766e !important; } #guidanceModalBackdrop:has(.collection-form-modal), #guidanceModalBackdrop:has(.catalog-quick-add-help-modal), #guidanceModalBackdrop.is-supporting-material-picker-modal { align-items: center !important; background: radial-gradient(circle at 20% 16%, rgba(45, 212, 191, 0.2), transparent 21rem), radial-gradient(circle at 86% 10%, rgba(56, 189, 248, 0.1), transparent 22rem), rgba(3, 7, 18, 0.82) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-card, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-card, #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-card { background-color: #b9d3dc !important; background-image: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.28), transparent 18rem), radial-gradient(circle at 92% 9%, rgba(255, 255, 255, 0.34), transparent 17rem), linear-gradient(145deg, #d6ebee 0%, #bfd9e2 48%, #a7c4d0 100%) !important; border: 1px solid rgba(15, 118, 110, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 38px 104px rgba(0, 0, 0, 0.58), 0 0 46px rgba(20, 184, 166, 0.18) !important; color: #14282e !important; color-scheme: light !important; -webkit-text-fill-color: #14282e !important; } #guidanceModalBackdrop:has(.collection-form-modal) .modal-header, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .modal-header, #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-header { background-color: #c8e3e9 !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.3), transparent 14rem), linear-gradient(135deg, rgba(232, 248, 247, 0.98), rgba(182, 213, 223, 0.98)) !important; border-bottom: 1px solid rgba(15, 118, 110, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 24px rgba(12, 74, 80, 0.08) !important; } #guidanceModalBackdrop:has(.collection-form-modal) .modal-header .eyebrow, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .modal-header .eyebrow, #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-header .eyebrow { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #guidanceModalBackdrop:has(.collection-form-modal) .modal-header h2, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .modal-header h2, #guidanceModalBackdrop.is-supporting-material-picker-modal .modal-header h2 { color: #14282e !important; text-shadow: none !important; -webkit-text-fill-color: #14282e !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-message, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-message, #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-message { border-bottom: 1px solid rgba(15, 118, 110, 0.24) !important; color: #51686d !important; -webkit-text-fill-color: #51686d !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-body, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-body, #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-body { background: radial-gradient(circle at 0% 20%, rgba(45, 212, 191, 0.1), transparent 18rem), linear-gradient(180deg, rgba(230, 247, 246, 0.34), rgba(166, 198, 211, 0.28)) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop:has(.collection-form-modal) :is(label, .collection-picker-row, .collection-create-inline, .catalog-quick-add-help-list article), #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) :is(label, .collection-picker-row, .collection-create-inline, .catalog-quick-add-help-list article), #guidanceModalBackdrop.is-supporting-material-picker-modal :is(.supporting-material-picker-controls, .supporting-material-picker-section, .supporting-material-picker-item) { background-color: rgba(221, 240, 244, 0.88) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 12px 26px rgba(12, 74, 80, 0.09) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop:has(.collection-form-modal) :is(input, textarea, select), #guidanceModalBackdrop.is-supporting-material-picker-modal :is(input, textarea, select) { background-color: #f7fdfd !important; background-image: linear-gradient(180deg, #ffffff, #eff8f8) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #152a30 !important; color-scheme: light !important; caret-color: #0f766e !important; -webkit-text-fill-color: #152a30 !important; } #guidanceModalBackdrop:has(.collection-form-modal) :is(input, textarea)::placeholder, #guidanceModalBackdrop.is-supporting-material-picker-modal :is(input, textarea)::placeholder { color: rgba(69, 91, 96, 0.64) !important; -webkit-text-fill-color: rgba(69, 91, 96, 0.64) !important; } #guidanceModalBackdrop:has(.collection-form-modal) :is(strong, h4, span), #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) :is(strong, h4, span), #guidanceModalBackdrop.is-supporting-material-picker-modal :is(strong, h4, span, .supporting-material-picker-copy strong, .supporting-material-picker-heading strong) { color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop:has(.collection-form-modal) :is(p, small, .collection-form-note), #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) :is(p, small), #guidanceModalBackdrop.is-supporting-material-picker-modal :is(p, small, .supporting-material-picker-copy small, .supporting-material-picker-heading small) { color: #51686d !important; -webkit-text-fill-color: #51686d !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-actions, #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions { background-color: rgba(188, 213, 222, 0.98) !important; background-image: linear-gradient(180deg, rgba(212, 234, 237, 0.96), rgba(180, 205, 215, 0.99)) !important; border-top: 1px solid rgba(15, 118, 110, 0.28) !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .guidance-modal-actions button, #guidanceModalBackdrop.is-supporting-material-picker-modal :is(.guidance-modal-actions button, [data-supporting-material-choose]) { background-color: rgba(226, 247, 245, 0.96) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #0b4f4a !important; text-decoration: none !important; -webkit-text-fill-color: #0b4f4a !important; } #guidanceModalBackdrop:has(.collection-form-modal) .guidance-modal-actions button:not(.secondary-button), #guidanceModalBackdrop:has(.collection-form-modal) .collection-create-inline button, #guidanceModalBackdrop:has(.catalog-quick-add-help-modal) .catalog-quick-add-learn-more { background-color: #14b8a6 !important; background-image: linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border-color: rgba(204, 251, 241, 0.72) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; } .catalog-add-flow .catalog-add-flow-panel { background-color: #b9d3dc !important; background-image: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.28), transparent 18rem), linear-gradient(145deg, #d6ebee 0%, #bfd9e2 48%, #a7c4d0 100%) !important; border: 1px solid rgba(15, 118, 110, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 30px 84px rgba(0, 0, 0, 0.44) !important; color: #14282e !important; -webkit-text-fill-color: #14282e !important; } .catalog-add-flow .catalog-add-flow-header { background: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.24), transparent 14rem), linear-gradient(135deg, rgba(232, 248, 247, 0.98), rgba(182, 213, 223, 0.98)) !important; border-bottom-color: rgba(15, 118, 110, 0.34) !important; } .catalog-add-flow :is(.catalog-add-choice, .catalog-add-reference-form, .organize-catalog-add-grid label) { background-color: rgba(221, 240, 244, 0.88) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } .catalog-add-flow :is(input, select, textarea) { background-color: #f7fdfd !important; background-image: linear-gradient(180deg, #ffffff, #eff8f8) !important; border-color: rgba(15, 118, 110, 0.34) !important; color: #152a30 !important; -webkit-text-fill-color: #152a30 !important; } /* Explicit secondary edit/picker state classes outrank older dark dialog rules. */ #guidanceModalBackdrop.is-secondary-light-modal { align-items: center !important; background: radial-gradient(circle at 20% 16%, rgba(45, 212, 191, 0.22), transparent 21rem), radial-gradient(circle at 86% 10%, rgba(56, 189, 248, 0.12), transparent 22rem), rgba(3, 7, 18, 0.82) !important; } #guidanceModalBackdrop.is-secondary-light-modal .modal-card.guidance-modal-card { background-color: #b9d3dc !important; background-image: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.3), transparent 18rem), radial-gradient(circle at 92% 9%, rgba(255, 255, 255, 0.34), transparent 17rem), linear-gradient(145deg, #d6ebee 0%, #bfd9e2 48%, #a7c4d0 100%) !important; border: 1px solid rgba(15, 118, 110, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 38px 104px rgba(0, 0, 0, 0.58), 0 0 46px rgba(20, 184, 166, 0.18) !important; color: #14282e !important; color-scheme: light !important; -webkit-text-fill-color: #14282e !important; } #guidanceModalBackdrop.is-secondary-light-modal .modal-header { background-color: #c8e3e9 !important; background-image: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.32), transparent 14rem), linear-gradient(135deg, rgba(232, 248, 247, 0.98), rgba(182, 213, 223, 0.98)) !important; border-bottom: 1px solid rgba(15, 118, 110, 0.4) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 24px rgba(12, 74, 80, 0.08) !important; } #guidanceModalBackdrop.is-secondary-light-modal .modal-header .eyebrow { color: #0f766e !important; -webkit-text-fill-color: #0f766e !important; } #guidanceModalBackdrop.is-secondary-light-modal .modal-header h2, #guidanceModalBackdrop.is-secondary-light-modal #guidanceModalTitle { color: #14282e !important; text-shadow: none !important; -webkit-text-fill-color: #14282e !important; } #guidanceModalBackdrop.is-secondary-light-modal .guidance-modal-message { border-bottom: 1px solid rgba(15, 118, 110, 0.24) !important; color: #51686d !important; -webkit-text-fill-color: #51686d !important; } #guidanceModalBackdrop.is-secondary-light-modal .guidance-modal-body { background: radial-gradient(circle at 0% 20%, rgba(45, 212, 191, 0.1), transparent 18rem), linear-gradient(180deg, rgba(230, 247, 246, 0.34), rgba(166, 198, 211, 0.28)) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-secondary-light-modal .guidance-modal-actions { background-color: rgba(188, 213, 222, 0.98) !important; background-image: linear-gradient(180deg, rgba(212, 234, 237, 0.96), rgba(180, 205, 215, 0.99)) !important; border-top: 1px solid rgba(15, 118, 110, 0.28) !important; } #guidanceModalBackdrop.is-secondary-light-modal :is(input, textarea, select) { background-color: #f7fdfd !important; background-image: linear-gradient(180deg, #ffffff, #eff8f8) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #152a30 !important; color-scheme: light !important; caret-color: #0f766e !important; -webkit-text-fill-color: #152a30 !important; } #guidanceModalBackdrop.is-secondary-light-modal :is(input, textarea)::placeholder { color: rgba(69, 91, 96, 0.64) !important; -webkit-text-fill-color: rgba(69, 91, 96, 0.64) !important; } #guidanceModalBackdrop.is-secondary-light-modal .guidance-modal-actions button, #guidanceModalBackdrop.is-secondary-light-modal .secondary-button, #guidanceModalBackdrop.is-secondary-light-modal [data-supporting-material-choose] { background-color: rgba(226, 247, 245, 0.96) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; border-radius: 999px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #0b4f4a !important; text-decoration: none !important; text-shadow: none !important; -webkit-text-fill-color: #0b4f4a !important; } #guidanceModalBackdrop.is-secondary-light-modal .guidance-modal-actions button:not(.secondary-button), #guidanceModalBackdrop.is-secondary-light-modal .collection-create-inline button, #guidanceModalBackdrop.is-secondary-light-modal .catalog-quick-add-learn-more { background-color: #14b8a6 !important; background-image: linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border-color: rgba(204, 251, 241, 0.72) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; } #guidanceModalBackdrop.is-secondary-light-modal :is(label, .collection-picker-row, .collection-create-inline, .catalog-quick-add-help-list article, .supporting-material-picker-controls, .supporting-material-picker-section, .supporting-material-picker-item) { background-color: rgba(221, 240, 244, 0.88) !important; background-image: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.58), 0 12px 26px rgba(12, 74, 80, 0.09) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-secondary-light-modal :is(strong, h4, span, .supporting-material-picker-copy strong, .supporting-material-picker-heading strong) { color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-secondary-light-modal :is(p, small, .collection-form-note, .supporting-material-picker-copy small, .supporting-material-picker-heading small) { color: #51686d !important; -webkit-text-fill-color: #51686d !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls input, #guidanceModalBackdrop.is-supporting-material-picker-modal .supporting-material-picker-controls select { background-color: #f7fdfd !important; background-image: linear-gradient(180deg, #ffffff, #eff8f8) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; color: #152a30 !important; -webkit-text-fill-color: #152a30 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal .guidance-modal-actions .secondary-button, #guidanceModalBackdrop.is-supporting-material-picker-modal [data-supporting-material-choose] { background-color: rgba(226, 247, 245, 0.96) !important; background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; color: #0b4f4a !important; -webkit-text-fill-color: #0b4f4a !important; } #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .guidance-modal-actions button:not(.secondary-button), #guidanceModalBackdrop.is-collection-form-modal.is-secondary-light-modal .collection-create-inline button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem), linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border: 1px solid rgba(204, 251, 241, 0.72) !important; box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .guidance-modal-actions .secondary-button, #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal [data-supporting-material-choose] { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.46), transparent 4rem), linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68), 0 8px 18px rgba(12, 74, 80, 0.1) !important; color: #0b4f4a !important; text-decoration: none !important; -webkit-text-fill-color: #0b4f4a !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; margin: 0 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice { align-items: center !important; background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 11rem), linear-gradient(145deg, rgba(243, 253, 253, 0.92), rgba(202, 229, 236, 0.86)) !important; border: 1px solid rgba(15, 118, 110, 0.3) !important; border-radius: 16px !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 12px 28px rgba(12, 74, 80, 0.1) !important; color: #172b31 !important; display: grid !important; gap: 0.3rem 0.7rem !important; grid-template-columns: auto minmax(0, 1fr) !important; min-height: 5.1rem !important; padding: 0.86rem 0.95rem !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice strong { color: #172b31 !important; font-size: 0.96rem !important; font-weight: 820 !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice span:not(.catalog-add-choice-icon) { color: #51686d !important; font-size: 0.8rem !important; -webkit-text-fill-color: #51686d !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice-icon { background: linear-gradient(135deg, #5eead4, #38bdf8 52%, #6366f1) !important; border-radius: 12px !important; color: #ffffff !important; height: 2.45rem !important; place-items: center !important; width: 2.45rem !important; -webkit-text-fill-color: #ffffff !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .catalog-add-choice-icon svg { stroke: currentColor !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .organize-catalog-add-grid label { background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; border-radius: 14px !important; color: #172b31 !important; padding: 0.58rem !important; -webkit-text-fill-color: #172b31 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator :is(input, select) { background: linear-gradient(180deg, #ffffff, #eff8f8) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; color: #152a30 !important; -webkit-text-fill-color: #152a30 !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-resource-creator .speech-mic-button { background: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 34%), linear-gradient(135deg, rgba(20, 184, 166, 0.94), rgba(14, 116, 144, 0.96)) !important; border: 1px solid rgba(8, 97, 96, 0.42) !important; color: #f7fffb !important; -webkit-text-fill-color: #f7fffb !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .guidance-modal-body { padding-bottom: 1rem !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-picker-list { max-height: min(46vh, 25rem) !important; padding-bottom: 0.75rem !important; } #guidanceModalBackdrop.is-supporting-material-picker-modal.is-secondary-light-modal .supporting-material-picker-item { min-height: 3.2rem !important; padding: 0.5rem 0.62rem !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-panel.organize-catalog-add-panel { background: radial-gradient(circle at 8% 0%, rgba(45, 212, 191, 0.3), transparent 18rem), radial-gradient(circle at 92% 9%, rgba(255, 255, 255, 0.34), transparent 17rem), linear-gradient(145deg, #d6ebee 0%, #bfd9e2 48%, #a7c4d0 100%) !important; border-color: rgba(15, 118, 110, 0.42) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66), 0 38px 104px rgba(0, 0, 0, 0.5), 0 0 46px rgba(20, 184, 166, 0.16) !important; color: #14282e !important; -webkit-text-fill-color: #14282e !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-flow-header { background: radial-gradient(circle at 12% 0%, rgba(45, 212, 191, 0.3), transparent 14rem), linear-gradient(135deg, rgba(232, 248, 247, 0.98), rgba(182, 213, 223, 0.98)) !important; border-bottom-color: rgba(15, 118, 110, 0.4) !important; color: #14282e !important; -webkit-text-fill-color: #14282e !important; } body:has(.organize-catalog-workspace) .catalog-add-flow :is(.catalog-add-reference-form, .catalog-add-choice, .organize-catalog-add-grid label) { background: radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.14), transparent 12rem), linear-gradient(145deg, rgba(240, 251, 251, 0.82), rgba(204, 226, 234, 0.78)) !important; border: 1px solid rgba(15, 118, 110, 0.24) !important; color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice { align-items: center !important; min-height: 4.9rem !important; padding: 0.82rem 0.92rem !important; } body:has(.organize-catalog-workspace) .catalog-add-flow :is(.catalog-add-flow-header h3, .catalog-add-flow-header p, .catalog-add-reference-heading h4, .catalog-add-reference-heading p, .organize-catalog-add-grid span, .catalog-add-choice strong, .catalog-add-choice span) { color: #172b31 !important; -webkit-text-fill-color: #172b31 !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice-icon { background: linear-gradient(135deg, #5eead4, #38bdf8 52%, #6366f1) !important; border: 1px solid rgba(15, 118, 110, 0.28) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.52), 0 10px 22px rgba(12, 74, 80, 0.14) !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .catalog-add-choice span:not(.catalog-add-choice-icon) { color: #51686d !important; -webkit-text-fill-color: #51686d !important; } body:has(.organize-catalog-workspace) .catalog-add-flow .organize-catalog-add-grid :is(input, select) { background: linear-gradient(180deg, #ffffff, #eff8f8) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; color: #152a30 !important; -webkit-text-fill-color: #152a30 !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions .secondary-button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.46), transparent 4rem), linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(20, 184, 166, 0.18)) !important; border: 1px solid rgba(15, 118, 110, 0.34) !important; color: #0b4f4a !important; -webkit-text-fill-color: #0b4f4a !important; } body:has(.organize-catalog-workspace) .catalog-add-flow-actions .importzone-primary-button { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem), linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border-color: rgba(204, 251, 241, 0.72) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; } /* Session Memory drawer stabilization: medium note size, normal scrolling, no overlay stacking. */ body.practice-notes-workspace-open #practiceNotesWorkspace.practice-notes-workspace > .practice-notes-drawer, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) #practiceNotesWorkspace.practice-notes-workspace > .practice-notes-drawer { max-width: min(32rem, calc(100vw - 1rem)) !important; width: min(32rem, calc(100vw - 1rem)) !important; } body.practice-notes-workspace-open #practiceNotesWorkspace #currentItemNotesBox.practice-tool-card, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) #practiceNotesWorkspace #currentItemNotesBox.practice-tool-card { position: static !important; top: auto !important; z-index: auto !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) #practiceNotesWorkspace textarea#currentItemNotes { height: clamp(10rem, 24vh, 13rem) !important; min-height: clamp(10rem, 24vh, 13rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #practiceNotesWorkspace textarea#currentItemReminderNotes, body.practice-notes-workspace-open:has(.practice-dashboard:not([hidden])) #practiceNotesWorkspace textarea#currentItemReminderNotes { height: clamp(6rem, 16vh, 9rem) !important; min-height: clamp(6rem, 16vh, 9rem) !important; resize: vertical !important; } body.practice-notes-workspace-open #practiceNotesWorkspace :is(.session-notes-actions, .reminder-actions) { align-items: center !important; display: flex !important; flex-wrap: wrap !important; gap: 0.5rem !important; } body.practice-notes-workspace-open #practiceNotesWorkspace :is(.session-notes-actions, .reminder-actions) > button.secondary-button { min-height: 2.3rem !important; padding: 0.48rem 0.78rem !important; } body.practice-notes-workspace-open #practiceNotesWorkspace .practice-notes-drawer-body { scrollbar-gutter: stable both-edges !important; } .catalog-add-flow .catalog-add-flow-actions button.secondary-button.importzone-primary-button[data-catalog-create-entry] { background: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.38), transparent 4rem), linear-gradient(135deg, #7dd3fc, #14b8a6 42%, #0f766e) !important; border: 1px solid rgba(204, 251, 241, 0.72) !important; box-shadow: 0 14px 30px rgba(15, 118, 110, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.52) !important; color: #042f2e !important; -webkit-text-fill-color: #042f2e !important; }