/* ========================================================= MOBILE TAP / HOVER HIGHLIGHT POLISH ========================================================= */ @media (max-width: 1099px), (max-height: 699px), (hover: none), (pointer: coarse) { .codex-panel-nav button, #mobile-panel-back, #codex-search-button { border-color: rgba(72, 43, 18, 0.26); background: radial-gradient(circle at 38% 26%, rgba(255, 244, 215, 0.36), transparent 44%), linear-gradient( to bottom, rgba(238, 214, 169, 0.94), rgba(209, 166, 95, 0.70) ); box-shadow: inset 1px 1px 0 rgba(255, 244, 218, 0.28), inset 0 -1px 0 rgba(72, 43, 18, 0.12), 0 1px 4px rgba(45, 25, 8, 0.10); } button, a, [role="button"], input, select, textarea, .codex-row, .codex-link-button, .codex-section-button, .codex-image-modal, .leaflet-container, .leaflet-interactive { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; } button, a, [role="button"], .codex-row, .codex-link-button, .codex-section-button, .leaflet-interactive { user-select: none !important; -webkit-user-select: none !important; } button:focus, a:focus, [role="button"]:focus, .codex-row:focus, .codex-link-button:focus, .codex-section-button:focus { outline: none !important; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), .codex-row:focus:not(:focus-visible), .codex-link-button:focus:not(:focus-visible), .codex-section-button:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Reassert the intended authored appearance for common mobile controls. Keeping this in the late mobile sheet prevents touch browsers from falling back to native white-button chrome during quick tap handling. */ .codex-row { appearance: none !important; -webkit-appearance: none !important; border: 0 !important; border-bottom: 1px solid rgba(72, 43, 18, 0.18) !important; border-radius: 0 !important; background: transparent !important; color: #2f1d10 !important; box-shadow: none !important; } .codex-section-button { appearance: none !important; -webkit-appearance: none !important; border: 1px solid rgba(94, 55, 22, 0.36) !important; border-radius: 12px !important; background: linear-gradient( rgba(255, 231, 174, 0.46), rgba(166, 108, 41, 0.18) ) !important; color: #3a2614 !important; box-shadow: inset 0 1px 3px rgba(255, 241, 202, 0.35), 0 2px 8px rgba(45, 25, 8, 0.14) !important; } .codex-mobile-utility-close, .codex-mobile-utility-option { appearance: none !important; -webkit-appearance: none !important; border: 1px solid rgba(72, 43, 18, 0.24) !important; border-radius: 4px !important; background: rgba(246, 232, 196, 0.52) !important; color: #2f1d10 !important; box-shadow: none !important; } #codex-overlay .codex-control-cluster > button, #codex-overlay .codex-control-cluster > button:hover, #codex-overlay .codex-control-cluster > button:focus, #codex-overlay .codex-control-cluster > button:focus-visible, #codex-overlay .codex-control-cluster > button:visited { background: rgba(246, 232, 196, 0.42) !important; border-color: rgba(72, 43, 18, 0.24) !important; color: #2f1d10 !important; transform: none !important; box-shadow: none !important; outline: none !important; } #codex-overlay .codex-control-cluster > button:active { background: rgba(94, 55, 22, 0.12) !important; border-color: rgba(72, 43, 18, 0.38) !important; color: #241409 !important; transform: scale(0.985) !important; box-shadow: inset 0 1px 2px rgba(45, 25, 8, 0.16) !important; outline: none !important; } .codex-row.codex-tap-active { background: linear-gradient( to right, rgba(94, 55, 22, 0.10), rgba(94, 55, 22, 0.045), transparent ) !important; color: #241409 !important; } .codex-link-button.codex-tap-active { background: rgba(94, 55, 22, 0.08) !important; border-color: rgba(72, 43, 18, 0.62) !important; color: #241409 !important; } .codex-section-button.codex-tap-active { background: linear-gradient( rgba(255, 236, 188, 0.58), rgba(166, 108, 41, 0.26) ) !important; border-color: rgba(94, 55, 22, 0.55) !important; box-shadow: inset 0 1px 3px rgba(255, 241, 202, 0.42), 0 3px 10px rgba(45, 25, 8, 0.20) !important; } .codex-region-tile.codex-tap-active .codex-region-tile-hover { background: rgba(24, 13, 5, 0.10) !important; } .codex-map-card[href].codex-tap-active { transform: translateY(-2px); } .codex-mobile-utility-close.codex-tap-active, .codex-mobile-utility-option.codex-tap-active, .codex-image-modal-close.codex-tap-active, .codex-image-modal-nav.codex-tap-active { background: rgba(246, 225, 182, 0.96) !important; border-color: rgba(72, 43, 18, 0.38) !important; } .panel-nav button.codex-tap-active { background: linear-gradient( rgba(255, 236, 188, 0.92), rgba(214, 170, 108, 0.84) ) !important; border-color: rgba(94, 55, 22, 0.55) !important; box-shadow: inset 0 1px 3px rgba(255, 241, 202, 0.42), 0 3px 10px rgba(45, 25, 8, 0.20) !important; } .panel-nav .codex-breadcrumb-button.codex-tap-active { background: none !important; border-color: transparent !important; box-shadow: none !important; color: rgba(47, 29, 16, 1) !important; text-shadow: 0 0 0.6px rgba(47, 29, 16, 0.72) !important; } #codex-overlay .codex-control-cluster > button[disabled], #codex-overlay .codex-control-cluster > button[disabled]:hover, #codex-overlay .codex-control-cluster > button[disabled]:focus, #codex-overlay .codex-control-cluster > button[disabled]:active { opacity: 0.45 !important; background: rgba(246, 232, 196, 0.28) !important; border-color: rgba(72, 43, 18, 0.14) !important; transform: none !important; box-shadow: none !important; } @media (hover: none) { button:hover, a:hover, [role="button"]:hover, .codex-row:hover, .codex-link-button:hover, .codex-section-button:hover { -webkit-tap-highlight-color: transparent !important; } } }