/* === TSML Meeting List === */
#tsml-ui {
--in-person: #118359;
--online: #174580;
--inactive: #b63b34;
--alert: #E9A151;
font-family: Inter, sans-serif !important;
color: #212529 !important;
max-width: var(--oai-w-wide) !important; /* match the posts pages width (2026-05-29 user request) */
margin-left: auto !important;
margin-right: auto !important;
/* Reserve vertical space before the React app paints so content below the
meeting list doesn't jump (fixes CLS ~0.21 on /meet/). The list always
exceeds this; the detail view roughly fills it. (Jason 2026-06-02 audit.) */
min-height: 70vh;
}
/* Desktop/tablet table view: keep a side gutter so the list never hugs the
viewport edges when the window is narrower than the 1280px max-width.
(Mobile <=820px uses the wrapped cards, which carry their own 12px margins.)
(Jason 2026-06-03.) */
@media (min-width: 821px) {
#tsml-ui {
box-sizing: border-box !important;
padding-left: var(--oai-pad-x, 24px) !important;
padding-right: var(--oai-pad-x, 24px) !important;
}
}
/* Hide page title */
/* Visually hidden, NOT display:none: TSML calls document.getElementById('tsml-title').focus()
after each in-page navigation, and a display:none element cannot take focus, so focus fell
back to and keyboard/screen-reader users lost their place. Scoped so our own injected
"Meeting Details" h1 still renders normally. (Jason 2026-08-18) */
#tsml-ui h1:not(#oai-meeting-pagetitle) { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; }
/* Force black text on form elements */
#tsml-ui button,
#tsml-ui input[type="search"],
#tsml-ui input[type="submit"] {
color: #212529 !important;
font-family: Inter, sans-serif !important;
font-weight: 600 !important;
}
/* Badge colors */
.css-1f0799s { background: #118359 !important; color: #fff !important; border-radius: 5px !important; font-weight: 700 !important; }
.css-1q3ergn { background: #174580 !important; color: #fff !important; border-radius: 5px !important; font-weight: 700 !important; }
.css-rsmwj9 { background: #b63b34 !important; color: #fff !important; border-radius: 5px !important; font-weight: 700 !important; }
/* Filter-bar buttons + inputs — 5px rounded corners on every control in
* the /meet/ top bar. Targets the actual rendered TSML-UI selectors:
* - Search input:
* (no semantic class — emotion css={Uc} only — id is the stable hook)
* - List/Map toggle: with
children, emotion
* css={qc|Wc} only — wrapper has no class.
* - Reset Filters / Email-Print buttons: handled separately via the
* .oai-print-button rule (set to 5px above).
* (2026-05-22 user request). */
#tsml-ui form input[type="search"],
#tsml-ui form input[type="text"],
#tsml-ui button#region,
#tsml-ui button#weekday,
#tsml-ui button#time,
#tsml-ui button#type,
#tsml-ui button#distance {
border-radius: 5px !important;
border: 1px solid #174580 !important;
}
/* List/Map toggle — two-button group. Round outer corners so it reads
* as a single pill (left rounded on List, right rounded on Map). Navy
* border on both buttons; the inner edges share a single 1px line. */
#tsml-ui [role="group"] > button {
border: 1px solid #174580 !important;
}
#tsml-ui [role="group"] > button:first-child {
border-top-left-radius: 5px !important;
border-bottom-left-radius: 5px !important;
border-top-right-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-right-width: 0 !important;
}
#tsml-ui [role="group"] > button:last-child {
border-top-left-radius: 0 !important;
border-bottom-left-radius: 0 !important;
border-top-right-radius: 5px !important;
border-bottom-right-radius: 5px !important;
}
/* Table header — navy fill on the TH cells (not the ) so the rounded
first/last-th corners actually clip the navy. Safari won't clip border-radius
on a /, but a cell's own background + border-radius rounds fine,
so this is what makes the meeting list's header round like the calendar. */
#tsml-ui thead { background-color: transparent !important; }
#tsml-ui thead th { background-color: #174580 !important; }
#tsml-ui thead th { color: #fff !important; font-family: Figtree, sans-serif !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-size: 14px !important; }
/* Remove the faint lines around the navy header (Jason 2026-06-20): TSML's default
th has a 1px light-grey border-bottom (the line BELOW the header / ABOVE the "in
progress" bar), and the abutting navy cells show sub-pixel WHITE seams between
columns. Drop the bottom border; fill the vertical seams with navy SIDE borders
(border-radius still clips these, so the rounded corners survive — the fill stays
on the cells, never on , per the note above). */
#tsml-ui thead th { border-top: 0 !important; border-bottom: 0 !important; border-left: 1px solid #174580 !important; border-right: 1px solid #174580 !important; outline: 0 !important; }
/* Wheelchair-accessible icon after the meeting name (TSML type X). (Jason 2026-06-21) */
#tsml-ui td.tsml-name .oai-wheelchair { display:inline-block; margin-left:7px; color:#174580; font-size:0.92em; line-height:1; vertical-align:baseline; } #tsml-ui td.tsml-name .oai-wc-glue { white-space:nowrap !important; }
#tsml-ui td.tsml-name .oai-wheelchair::before { font-family:"Font Awesome 6 Free","Font Awesome 5 Free"; font-weight:900; content:"\f193"; }
/* Address is tappable -> Google Maps directions (handler in wp_footer). (Jason 2026-06-21) */
#tsml-ui table td.tsml-address { cursor:pointer; }
#tsml-ui table td.tsml-address, #tsml-ui table td.tsml-address > div > span { color:#174580 !important; }
#tsml-ui table td.tsml-address > div > span { text-decoration:underline !important; text-underline-offset:2px !important; } @media (min-width: 821px) { #tsml-ui table td.tsml-address svg[data-testid="icon-geo"] { display:none !important; } #tsml-ui table td.tsml-address > div > span:has(> svg[data-testid="icon-geo"])::before { font-family:"Font Awesome 6 Free","Font Awesome 5 Free" !important; font-weight:900 !important; font-style:normal !important; content:"\f3c5" !important; font-size:15px !important; line-height:1 !important; display:inline-block !important; } #tsml-ui table td.tsml-address, #tsml-ui table td.tsml-address > div > span { color:#ffffff !important; text-decoration:none !important; }
/* Match meet2's address pills: the bundle draws them with a 5px radius and tight
4px/8px padding, meet2 uses a fully rounded pill with room to breathe. Colours and
the pin icon already match. Desktop only - the mobile card layout renders the
address as plain text. (Jason 2026-08-18) */
html body #tsml-ui table td.tsml-address > div > span { border-radius:999px !important; padding:6px 15px !important; gap:6px !important; }
}
/* ── Replace TSML-UI default SVG icons with Font Awesome 6 glyphs (Jason 2026-06-21) ── */
#tsml-ui svg[data-testid="icon-back"], #tsml-ui svg[data-testid="icon-info"], #tsml-ui svg[data-testid="icon-share"], #tsml-ui svg[data-testid="icon-calendar"], #tsml-ui svg[data-testid="icon-camera"], #tsml-ui svg[data-testid="icon-phone"], #tsml-ui svg[data-testid="icon-link"], #tsml-ui svg[data-testid="icon-edit"] { display:none !important; }
#tsml-ui *:has(> svg[data-testid^="icon-"])::before { font-family:"Font Awesome 6 Free","Font Awesome 5 Free" !important; font-weight:900 !important; font-style:normal !important; line-height:1 !important; display:inline-block; font-size:1.05em; }
#tsml-ui :is(a,button) > svg[data-testid="icon-geo"] { display:none !important; } #tsml-ui :is(a,button):has(> svg[data-testid="icon-geo"])::before { content:"\f3c5"; } #tsml-ui small > svg[data-testid="icon-geo"] { display:none !important; } #tsml-ui small:has(> svg[data-testid="icon-geo"])::before { content:"\f3c5" !important; }
#tsml-ui *:has(> svg[data-testid="icon-back"])::before { content:"\f060"; }
#tsml-ui *:has(> svg[data-testid="icon-share"])::before { content:"\f1e0"; }
#tsml-ui *:has(> svg[data-testid="icon-calendar"])::before { content:"\f271"; }
#tsml-ui *:has(> svg[data-testid="icon-camera"])::before { content:"\f03d"; }
#tsml-ui *:has(> svg[data-testid="icon-phone"])::before { content:"\f095"; }
#tsml-ui *:has(> svg[data-testid="icon-link"])::before { content:"\f0c1"; }
#tsml-ui *:has(> svg[data-testid="icon-edit"])::before { content:"\f044"; }
/* Mobile: keep the wheelchair OUTSIDE the name ellipsis — flex the cell so the link shrinks/ellipsizes while the icon stays pinned + visible. The Women/Men/Français label (TSML ) drops to its OWN line below the name (flex-basis:100%) so a long name doesn't get cramped/truncated beside it. (Jason 2026-06-21) */
@media (max-width:820px){
html body #tsml-ui table td.tsml-name { display:flex !important; flex-wrap:wrap !important; align-items:center !important; column-gap:6px !important; row-gap:2px !important; }
html body #tsml-ui table td.tsml-name a { order:1 !important; flex:0 1 auto !important; min-width:0 !important; max-width:none !important; }
html body #tsml-ui table td.tsml-name .oai-wheelchair { order:2 !important; flex:0 0 auto !important; margin-left:6px !important; }
/* flex:0 1 auto, NOT 0 0 100%: a 100% basis made the flag claim a whole line to
itself, so a following badge ("Relocated", "Temporarily Closed") was pushed to
a third row even with room to spare beside it. Sizing to content lets the badge
sit next to the flag and wrap only when it genuinely does not fit. The name keeps
its own line because it fills the 224px cell on its own at this font size.
(Jason 2026-08-22) */
html body #tsml-ui table td.tsml-name small { order:3 !important; flex:0 1 auto !important; max-width:100% !important; white-space:normal !important; overflow:visible !important; text-overflow:clip !important; margin:1px 0 0 0 !important; }
/* Only when a wheelchair icon is present, cap the name link so ~30px stays free on its line for the icon — otherwise a long name fills the row and the flex-wrap bumps the icon to the next line. Names with no icon keep the full width. (Jason 2026-06-21) */
html body #tsml-ui table td.tsml-name.oai-wc-name a { max-width: 100% !important; }
}
/* WCAG 2.4.7: the mobile block below removes the focus ring from the filter controls to
kill the tap highlight, but it also matched :focus / :focus-visible, leaving keyboard
users with no visible focus at <=820px. Restore it for :focus-visible only (real
keyboard focus); pointer taps never match :focus-visible, so the reason for the
original rule is preserved. `html body` out-specifies the suppressing selectors.
(Jason 2026-08-18) */
@media (max-width: 820px) {
html body #tsml-ui form input[type="search"]:focus-visible,
html body #tsml-ui form input[type="text"]:focus-visible,
html body #tsml-ui button#region:focus-visible,
html body #tsml-ui button#weekday:focus-visible,
html body #tsml-ui button#time:focus-visible,
html body #tsml-ui button#type:focus-visible,
html body #tsml-ui button#distance:focus-visible,
html body #tsml-ui [role="group"] > button:focus-visible,
html body #tsml-ui form .tsml-dropdown__button:focus-visible,
html body #tsml-ui .oai-print-button:focus-visible,
html body #tsml-ui .oai-reset-btn-style:focus-visible,
html body #tsml-ui table thead th:focus-visible,
html body #tsml-ui .oai-sortc-btn:focus-visible,
html body #tsml-ui .oai-sortc-list li:focus-visible {
outline: 3px solid #b63b34 !important;
outline-offset: 2px !important;
box-shadow: 0 0 0 2px #ffffff !important;
}
}
/* Table rows */
#tsml-ui tbody tr { border: none !important; }
/* Duplicate rows TSML-UI renders when overlapping time buckets are multi-selected (see oaiDedupeRows) */
#tsml-ui table tbody tr.oai-dupe-row,
#tsml-ui table tbody tr.oai-dupe-row:has(td.tsml-time):not(.oai-alert-row),
#tsml-ui .leaflet-popup-content .oai-dupe-row { display: none !important; }
#tsml-ui td { border: none !important; vertical-align: middle !important; }
/* Row divider — ONE token across all three lists (Jason 2026-06-01: the
e9edf2/ececec/e4e6ea greys collapse onto --oai-card-border). */
#tsml-ui tbody td { border-bottom: 1px solid var(--oai-card-border) !important; }
#tsml-ui tbody tr:nth-child(odd) { background-color: #ffffff !important; }
#tsml-ui tbody tr:nth-child(even) { background-color: #F0F5FA !important; }
/* Highlighted (hover) row — shared across the meeting list, service calendar
and bookstore so all three lists behave identically. */
#tsml-ui tbody tr:hover { background-color: #E4EEF7 !important; }
/* Rounded outer corners on the whole list so it reads as a single card,
matching the rounded aesthetic used across the rest of the site.
border-collapse must be `separate` for border-radius to take on a table;
border-spacing:0 keeps the cells flush. (2026-05-29 user: "Meeting guide
should be like this with curved corners".) */
#tsml-ui table {
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 5px !important;
overflow: hidden !important;
border: 1px solid #e4e9f0 !important;
/* The plain border wasn't rendering reliably (Safari handles
border-radius/borders on differently than the calendar's ).
A box-shadow RING renders regardless and follows the radius — guaranteed
visible card edge — plus the standard CARD drop shadow for the raised look.
(2026-05-29 Jason "missing the raised edges"; 2026-06-18 "5px + card drop shadow") */
box-shadow: 0 0 0 1px #e4e9f0, 0 6px 22px rgba(20, 30, 50, 0.10) !important;
}
#tsml-ui thead th:first-child { border-top-left-radius: 8px !important; }
#tsml-ui thead th:last-child { border-top-right-radius: 8px !important; }
#tsml-ui tbody tr:last-child td:first-child { border-bottom-left-radius: 8px !important; }
#tsml-ui tbody tr:last-child td:last-child { border-bottom-right-radius: 8px !important; }
/* Uniform row height + tighter text — every meeting row is the same minimum
height regardless of how many type badges show or whether the name wraps;
reduced line-height keeps multi-line names compact. `height` on a
behaves as a min-height. (2026-05-29 user: "same min height for each row",
"line height should be less".) */
#tsml-ui tbody tr { height: 64px !important; }
#tsml-ui tbody td {
padding-top: 8px !important;
padding-bottom: 8px !important;
line-height: 1.15 !important; /* tighter for names that wrap to 2 lines */
}
/* The meeting-name link carries its own (looser) line-height, so a wrapped name
sat farther apart than Location/Region. Force it to the same 1.15 as the rest
of the row. (2026-05-29 Jason: name should match the location/region spacing.) */
#tsml-ui tbody td.tsml-name,
#tsml-ui tbody td.tsml-name a {
line-height: 1.15 !important;
}
/* Meeting-name link in navy — match the service calendar's event link
(.oai-cal-c-event a { color:#174580 }) so the two lists' rows are identical. */
#tsml-ui tbody td.tsml-name a,
/* Filter bar (search + dropdowns) sits in an unclassed flex wrapper with 16px
L/R padding, so the controls were inset 16px while the table below is flush to
the #tsml-ui edges. Trim that padding on desktop so the filters sit closer to
the table edge. Mobile keeps 16px edge breathing room. (Jason 2026-06-01.) */
@media (min-width: 801px) {
#tsml-ui > div:has(form) { padding-left: 4px !important; padding-right: 4px !important; }
}
/* Meetings in progress row */
#tsml-ui tbody.css-1iez63e button {
background-color: #E9A151 !important;
color: #212529 !important;
font-weight: 700 !important;
/* 14px text to match the "384 meetings" total-row count; full-width + zero margin
so the orange is symmetric. Height is set to the 45px header in the alert-row
rule below. (2026-05-30 Jason: same size as the total count, 14px.) */
font-size: 16px !important;
line-height: 1.2 !important;
/* display:block + margin:0 auto centers the banner regardless of its computed
width — fixes the "left-aligned / short on the right" asymmetry. width:100%
fills the (full-colspan) cell; if anything caps the width, auto margins keep
it centred. (2026-05-29 Jason: the orange bar wasn't centred.) */
width: 100% !important;
display: block !important;
margin: 0 auto !important;
box-sizing: border-box !important;
}
/* SQUARE, full-width "X meeting(s) in progress" banner — no rounded corners,
spans the full table width below the blue header. (Jason 2026-05-30.) */
#tsml-ui .oai-alert-row button,
#tsml-ui tbody.css-1iez63e button {
border-radius: 0 !important;
}
/* Make the row + cell behind the banner transparent so the only orange that
shows is the rounded button (otherwise a square cell background hides the
rounded corners). Small inset so the rounding is clearly visible. */
#tsml-ui .oai-alert-row,
#tsml-ui .oai-alert-row td,
#tsml-ui tbody.css-1iez63e,
#tsml-ui tbody.css-1iez63e td,
#tsml-ui tbody.css-1iez63e tr {
background: transparent !important;
background-color: transparent !important;
}
/* The alert cell has colspan=5, so as a normal table-cell it already spans the
full table width; the button (width:100%, below) fills it edge-to-edge.
(Do NOT set the tbody/tr/td to display:block — that drops the colspan and
shrinks the band to its content width. Jason 2026-05-30: full-width square.) */
#tsml-ui .oai-alert-row td,
#tsml-ui tbody.css-1iez63e td {
width: auto !important;
}
#tsml-ui .oai-alert-row td,
#tsml-ui tbody.css-1iez63e td {
padding: 0 !important;
}
/* Jason 2026-05-30 (screenshots): the orange "X in progress" banner must sit FLUSH
with the blue header, fill 100% width, AND match the header's height (45px) — no
taller. Rows are otherwise forced to 60px (#tsml-ui tbody tr height:60px above),
so override the alert row to 45px and stretch the button to fill it edge to edge.
12px text to match the "384 meetings" total-row count. High specificity +
!important beats TSML-UI's own cell rules; hash-independent (keys off the
injected .oai-alert-row). Colspan-AGNOSTIC: the table grew from 5 to 6 columns
(LOCATION / GROUP added), so the old td[colspan="5"] selector stopped matching
— match any td in the alert row so a future column change can't break it again.
(Jason 2026-06-07) */
#tsml-ui tbody tr.oai-alert-row {
height: 45px !important; /* = the 45px blue header row; overrides the 60px row default */
}
#tsml-ui table tbody tr.oai-alert-row td {
padding: 0 !important;
height: 45px !important;
vertical-align: middle !important;
}
#tsml-ui table tbody tr.oai-alert-row td button {
width: 100% !important;
height: 45px !important;
max-height: none !important;
min-height: 0 !important;
margin: 0 !important;
font-size: 16px !important; /* match the "384 meetings" total-row text */
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 0 !important;
}
/* Links - black, underline on hover only */
#tsml-ui a { color: #212529 !important; text-decoration: none !important; }
#tsml-ui a:hover { color: #212529 !important; text-decoration: underline !important; }
/* === Map framing — 3px navy border + rounded corners ===================
TSML-UI renders the single-meeting map with MapLibre/Mapbox GL. The map
library adds .maplibregl-map / .mapboxgl-map to its root element (stable,
not an Emotion hash), so border those directly. overflow:hidden clips the
GL canvas to the rounded corners. */
#tsml-ui .maplibregl-map,
#tsml-ui .mapboxgl-map {
border: 3px solid #174580 !important;
border-radius: 10px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(20, 30, 50, 0.10) !important;
}
/* Keep the GL canvas itself clipped to the rounded corners */
#tsml-ui .maplibregl-canvas,
#tsml-ui .mapboxgl-canvas {
border-radius: 8px !important;
}
/* Main MAP view (List/Map toggle) is a Leaflet map. Give it the SAME raised-card
edge as the list table (1px ring + soft drop + 5px radius) so List and Map match.
CRITICAL: the edge must go on the WRAPPER (.css-e5yykt), NOT the inner
.leaflet-container. The wrapper has overflow:hidden (to clip tiles to the
radius), which was CLIPPING the drop shadow off the inner container — so the map
showed no shadow at all (Jason 2026-06-18). The wrapper's OWN box-shadow is not
clipped by its own overflow:hidden, and its parent is overflow:visible, so the
shadow shows. Scoped away from the single-meeting detail view (.css-7zdqb1),
whose map lives inside its own card. Desktop only (list drops its ring on mobile).
NOTE: .css-e5yykt is the TSML-UI leaflet wrapper Emotion class — re-verify on
plugin update. (Jason 2026-05-30 "same raised border as list"; 2026-06-18 "same
border and drop shadow as list".) */
@media (min-width: 821px) {
#tsml-ui:not(:has(.css-7zdqb1)) .css-e5yykt {
border-radius: 5px !important;
box-shadow: 0 0 0 1px #e4e9f0, 0 6px 22px rgba(20, 30, 50, 0.10) !important;
overflow: hidden !important;
/* The map sits inside an extra TSML-UI wrapper div (padding:16px 4px) plus a
~12px offset, leaving it 16px narrower than the table/toolbar on EACH side.
Pull it back out so its edges line up with the list table (and the filters
row) exactly. (Jason 2026-06-18 "still not the full same width".) */
margin-left: -16px !important;
width: calc(100% + 32px) !important;
}
/* Single-meeting detail map keeps its edge on the container (it sits inside the
.css-7zdqb1 card, so no wrapper-clip problem). */
#tsml-ui:has(.css-7zdqb1) .leaflet-container {
border-radius: 5px !important;
border: 1px solid #e4e9f0 !important;
box-shadow: 0 6px 22px rgba(20, 30, 50, 0.10) !important;
}
}
/* (Removed dead .oai-online-card CSS — online-only detail uses .oai-online-art now. 2026-06-20) */
/* Toolbar - search area hover */
#tsml-ui form.css-njho86:hover,
#tsml-ui form.css-njho86:focus-within {
background-color: transparent !important;
}
#tsml-ui input.css-13ce8ch:hover,
#tsml-ui input.css-13ce8ch:focus {
background-color: transparent !important;
border-color: #174580 !important;
outline: none !important;
}
/* Toolbar - search toggle arrow (visible button) — navy box, white chevron */
#tsml-ui button.css-1cdsq0f,
#tsml-ui button.css-1cdsq0f:hover,
#tsml-ui button.css-1cdsq0f:active,
#tsml-ui button.css-1cdsq0f:focus,
#tsml-ui button.css-1cdsq0f:focus-visible,
#tsml-ui button.css-1cdsq0f[aria-expanded="true"] {
background-color: #174580 !important;
color: #fff !important;
outline: none !important;
}
/* Make search input fill the full form width (same as sibling dropdowns) by
overlaying the navy chevron button absolutely on the input's right edge. */
#tsml-ui form.css-njho86 { position: relative !important; }
#tsml-ui form.css-njho86 fieldset { position: relative !important; width: 100% !important; }
#tsml-ui input.css-13ce8ch {
width: 100% !important;
padding-right: 44px !important;
box-sizing: border-box !important;
min-height: 46px !important; /* match the filter buttons' height (was 38px) */
}
#tsml-ui form.css-njho86 input[type="search"] { min-height: 40px !important; }
/* Sort dropdown in the summary bar (replaces the old "Default sort" text, gives
mobile a way to sort by the desktop columns). (Jason 2026-06-18) */
#tsml-ui .oai-sort-wrap { white-space: nowrap; }
/* Custom sort dropdown. The native popup on macOS is a translucent
dark OS menu that ignores CSS, so we hide the native select (kept for state
+ accessibility) and render the canonical OAI cselect panel (white card,
navy-selected rows) used in the Meetings Manager, with a compact inline
trigger that matches the summary bar. */
#tsml-ui .oai-sort-select { font: inherit; font-weight: 700; color: #174580; background: transparent; border: none; padding: 0; margin: 0; cursor: pointer; color-scheme: light; vertical-align: baseline; }
#tsml-ui .oai-sortc { position: relative; display: inline-block; vertical-align: baseline; text-align: left; margin-left: 0; }
#tsml-ui .oai-sortc-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0); border: 0 !important; }
/* Borderless, transparent trigger (Jason 2026-06-18 — border removed, NOT painted
white). Text matches the summary exactly: Figtree 700 (TSML-UI otherwise forces
Inter 600 on buttons) so "Sorted by: Day / Time" reads as one phrase, flush. The
arrow is the SAME solid/filled triangle the filter buttons use (an ::after CSS
triangle, 8x4px, here navy to match the value text) — NOT an SVG chevron. */
#tsml-ui .oai-sortc-btn { font-family: figtree, sans-serif !important; font-size: inherit !important; font-weight: 700 !important; color: inherit; background: transparent; border: none; border-radius: 0; padding: 0; cursor: pointer; line-height: inherit; }
#tsml-ui .oai-sortc-btn::after { content: '\f0d7'; display: inline-block; margin-left: 6px; vertical-align: middle; font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900; font-style: normal; font-size: 13px; line-height: 1; color: #174580; transition: color .15s; }
#tsml-ui .oai-sortc-btn:hover::after { color: #0f315c; }
#tsml-ui .oai-sortc-list { position: absolute; z-index: 600; top: calc(100% + 5px); left: 0; min-width: 100%; background: #fff; border: 1px solid #cdd9e8; border-radius: 8px; box-shadow: 0 12px 32px rgba(16,42,77,0.18); padding: 5px; margin: 0; list-style: none; }
#tsml-ui .oai-sortc-list li { padding: 7px 14px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 500; color: #1a1a1a; line-height: 1.3; white-space: nowrap; }
#tsml-ui .oai-sortc-list li:hover, #tsml-ui .oai-sortc-list li.is-active { background: #e4eef7; color: #174580; }
#tsml-ui .oai-sortc-list li[aria-selected="true"] { background: #174580; color: #fff; font-weight: 600; }
/* Keep EVERY toolbar control the same 40px height in BOTH List and Map view, on
BOTH mobile and desktop — TSML-UI's map view was inflating them taller. The
toolbar is .css-1jsdvzo (search form + filter dropdowns + Reset/Email + List/Map
toggle). (Jason 2026-06-18 "make them all 40, all of them, mobile and desktop") */
#tsml-ui .css-1jsdvzo { align-items: center !important; }
#tsml-ui .css-1jsdvzo button.css-1sp9z2q, /* filter dropdown toggles (Anywhere/Day/Time/Type) */
#tsml-ui .css-1jsdvzo > div > button, /* List / Map toggle */
#tsml-ui .css-1jsdvzo > a.oai-print-button, /* Reset Filters, Email / Print */
#tsml-ui .css-1jsdvzo > form input.css-13ce8ch { /* search box */
height: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
line-height: 1.1 !important;
box-sizing: border-box !important;
}
/* ...but NEVER force the dropdown OPTION rows (they expand to full height when a
filter is opened). */
#tsml-ui .css-1jsdvzo button.tsml-dropdown__button {
height: auto !important; min-height: 0 !important; max-height: none !important;
}
/* Mobile: the toolbar is a CSS grid whose explicit row sizing made the wrapped
cells overlap and look uneven. Re-declare it as a clean 2-column grid with every
row a flat 40px (grid-auto-rows + grid-template-rows:none clears the fixed rows),
and force each control to 40px. Excludes the dropdown OPTION rows. (Jason 2026-06-18
"on mobile all the buttons are skewed, make them all 40px") */
@media (max-width: 820px) {
#tsml-ui .css-1jsdvzo {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
grid-template-rows: none !important;
grid-auto-rows: auto !important;
gap: 5px !important;
align-items: stretch !important;
}
#tsml-ui .css-1jsdvzo > * { height: 40px !important; min-height: 40px !important; max-height: 40px !important; align-self: stretch !important; margin: 0 !important; }
#tsml-ui .css-1jsdvzo button:not(.tsml-dropdown__button),
#tsml-ui .css-1jsdvzo input.css-13ce8ch,
#tsml-ui .css-1jsdvzo a {
height: 40px !important; min-height: 40px !important; max-height: 40px !important;
box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important;
}
#tsml-ui .css-1jsdvzo button.css-1cdsq0f { height: 40px !important; top: 0 !important; bottom: auto !important; }
}
#tsml-ui button.css-1cdsq0f {
position: absolute !important;
right: 0 !important;
top: 0 !important;
bottom: 0 !important;
width: 38px !important;
z-index: 2;
}
/* The search/mode toggle shows a CARET, not a magnifying glass (Jason
2026-08-06: "easier for people to understand" — the button opens the
Search / Near Me / Near Location menu, it does not run a search; this
reverts the 2026-06-07 magnifier experiment). TSML-UI draws its own
chevron as a CSS border-triangle on ::after — override it to a Font
Awesome glyph. */
#tsml-ui button.css-1cdsq0f::after {
content: "\f0d7" !important; /* fa caret-down (the mode menu opens below) */
border: 0 !important;
width: auto !important;
height: auto !important;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
font-weight: 900 !important;
font-size: 15px !important;
color: #fff !important;
line-height: 1 !important;
}
/* one caret size across the toolbar (Jason 2026-08-06): the filter dropdowns
drew TSML-UI's small border-triangles; swap them to the SAME Font Awesome
caret as the search/mode toggle so all six read as one family. */
#tsml-ui button#region::after,
#tsml-ui button#weekday::after,
#tsml-ui button#time::after,
#tsml-ui button#type::after,
#tsml-ui button#distance::after {
content: "\f0d7" !important;
border: 0 !important;
width: auto !important;
height: auto !important;
font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome" !important;
font-weight: 900 !important;
font-style: normal !important;
font-size: 15px !important;
line-height: 1 !important;
display: inline-block !important;
vertical-align: middle !important;
margin-left: 7px !important;
}
/* Make the WHOLE "Near Me" box open the mode menu — not just the 38px magnifying-
glass button. In Near Me mode the input is disabled (greyed) and swallows taps,
so pointer-events:none lets a tap on the greyed area fall through to the
fieldset, where the delegated handler (oai-nearme-tap script) forwards it to the
toggle button. Only Near Me (other modes keep a typable input). (Jason 2026-06-07) */
#tsml-ui form fieldset input[placeholder="Near Me"] { pointer-events: none !important; }
/* Toolbar - fieldset reset */
#tsml-ui fieldset {
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
min-width: 0 !important;
}
/* Toolbar - main dropdown trigger hover */
#tsml-ui button.css-1sp9z2q:hover {
background-color: #174580 !important;
color: #fff !important;
border-color: #174580 !important;
}
/* Toolbar - List/Map toggle */
#tsml-ui button[data-active="true"] {
background-color: #174580 !important;
border-color: #174580 !important;
color: #fff !important;
}
#tsml-ui button[data-active="false"] {
background-color: transparent !important;
color: #174580 !important;
border-color: #174580 !important;
}
#tsml-ui button[data-active="false"]:hover {
background-color: #174580 !important;
color: #fff !important;
}
/* Dropdown items */
#tsml-ui .tsml-dropdown__button {
background-color: #ffffff !important;
color: #212529 !important;
font-family: Inter, sans-serif !important;
font-weight: 400 !important;
}
#tsml-ui .tsml-dropdown__button * { color: inherit !important; }
#tsml-ui .tsml-dropdown__button:hover,
#tsml-ui .tsml-dropdown__button:focus {
background-color: #174580 !important;
color: #fff !important;
}
/* Individual meeting page - Zoom button */
#tsml-ui a.css-1yvq5fz { background-color: #174580 !important; color: #fff !important; text-decoration: none !important; }
#tsml-ui a.css-1yvq5fz:hover { background-color: #0f3460 !important; color: #fff !important; }
/* Individual meeting page - Get Directions button */
#tsml-ui a.css-1nmg4yc { background-color: #174580 !important; color: #fff !important; text-decoration: none !important; }
#tsml-ui a.css-1nmg4yc:hover { background-color: #118359 !important; color: #fff !important; text-decoration: none !important; }
/* Individual meeting page - Share/Add to Calendar buttons */
#tsml-ui button.css-1jccj9u, #tsml-ui a.css-1jccj9u { font-weight: 700 !important; }
#tsml-ui button.css-1jccj9u:hover, #tsml-ui a.css-1jccj9u:hover { background-color: #174580 !important; color: #fff !important; border-color: #174580 !important; }
/* Table header padding */
#tsml-ui thead th { padding: 10px 16px !important; height: 45px !important; box-sizing: border-box !important; } /* pinned to 45px = the in-progress/alert row, so the blue header and yellow row are exactly equal height */
/* Meetings in progress padding */
#tsml-ui tbody.css-1iez63e button { padding: 9px 16px !important; }
/* Column widths for the desktop list (>=1100px only — below that the table needs every
column to share space equally, or Meeting and Location collapse to ~84px and the time
wraps). The bundle gives all columns an equal share, which left Time with 246px to draw
"10:00 am Monday" (~140px) while the Address pill wanted ~270px and truncated. Fixed
table layout reads its widths from the header row; the Distance column exists only in
Near Me / Near Location, so both layouts are matched via :has(). Meeting and Location
stay automatic and split the remainder.
(Jason 2026-08-18 "less space between time and meeting, more room for address") */
@media (min-width: 1100px) {
/* Time needs 200px: is a flex whose two spans intrinsically want 166px
("10:00 AM" + 8px gap + "Wednesday"), plus 16px of padding each side. Anything
narrower overflows the cell and the day runs into the meeting name. The spans are
space-between, so the day always sits at the content-box right edge — the gap to the
next column is padding-right + the Meeting cell's 16px padding-left, which is why
that padding is raised from 8px to 16px here: 32px, a bit over two characters.
(Jason 2026-08-18 "too close.. needs at least 2 character space") */
html body #tsml-ui table td.tsml-time,
html body #tsml-ui table thead th:nth-child(1) { padding-right:16px !important; }
/* Fixed per-column pixel widths REMOVED 2026-08-22 (Jason: "there should be
no static column widths. They need to adjust depending on column content").
They pinned Time at 200px, Distance at 110px and Address at 290px whatever
the content, leaving Meeting and Location to split what was left - which is
why long meeting names were squeezed while Address sat half empty. The
table is table-layout:auto now and sizes to content; Time, Distance and the
headers are nowrap so they take their natural compact width, and the slack
falls to Meeting and Location. See oai-site-wide.css. */
}
/* Inactive marker in the address column: the bundle draws its own ring-and-x SVG
(data-testid="icon-close"), which matches nothing else on the site. Swap it for the
Font Awesome times glyph. CSS only, because the SVG is React-owned — it is hidden, not
removed, so nothing here can break reconciliation. FA5 is named first (that is the
version the site loads); the codepoint is the same in FA6. On desktop the pill is a
flex with gap:6px so the glyph spaces itself; the mobile card renders the span as a
block, where the gap does not apply, hence the margin below.
(Jason 2026-08-18 "can the inactive icon be the x from font awesome") */
html body #tsml-ui td.tsml-address svg[data-testid="icon-close"] { display:none !important; }
html body #tsml-ui td.tsml-address > div > span:has(> svg[data-testid="icon-close"])::before {
content:"\f00d";
font-family:"Font Awesome 5 Free","Font Awesome 6 Free";
font-weight:900;
font-style:normal;
font-size:1.05em;
line-height:1;
flex:0 0 auto;
}
@media (max-width: 820px) {
html body #tsml-ui td.tsml-address > div > span:has(> svg[data-testid="icon-close"])::before { margin-right:6px; }
}
/* One line per row: long meeting names, locations and regions get an ellipsis instead of
wrapping, so every row is the same height. The cut lands at the column edge rather than
a hard character count, which keeps it adaptive — at 1440 the Meeting and Location
columns are 259px, and 25 characters of Figtree 700 16px measures 259px, so this is
Jason's 25 without leaving dead space at other widths. The anchor is clamped rather
than the whole cell so the eligibility flag after it ("Women Only") is never the thing
that gets cut; when a flag is present the anchor yields the 86px it needs. Desktop only
— the mobile cards have room to wrap and are left alone.
(Jason 2026-08-18 "don't have it go to two lines") */
@media (min-width: 821px) {
html body #tsml-ui table td.tsml-location,
html body #tsml-ui table td.tsml-region {
white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important;
}
html body #tsml-ui table td.tsml-name > a {
display:inline-block; max-width:100%; vertical-align:bottom;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
html body #tsml-ui table td.tsml-name:has(small) > a { max-width:calc(100% - 86px); }
}
/* The open dropdown PANEL in meet2's idiom: a floating rounded card with rounded rows and
the selection filled navy. Values are meet2's own live computed styles rather than an
eyeball — panel radius 12px, 1px #e4e9f0, 7px padding, shadow 0 14px 38px
rgba(20,30,50,.2); rows radius 8px, 9px/11px padding, #174580 behind the selection.
The trigger buttons are deliberately NOT touched: they keep TSML's rectangular 40px
look (Jason 2026-08-19: "I meant change the submenu, not the menus").
Selectors are the filter ids and TSML's own tsml-dropdown* classes, never the emotion
hashes (css-1sp9z2q and friends), which change on every bundle release and have already
broken styling here once.
(Jason 2026-08-19 "can the dropdowns for meet be like meet2 in style") */
html body #tsml-ui .tsml-dropdown {
border-radius: 12px !important;
border: 1px solid #e4e9f0 !important;
background: #fff !important;
padding: 7px !important;
box-shadow: 0 14px 38px rgba(20, 30, 50, .2) !important;
}
/* TSML paints the selection on the ITEM wrapper, which is square; move it to the button so
the fill follows the row's rounded corners. */
html body #tsml-ui .tsml-dropdown .tsml-dropdown__item,
html body #tsml-ui .tsml-dropdown .tsml-dropdown__item[data-active="true"] {
background: transparent !important;
border: 0 !important;
}
/* Type matches the site header's own submenu items exactly — 15px / 600 / #174580 /
20.25px line-height / 9px 12px — so a filter menu reads like every other menu on the
site. (Jason 2026-08-19 "can the text be the same as the main menu drop down menus") */
html body #tsml-ui .tsml-dropdown .tsml-dropdown__button {
border-radius: 8px !important;
padding: 9px 12px !important;
font-family: Figtree, Inter, sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 20.25px !important;
color: #174580 !important;
}
/* Counts sit back in grey, as they do in meet2. */
html body #tsml-ui .tsml-dropdown .tsml-dropdown__button > span:last-child {
color: #5f6875 !important;
font-weight: 400 !important;
font-size: 15px !important;
}
/* The sub-region expander is a bare caret there, not a grey block butted against the
panel edge. */
html body #tsml-ui .tsml-dropdown .tsml-dropdown__expand {
background: transparent !important;
border: 0 !important;
border-radius: 8px !important;
}
html body #tsml-ui .tsml-dropdown .tsml-dropdown__expand:hover {
background: #eef3f9 !important;
}
/* TSML rules off its groups with plain