/* public/navy-lime-theme.css */
/* Updated 2026-10-04: monochrome UI, lime rewards, 11px minimum UI type.
   This final theme keeps component behavior and rich-text author formatting. */
html:has(#app) body { background: var(--canvas); color: var(--ink); font-size: 15px; line-height: 1.45; }
:is(#app, dialog, .request-modal, .certification-camera) { color: var(--ink); font-size: 15px; }
:is(#app, dialog, .request-modal, .certification-camera) :where(:not(.ql-editor, .ql-editor *, .notice-rich, .notice-rich *)) { font-size: max(11px, 1em); }
:is(#app, dialog, .request-modal, .certification-camera) :where(h1, h2, h3, h4, strong, b):where(:not(.ql-editor *, .notice-rich *)) { font-weight: 600; }
:is(#app, dialog, .request-modal, .certification-camera) :where(h1):where(:not(.ql-editor *, .notice-rich *)) { font-size: 16px; line-height: 23px; letter-spacing: 0; }
:is(#app, dialog, .request-modal, .certification-camera) :where(h2, h3, h4):where(:not(.ql-editor *, .notice-rich *)) { font-size: 14px; line-height: 20px; letter-spacing: 0; }
:is(#app, dialog, .request-modal, .certification-camera) :where(small, .small, .muted, .meta, .field-hint, .field-note):where(:not(.ql-editor *, .notice-rich *)) { color: var(--muted); font-size: 12px; line-height: 18px; }
:is(#app, dialog, .request-modal, .certification-camera) :where(input, select, textarea) { color: var(--ink); font-size: 15px; }
:is(#app, dialog, .request-modal, .certification-camera) :where(input, select, textarea):focus { border-color: var(--primary); outline-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) :where(button, .button, a):focus-visible { outline-color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) :where(button, .button) { font-size: 14px; font-weight: 600; line-height: 20px; }
:is(#app, dialog, .request-modal, .certification-camera) :where(.button-small, .badge, .priority-tag, .event-genre) { font-size: 12px; line-height: 17px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.record-kind, .mine-verification-badge, .verification-ratio, .registration-image-representative, .session-performance-category, .session-performance-period, .opening-day-sites, .opening-day-sale, .opening-day-application .home-opening-counts, .performance-cancel) { font-size: 11px; line-height: 16px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-material-add, .performance-site-chips > *, .performance-detail-genre, .session-saved-link, .registration-image-kind-label, .registration-image-card select, .registration-image-heading > span, .opening-calendar-weekdays, .opening-calendar-date, .attendance-seat-tab, .attendance-photo-button, .attendance-section-heading > span, .attendance-progress, .seat-card-title, .seat-card-picked-caption, .seat-grid-summary, .seat-pick-order) { font-size: 12px; line-height: 18px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.field-label, label > span, .registration-label, .opening-field-label) { font-size: 14px; line-height: 20px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.registration-information-grid .opening-field-copy strong, .performance-session-dialog .session-form-row > .field-label, .performance-genre > span, .ticket-session-number, .performance-readonly-fields dt, .mine-verification-toggle, .admin-member-summary-action, .mine-verification-next, .member-record-main time, .member-record-side, .request-modal-subtitle, .opening-field-edit, .ticket-session-edit, .ticket-session-remove, .ticket-session-add, .performance-period-clear, .opening-calendar-add, .opening-calendar-today) { font-size: 12px; line-height: 18px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.ticket-session-date, .session-saved-summary, .performance-period-summary, .session-performance-details > div, .session-count-options button, .member-record-filters button) { font-size: 13px; line-height: 19px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.home-opening-list, .home-opening-item):focus-visible { outline-color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) :where(.section-head h2, .calendar-details h2, .ranking-card-head h2, .search-group h2, .attendance-section-heading h3) { font-size: 14px; line-height: 20px; }
:is(#app, dialog, .request-modal, .certification-camera) :where(.performance-opening-header h2, .performance-detail-heading h2, .session-performance-heading h2, .attendance-performance-heading h2, .request-modal-head h2, .session-modal-header h2) { font-size: 16px; line-height: 23px; }
:is(#app, .request-modal, .certification-camera) .shell { max-width: 430px; background: var(--canvas); }
:is(#app, .request-modal, .certification-camera) .main { padding-inline: 14px; }
:is(#app, .request-modal, .certification-camera) .request-flow-header { margin-inline: -14px; padding-inline: 14px; }
:is(#app, .request-modal, .certification-camera) .shell:not(.is-request-page) .calendar-card { width: auto; margin-inline: -14px; }
:is(#app, .request-modal, .certification-camera) :is(.card, .event-card, .session-card, .calendar-card, .calendar-details, .ranking-card, .search-group, .ticketing-item, .notice-post, .pass-production, .ticket-quick-card, .request-modal-card, .performance-card, .attendance-view) {
  color: var(--ink); border-color: var(--line); background: var(--surface); border-radius: 8px; box-shadow: none;
}
:is(#app, .request-modal, .certification-camera) :is(.registration-v8, .opening-calendar-page, .attendance-view) {
  --primary: #1a1a1a; --primary-deep: #000; --primary-soft: #ececec;
  --line: #dedede; --muted: #666; --surface: #fff;
  --opening-purple: var(--primary); --opening-sunday: var(--ink); --opening-saturday: var(--ink);
  --attendance-accent: var(--primary); --attendance-line: var(--line);
}
:is(#app, dialog, .request-modal, .certification-camera) :is(.button-primary, .ticket-link-form .button, .ticket-preview-continue, .performance-session-action[data-action="session-apply"], .performance-apply-fab, .performance-certify, .attendance-register, [data-action="quick-session-done"], .seat-card-actions [data-action="select"], .seat-card-actions [data-action="claim-leftover"]) {
  border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: none;
}
:is(#app, dialog, .request-modal, .certification-camera) :is(.button-ghost, .button-white, .button-green, .ticket-session-add, .ticket-quick-add-link, .performance-material-add, .session-saved-link, .production-seeya-link, .request-booking-links a, .performance-site-chips > *) {
  border-color: var(--line); background: var(--surface); color: var(--primary); box-shadow: none;
}
:is(#app, dialog, .request-modal, .certification-camera) :is(.button-primary, .attendance-register):hover:not(:disabled) { background: var(--primary-deep); border-color: var(--primary-deep); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.button-danger, .error, .participation-warning) { color: var(--error-ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.text-link, .section-head a, .request-back, .request-flow-header span, .ticket-session-date, .performance-date-value, .performance-period-summary, .performance-genre select, .admin-menu-arrow) { color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.nav-link.active, .request-phase.is-current, .selected-opening, .seat-count-chips button[aria-pressed="true"], .opening-categories button[aria-pressed="true"], .fixed-session-options [aria-pressed="true"], .session-count-options button[aria-pressed="true"], .ticketing-status-tabs button[aria-selected="true"], .opening-field-row.is-current, .attendance-session.is-selected, .attendance-seat-tab.is-selected) {
  border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
:is(#app, dialog, .request-modal, .certification-camera) :is(.request-phase.is-current .phase-number, .ticket-session-number) { background: var(--primary); color: #fff; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.production-info-opening, .ticket-preview-note, .registration-upload-tile, .session-performance-category, .session-performance-opening, .attendance-clock, .attendance-footer, .attendance-photo:has(.attendance-photo-empty)) {
  border-color: var(--line); background: var(--primary-soft); color: var(--primary);
}
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-attendance-admin > summary, .performance-authentication > summary, .member-record-admin[open] > summary) { color: var(--primary); background: var(--primary-soft); }
:is(#app, .request-modal, .certification-camera) .admin-mode-banner, html:has(.admin-mode-banner) dialog[open]::before { background: var(--primary); color: #fff; font-size: 12px; }

/* The approved compact header, metric strip and five destinations. */
:is(#app, .request-modal, .certification-camera) .site-pass-header { padding: calc(14px + env(safe-area-inset-top)) 14px 10px; border-color: var(--line); background: var(--surface); }
:is(#app, .request-modal, .certification-camera) :is(.pass-logo, .welcome-logo) { color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.7px; }
:is(#app, .request-modal, .certification-camera) :is(.pass-logo span, .welcome-logo span, .welcome-content h1 span) { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .pass-concept { color: var(--ink); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) :is(.pass-compare, .pass-view-toggle) { color: var(--primary); border-color: var(--line); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .site-pass-search { min-height: 40px; border-color: var(--line); background: var(--surface); }
:is(#app, .request-modal, .certification-camera) .site-pass-search input { height: 38px; font-size: 12px; color: var(--ink); }
:is(#app, .request-modal, .certification-camera) .site-pass-search input::placeholder { color: var(--muted); }
:is(#app, .request-modal, .certification-camera) .site-pass-search button { color: #fff; background: var(--primary); font-size: 12px; min-width: 48px; }
:is(#app, .request-modal, .certification-camera) :is(.pass-tool-link, .pass-menu-button) { min-height: 40px; height: 40px; border-color: var(--line); background: var(--surface); color: var(--ink); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .site-pass-tools { grid-template-columns: minmax(0,1fr) 40px; gap: 8px; }
:is(#app, .request-modal, .certification-camera) .site-pass-tools.has-admin { grid-template-columns: minmax(0,1fr) 40px 40px; }
:is(#app, .request-modal, .certification-camera) .pass-wallet { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 12px; border: 0; border-radius: 0; background: var(--surface); }
:is(#app, .request-modal, .certification-camera) .pass-wallet > span { min-height: 36px; padding: 3px 0; }
:is(#app, .request-modal, .certification-camera) .pass-wallet > span + span { border-left: 1px solid var(--line); }
:is(#app, .request-modal, .certification-camera) .pass-wallet > span + span::before { display: none; }
:is(#app, .request-modal, .certification-camera) .pass-wallet small { color: var(--muted); font-size: 11px; line-height: 16px; }
:is(#app, .request-modal, .certification-camera) .pass-wallet strong { color: var(--ink); font-size: 14px; line-height: 20px; }
:is(#app, .request-modal, .certification-camera) .pass-wallet strong em { font-size: 11px; }
#app .shell .bottom-tab { color: var(--muted); background: transparent; align-self: stretch; margin-top: 0; }
#app .shell .bottom-tab.active { color: #19a974; }
#app .shell .bottom-tab .bottom-tab-icon, #app .shell .bottom-tab.active .bottom-tab-icon { width: 36px; height: 36px; color: inherit; background: transparent; border-radius: 0; box-shadow: none; }
#app .shell .bottom-tab .bottom-tab-icon svg { width: 21px; height: 21px; stroke-width: 2; }

/* Home: black ticket with a gray stub, square poster strip and quiet ranking. */
:is(#app, .request-modal, .certification-camera) .pass-home { color: var(--ink); gap: 16px; }
:is(#app, .request-modal, .certification-camera) .pass-section-kicker > span, :is(#app, .request-modal, .certification-camera) .pass-section-heading h2 { color: var(--ink); font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0; }
:is(#app, .request-modal, .certification-camera) .pass-section-kicker a, :is(#app, .request-modal, .certification-camera) .pass-section-heading > a { color: var(--primary); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket { grid-template-columns: minmax(0,1fr) 108px; min-height: 160px; background: var(--primary); color: #fff; border-radius: 8px; animation: none; }
:is(#app, .request-modal, .certification-camera) .pass-ticket::before, :is(#app, .request-modal, .certification-camera) .pass-ticket::after { left: auto; right: 100px; width: 16px; height: 16px; background: var(--canvas); }
:is(#app, .request-modal, .certification-camera) .pass-ticket::before { top: -8px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket::after { bottom: -8px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-main { padding: 14px; background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-label { color: #fff; font-size: 11px; font-weight: 400; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-label::before { background: var(--surface); width: 6px; height: 6px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-date { font-size: 27px; line-height: 32px; font-weight: 700; letter-spacing: -.8px; margin-top: 9px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-weekday { color: #fff; font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-title { font-size: 15px; font-weight: 600; line-height: 21px; margin-top: 9px; word-break: keep-all; overflow-wrap: anywhere; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-venue, :is(#app, .request-modal, .certification-camera) .pass-ticket-main .registration-clock { color: #fff; font-size: 11px; line-height: 16px; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-stub { background: var(--ticket-seat); color: var(--ink); padding: 14px 12px; border-left-color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .pass-ticket-stub > span:first-child, :is(#app, .request-modal, .certification-camera) .pass-ticket-stub small { color: var(--ink); font-size: 11px; font-weight: 400; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-stub .pass-entry-number { color: var(--ink); font-size: 24px; font-weight: 700; line-height: 32px; letter-spacing: 0; }
:is(#app, .request-modal, .certification-camera) .pass-ticket-cta { width: 30px; height: 30px; background: var(--primary); color: #fff; font-size: 20px; }
:is(#app, .request-modal, .certification-camera) .pass-copy-code { color: var(--primary); font-size: 11px; font-weight: 600; }
:is(#app, .request-modal, .certification-camera) .pass-now-links > a { color: var(--ink); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .pass-now-links svg { color: #6b01c2; width: 16px; height: 16px; }
:is(#app, .request-modal, .certification-camera) .pass-now-links [data-action="home-today-requests"] strong { color: #6b01c2; }
:is(#app, .request-modal, .certification-camera) .home-opening-add { color: var(--primary); border-color: var(--primary); background: var(--surface); font-size: 12px; min-height: 32px; }
:is(#app, .request-modal, .certification-camera) .home-opening-art { aspect-ratio: 3/4; border-color: var(--line); background: var(--primary-soft); border-radius: 8px; }
:is(#app, .request-modal, .certification-camera) .home-opening-item:nth-child(even) .home-opening-art { background: var(--primary-soft); border-color: var(--line); }
:is(#app, .request-modal, .certification-camera) .home-opening-placeholder, :is(#app, .request-modal, .certification-camera) .home-opening-item:nth-child(even) .home-opening-placeholder { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .home-opening-placeholder small { font-size: 11px; opacity: 1; }
:is(#app, .request-modal, .certification-camera) .home-opening-date, :is(#app, .request-modal, .certification-camera) .home-opening-item h3 { font-size: 15px; font-weight: 600; line-height: 21px; }
:is(#app, .request-modal, .certification-camera) .home-opening-date { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .home-opening-item h3 { color: var(--ink); }
:is(#app, .request-modal, .certification-camera) .home-opening-item p { font-size: 11px; color: var(--muted); background: var(--canvas); }
:is(#app, .request-modal, .certification-camera) .home-opening-sale { background: #707070; color: #fff; font-size: 11px; line-height: 16px; }
:is(#app, .request-modal, .certification-camera) .home-opening-sale.is-presale { background: #4ade80; color: var(--reward-ink); }
:is(#app, .request-modal, .certification-camera) .home-opening-apply, :is(#app, .request-modal, .certification-camera) .opening-day-application .home-opening-apply { background: var(--primary-soft); color: var(--primary); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .home-opening-more { border-color: var(--primary); background: var(--surface); color: var(--primary); font-size: 12px; min-height: 35px; }
:is(#app, .request-modal, .certification-camera) .home-opening-more:hover { background: var(--primary-soft); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .home-opening-arrow { background: var(--surface); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .home-opening-apply.is-requestable { border: 1px solid #3ecf8e; background: #fff; color: #3ecf8e; }
:is(#app, .request-modal, .certification-camera) .pass-ranking { background: var(--surface); border-color: var(--line); border-radius: 8px; padding: 12px; }
:is(#app, .request-modal, .certification-camera) .pass-live-dot { background: var(--muted); box-shadow: 0 0 0 3px var(--primary-soft); }
@keyframes pass-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--line); }
  50% { box-shadow: 0 0 0 5px var(--primary-soft); }
}
:is(#app, .request-modal, .certification-camera) .pass-ranking .ranking-tabs button, :is(#app, .request-modal, .certification-camera) .ranking-card .ranking-tabs button { color: var(--muted); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .ranking-tabs button.active { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .ranking-tabs button.active::after { background: var(--primary); }
:is(#app, .request-modal, .certification-camera) .pass-ranking-period { color: var(--muted); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-row { min-height: 48px; gap: 5px; padding: 9px 7px; color: var(--ink); border-color: var(--line); }
:is(#app, .request-modal, .certification-camera) .pass-rank-row.is-me { background: var(--primary-soft); border-radius: 7px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-index { min-width: 25px; color: var(--ink); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-row.is-top-rank .pass-rank-index { color: var(--ink); }
:is(#app, .request-modal, .certification-camera) .pass-rank-person strong, :is(#app, .request-modal, .certification-camera) .pass-rank-row.is-me .pass-rank-person strong { color: var(--ink); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-person strong i { color: var(--primary); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-person small { color: var(--muted); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-person .has-today-points { color: var(--success-ink); }
:is(#app, .request-modal, .certification-camera) .pass-rank-points { color: var(--ink); font-size: 12px; font-weight: 600; }
:is(#app, .request-modal, .certification-camera) .pass-rank-points small { color: var(--ink); font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .pass-rank-admin { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .pass-rank-values { gap: 8px; }

/* Reward lime is a fill; small values use its readable dark ink. */
:is(#app, dialog, .request-modal, .certification-camera) :is(.stars-earned, .stars-available, .header-star-count, .header-star-wallet .star-balance, .pass-rank-stars, .rank-star-count, .home-rank-stars, .ranking-star-wallet .star-balance, .star-wallet .star-balance, .star-wallet .star-help) { color: var(--reward-ink); }
:is(#app, dialog, .request-modal, .certification-camera) .rank-star-symbol { color: var(--reward-fill); text-shadow: -1px 0 var(--reward-ink), 1px 0 var(--reward-ink), 0 -1px var(--reward-ink), 0 1px var(--reward-ink); }
:is(#app, .request-modal, .certification-camera) .pass-rank-stars { font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .header-star-wallet { background: transparent; color: var(--reward-ink); border-radius: 0; padding: 0; }
:is(#app, .request-modal, .certification-camera) .header-star-wallet :is(.rank-star-symbol, .header-star-count) { color: #3ecf8e; text-shadow: none; font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .ranking-star-wallet { background: var(--reward-fill); color: var(--reward-ink); border-color: var(--reward-ink); }
:is(#app, .request-modal, .certification-camera) .star-history-balance strong { color: var(--reward-ink); }
:is(#app, .request-modal, .certification-camera) .star-history-list .point { padding: 2px 5px; border-radius: 5px; font-size: 12px; line-height: 18px; }
:is(#app, .request-modal, .certification-camera) .star-history-list .point.positive { color: var(--reward-ink); background: var(--reward-fill); }
:is(#app, .request-modal, .certification-camera) .point.negative { color: var(--error-ink); }
:is(#app, .request-modal, .certification-camera) .star-history-list .point.negative { background: var(--error-soft); }

/* Calendars and records share selection colors, independent of certification states. */
:is(#app, .request-modal, .certification-camera) .calendar-head h2, :is(#app, .request-modal, .certification-camera) .opening-calendar-toolbar h2 { font-size: 15px; line-height: 22px; }
:is(#app, .request-modal, .certification-camera) .calendar-day { color: var(--ink); font-size: 13px; }
:is(#app, .request-modal, .certification-camera) .calendar-day.selected > span:first-child, :is(#app, .request-modal, .certification-camera) .calendar-day.selected.today > span:first-child { background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) .member-record-calendar .calendar-day.selected { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .member-record-stats > div:first-child { background: var(--primary-soft); border-color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .member-record-stats strong { color: var(--ink); font-size: 14px; }
:is(#app, .request-modal, .certification-camera) :is(.opening-calendar-poster, .opening-calendar-poster:nth-child(even), .opening-day-poster) { background: var(--primary-soft); color: var(--primary); border-color: var(--line); }
:is(#app, .request-modal, .certification-camera) :is(.opening-calendar-poster > span, .opening-calendar-overflow, .opening-day-time small, .performance-registration-time, .performance-opening-countdown, .performance-certification-query, .registration-image-parts, .sketch-material-buttons small, .ticketing-card-media button span, .attendance-progress small) { font-size: 11px; }
:is(#app, .request-modal, .certification-camera) :is(.performance-session-action, .performance-session-group summary small) { font-size: 11px; }
:is(#app, .request-modal, .certification-camera) .ticketing-card-deadline .registration-clock { color: var(--primary); }
:is(#app, .request-modal, .certification-camera) :is(.record-kind.received, .record-kind.given, .activity-seat, .score-kind) { background: var(--primary-soft); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .attendance-section-heading h3 { font-size: 14px; line-height: 20px; }
:is(#app, .request-modal, .certification-camera) .attendance-countdown, :is(#app, .request-modal, .certification-camera) .attendance-countdown strong { font-size: 14px; line-height: 20px; }
:is(#app, .request-modal, .certification-camera) .attendance-session-status, :is(#app, .request-modal, .certification-camera) .attendance-clock { font-size: 11px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.badge-open, .notice-green, .home-opening-apply.is-joined, .opening-field-row.is-complete, .opening-site[data-confirmed="true"], .attendance-seat-tab.is-ready, .mine-verification.is-complete .mine-verification-badge) {
  background: var(--success-soft); color: var(--success-ink); border-color: var(--line);
}
:is(#app, dialog, .request-modal, .certification-camera) .attendance-session-status[data-state="complete"] { color: var(--success-ink); }
:is(#app, .request-modal, .certification-camera) .verification-ratio { color: var(--warning-ink); background: var(--warning-soft); }
:is(#app, .request-modal, .certification-camera) .all-complete .verification-ratio { color: var(--success-ink); background: var(--success-soft); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.mine-verification-badge, .record-kind.adjustment, .notice-warning) { color: var(--warning-ink); background: var(--warning-soft); }
:is(#app, .request-modal, .certification-camera) .record-kind.grant { color: var(--reward-ink); background: var(--reward-fill); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.record-kind.moderation, .notice-error, .entry-seat-wrong) { color: var(--error-ink); background: var(--error-soft); }
:is(#app, .request-modal, .certification-camera) .attendance-clock[data-mode="waiting"], :is(#app, .request-modal, .certification-camera) .attendance-clock[data-mode="closed"] { background: var(--canvas); color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.attendance-photo-button, .performance-tabs [aria-selected="true"], .performance-detail-tab[aria-selected="true"]) { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .performance-tabs button { font-size: 11px; border-color: var(--line); }
:is(#app, .request-modal, .certification-camera) .performance-tabs::after { background: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-readonly-fields dd, .session-performance-details dd, .session-application-time > strong, .certification-metadata dd) { color: var(--ink); font-size: 13px; line-height: 19px; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-readonly-fields dt, .performance-genre > span, .performance-heading-kind, .session-performance-details dt, .session-performance-period, .session-application-form .field > span, .session-application-time > span, .certification-metadata dt, .performance-session-dialog .session-form-row small, .session-certification-form .session-form-row > span:first-child, .seat-entry-heading) { color: var(--muted); font-size: 12px; line-height: 18px; }
:is(#app, dialog, .request-modal, .certification-camera) .performance-heading-venue { color: var(--muted); font-size: 13px; line-height: 19px; }
:is(#app, dialog, .request-modal, .certification-camera) .session-performance-opening { color: var(--primary); font-size: 13px; line-height: 19px; }
:is(#app, dialog, .request-modal, .certification-camera) .performance-session-action { border-color: var(--line); background: var(--primary-soft); color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-session-action[data-phase="started"], .performance-apply-fab[data-phase="started"]) { border-color: var(--warning-ink); background: var(--warning-soft); color: var(--warning-ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-session-action[data-phase="pick"], .performance-apply-fab[data-phase="pick"]) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) .performance-session-action:disabled { border-color: var(--line); background: var(--canvas); color: var(--muted); opacity: .65; }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .session-performance-card { border-left-color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) .session-registration-notice { background: var(--primary-soft); color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) .fixed-session-options button { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .fixed-session-options button:not([aria-pressed="true"]) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .fixed-session-options small { color: var(--muted); font-size: 12px; }
:is(#app, dialog, .request-modal, .certification-camera) .performance-ticketing-badge { border-color: var(--line); background: var(--success-soft); color: var(--success-ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-ticketing-badge[data-phase="pick"], .performance-ticketing-badge[data-mode="pick"]) { border-color: var(--primary); background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown { border-color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .performance-opening-day { background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) .performance-opening-slots button { border-color: var(--line); background: var(--surface); color: var(--primary); font-size: 12px; }
:is(#app, .request-modal, .certification-camera) .performance-opening-slots [aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) :is(.request-stage, .request-stage-active, .request-my-status) { border-color: var(--line); border-left-color: var(--primary); background: var(--primary-soft); }
:is(#app, .request-modal, .certification-camera) :is(.request-stage-label, .request-stage-next, .request-stage p) { color: var(--ink); font-size: 13px; }
:is(#app, .request-modal, .certification-camera) .attendance-view .attendance-seat-tab.is-selected { border-color: var(--primary); background: var(--primary); color: #fff; }
:is(#app, .request-modal, .certification-camera) .performance-ticketing-badge, :is(#app, .request-modal, .certification-camera) .performance-ticketing-badge [data-ticketing-phase-time] { font-size: 11px; line-height: 16px; }
:is(#app, .request-modal, .certification-camera) :is(.calendar-day small:not(.verification-ratio), .mine-verification[open] .mine-verification-toggle, .member-record-admin[open] .admin-member-summary-action) { font-size: 0; }

:is(#app, .request-modal, .certification-camera) :is(.session-date-trigger, .performance-session-dialog .session-count-picker summary) { color: var(--primary); font-size: 13px; }
:is(#app, .request-modal, .certification-camera) :is(.registration-v8 .ticket-calendar-days button.is-in-range, .registration-image-add, .performance-inline-section .opening-site, .performance-inline-section .opening-site input) { border-color: var(--line); background: var(--primary-soft); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .registration-image-card.is-representative :is(.registration-image-thumbnail, .registration-image-representative) { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) .catalog-sale-type.is-presale { background: var(--success-soft); color: var(--success-ink); }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown[data-mode="authentication"] { border-color: var(--warning-ink); background: var(--warning-soft); }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown[data-mode="authentication"] .performance-opening-day { background: var(--warning-ink); color: #fff; }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown[data-mode="authentication"] .performance-opening-time { color: var(--warning-ink); }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown[data-mode="pick"] { border-color: var(--primary); background: var(--primary-soft); }
:is(#app, .request-modal, .certification-camera) .performance-opening-countdown[data-mode="pick"] .performance-opening-time { color: var(--primary); }

/* The existing neutral date picker keeps its approved compact treatment. */
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) { --primary: #666; }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .opening-selected-date { color: var(--ink); font-size: 14px; }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .date-picker-actions .button { border-color: transparent; font-size: 13px; }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .date-picker-actions .button-white { background: var(--primary-soft); color: var(--muted); }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .date-picker-actions .button-primary { background: var(--ink); color: #fff; }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .date-picker-actions .button-white:hover { background: var(--line); color: var(--ink); }
:is(:is(#app, .request-modal, .certification-camera) .is-compact-date, dialog.is-compact-date) .date-picker-actions .button-primary:hover { background: #000; }
:is(#app, .request-modal, .certification-camera) .registration-v8 .datetime-select-group .datetime-select-row select { font-size: 13px; }

/* Auth stays light, and published notice typography stays author-controlled. */
:is(#app, .request-modal, .certification-camera) :is(.login-wrap, .login-wrap-welcome, .login-card-welcome) { background: var(--canvas); color: var(--ink); }
:is(#app, .request-modal, .certification-camera) .welcome-content h1 { font-size: 16px; line-height: 23px; }
:is(#app, .request-modal, .certification-camera) :is(.signup-choice input:checked + span, .signup-choice:hover span) { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
:is(#app, .request-modal, .certification-camera) :is(.signup-question b, .entry-owner-login) { color: var(--primary); border-color: var(--line); }
:is(#app, .request-modal, .certification-camera) :is(.google-signin:hover, .google-signin:focus-visible) { background: var(--primary-soft); border-color: var(--primary); }
/* Legacy component colors also follow the monochrome palette. Author colors in
   notice content, image pixels and the Google logo are content, not UI tokens. */
:is(#app, dialog, .request-modal, .certification-camera) .star-wallet .star-help { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .header-star-wallet .star-help { border-color: #b8adc9; color: #66567e; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.star-help, .star-balance, .request-phase):focus-visible { outline-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .pass-now-arrow { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.home-opening-item, .home-opening-detail, .home-opening-counts strong) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .request-flow-header a { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.lead, .calendar-intro p) { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) .button-danger { border-color: var(--line); background: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) .button-danger:hover { border-color: var(--ink); background: var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.ticket-calendar-head strong, .ticket-calendar-head button, .ticket-calendar-days button) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.ticket-calendar-weekdays span, .ticket-calendar-days button:disabled) { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) .ticket-calendar-days button.is-selected { background: var(--ink); color: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.opening-field, .opening-field-copy > span, .session-modal-header button, .session-count-options button:not([aria-pressed="true"]), .performance-participation-proof, .performance-certification-history, .performance-applicant-name, .participation-confirmed, .pick-carousel-navigation button, .pick-modal-toolbar .button) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.opening-field-copy strong, .opening-method-back, .opening-show-dialog header p, .opening-show-dialog header button, .opening-show-material, .opening-show-empty, .opening-followup-dialog p, .performance-period-clear, .request-modal-subtitle, .performance-registration-time, .performance-empty, .performance-session-select, .performance-material-form > p, .performance-cancel, .pick-management, .pick-carousel-navigation, .performance-session-dialog .session-form-row > .field-label, .signup-question > p, .signup-privacy, .ticket-calendar-head button:disabled, .pick-carousel-navigation button:disabled) { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-session-group, .performance-applicant-request, .performance-opening-line, .session-application-time, .session-certification-form .session-form-row, .certification-batch-divider, .pick-carousel-slide, .pick-seat-choices .offer-detail, .registration-image-thumbnail, .registration-image-card select, .signup-question, .signup-choice span, .signup-decline, .catalog-provider-badge) { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.request-info-image-button, .pick-certification-image, .seat-card-image, .seat-card-image .seat-no-image, .seat-pick-focus, .registration-image-thumbnail, .performance-fixed-poster) { background: var(--canvas); }
:is(#app, dialog, .request-modal, .certification-camera) .pick-certification-image .seat-picked-cover { background: var(--canvas); color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) .site-choice span { background: var(--surface); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .site-choice input:checked + span { background: var(--primary-soft); border-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .material-carousel-arrow { color: var(--ink); border-color: var(--line); background: var(--surface); box-shadow: 0 1px 4px rgb(0 0 0 / 12%); }
:is(#app, dialog, .request-modal, .certification-camera) .material-carousel-arrow:disabled { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.nav-link:hover, .performance-session-dialog .session-date-trigger:focus-visible, .session-count-picker summary:focus-visible) { background: var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) :is(input, select, textarea, button) { accent-color: var(--primary); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.pass-now-dot.is-green, .record-dot.help, .record-dot.other, .opening-field-indicator, .opening-saved-check) { background: var(--ink); color: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.ranking-intro .ranking-live, .pass-session-strip a span, .calendar-event-status, .verification-month-summary strong, .mine-verification-next, .is-complete .mine-verification-next, .opening-source-link, .opening-source-materials a, .sketch-opening strong, .pick-modal-toolbar > strong, .entry-message strong, .entry-admin-hint) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .seat-picked-cover span { color: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.record-kind, .opening-show-status, .opening-field-row.is-complete .opening-field-number, .opening-field.is-complete .opening-field-indicator, .opening-site[data-confirmed="true"] .opening-site-confirm, .sketch-today, .performance-request-totals, .performance-mine, .session-participation-confirmation, .performance-session-label, .seat-row-icon, .performance-session-turn, .performance-certification-query, .attendance-seat-tab, .entry-stage, .entry-seat-admin, .signup-question b, .notice-badges span, .notice-pin) { color: var(--ink); background: var(--primary-soft); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .record-kind.grant { color: var(--reward-ink); background: var(--reward-fill); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.mine-verification.is-pending, .verification-count-calendar .calendar-day.has-events, .verification-count-calendar .calendar-day.all-complete, .notice-post-pinned) { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .mine-verification.is-pending { border-left-color: var(--ink); background: var(--canvas); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.opening-calendar-cell.is-outside, .opening-day-sites, .opening-show-card p, .attendance-progress, .catalog-provider-badge, .catalog-sale-type, .performance-sale-label) { color: var(--muted); background: var(--canvas); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.home-opening-add:hover, .opening-calendar-add, .opening-source-materials a, .session-certification-form .session-submit, .notice-category-tabs button, .admin-menu-arrow) { color: var(--ink); border-color: var(--line); background: var(--surface); box-shadow: none; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.shell .main .admin-jumps button[aria-selected="true"], .notice-category-tabs button[aria-pressed="true"], .opening-field-row.is-complete .opening-field-number) { color: var(--surface); background: var(--ink); border-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.admin-jumps button:focus-visible, .signup-choice input:focus-visible + span, .signup-decline:focus-visible, .entry-seat:focus-visible) { outline-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.admin-menu-arrow:disabled, .attendance-photo-button:disabled) { color: var(--muted); background: var(--canvas); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.signup-decline:hover, .entry-seat:hover, .catalog-result:hover, .catalog-result.is-active, .catalog-opening-choice:has(input:checked), .catalog-selected-information, .catalog-result-no-poster) { color: var(--ink); background: var(--primary-soft); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .performance-session-turn::before { background: var(--primary-soft); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .ticket-calendar-days button.has-opening { color: var(--ink); background: var(--primary-soft); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .ticket-calendar-days button.has-opening::after { background: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .opening-calendar-overflow { color: var(--surface); background: rgb(0 0 0 / 84%); }
:is(#app, dialog, .request-modal, .certification-camera) .session-carousel-nav button { color: var(--ink); background: var(--canvas); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) [data-session-position] { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .attendance-view .attendance-seat-tab.is-selected { color: var(--surface); background: var(--ink); border-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .session-certification-form[data-certification-mode="read"] :is(input:disabled, select:disabled) { color: var(--ink); -webkit-text-fill-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.notice-editor-frame, .notice-preview, .notice-attachments li) { border-color: var(--line); background: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-toolbar.ql-toolbar.ql-snow { border-color: var(--line); background: var(--canvas); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-toolbar.ql-snow :is(button:hover, button.ql-active) { background: var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.notice-editor-status, .notice-attachments a, .notice-attachments button, .notice-rich) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.notice-attachments small, .notice-image-file small) { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-rich a:not([class*="ql-color-"]):not([style*="color"]) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-rich blockquote { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-rich blockquote { background: var(--canvas); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.entry-message strong, .entry-admin-hint) { color: var(--ink); background: var(--primary-soft); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.registration-image-remove, .registration-image-representative) { color: var(--surface); background: rgb(0 0 0 / 75%); }
:is(#app, dialog, .request-modal, .certification-camera) .site-pass-search:focus-within { border-color: var(--ink); box-shadow: 0 0 0 2px var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) .ticket-calendar-days button.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .opening-field-row.is-current { box-shadow: inset 3px 0 var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.notice-editor-frame:focus-within, .google-signin:hover, .entry-seat-admin) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--primary-soft); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .datetime-select-group .datetime-select-row select { color: var(--ink); background-color: var(--canvas); border-color: var(--line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23666666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .datetime-select-group .datetime-select-row select:hover { background-color: var(--primary-soft); border-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-v8 .datetime-select-group .datetime-select-row select:focus-visible { outline-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(input, textarea, select):focus { background-color: var(--surface); }
:is(#app, dialog, .request-modal, .certification-camera) :is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
:is(#app, dialog, .request-modal, .certification-camera) :is(.entry-row-label, .registration-image-heading > span, .registration-image-kind-label, .registration-image-parts, .performance-site-remove, .catalog-registered-status) { color: var(--muted); }
:is(#app, dialog, .request-modal, .certification-camera) .entry-seat { color: var(--ink); background: var(--canvas); border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.entry-seat:hover, .entry-seat:focus-visible, .entry-seat-admin) { color: var(--ink); background: var(--primary-soft); border-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .registration-image-add:focus-within { outline-color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) :is(.performance-readonly-fields > div, .registration-information-grid.sketch-registration-grid .opening-field-row, .session-modal-header, .performance-session-dialog .session-form-row, .request-modal-head) { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-toolbar.ql-snow :is(.ql-picker-label, .ql-picker-item) { color: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-toolbar.ql-snow .ql-stroke:not(.ql-color-label) { stroke: var(--ink); }
:is(#app, dialog, .request-modal, .certification-camera) .notice-toolbar.ql-snow .ql-fill:not(.ql-color-label) { fill: var(--ink); }
:is(.lightbox, .request-modal.lightbox, .certification-camera) { background: rgb(0 0 0 / 85%); }
.lightbox:not(.request-modal) .lightbox-top { color: var(--surface); }
.lightbox:not(.request-modal) .lightbox-top .button { color: var(--ink); background: var(--surface); border-color: var(--line); }
.lightbox:not(.request-modal) .lightbox-top .button:hover { color: var(--ink); background: var(--primary-soft); border-color: var(--ink); }
dialog::backdrop { background: rgb(0 0 0 / 50%); }
:is(.opening-show-dialog, .opening-followup-dialog, .centered-date-dialog)::backdrop { background: rgb(0 0 0 / 40%); }
.performance-session-dialog::backdrop { background: rgb(0 0 0 / 44%); }
.opening-show-dialog { box-shadow: 0 -6px 28px rgb(0 0 0 / 8%); }
.opening-followup-dialog { box-shadow: 0 12px 40px rgb(0 0 0 / 15%); }
:is(.centered-date-dialog, .opening-step-dialog.is-date-picker) { box-shadow: 0 12px 48px rgb(0 0 0 / 15%); }
.opening-step-dialog.is-compact-date { border-color: var(--line); box-shadow: 0 18px 60px rgb(0 0 0 / 14%); }
:is(#app, dialog, .request-modal, .certification-camera) .opening-selected-date { border-color: var(--line); }
:is(#app, dialog, .request-modal, .certification-camera) .session-performance-card { box-shadow: 0 4px 16px rgb(0 0 0 / 5%); }
:is(#app, dialog, .request-modal, .certification-camera) .site-pass-header .mobile-menu { box-shadow: 0 6px 20px rgb(0 0 0 / 8%); }
.certification-camera .camera-redaction-draft { background: rgb(0 0 0 / 45%); }
.performance-session-dialog { box-shadow: 0 18px 60px rgb(0 0 0 / 14%); }
.test-lab-tools, .test-lab-dialog { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 2px 10px rgb(0 0 0 / 6%); }
.test-lab-tools button { background: var(--ink); color: var(--surface); }
.test-lab-dialog :is(p, input, select, .test-lab-member-columns) { color: var(--ink); border-color: var(--line); }
.test-lab-member { background: var(--canvas); }
.test-lab-member.is-current { background: var(--primary-soft); border-color: var(--ink); }
.toast { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: 0 12px 35px rgb(0 0 0 / 18%); }
#toast { font-size: 12px; }
@media (max-width: 360px) {
  :is(#app, .request-modal, .certification-camera) .main { padding-inline: 12px; }
  :is(#app, .request-modal, .certification-camera) .request-flow-header { margin-inline: -12px; padding-inline: 12px; }
  :is(#app, .request-modal, .certification-camera) .shell:not(.is-request-page) .calendar-card { width: auto; margin-inline: -12px; }
  :is(#app, .request-modal, .certification-camera) .site-pass-header { padding-inline: 12px; }
  :is(#app, .request-modal, .certification-camera) .pass-ticket-main { padding-inline: 12px; }
  :is(#app, .request-modal, .certification-camera) .pass-rank-identity { flex-wrap: wrap; gap: 2px 5px; }
}
@media (pointer: coarse) {
  :is(#app, .request-modal, .certification-camera) .site-pass-search { min-height: 44px; }
  :is(#app, .request-modal, .certification-camera) .site-pass-search input { height: 42px; }
  :is(#app, .request-modal, .certification-camera) :is(.pass-menu-button, .pass-tool-link) { min-height: 44px; }
}

/* Home all-schedules count and bell: approved Emerald Soft. */
#app .pass-now-links [data-action="home-all-schedules"] :is(svg, strong) { color: #4ade80; }

/* Compact main-page actions: purple application ribbons. */
#app .home-opening-performances.home-opening-strip .home-opening-apply {
  min-height: 19px; padding: 2px 4px; gap: 2px; border: 0;
  border-radius: 3px; background: #6b01c2; color: #fff;
}
#app .home-opening-strip .home-opening-apply::before { display: none; }
#app .home-opening-strip .home-opening-add {
  min-height: 24px; padding: 4px 6px; gap: 4px;
}
#app .home-opening-strip .home-opening-add svg { width: 12px; height: 12px; }
#app .pass-ranking .pass-live-dot {
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.2);
}
#app .pass-ranking .pass-rank-row.is-me {
  background: rgba(74, 222, 128, 0.2);
}
#app .pass-ranking .pass-rank-index {
  margin-right: 7px;
}
#app .performance-information .performance-site-chips > a {
  min-height: 24px;
  padding: 4px 6px;
  gap: 4px;
  border: 1px solid #c7c7c7;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}
#app .performance-information .performance-site-chips > a:hover {
  background: #f7f7f7;
}
#app .shell.performance-detail-page .performance-request-tools > .performance-request-totals {
  padding: 8px 12px;
  border: 0;
  border-radius: 4px;
  background: #f8f8f8;
  color: var(--ink);
}
#app .pass-home .pass-ticket-main .pass-ticket-label {
  color: #000;
}
#app .home-opening-performances.home-opening-strip .home-opening-apply.is-requestable {
  background: #4ade80;
  color: #1a1a1a;
}
#app .home-opening-performances.home-opening-strip .home-opening-apply.is-joined {
  background: #707070;
  color: #fff;
}

/* Approved empty ticket: keep the dark ticket and offer performance browsing. */
#app .pass-home .pass-ticket.is-empty .pass-ticket-main { min-height:166px; justify-content:center; background:#191d1a; color:#fff; box-shadow:none; }
#app .pass-home .pass-ticket.is-empty .pass-ticket-label::before { background:#3ecf8e; }
#app .pass-home .pass-ticket.is-empty .pass-ticket-title { margin-top:16px; color:#fff; }
#app .pass-home .pass-ticket.is-empty .pass-ticket-venue { white-space:normal; color:#bac1bd; margin-top:8px; }
#app .pass-home .pass-ticket-browse { display:inline-flex; align-items:center; min-height:34px; padding:6px 14px; margin-top:18px; border:1px solid #3ecf8e; border-radius:5px; color:#3ecf8e; font-size:12px; font-weight:500; }
#app .pass-home .pass-ticket-main:hover .pass-ticket-browse { background:rgba(62,207,142,.08); }

#app .pass-home .pass-ticket.is-empty .pass-ticket-label { color:#fff; }

/* frontend/styles/navigation.css */
/* Navigation geometry has one owner. State visibility stays with mobile-system.css.
   The selector tiers preserve the former generic, shell and full-width app contracts. */
.bottom-nav, .bottom-nav.admin-bottom-nav {
  position: fixed; left: 50%; bottom: 0; z-index: 55; transform: translateX(-50%);
  display: grid; grid-template-columns: 1fr 1fr 58px 1fr 1fr; align-items: center; gap: 4px;
  width: min(100%, 760px); min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  border: 1px solid var(--line); border-bottom: 0; border-radius: 18px 18px 0 0;
  background: #fff; box-shadow: 0 -8px 24px rgb(0 0 0 / 8%); backdrop-filter: none;
}
.shell .bottom-nav {
  width: min(100%, 480px); min-height: calc(56px + env(safe-area-inset-bottom));
  padding: 2px 12px calc(2px + env(safe-area-inset-bottom));
  border: 0; border-top: 1px solid #dde3df; border-radius: 0; box-shadow: none;
}
:is(#app, .request-modal, .certification-camera) .bottom-nav {
  left: 0; right: 0; bottom: 0; width: 100%; transform: none;
  padding-inline: max(12px, calc((100% - 430px) / 2 + 12px));
  border-radius: 0; background: var(--surface); border-color: var(--line); box-shadow: none;
}

/* Shared rail rules formerly mixed into opening-calendar.css. */
#app .shell .bottom-nav { grid-template-columns:repeat(5,minmax(0,1fr)); }
#app .shell .bottom-tab { gap:2px; padding:4px 0; }
#app .shell .bottom-tab-label { font-size:11px; line-height:16px; }