/* Scoped STRUCTURALLY to the single-meeting view: the list view has a , the detail view does not — so :not(:has(table)) means "detail". No JS / no hashchange (TSML-UI navigates via History pushState, which doesn't fire hashchange, so a class-toggle approach silently dropped off). NOTE: css-7zdqb1 (content card), css-1nmg4yc (Get Directions), css-1jccj9u / css-1sp9z2q (Share / Add to Calendar) are TSML-UI Emotion build-hash classes — re-verify after any 12-step-meeting-list plugin update. (Jason 2026-06-07) */ /* All h2 default to regular bold + smaller (location, group, entity, map popup). The top meeting name is bumped back up via .oai-meeting-name. (Jason 2026-06-07) */ #tsml-ui:not(:has(table)) h2 { font-family:Figtree,sans-serif !important; color:#174580 !important; font-weight:700 !important; font-size:22px !important; letter-spacing:-0.01em !important; } #tsml-ui:not(:has(table)) p, #tsml-ui:not(:has(table)) li, #tsml-ui:not(:has(table)) a, #tsml-ui:not(:has(table)) button, #tsml-ui:not(:has(table)) span { font-family:Figtree,sans-serif !important; } #tsml-ui:not(:has(table)) .css-7zdqb1 { background:#fff !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; overflow:visible !important; width:100% !important; max-width:760px !important; margin-left:auto !important; margin-right:auto !important; flex-direction:column !important; padding-top:6px !important; padding-bottom:14px !important; text-align:center !important; } #tsml-ui:not(:has(table)) .css-7zdqb1 > div { border-color:#eef1f5 !important; padding-left:0 !important; padding-right:0 !important; } /* TSML wraps the meeting content in a square-bordered nested box (a class-less div one level inside the info column) on BOTH online and in-person. Online's was stripped by JS; strip it for everyone here so in-person is boxless too. The desktop info CARD border lives one level UP (> *:not(.css-0)) and the Meeting Notes box (.css-2klgun) is deeper, so neither is affected. (Jason 2026-06-19) */ #tsml-ui:not(:has(table)) .css-7zdqb1 > div:not(.css-0) > div { border:0 !important; } /* DESKTOP (>=1000px): map BESIDE the info, not stacked below. The detail card .css-7zdqb1 has two children: the info block (first) and the map slot .css-0 (second). Lay them out as two columns, widen the card to use the ~1200px wrapper, and give the map more height. :has guards it so online-only meetings (single child) stay full width. (Jason 2026-06-17 "map to the right again, larger") */ @media (min-width:1000px) { /* Detail content widened to a 1440px card (TSML-UI caps #tsml-ui at 1280; the card needs 1440 + the two wrappers' 80px padding, so #tsml-ui goes to 1520). Scoped to the detail CARD (.css-7zdqb1), NOT :not(:has(table)) — the MAP view also has no table once its map renders, so the old selector widened Map view too. Map + List now share the base 1280. (Jason 2026-06-18 "map view same max width as list view, filters and map") */ #tsml-ui:has(.css-7zdqb1) { max-width:1520px !important; } #tsml-ui:not(:has(table)) .css-14ey5ic { max-width:1440px !important; } /* Card with a map (.css-0) -> two columns: info LEFT, map RIGHT. Keyed off the map's .css-0 class (NOT div:nth-child) so it works regardless of how many children the card has. The :has guard keeps online-only meetings (no map, no .css-0) at full width. (Jason 2026-06-18 "map to the right again") */ #tsml-ui:not(:has(table)) .css-7zdqb1:has(> .css-0) { flex-direction:row !important; flex-wrap:nowrap !important; max-width:1440px !important; align-items:stretch !important; gap:24px !important; text-align:center !important; padding-bottom:20px !important; } /* Info column: capped at 500px so the map gets most of the width. (Jason 2026-06-18) padding-left:24 = the LEFT gutter; padding-right:0 so the gap between the info and the map is exactly the 24px flex gap, matching the left gutter and the map's 24px right margin. All three gutters (left / info-to-map / right) are now 24px. (Jason 2026-06-19 "space between the info and the map = the gutter on left/right") */ #tsml-ui:not(:has(table)) .css-7zdqb1:has(> .css-0) > *:not(.css-0) { flex:0 1 500px !important; width:500px !important; max-width:500px !important; min-width:0 !important; background:#fff !important; border:1px solid #e4e9f0 !important; border-radius:20px !important; box-shadow:0 4px 14px rgba(20,30,50,0.07) !important; padding:24px !important; box-sizing:border-box !important; } /* Map column: takes the REST of the card (most of the width) and runs FULL LENGTH — grows to fill, stretches to the info column's height (align-items:stretch). Override TSML-UI's own .css-0 max-height:1000px (that was capping the stretch). .css-0 > .css-e5yykt (position:relative) > .leaflet-container (absolute, inline height:100%); wrapper height:100% lets the absolute map fill the slot. (Jason 2026-06-18 "info max 500px so the map takes most of the screen") */ #tsml-ui:not(:has(table)) .css-7zdqb1:has(> .css-0) > .css-0 { flex:1 1 auto !important; width:auto !important; max-width:none !important; min-width:0 !important; align-self:stretch !important; padding-left:0 !important; padding-right:0 !important; margin-right:24px !important; border:1px solid #e4e9f0 !important; border-radius:20px !important; box-shadow:0 4px 14px rgba(20,30,50,0.07) !important; overflow:hidden !important; min-height:500px !important; max-height:none !important; } #tsml-ui:not(:has(table)) .css-7zdqb1:has(> .css-0) > .css-0 > div, #tsml-ui:not(:has(table)) .css-7zdqb1:has(> .css-0) > .css-0 .leaflet-container { height:100% !important; min-height:100% !important; max-height:none !important; } } /* Keep the (now tall) detail map's internal stacking (Leaflet panes/controls/popups z-index up to ~1000) contained so it can't paint over the sticky site header / admin bar as the page scrolls. isolation:isolate gives the slot its own stacking context at z-index 0. (Jason 2026-06-18 "map goes over the top white bar") */ #tsml-ui:not(:has(table)) .css-7zdqb1 .css-0 { position:relative !important; z-index:0 !important; isolation:isolate !important; } /* Online meetings: TSML's online detail has no real map. The JS above strips the bordered card-in-card + hides the empty map slot and appends .oai-online-art. Here: info-left + branded illustration-right on desktop, single column on mobile. To use a real picture, replace the data: URL below with the image URL. (Jason 2026-06-19) */ #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online .oai-online-art { background-color:#F0F5FA !important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20260%20222%27%3E%3Crect%20x%3D%2730%27%20y%3D%2726%27%20width%3D%27200%27%20height%3D%27128%27%20rx%3D%2714%27%20fill%3D%27%23ffffff%27%20stroke%3D%27%23174580%27%20stroke-width%3D%275%27%2F%3E%3Crect%20x%3D%2746%27%20y%3D%2742%27%20width%3D%2778%27%20height%3D%2796%27%20rx%3D%278%27%20fill%3D%27%23EAF1F9%27%2F%3E%3Crect%20x%3D%27136%27%20y%3D%2742%27%20width%3D%2778%27%20height%3D%2796%27%20rx%3D%278%27%20fill%3D%27%23EAF1F9%27%2F%3E%3Ccircle%20cx%3D%2785%27%20cy%3D%2778%27%20r%3D%2716%27%20fill%3D%27%23174580%27%2F%3E%3Cpath%20d%3D%27M61%20120a24%2024%200%200%201%2048%200z%27%20fill%3D%27%23174580%27%2F%3E%3Ccircle%20cx%3D%27175%27%20cy%3D%2778%27%20r%3D%2716%27%20fill%3D%27%239fb9d6%27%2F%3E%3Cpath%20d%3D%27M151%20120a24%2024%200%200%201%2048%200z%27%20fill%3D%27%239fb9d6%27%2F%3E%3Crect%20x%3D%27116%27%20y%3D%27154%27%20width%3D%2728%27%20height%3D%2714%27%20fill%3D%27%23174580%27%2F%3E%3Crect%20x%3D%2792%27%20y%3D%27168%27%20width%3D%2776%27%20height%3D%279%27%20rx%3D%274.5%27%20fill%3D%27%23174580%27%2F%3E%3Ctext%20x%3D%27130%27%20y%3D%27208%27%20text-anchor%3D%27middle%27%20font-family%3D%27Figtree%2Csans-serif%27%20font-weight%3D%27700%27%20font-size%3D%2718%27%20fill%3D%27%23174580%27%3EOnline%20meeting%3C%2Ftext%3E%3C%2Fsvg%3E") !important; background-repeat:no-repeat !important; background-position:center 48px !important; background-size:min(74%,300px) auto !important; border:1px solid #e4e9f0 !important; border-radius:20px !important; box-shadow:0 4px 14px rgba(20,30,50,0.07) !important; min-height:300px !important; max-height:none !important; box-sizing:border-box !important; } @media (min-width:1000px){ #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online { flex-direction:row !important; flex-wrap:nowrap !important; max-width:1440px !important; align-items:stretch !important; gap:24px !important; text-align:center !important; } #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online > *:not(.oai-online-art) { flex:0 1 500px !important; width:500px !important; max-width:500px !important; min-width:0 !important; background:#fff !important; border:1px solid #e4e9f0 !important; border-radius:20px !important; box-shadow:0 4px 14px rgba(20,30,50,0.07) !important; padding:24px !important; box-sizing:border-box !important; } #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online > .oai-online-art { flex:1 1 auto !important; align-self:stretch !important; min-height:500px !important; margin-right:24px !important; } } @media (max-width:999px){ #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online .oai-online-art { display:none !important; } #tsml-ui:not(:has(table)) .css-7zdqb1.oai-online > *:not(.oai-online-art) { width:100% !important; max-width:100% !important; } } /* Get Directions -> green, dark green on hover. Both the top-of-card button and the map popup's "Get Directions". (Jason 2026-06-07) */ #tsml-ui:not(:has(table)) a.css-1nmg4yc, #tsml-ui .leaflet-popup-content a[href*="maps"] { background:#146c43 !important; color:#fff !important; border-radius:999px !important; padding:12px 22px !important; font-weight:600 !important; border:0 !important; box-shadow:0 2px 6px rgba(20,108,67,0.25) !important; } #tsml-ui:not(:has(table)) a.css-1nmg4yc:hover, #tsml-ui .leaflet-popup-content a[href*="maps"]:hover { background:#0f5132 !important; } /* On mobile the Get Directions button rendered edge-to-edge (left=0/right=0) while the meeting name, Share and Add to Calendar all sit at a 17px side gutter. Give the button the same gutter so it lines up with them. (Jason 2026-06-19) */ @media (max-width:820px){ #tsml-ui:not(:has(table)) a.css-1nmg4yc { width:calc(100% - 34px) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; box-sizing:border-box !important; } /* Join Zoom + Phone (css-1yvq5fz) fill their content container (the JS hoists Join Zoom into the meeting-name's container so its width matches Share/Add-to-Calendar exactly). (Jason 2026-06-19) */ #tsml-ui:not(:has(table)) a.css-1yvq5fz { width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; } } /* The meeting/group-name link in the map popup is a plain navy text link, NOT a green button (the broad rule above used to turn it into a button that overlapped the time). Only "Get Directions" (a maps link) stays green. */ #tsml-ui .leaflet-popup-content a:not([href*="maps"]) { background:none !important; color:#174580 !important; font-weight:700 !important; border-radius:0 !important; padding:0 !important; box-shadow:none !important; } /* Share / Add to Calendar: filled navy buttons that darken on hover, like the site's standard buttons (Jason 2026-06-07) */ /* Share + Add to Calendar: white outlined pills (navy border + text), fill navy on hover. Reverted from the filled navy/red fills per Jason 2026-06-07. */ #tsml-ui:not(:has(table)) button.css-1jccj9u, #tsml-ui:not(:has(table)) button.css-1sp9z2q { border:2px solid #174580 !important; color:#174580 !important; background:#ffffff !important; border-radius:999px !important; padding:10px 20px !important; font-weight:600 !important; transition:background .15s ease, color .15s ease, border-color .15s ease !important; } #tsml-ui:not(:has(table)) button.css-1jccj9u *, #tsml-ui:not(:has(table)) button.css-1sp9z2q * { color:#174580 !important; } #tsml-ui:not(:has(table)) button.css-1jccj9u:hover, #tsml-ui:not(:has(table)) button.css-1sp9z2q:hover { background:#174580 !important; border-color:#174580 !important; color:#ffffff !important; } #tsml-ui:not(:has(table)) button.css-1jccj9u:hover *, #tsml-ui:not(:has(table)) button.css-1sp9z2q:hover * { color:#ffffff !important; } /* Zoom / online-join button (css-1yvq5fz) -> same pill style as the other action buttons (filled, 999px, centered icon+text), navy to match the OAI brand (Jason 2026-06-09). The :not(:has(table)) scope out-specifies the old full-width rule. (Jason 2026-06-07) */ #tsml-ui:not(:has(table)) a.css-1yvq5fz { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; border:2px solid #174580 !important; color:#ffffff !important; background:#174580 !important; border-radius:999px !important; padding:10px 20px !important; box-sizing:border-box !important; font-weight:600 !important; text-decoration:none !important; transition:background .15s ease, border-color .15s ease !important; } #tsml-ui:not(:has(table)) a.css-1yvq5fz:hover { background:#0f3460 !important; border-color:#0f3460 !important; } #tsml-ui:not(:has(table)) a.css-1yvq5fz * { color:#ffffff !important; } /* phone / website / Update Meeting Info -> 5px-rounded soft buttons (Jason 2026-06-07) */ #tsml-ui:not(:has(table)) a.css-1jccj9u { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; border:1.5px solid #d8e0ea !important; border-radius:5px !important; background:#f7f9fc !important; padding:13px 16px !important; color:#174580 !important; font-weight:600 !important; text-decoration:none !important; transition:background .15s ease, border-color .15s ease !important; } #tsml-ui:not(:has(table)) a.css-1jccj9u:hover { background:#eef4fb !important; border-color:#174580 !important; color:#174580 !important; } #tsml-ui:not(:has(table)) a.css-1jccj9u:hover * { color:#174580 !important; } #tsml-ui:not(:has(table)) .css-7zdqb1 p { color:#33414f !important; line-height:1.55 !important; } #tsml-ui:not(:has(table)) ul { padding-left:0 !important; } #tsml-ui:not(:has(table)) ul li { list-style:none !important; display:inline-block !important; background:#eef4fb !important; color:#174580 !important; border-radius:999px !important; padding:4px 12px !important; margin:0 6px 6px 0 !important; font-weight:600 !important; font-size:0.85em !important; } /* Closed/Open chips are a