/* Generic */
.cea-hidden {
  display: none !important;
}

.cea-flex {
  display: flex;
  align-items: center;
}

.cea-flex input[type="checkbox"] {
  width: 25px;
}

.loading {
  position: relative;
}

.loading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.7);
}

.loading::after {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-20 -20 40 40"><style>circle { animation: 2s a infinite linear, 1s o infinite linear; }@keyframes a {from{stroke-dasharray:100 0}50%25{stroke-dasharray:0 100}to{stroke-dasharray:100 0}}@keyframes o {from{stroke-dashoffset:75}to{stroke-dashoffset:375}}<%2Fstyle><circle r="15.9154943092" stroke-width="7" fill="none" stroke="rgb(247, 108,108)" /></svg>');
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Form notices -- own class names (not WordPress's generic .notice) so
   nothing theme-side can restyle them. A bordered, tinted card with a
   round badge, in the navy / coral language used by the finder and the
   wizards; falls back to its own hex values since these can render on
   pages the wizard/widget CSS never touches. */
.cea-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 700px;
  margin: 0 auto 1rem;
  padding: 1.15rem 1.4rem;
  border-radius: 10px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.55;
  background: rgba(46, 63, 124, 0.07);
  border: 1px solid #2e3f7c;
  color: #22315e;
}

/* Badge icons are inline SVG, not font glyphs: a text "\2713" renders
   heavy in Inter (the site body font) and thin in San Francisco (the
   mockup), so the same CSS looked different in the two places. The SVG
   is drawn thin with round caps -- the San Francisco look -- everywhere. */
.cea-notice::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: #2e3f7c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 66%;
}

.cea-notice a {
  color: #2e3f7c;
}

.cea-notice--error {
  background: rgba(201, 82, 77, 0.09);
  border-color: #c9524d;
  color: #6e2f2c;
}

.cea-notice--error::before {
  background-color: #c9524d;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v7.5'/%3E%3Ccircle cx='12' cy='18' r='1.9' fill='%23ffffff' stroke='none'/%3E%3C/svg%3E");
}

.cea-notice--error a {
  color: #c9524d;
}

/* Success is green: the same green as "happening now" on Find a
   Meeting (Jason, 2026-09-24, Map #338). */
.cea-notice--success {
  background: #edfaef;
  border-color: #00a32a;
  color: #006b1a;
}

.cea-notice--success::before {
  background-color: #00a32a;
}

.cea-notice--success a {
  color: #006b1a;
}

/* Error notices inside a form card, above the form (which stays on
   screen so the visitor can fix and resubmit). */
.cea-form-notices {
  margin: 0 0 1.25rem;
}

/* Replaces a submission form once it's been submitted (see
   Cea_Meetings_Manager_Public::render_submission_success_panel()):
   request-specific heading, the confirmation, any warning beneath, and
   on the meeting forms a "View all meetings" button (Map #337). */
.cea-submission-success {
  max-width: 700px;
  margin: 2rem auto 2.5rem;
  text-align: center;
}

.cea-submission-heading {
  font-family: "Roboto Slab", serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: #1d2327;
}

.cea-submission-success .cea-notice {
  margin: 0 auto 0.75rem;
}

/* The site's navy button, as on the forms' Submit. */
.cea-submission-success .cea-submission-back {
  display: inline-block;
  margin-top: 0.75rem;
  padding: 14px 28px;
  border-radius: 6px;
  background-color: #2e3f7c;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.cea-submission-success .cea-submission-back:hover,
.cea-submission-success .cea-submission-back:focus {
  background-color: #202c59;
  color: #fff;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* Tabs */
.cea-tabs {
  list-style: none;
  padding: 0;
  display: flex;
  margin-bottom: 2rem;
}

.cea-tabs li {
  margin-right: 0.5rem;
}

.cea-tabs li a {
  padding: 0.5rem 0.9375rem;
  background-color: #03a9f4;
  color: #fff;
  transition: opacity 0.2s ease;
}

.cea-tabs li a:not(.active):hover {
  opacity: 0.5;
}

.cea-tabs li a.active {
  background-color: #384785;
}

.cea-tabs li a {
  text-decoration: none;
}

/* Forms */
.cea-form {
  padding: 3rem;
  border-radius: 1rem;
  border: solid 1px rgb(209, 209, 209);
  background-color: #e7e7e7;
}

.cea-form.loading::before {
  border-radius: 1rem;
}

.cea-form h2 {
  margin-top: 2rem;
  margin-bottom: 0;
}

.cea-form h2.no-margin-top {
  margin-top: 0;
}

.cea-form h3 {
  margin-bottom: 0;
}

.inline-row {
  display: flex;
  align-items: center;
}

.inline-row > label {
  margin-left: 15px;
}

.m-row {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

.m-row > div {
  width: 100%;
  font-size: 1rem;
}

.m-row > div.m-col {
  width: 50%;
}

.m-row > div.m-col:first-child {
  padding-right: 20px;
}

.m-row > div.m-col:last-child {
  padding-left: 20px;
}

/* .row-label is a <label> since the accessibility pass (Map #275).
   A label is inline by default; it has to go on behaving like the
   block-level div it replaced, everywhere it is used. */
.row-label {
  display: block;
}

.m-row .row-label {
  margin-bottom: 0.5rem;
  margin-top: 1em;
}

.m-row input,
.m-row select,
.m-row textarea {
  width: 100%;
  font-size: 1rem !important;
  height: auto !important;
}

/* Phone-widget inputs (.iti__tel-input) are left out: the widget sets
   its own inline padding-left to clear the flag, and an !important
   padding here would put the typed number underneath the flag. */
.m-row input:not(.iti__tel-input),
.m-row select,
.m-row textarea {
  padding: 0.75rem !important;
}

.m-row input:focus,
.m-row select:focus,
.m-row textarea:focus {
  border-color: #03a9f4 !important;
}

.m-row input.inline,
.m-row select.inline,
.m-row textarea.inline {
  width: auto;
  margin-right: 0.5rem;
}

.m-radio-group {
  display: flex;
  margin-bottom: 1rem;
}

.m-radio-group label {
  margin-right: 1rem;
}

.m-radio-group input {
  margin-top: 0;
  margin-left: 0;
  margin-right: 0.5rem;
  width: auto;
}

.m-row .required {
  font-size: 0.75rem;
  color: var(--tm-coral);
  font-style: italic;
  display: inline-block;
  margin-left: 0.5rem;
}

.button {
  border: none !important;
  font-weight: bold;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border-bottom: 3px solid #0188c7 !important;
  background-color: #03a9f4;
  color: #fff;
  margin: 1rem 0;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  font-size: 1rem !important;
}

.button:hover {
  background-color: #0188c7 !important;
  border-color: #0177ad !important;
  color: #fff;
}

.button.cancel {
  background-color: #f76c6c !important;
  border-color: #cf5a5a !important;
}

.button.cancel:hover {
  background-color: #cf5a5a !important;
  border-color: #b14c4c !important;
}

.cea-form .actions {
  margin-top: 2rem;
}

.actions .button {
  margin-right: 0.5rem;
}

/* Close a Meeting, Close an Intergroup, Edit an Intergroup, Edit an
   Area -- still single-page forms, not wizardized (see the
   wizard-generalization-plan backlog item). Restyled 2026-07-22 to
   match the client's close-update-request-form.html design ref
   exactly (rounder 24px card, bolder dark labels, 44px-tall inputs) --
   headings switched from the design ref's Georgia to Roboto Slab
   2026-07-31 to match the site's actual (Avada-set) heading font
   instead of fighting it -- same design language as the Edit a
   Meeting/Add
   a Meeting wizard (.cea-wizard-wrap below), just its own literal
   values here rather than reusing --tm-radius/--tm-radius-sm, since
   those are shared tokens the Today's Meetings/Find pages also read
   and this design ref's card/input shapes are rounder than those.
   Shared marker class on the existing per-page wrapper divs
   (cancel-a-meeting-wrap etc.) rather than a 4-way selector list
   repeated on every rule. */
.cea-branded-form-wrap .cea-form {
  padding: 2.5rem;
  border-radius: 24px;
  border: 1px solid #e5e5e5;
  background: var(--tm-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cea-branded-form-wrap .cea-form h2 {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Roboto Slab", serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--wiz-sky);
}

.cea-branded-form-wrap .cea-form h2.no-margin-top {
  margin-top: 0;
}

.cea-branded-form-wrap .cea-form .row-label {
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.cea-branded-form-wrap .cea-form .required {
  color: var(--tm-coral);
  font-style: normal;
}

.cea-branded-form-wrap .cea-form input,
.cea-branded-form-wrap .cea-form select,
.cea-branded-form-wrap .cea-form textarea {
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 15px !important;
}

.cea-branded-form-wrap .cea-form input,
.cea-branded-form-wrap .cea-form select {
  height: 44px !important;
}

.cea-branded-form-wrap .cea-form input:not(.iti__tel-input),
.cea-branded-form-wrap .cea-form select {
  padding: 0 14px !important;
}

/* International phone widget (intl-tel-input): full-width like the
   other fields; left padding comes from the widget itself. */
.cea-form .iti {
  display: block;
  width: 100%;
  /* The "+1" dial code inherits its size from here, not from the
     input (whose 15px is forced with !important), so it rendered at the
     theme's larger body size. Pin it to match the typed digits. */
  font-size: 15px;
  line-height: 1.2;
}

.cea-form .iti__selected-country,
.cea-form .iti__selected-dial-code {
  font-size: 15px;
  font-family: inherit;
  color: var(--cea-field-text);
}

/* Typed text in form fields: near-black, not the theme's grey (Avada
   colours text/email inputs #595858, and the phone widget's dial code
   inherited the page grey). Scoped to the single-page forms and the
   wizards; two-class selectors so they outrank the theme's
   input[type="text"] rule regardless of stylesheet order. */
.cea-branded-form-wrap,
.cea-wizard-wrap {
  --cea-field-text: #1a1a1a;
}

.cea-branded-form-wrap .cea-form input,
.cea-branded-form-wrap .cea-form select,
.cea-branded-form-wrap .cea-form textarea,
.cea-wizard-wrap .cea-form input,
.cea-wizard-wrap .cea-form select,
.cea-wizard-wrap .cea-form textarea {
  color: var(--cea-field-text);
}

.cea-form input.iti__tel-input {
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 14px;
}

.cea-branded-form-wrap .cea-form textarea {
  height: 110px;
  padding: 10px 14px !important;
}

.cea-branded-form-wrap .cea-form input[type="date"] {
  max-width: 320px;
}

.cea-branded-form-wrap .cea-form input:focus,
.cea-branded-form-wrap .cea-form select:focus,
.cea-branded-form-wrap .cea-form textarea:focus {
  border-color: var(--wiz-steel) !important;
}

/* Captcha sits in its own bordered block above the Submit/Cancel row
   -- same separation the wizard's Confirm step already uses
   (.wizard-confirm-captcha) -- rather than packed into .actions
   alongside the buttons. Not a custom-styled box around the widget
   itself: Google's reCAPTCHA iframe already renders its own bordered
   checkbox box, so wrapping it in another one would double up. */
.cea-branded-form-wrap .cea-form .form-captcha {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
}

.cea-branded-form-wrap .cea-form .actions {
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.cea-branded-form-wrap .cea-form .actions .button {
  background-color: var(--wiz-navy);
  border: none !important;
  padding: 14px 28px;
  font-size: 15px !important;
  margin: 0;
}

.cea-branded-form-wrap .cea-form .actions .button:hover {
  background-color: var(--wiz-navy-dark) !important;
  border-color: var(--wiz-navy-dark) !important;
}

/* "Cancel and go back": an outlined secondary button beside Submit,
   like the wizards' Back (Map #342), not bare underlined text */
.cea-branded-form-wrap .cea-form .actions .button#btn-cancel {
  background: transparent !important;
  color: var(--tm-text-sec) !important;
  border: 1.5px solid var(--tm-border) !important;
  text-decoration: none;
  margin: 0;
}

.cea-branded-form-wrap .cea-form .actions .button#btn-cancel:hover {
  background: transparent !important;
  color: var(--wiz-navy) !important;
  border-color: var(--wiz-navy) !important;
}

/* "Which record is this?" banner -- design ref
   close-update-request-form.html (2026-07-22, exact values from its
   .context-card/.context-label/.context-title/.context-meta). Shown
   above the Edit a Meeting wizard's card and at the top of the Close
   a Meeting / Close an Intergroup / Edit an Intergroup / Edit an Area
   single-page forms, once a specific record is loaded. Rendered via
   render_context_banner() in class-cea-meetings-manager-public.php so
   all five forms share one markup/style instead of drifting apart.
   Margin-bottom here (not on the card itself) since this sits
   outside/above the card in every one of those five wrapper divs. */
.meeting-context-banner {
  margin-bottom: 1.5rem;
  background: #eaf3f9;
  border: 1.5px solid #93c0de;
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meeting-context-label {
  font-size: 13px;
  font-weight: 700;
  color: #2e6e96;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}

.meeting-context-time {
  font-size: 23px;
  font-weight: 700;
  color: #2e3f7c;
}

.meeting-context-meta {
  font-size: 14px;
  color: #3d5a80;
}

/* "You're Updating: Area 2" variant (Edit an Area): one bar in the
   banner's usual light blue and soft outline, the label on a slightly
   deeper tint of the same blue to the left of the record's name, split
   by a faint divider. Stacks on narrow screens. */
.meeting-context-banner--updating {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.meeting-context-banner--updating .meeting-context-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 20px;
  background: rgba(61, 143, 196, 0.12);
  border-right: 1px solid #c3dbeb;
  color: #2e6e96;
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.meeting-context-banner--updating .meeting-context-label svg {
  flex: none;
  opacity: 0.85;
}

.meeting-context-banner--updating .meeting-context-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 12px 22px;
}

/* Same sans-serif, bold 23px name as the original banner
   (.meeting-context-time above) -- just tighter line height for the bar. */
.meeting-context-banner--updating .meeting-context-time {
  line-height: 1.2;
}

.meeting-context-banner--updating .meeting-context-meta {
  font-size: 14px;
  line-height: 1.3;
}

@media (max-width: 520px) {
  .meeting-context-banner--updating .meeting-context-label {
    padding: 10px 12px;
    font-size: 13px;
  }

  .meeting-context-banner--updating .meeting-context-body {
    padding: 10px 14px;
  }

  .meeting-context-banner--updating .meeting-context-time {
    font-size: 18px;
  }

  .meeting-context-banner--updating .meeting-context-meta {
    font-size: 13px;
  }
}

/* Results */

#meeting-results {
  margin: 3rem 0;
}

.meeting-result {
  padding: 1.5rem 1.5rem .3rem 1.5rem;
  border: 1px solid #e0e0e0;
  background-color: #f7f7f7;
  margin-bottom: 2rem;
  display: flex;
  justify-content: space-between;
}

.meeting-result .info {
  width: 80%;
}

.row-divider {
  margin-bottom: 1rem;
}

.meeting-result .info .item {
  display: flex;
  min-height: 1.875rem;
  margin-bottom: 1rem;
}

.meeting-result .info .item .text {
  max-width: 480px;
  word-break: break-word;
}

.meeting-result .info .item .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5625rem;
  height: 1.5625rem;
  margin-right: 1rem;
  background-repeat: no-repeat;
}

.meeting-result .info-content {
  max-width: 460px;
}

.meeting-result .info .item.details {
  overflow-wrap: break-word;
}

.meeting-result .info .item.status .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.day-time .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm1-10V7h-2v7h6v-2h-4z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.call .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M21 16.42v3.536a1 1 0 0 1-.93.998c-.437.03-.794.046-1.07.046-8.837 0-16-7.163-16-16 0-.276.015-.633.046-1.07A1 1 0 0 1 4.044 3H7.58a.5.5 0 0 1 .498.45c.023.23.044.413.064.552A13.901 13.901 0 0 0 9.35 8.003c.095.2.033.439-.147.567l-2.158 1.542a13.047 13.047 0 0 0 6.844 6.844l1.54-2.154a.462.462 0 0 1 .573-.149 13.901 13.901 0 0 0 4 1.205c.139.02.322.042.55.064a.5.5 0 0 1 .449.498z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.meeting-contact .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M4 22a8 8 0 1 1 16 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.mailing .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm9.06 8.683L5.648 6.238 4.353 7.762l7.72 6.555 7.581-6.56-1.308-1.513-6.285 5.439z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.service-positions .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M3.783 2.826L12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976zM12 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm-4.473 5h8.946a4.5 4.5 0 0 0-8.946 0z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.comments .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M6.455 19L2 22.5V4a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6.455z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.venue .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.website .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm6.355-6.048v-.105c0-.922 0-1.343-.652-1.716a7.374 7.374 0 0 0-.645-.325c-.367-.167-.61-.276-.938-.756a12.014 12.014 0 0 1-.116-.172c-.345-.525-.594-.903-1.542-.753-1.865.296-2.003.624-2.085 1.178l-.013.091c-.121.81-.143 1.082.195 1.437 1.265 1.327 2.023 2.284 2.253 2.844.112.273.4 1.1.202 1.918a8.185 8.185 0 0 0 3.151-2.237c.11-.374.19-.84.19-1.404zM12 3.833c-2.317 0-4.41.966-5.896 2.516.177.123.331.296.437.534.204.457.204.928.204 1.345 0 .328 0 .64.105.865.144.308.766.44 1.315.554.197.042.399.084.583.135.506.14.898.595 1.211.96.13.151.323.374.42.43.05-.036.211-.211.29-.498.062-.22.044-.414-.045-.52-.56-.66-.529-1.93-.356-2.399.272-.739 1.122-.684 1.744-.644.232.015.45.03.614.009.622-.078.814-1.025.949-1.21.292-.4 1.186-1.003 1.74-1.375A8.138 8.138 0 0 0 12 3.833z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.meeting-result .info .item.bylaws .icon {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0idy02IGgtNiIgZmlsbD0iIzM3NDc4NSIgdmlld0JveD0iMCAwIDIwIDIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik05IDQuODA0QTcuOTY4IDcuOTY4IDAgMDA1LjUgNGMtMS4yNTUgMC0yLjQ0My4yOS0zLjUuODA0djEwQTcuOTY5IDcuOTY5IDAgMDE1LjUgMTRjMS42NjkgMCAzLjIxOC41MSA0LjUgMS4zODVBNy45NjIgNy45NjIgMCAwMTE0LjUgMTRjMS4yNTUgMCAyLjQ0My4yOSAzLjUuODA0di0xMEE3Ljk2OCA3Ljk2OCAwIDAwMTQuNSA0Yy0xLjI1NSAwLTIuNDQzLjI5LTMuNS44MDRWMTJhMSAxIDAgMTEtMiAwVjQuODA0eiI+PC9wYXRoPjwvc3ZnPg==");
}

.meeting-result .info .more-info-toggle {
  margin-left: 3.5625rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: inline-flex;
}

.meeting-result .space-left {
  margin-left: 3.5625rem;
}

.meeting-result .info .more-info-toggle::after {
  content: "";
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  margin-left: 0.5rem;
  width: 1.5625rem;
  height: 1.5625rem;
}

.meeting-result .info .more-info-toggle.active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z'/%3E%3C/svg%3E");
}

.meeting-result .actions {
  width: 20%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: column;
}

.meeting-result .actions a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #374785;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  margin-bottom: 0.625rem;
}

.meeting-result .actions a.btn-edit-meeting,
.meeting-result .actions a.btn-edit-intergroup,
.meeting-result .actions a.btn-edit-area {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12.9 6.858l4.242 4.243L7.242 21H3v-4.243l9.9-9.9zm1.414-1.414l2.121-2.122a1 1 0 0 1 1.414 0l2.829 2.829a1 1 0 0 1 0 1.414l-2.122 2.121-4.242-4.242z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
}

.meeting-result .actions a.btn-cancel-meeting,
.meeting-result .actions a.btn-cancel-intergroup,
.meeting-result .actions a.btn-cancel-area {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M7 6V3a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v3h5v2h-2v13a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V8H2V6h5zm2-2v2h6V4H9z' fill='rgba(255,255,255,1)'/%3E%3C/svg%3E");
}

.meeting-result .actions a:hover {
  opacity: 0.5;
}

/* Today's Meetings widget
 * Layout/visual language follows valleyhow.org/meetings: search bar, an
 * unlabeled row of format chips, a "Filters" disclosure for everything
 * else, and a Time/Meeting/Location/Address/Region result grid. */

:root {
  /* was the Valley HOW green #157060; now the site navy, so none of that
     green is left (Jason, 2026-09-22, Map #75). Name kept for its users. */
  --tm-teal: #2e3f7c;
  --tm-coral: #c43e3e;
  --tm-amber: #8b5d00;
  --tm-purple: #5a4080;
  /* Meeting-type colours (P3, Jason 2026-09-21): no red/green pair, so
     they don't read as stop/go and stay distinct for red-green colour
     blindness. Hybrid is a neutral grey tag. Only the type badge, row
     edge, row action buttons, calendar box and map use these; the
     --tm-teal/--tm-coral accents elsewhere are unchanged. */
  --tm-type-inperson: #ae4804;
  --tm-type-online: #303aa6;
  --tm-type-phone: #0d7365;
  --tm-type-hybrid: #491f5c;
  --tm-navy: #374785;
  --tm-bg: #faf8f5;
  --tm-surface: #ffffff;
  --tm-text: #2d2d2d;
  --tm-text-sec: #595959;
  --tm-border: #e0dcd8;
  --tm-radius: 10px;
  /* The filter row's control height: the Day/Time/... pills and the
     happening-now bar both read it, so they always match (Map #275). */
  --tm-pill-h: 36px;
  --tm-radius-sm: 6px;
  --tm-radius-badge: 50px;
  --tm-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);

  /* Client's confirmed core brand palette (2026-07-20). Named --wiz-*
     from when it was scoped to .cea-wizard-wrap only (the Edit/Add a
     Meeting wizard trial); moved up to :root on 2026-07-21 once
     Close a Meeting/Intergroup and Edit an Intergroup/Area also
     adopted it (see .cea-branded-form-wrap below) -- kept the same
     variable names rather than a site-wide rename, since the wizard
     CSS already references var(--wiz-*) in a few hundred lines below.
     Deliberately left --tm-navy/--tm-coral above untouched even
     though they're similar shades -- those are the older palette
     still used by Today's Meetings/Find an Intergroup/Find an Area,
     unifying them is a separate decision, not implied by this. */
  --wiz-navy: #2e3f7c;
  --wiz-navy-dark: #202c59;
  --wiz-coral: #f0736e;
  --wiz-coral-dark: #c9524d;
  --wiz-steel: #3d8fc4;
  --wiz-steel-dark: #2c6d9a;
  --wiz-sky: #4ca6ee;
}

.todays-meetings-wrap {
  max-width: 100%;
  margin-bottom: 2rem;
  /* The result grid switches on based on this wrapper's own rendered
     width (container query), not the viewport — themes that put the
     shortcode in a narrower content column (sidebars, etc.) would never
     cross a viewport-width breakpoint even on a wide desktop screen. */
  container-type: inline-size;
  container-name: tm-widget;
}

.tm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Filter bar */

.tm-filter-bar {
  background: var(--tm-surface);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.tm-search-input-wrap {
  position: relative;
}

.tm-search-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--tm-text-sec);
  pointer-events: none;
}

.tm-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.85rem 1rem 0.85rem 2.9rem;
  border: 2px solid var(--wiz-navy);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  font-size: 1.1rem;
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 63, 124, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

/* The hint only: a step lighter than the theme's #595858 placeholder, so it
   reads as a hint. What a visitor types keeps the normal text colour. */
.tm-search-input::placeholder {
  color: #7a7a7a;
  opacity: 1;
}

/* The search hint that types itself: the words sit over the empty box as
   decoration -- never text in the field -- and show only once public.js has
   taken over from the placeholder (.is-typing), not while the box has focus
   or a value (.is-busy). */
.tm-type-hint {
  display: none;
  position: absolute;
  left: 2.9rem;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  font-size: 1.1rem;
  color: #767676;
  pointer-events: none;
}

.tm-type-caret {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  margin-left: 1px;
  background: #767676;
  animation: tm-type-blink 1s steps(1) infinite;
}

.tm-search-input-wrap.is-typing .tm-type-hint {
  display: flex;
}

.tm-search-input-wrap.is-typing.is-busy .tm-type-hint {
  display: none;
}

@keyframes tm-type-blink {
  50% {
    opacity: 0;
  }
}

.tm-search-input:focus {
  border-color: var(--wiz-navy);
  box-shadow: 0 0 0 4px rgba(46, 63, 124, 0.22);
}

/* Time zone bar */

.tm-timezone-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
}

.tm-timezone-label {
  font-weight: 600;
  color: var(--tm-text);
}

.tm-timezone-bar select {
  padding: 0.35rem 0.6rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  font-size: 0.85rem;
  color: var(--tm-text);
}

/* Format chips: no header, directly under the search bar */

.tm-format-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Filters disclosure */

.tm-advanced-filters {
  margin-top: 0.75rem;
}

.tm-advanced-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  padding: 0.6rem;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  background: var(--tm-bg);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tm-text-sec);
  cursor: pointer;
}

.tm-advanced-toggle:hover {
  background: rgba(0, 0, 0, 0.03);
}

.tm-advanced-count:not(:empty) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 0.35rem;
  border-radius: var(--tm-radius-badge);
  background: var(--tm-coral);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
}

.tm-advanced-arrow {
  transition: transform 0.2s;
}

.tm-advanced-toggle[aria-expanded="true"] .tm-advanced-arrow {
  transform: rotate(180deg);
}

.tm-advanced-body {
  margin-top: 0.75rem;
}

.tm-chip-group {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tm-chip-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.tm-chip-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tm-text-sec);
  margin-bottom: 0.5rem;
}

.tm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tm-advanced-footer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tm-show-results {
  width: 100%;
  padding: 0.7rem;
  border: none;
  border-radius: var(--tm-radius-sm);
  background: var(--wiz-navy);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

/* Near Me: greyed out until it works (Map #5; Jason 2026-09-22) */
.tm-nearme-soon .tm-nearme-row { opacity: 0.45; pointer-events: none; }
.tm-nearme-soon .tm-nearme-input,
.tm-nearme-soon .tm-nearme-radius,
.tm-nearme-soon .btn { cursor: not-allowed; background: #f2f2f2; }
.tm-soon-tag { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: #eceef3; color: #5b6070; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; vertical-align: 1px; }
.tm-nearme-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tm-nearme-input {
  flex: 1 1 12rem;
  padding: 0.5rem 0.65rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  font-size: 0.85rem;
  color: var(--tm-text);
}

.tm-nearme-input:focus {
  outline: none;
  border-color: var(--wiz-navy);
}

.tm-nearme-radius {
  padding: 0.5rem 0.5rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  font-size: 0.85rem;
  color: var(--tm-text);
}

#tm-nearme-search {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--tm-radius-sm);
  background: var(--wiz-navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

#tm-nearme-search:disabled {
  opacity: 0.6;
  cursor: default;
}

.tm-nearme-clear {
  padding: 0.5rem 0.85rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  color: var(--tm-text-sec);
  font-size: 0.85rem;
  cursor: pointer;
}

.tm-nearme-status {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--tm-text-sec);
}

.tm-nearme-status.tm-nearme-error {
  color: var(--tm-coral);
}

/* Chips (shared by format row + filter groups) */

.tm-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--tm-radius-badge);
  border: 1.5px solid var(--tm-border);
  background: var(--tm-bg);
  color: var(--tm-text-sec);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}

.tm-chip:hover {
  border-color: var(--tm-coral);
  color: var(--tm-coral);
}

.tm-chip.active {
  background: var(--tm-coral);
  border-color: var(--tm-coral);
  color: #fff;
}

.tm-chip-format.active {
  background: var(--wiz-navy);
  border-color: var(--wiz-navy);
  color: #fff;
}

.tm-chip-format:hover {
  border-color: var(--wiz-navy);
  color: var(--wiz-navy);
}

/* Removable filter tag above the results -- today only the intergroup
   filter from ?ig= (an intergroup card's Meetings button). */

.tm-active-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}

.tm-active-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.4rem 0.35rem 0.9rem;
  border-radius: var(--tm-radius-badge);
  background: var(--tm-navy);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1.3;
}

.tm-active-tag strong {
  font-weight: 600;
}

.tm-active-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}

.tm-active-tag-remove:hover,
.tm-active-tag-remove:focus-visible {
  background: rgba(255, 255, 255, 0.35);
}

.todays-meetings-no-results {
  margin-top: 1rem;
}

/* Results table header */

.tm-table-header {
  display: none;
  grid-template-columns: 4.9rem 5.5rem 5.5rem 11rem 12.3rem 12rem; /* Format -25%, Day -15%, Meeting then -20% (Jason, 2026-09-22) */
  justify-content: space-between;
  gap: 0.6rem;
  /* Right padding matches .todays-meeting-row .tm-row's (which reserves
     extra room there for the chevron icon) so both grids have the same
     usable width — otherwise space-between computes different gaps for
     the header vs. each row, and later columns drift out of alignment. */
  padding: 0.5rem 2.25rem 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tm-text-sec);
}

.tm-table-header span {
  text-align: left;
}

@container tm-widget (min-width: 900px) {
  .tm-table-header {
    display: grid;
  }
}

/* Result rows */

.todays-meeting-row {
  /* a shared link's anchor jump lands the row under the fixed header
     otherwise; the value is set by public.js (Map #377) */
  scroll-margin-top: var(--tm-row-scroll-margin, 0px);
  border: 1px solid var(--tm-border);
  background-color: var(--tm-surface);
  border-radius: var(--tm-radius-sm);
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.todays-meeting-row .tm-row {
  display: block;
  position: relative;
  padding: 0.75rem 2.25rem 0.75rem 1rem;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

@container tm-widget (min-width: 900px) {
  .todays-meeting-row .tm-row {
    display: grid;
    grid-template-columns: 4.9rem 5.5rem 5.5rem 11rem 12.3rem 12rem; /* Format -25%, Day -15%, Meeting then -20% (Jason, 2026-09-22) */
    justify-content: space-between;
    gap: 0.6rem;
    /* every column's first line on one baseline -- a chip or the EN badge
       made its column's text sit lower (Jason, 2026-09-22) */
    align-items: baseline;
  }
}

.tm-row-chevron {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

.tm-row.active .tm-row-chevron {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M12 10.828l-4.95 4.95-1.414-1.414L12 8l6.364 6.364-1.414 1.414z'/%3E%3C/svg%3E");
}

.tm-row-day {
  display: block;
  font-weight: 600;
  color: var(--tm-text);
  white-space: nowrap;
  line-height: 1.3;
}

.tm-row-time {
  font-weight: 600;
  color: var(--tm-text);
  white-space: nowrap;
  line-height: 1.3;
}

.tm-row-time small {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--tm-text-sec);
}

.tm-row-meeting {
  display: block;
  line-height: 1.35;
  min-width: 0;
  overflow-wrap: break-word;
}

.tm-row-meeting-name {
  font-weight: 600;
  color: var(--tm-text);
}

.tm-row-meeting-number {
  display: block;
  font-size: 0.72rem;
  color: var(--tm-text-sec);
}

.tm-row-format-col {
  display: block;
  min-width: 0;
}

.tm-row-format-col .tm-badge {
  margin-left: 0;
  font-size: 0.68rem;
  padding: 3px 10px;
}

/* Format column: one chip per way to attend -- row design R4's chips
   (Jason, 2026-09-22): 12px bold pill, 13px icon, 10% tint of the type
   colour. Stacked when there are several. */
.tm-row-format-col {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
}

.tm-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.tm-type-chip svg {
  flex-shrink: 0;
}

.tm-type-chip-inperson {
  background: rgba(174, 72, 4, 0.1);
  color: var(--tm-type-inperson);
}

.tm-type-chip-online {
  background: rgba(48, 58, 166, 0.1);
  color: var(--tm-type-online);
}

.tm-type-chip-phone {
  background: rgba(13, 115, 101, 0.1);
  color: var(--tm-type-phone);
}

.tm-type-chip-hybrid {
  background: rgba(73, 31, 92, 0.1);
  color: var(--tm-type-hybrid);
}

.tm-row-location {
  display: block;
  font-size: 0.82rem;
  color: var(--tm-text-sec);
  line-height: 1.3;
}

.tm-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

/* R4 size (Jason, 2026-09-22): 34px tall, 13px text and icon */
.tm-row-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 12px;
  border-radius: 50px;
  border: 1.5px solid var(--tm-border);
  background: var(--tm-surface);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--tm-text);
}

.tm-row-action-btn:hover {
  opacity: 0.8;
}

.tm-row-action-map {
  border-color: var(--tm-type-inperson);
  color: var(--tm-type-inperson);
}

.tm-row-action-connect {
  border-color: var(--tm-type-online);
  color: var(--tm-type-online);
}

.tm-row-action-call {
  border-color: var(--tm-type-phone);
  color: var(--tm-type-phone);
}

/* Map It / Connect / Call: soft pills in the meeting-type colours
   (Jason, 2026-09-21 -- the "V10" style: a light tint of the colour with
   the colour as text, no outline) with an icon each. */
.tm-row-action-map,
.tm-row-action-connect,
.tm-row-action-call {
  gap: 5px;
  border-color: transparent;
  font-weight: 700;
}

.tm-row-action-map {
  background: rgba(174, 72, 4, 0.12);
  color: var(--tm-type-inperson);
}

.tm-row-action-connect {
  background: rgba(48, 58, 166, 0.12);
  color: var(--tm-type-online);
}

.tm-row-action-call {
  background: rgba(13, 115, 101, 0.12);
  color: var(--tm-type-phone);
}

.tm-row-action-map:hover,
.tm-row-action-connect:hover,
.tm-row-action-call:hover {
  opacity: 1;
  border-color: currentColor;
}

.tm-row-action-icon {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
}

/* View toggle: List / Map / Calendar (lives inside .tm-timezone-bar, to
   the left of the Time Zone dropdown) */

.tm-view-toggle-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tm-text-sec);
}

.tm-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-badge);
  overflow: hidden;
}

.tm-view-btn {
  border: none;
  background: var(--tm-surface);
  color: var(--tm-text);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
}

.tm-view-btn.active {
  background: var(--wiz-navy);
  color: #fff;
}

/* Calendar view */

.tm-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.tm-cal-day-col {
  min-width: 0;
}

.tm-cal-day-col.tm-cal-today .tm-cal-day-head {
  border-bottom-color: var(--tm-teal);
}

.tm-cal-day-head {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.25rem;
  border-bottom: 3px solid var(--tm-border);
  margin-bottom: 0.5rem;
}

.tm-cal-day-name {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.tm-cal-day-count {
  font-size: 0.72rem;
  color: var(--tm-text-sec);
}

.tm-cal-day-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.tm-cal-day-empty {
  color: var(--tm-text-sec);
  font-size: 0.8rem;
  margin: 0;
}

.tm-cal-box {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-left: 3px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  padding: 0.4rem 0.55rem;
  cursor: pointer;
  font-family: inherit;
}

.tm-cal-box[data-format="online"] {
  border-left-color: var(--tm-type-online);
}
.tm-cal-box[data-format="inperson"] {
  border-left-color: var(--tm-type-inperson);
}
.tm-cal-box[data-format="phone"] {
  border-left-color: var(--tm-type-phone);
}
.tm-cal-box[data-format="hybrid"] {
  border-left-color: var(--tm-type-hybrid);
}

.tm-cal-box-time {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--tm-text-sec);
}

.tm-cal-box-name {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
}

/* Map view */

.tm-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.82rem;
  color: var(--tm-text-sec);
}

.tm-map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tm-map-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  display: inline-block;
}

.tm-map-legend-dot-inperson {
  background: var(--tm-type-inperson);
}
.tm-map-legend-dot-online {
  background: var(--tm-type-online);
}
.tm-map-legend-dot-phone {
  background: var(--tm-type-phone);
}
.tm-map-legend-dot-hybrid {
  background: var(--tm-type-hybrid);
}

.tm-map {
  width: 100%;
  height: 32rem;
  border-radius: var(--tm-radius);
  overflow: hidden;
  border: 1px solid var(--tm-border);
}

.tm-map-popup {
  min-width: 220px;
  font-size: 0.82rem;
}

.tm-map-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.tm-map-popup-title {
  font-weight: 700;
}

.tm-map-popup-line {
  margin: 0.2rem 0;
  line-height: 1.35;
}

.tm-map-popup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-top: 0.5rem;
}

/* The popup's buttons look like the opened meeting's in the List view
   (Map #332): Map It / Connect / Call solid in the meeting-type colour,
   More Info a navy text link like Share / Calendar. They carry the list
   row's classes, and Leaflet's ".leaflet-container a" colour beat those,
   hence the popup-scoped selectors. */
.leaflet-container .tm-map-popup-actions .tm-row-action-map { --md-color: var(--tm-type-inperson); }
.leaflet-container .tm-map-popup-actions .tm-row-action-connect { --md-color: var(--tm-type-online); }
.leaflet-container .tm-map-popup-actions .tm-row-action-call { --md-color: var(--tm-type-phone); }

.leaflet-container .tm-map-popup-actions .tm-row-action-map,
.leaflet-container .tm-map-popup-actions .tm-row-action-connect,
.leaflet-container .tm-map-popup-actions .tm-row-action-call {
  justify-content: center;
  gap: 8px;
  height: auto;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--md-color);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.leaflet-container .tm-map-popup-actions .tm-row-action-icon {
  width: 17px;
  height: 17px;
}

.leaflet-container .tm-map-popup-actions .tm-row-action-map:hover,
.leaflet-container .tm-map-popup-actions .tm-row-action-connect:hover,
.leaflet-container .tm-map-popup-actions .tm-row-action-call:hover {
  opacity: 1;
  filter: brightness(0.9);
}

.leaflet-container .tm-map-popup-actions .tm-popup-more-info {
  height: auto;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--wiz-navy);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.leaflet-container .tm-map-popup-actions .tm-popup-more-info:hover {
  opacity: 1;
  text-decoration: underline;
}

/* Format + language badges */

.tm-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--tm-radius-badge);
  vertical-align: middle;
  margin-left: 0.25rem;
}

.tm-badge-online {
  background: rgba(48, 58, 166, 0.1);
  color: var(--tm-type-online);
}
.tm-badge-inperson {
  background: rgba(174, 72, 4, 0.1);
  color: var(--tm-type-inperson);
}
.tm-badge-phone {
  background: rgba(13, 115, 101, 0.1);
  color: var(--tm-type-phone);
}
.tm-badge-hybrid {
  background: #f0eaf3;
  color: var(--tm-type-hybrid);
}

.tm-lang-badge {
  font-size: 0.58rem;
}
.tm-lang-badge-en {
  background: rgba(46, 63, 124, 0.1);
  color: var(--tm-teal);
}
.tm-lang-badge-es {
  background: rgba(139, 93, 0, 0.12);
  color: var(--tm-amber);
}

.tm-live-badge {
  display: block;
  margin: 0.2rem 0 0;
  /* the same bright green as "happening now" (Jason, 2026-09-22) */
  background: #00a32a;
  color: #fff;
  width: fit-content;
  box-shadow: 0 0 0 0 rgba(0, 163, 42, 0.5);
  /* Capitals only: with no descenders the line box keeps room below them,
     so LIVE reads high if the padding is even. It needs a nudge down, but
     5/2 overdid it and it read low (Jason, 2026-09-22) -- 1px, not 3. */
  line-height: 1;
  padding: 4px 7px 3px;
}

/* a soft ring that swells out from the tag and fades, every 2 seconds */
@media (prefers-reduced-motion: no-preference) {
  .tm-live-badge {
    animation: tm-live-badge-pulse 2s ease-out infinite;
  }
}

@keyframes tm-live-badge-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 163, 42, 0.5);
  }
  70%, 100% {
    box-shadow: 0 0 0 6px rgba(0, 163, 42, 0);
  }
}

/* "N happening now" banner */

.tm-live-banner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.7rem 1.1rem;
  border: 1.5px solid var(--wiz-navy);
  border-radius: var(--tm-radius-badge);
  background: rgba(46, 63, 124, 0.06);
  color: var(--wiz-navy);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.tm-live-banner:hover {
  background: rgba(46, 63, 124, 0.12);
}

.tm-live-banner.active {
  background: var(--wiz-navy);
  color: #fff;
}

.tm-live-banner-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: tm-live-pulse 1.8s ease-in-out infinite;
}

@keyframes tm-live-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

.tm-live-banner-arrow {
  margin-left: auto;
}

/* Find a Meeting controls, layout "V4" (Jason, 2026-09-21): a grey strip
   with search, Filters and the view switch; the meeting type chips, the
   green "happening now" pill and the time zone under it; the filters open
   as a card. Colours are the site's (navy #2e3f7c, greys) and the admin
   green for "happening now" so it gets noticed. Comes after the older
   rules above on purpose, so it wins at the same specificity. */

.tm-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

.tm-bar-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #f6f6f6;
  border-radius: 12px;
}

.tm-bar-top .tm-search-wrap {
  flex: 1 1 320px;
  min-width: 0;
}

.tm-search-input {
  height: 52px;
  border: 1px solid #e0dede;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: none;
  font-size: 1.05rem;
}

.tm-search-input:focus {
  border-color: var(--wiz-navy);
  box-shadow: 0 0 0 3px rgba(46, 63, 124, 0.15);
}

/* The theme sets every field to square corners and a thin border (Avada
   form settings, stronger selectors than ours), so the search box states
   its own with !important: rounded, a soft grey edge, and on focus a sky-
   blue edge with a soft glow instead of a 1px dark line. */
.todays-meetings-wrap .tm-bar-top input.tm-search-input {
  border: 1.5px solid #dcdcdc !important;
  border-radius: 12px !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.todays-meetings-wrap .tm-bar-top input.tm-search-input:hover {
  border-color: #c4c4c4 !important;
}

.todays-meetings-wrap .tm-bar-top input.tm-search-input:focus {
  border-color: #3299ec !important;
  box-shadow: 0 0 0 4px rgba(50, 153, 236, 0.22) !important;
}

.tm-advanced-filters {
  margin-top: 0;
}

.tm-bar-top .tm-advanced-toggle {
  width: auto;
  height: 52px;
  padding: 0 18px;
  gap: 8px;
  border: 2px solid var(--wiz-navy);
  border-radius: 10px;
  background: #ffffff;
  color: var(--wiz-navy);
  font-size: 1rem;
  font-weight: 700;
}

.tm-bar-top .tm-advanced-toggle:hover {
  background: #eef1f8;
}

.tm-bar-top .tm-advanced-toggle[aria-expanded="true"] {
  background: var(--wiz-navy);
  color: #ffffff;
}

.tm-bar-top .tm-advanced-count:not(:empty) {
  background: var(--wiz-navy);
  color: #ffffff;
}

.tm-bar-top .tm-advanced-toggle[aria-expanded="true"] .tm-advanced-count:not(:empty) {
  background: #ffffff;
  color: var(--wiz-navy);
}

.tm-bar-top .tm-view-toggle {
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: #e6e6e6;
}

.tm-bar-top .tm-view-btn {
  height: 44px;
  padding: 0 14px;
  border-radius: 7px;
  background: transparent;
  color: #595959;
  font-size: 0.9rem;
}

.tm-bar-top .tm-view-btn.active {
  background: #ffffff;
  color: var(--wiz-navy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.tm-bar-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.tm-bar-sub .tm-format-row {
  flex: 1 1 auto;
  margin-top: 0;
}

.tm-bar-sub .tm-timezone-bar {
  margin-top: 0;
}

/* Meeting type chips: outlined in their own colour, tinted when chosen */
.tm-bar-sub .tm-chip-format {
  height: 40px;
  padding: 0 16px;
  gap: 7px;
  background: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
}

.tm-bar-sub .tm-chip-format[data-filter-value="virtual"] {
  color: var(--tm-type-online);
  border-color: rgba(48, 58, 166, 0.35);
}
.tm-bar-sub .tm-chip-format[data-filter-value="in-person"] {
  color: var(--tm-type-inperson);
  border-color: rgba(174, 72, 4, 0.35);
}
.tm-bar-sub .tm-chip-format[data-filter-value="phone"] {
  color: var(--tm-type-phone);
  border-color: rgba(13, 115, 101, 0.35);
}

.tm-bar-sub .tm-chip-format:hover {
  border-color: currentColor;
}

.tm-bar-sub .tm-chip-format[data-filter-value="virtual"].active {
  background: rgba(48, 58, 166, 0.13);
  border-color: var(--tm-type-online);
  color: var(--tm-type-online);
}
.tm-bar-sub .tm-chip-format[data-filter-value="in-person"].active {
  background: rgba(174, 72, 4, 0.13);
  border-color: var(--tm-type-inperson);
  color: var(--tm-type-inperson);
}
.tm-bar-sub .tm-chip-format[data-filter-value="phone"].active {
  background: rgba(13, 115, 101, 0.13);
  border-color: var(--tm-type-phone);
  color: var(--tm-type-phone);
}

/* "N happening now": bright green (the admin green) so it gets noticed */
.tm-filter-bar .tm-live-banner {
  width: auto;
  height: 40px;
  margin: 0;
  padding: 0 16px;
  gap: 10px;
  border: 1.5px solid #00a32a;
  border-radius: 50px;
  background: #edfaef;
  color: #006b1a;
  font-size: 0.95rem;
}

.tm-filter-bar .tm-live-banner:hover {
  background: #dcf5e0;
}

.tm-filter-bar .tm-live-banner.active {
  background: #006b1a;
  border-color: #006b1a;
  color: #ffffff;
}

.tm-filter-bar .tm-live-banner-dot {
  background: #00a32a;
  box-shadow: 0 0 0 4px rgba(0, 163, 42, 0.22);
}

.tm-filter-bar .tm-live-banner.active .tm-live-banner-dot {
  background: #ffffff;
  box-shadow: none;
}

.tm-filter-bar .tm-live-banner-arrow {
  margin-left: 0;
}

/* The filters, opened: one card, groups in three columns */
.tm-advanced-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px 32px;
  margin-top: 0;
  padding: 28px 32px;
  background: #ffffff;
  border: 1px solid #e0dede;
  border-radius: 12px;
}

.tm-advanced-body .tm-chip-group {
  margin: 0;
  padding: 0;
  border: 0;
}

.tm-advanced-body .tm-chip-group[data-filter-group-name="mtype"] {
  grid-column: span 2;
}

.tm-advanced-body .tm-chip-group[data-filter-group-name="nearme"],
.tm-advanced-body .tm-advanced-footer {
  grid-column: 1 / -1;
}

.tm-advanced-body .tm-chip-label {
  margin-bottom: 10px;
  font-family: "Roboto Slab", serif;
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: #383838;
}

.tm-advanced-body .tm-chip {
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
  border-color: #f6f6f6;
  background: #f6f6f6;
  color: #383838;
  font-size: 0.9rem;
  font-weight: 600;
}

.tm-advanced-body .tm-chip:hover {
  border-color: var(--wiz-navy);
  color: var(--wiz-navy);
}

.tm-advanced-body .tm-chip.active {
  border-color: var(--wiz-navy);
  background: var(--wiz-navy);
  color: #ffffff;
}

.tm-advanced-body .tm-advanced-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid #e0dede;
}

.tm-advanced-body .tm-show-results {
  width: auto;
  height: 46px;
  padding: 0 22px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
}

/* The filters in force, as removable tags, with the count and Clear all.
   A full-width row inside the grey strip, under the pill bar; small navy
   chips with white text (Jason, 2026-09-22). */
.tm-chosen {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.tm-chosen-count {
  font-size: 0.82rem;
  color: #595959;
}

.tm-chosen-count::after {
  content: "·";
  margin-left: 6px;
}

.tm-chosen-list {
  display: contents;
}

.tm-chosen-tag {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  padding: 0 2px 0 10px;
  border: 0;
  border-radius: 50px;
  background: var(--tm-navy);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
}

.tm-chosen-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
}

.tm-chosen-remove:hover,
.tm-chosen-remove:focus-visible {
  background: rgba(255, 255, 255, 0.2);
}

.tm-chosen .tm-clear-all {
  font-size: 0.82rem;
}

.tm-clear-all {
  padding: 0;
  border: 0;
  background: none;
  color: #1c7eff;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.tm-advanced-body .tm-advanced-footer {
  align-items: center;
  gap: 16px;
}

.tm-advanced-body .tm-advanced-footer .tm-clear-all {
  margin-right: auto;
}

@container tm-widget (max-width: 700px) {
  .tm-bar-top .tm-search-wrap {
    flex-basis: 100%;
  }
  .tm-advanced-body {
    grid-template-columns: 1fr;
    padding: 20px;
  }
  .tm-advanced-body .tm-chip-group[data-filter-group-name="mtype"] {
    grid-column: auto;
  }
}

/* One grey box (Jason, 2026-09-22): the search row, the chosen-filter
   tags, the In-Person / Online / Phone row with happening now and the time
   zone, and -- when Filters is open -- the filter choices, all on the one
   grey. The grey used to be the search row only, with the filters opening
   below it as a white card. Written after the rules above so it wins. */
.tm-filter-bar {
  gap: 12px;
  padding: 12px;
  background: #f6f6f6;
  border-radius: 12px;
}
.tm-bar-top {
  padding: 0;
  background: none;
  border-radius: 0;
}
/* the closed panel's empty wrapper would add a gap at the bottom */
.tm-advanced-filters:has(> .tm-advanced-body.cea-hidden) {
  display: none;
}
.tm-advanced-body {
  padding: 20px 4px 4px;
  background: none;
  border: 0;
  border-top: 1px solid #e0dede;
  border-radius: 0;
}
/* the choices were grey on the white card; on grey they turn white */
.tm-advanced-body .tm-chip {
  border-color: #e0dede;
  background: #ffffff;
}
.tm-advanced-body .tm-chip.active {
  border-color: var(--wiz-navy);
  background: var(--wiz-navy);
}
@container tm-widget (max-width: 700px) {
  .tm-advanced-body {
    padding: 16px 0 0;
  }
}

/* Search suggestions (Map #271): a short list under the search box */
.tm-search-input-wrap {
  position: relative;
}
.tm-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 340px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e0dede;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(28, 33, 48, 0.14);
}
.tm-suggest-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.92rem;
  color: #383838;
  cursor: pointer;
}
.tm-suggest-item:hover,
.tm-suggest-item.is-active {
  background: #eef1f8;
}
.tm-suggest-label {
  font-weight: 600;
}
.tm-suggest-sub {
  color: #6f6f6f;
  font-size: 0.85rem;
}
.tm-suggest-kind {
  margin-left: auto;
  padding-left: 12px;
  color: #767676;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Expanded detail panel */

.todays-meeting-row .more-info-wrap {
  padding: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--tm-bg);
}

/* Opened meeting -- option B, "join first" (Jason, 2026-09-22; board
   "B · Join first" in claude.ai/artifact/EQRZ8kQULbFbX1A7JFY3uR), in the
   P3 type colours. Its own .tm-md-* classes: the .tm-detail-* ones below
   are shared with the Intergroup and Area cards. */
.todays-meeting-row .more-info-wrap:has(> .tm-md) {
  padding: 0;
  border-top: 0;
  background: var(--tm-surface);
}

/* an opened meeting: the search box's active look round the row and its
   details -- sky-blue edge and a soft outer ring -- so they read as one
   thing (Jason, 2026-09-22; a darker grey edge alone wasn't enough) */
.todays-meeting-row:has(> .tm-row.active) {
  border-color: #3299ec;
  /* 20% wider than the search box's 4px (Jason, 2026-09-22) */
  box-shadow: 0 0 0 4.8px rgba(50, 153, 236, 0.22);
}

.tm-md {
  color: var(--tm-text);
}

.tm-md-join {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 24px;
}

.tm-md-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@container tm-widget (min-width: 700px) {
  .tm-md-cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tm-md-cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tm-md-card {
  --md-color: var(--tm-type-inperson);
  --md-tint: rgba(174, 72, 4, 0.07);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: var(--md-tint);
  border: 1px solid var(--tm-border);
  border-top: 4px solid var(--md-color);
  border-radius: 6px;
  min-width: 0;
}

.tm-md-card-online {
  --md-color: var(--tm-type-online);
  --md-tint: rgba(48, 58, 166, 0.07);
}

.tm-md-card-phone {
  --md-color: var(--tm-type-phone);
  --md-tint: rgba(13, 115, 101, 0.07);
}

.tm-md-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--md-color);
  font-family: "Roboto Slab", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
}

.tm-md-card-title svg,
.tm-md-button svg,
.tm-md-link svg,
.tm-md-copy svg {
  flex-shrink: 0;
}

.tm-md-address {
  font-size: 16px;
  line-height: 1.45;
}

.tm-md-url {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tm-md-url a {
  font-weight: 600;
}

.tm-md-copy-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 10px;
}

.tm-md-copy-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: 6px;
  min-width: 0;
}

.tm-md-copy-box > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tm-md-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tm-text-sec);
}

.tm-md-code,
.tm-md-phone {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tm-md-code {
  font-size: 17px;
}

.tm-md-phone {
  font-size: 20px;
}

.tm-md-copy {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--tm-border);
  border-radius: 6px;
  background: var(--tm-surface);
  color: var(--md-color);
  cursor: pointer;
}

.tm-md-copy:hover {
  border-color: currentColor;
}

.tm-md-copy.is-copied {
  background: var(--md-color);
  border-color: var(--md-color);
  color: #ffffff;
}

.tm-md-small {
  font-size: 14px;
  line-height: 1.45;
  color: var(--tm-text-sec);
  overflow-wrap: anywhere;
}

.tm-md-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0 18px;
  border-radius: 6px;
  background: var(--md-color);
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none !important;
}

.tm-md-button:hover {
  filter: brightness(0.9);
}

.tm-md-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 24px 20px;
}

.tm-md-notes-text {
  font-size: 16px;
  line-height: 1.5;
}

.tm-md-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px 28px;
  margin: 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--tm-border);
}

@container tm-widget (min-width: 520px) {
  .tm-md-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container tm-widget (min-width: 760px) {
  .tm-md-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.tm-md-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.tm-md-col.is-empty {
  display: none;
}

@container tm-widget (min-width: 760px) {
  /* desktop: all three columns hold their place, empty or not */
  .tm-md-col.is-empty {
    display: flex;
  }
}

.tm-md-fact {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tm-md-value {
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.tm-md-number {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: #eef0f4;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 14px;
}

.tm-md-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 24px;
  padding: 6px 24px;
  border-top: 1px solid var(--tm-border);
}

.tm-md-links-gap {
  flex-grow: 1;
}

.tm-md-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--wiz-navy) !important;
  text-decoration: none !important;
  cursor: pointer;
}

.tm-md-link:hover span {
  text-decoration: underline;
}

.tm-md-link-close {
  color: var(--tm-coral) !important;
}

.tm-md-link.tm-action-btn-copied span::after {
  content: " \2713";
}

.tm-detail-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2rem;
}

@container tm-widget (min-width: 460px) {
  .tm-detail-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.tm-detail-field-full {
  grid-column: 1 / -1;
}

.tm-detail-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tm-text-sec);
  margin-bottom: 0.3rem;
}

.tm-detail-value {
  font-size: 0.9rem;
  color: var(--tm-text);
  line-height: 1.4;
  word-break: break-word;
}

.tm-detail-link {
  /* the site's own link blue and hover (Avada settings) */
  color: #1c7eff;
  text-decoration: underline;
}

.tm-detail-link:hover {
  color: #2346d1;
}

.tm-detail-chip {
  display: inline-block;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--tm-radius-sm);
  padding: 0.1rem 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.82rem;
}

.tm-detail-accessible {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.tm-detail-accessible-icon {
  font-size: 1.1em;
}

.tm-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Small, deliberately subdued -- not a .tm-action-btn pill like Share/
   Add to Calendar/Report a Change above it, since closing a meeting
   is a more consequential, less common action than those. */
.tm-close-meeting-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.78rem;
  color: var(--tm-text-sec);
  text-decoration: underline;
}

.tm-close-meeting-link:hover {
  color: var(--tm-coral);
}

/* Same subdued-text treatment as .tm-close-meeting-link above, but
   sits inline in the ig-card's .tm-detail-actions flex row (pushed to
   the far right via margin-left: auto) and red by default rather than
   only on hover -- closing an intergroup is the more consequential
   action here. */
.tm-close-intergroup-link {
  display: inline-block;
  margin-left: auto;
  align-self: center;
  font-size: 0.78rem;
  color: var(--tm-coral);
  text-decoration: underline;
}

.tm-close-intergroup-link:hover {
  color: var(--tm-text);
}

.tm-action-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.85rem;
  border-radius: var(--tm-radius-sm);
  border: 1px solid #93c0de;
  background: transparent;
  color: #2e6e96;
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.tm-action-btn:hover {
  background: #eaf3f9;
}

.tm-action-btn svg {
  margin-right: 0.4rem;
}

.tm-action-btn-copied {
  border-color: #93c0de;
  background: #eaf3f9;
}

.is-glance .post-content h3.fusion-responsive-typography-calculated,
.is-print #boxed-wrapper h3.fusion-responsive-typography-calculated,
.is-glance marquee,
.is-print marquee {
  display: none !important;
}

html.is-glance,
.is-glance #boxed-wrapper,
html.is-print,
.is-print #boxed-wrapper {
  overflow: visible;
}

.is-glance aside#sidebar,
.is-print aside#sidebar {
  display: none;
}

.is-glance section#content,
.is-print section#content {
  float: none;
  width: 100% !important;
}

.is-glance .find-a-meeting-results-wrap,
.is-print .find-a-meeting-results-wrap {
  width: 98vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -49vw;
  margin-right: -50vw;
}

.is-glance .results-actions-wrap,
.is-print .results-actions-wrap {
  padding: 0 1rem;
}

.results-actions-wrap {
  justify-content: space-between;
}

.results-actions {
  list-style: none;
  padding: 0;
}

.results-actions li {
  padding: 0;
  margin-left: 1rem;
}

.results-actions li a {
  display: flex;
}

.results-actions li a::before {
  content: "";
  width: 24px;
  height: 24px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  margin-right: 0.5rem;
}

.results-actions li a.print::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M7 17h10v5H7v-5zm12 3v-5H5v5H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-2zM5 10v2h3v-2H5zm2-8h10a1 1 0 0 1 1 1v3H6V3a1 1 0 0 1 1-1z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.results-actions li a.excel::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-2.8 10L16 8h-2.4L12 10.286 10.4 8H8l2.8 4L8 16h2.4l1.6-2.286L13.6 16H16l-2.8-4z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

.results-actions li a.share::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' d='M0 0h24v24H0z'/%3E%3Cpath d='M18.364 15.536L16.95 14.12l1.414-1.414a5 5 0 1 0-7.071-7.071L9.879 7.05 8.464 5.636 9.88 4.222a7 7 0 0 1 9.9 9.9l-1.415 1.414zm-2.828 2.828l-1.415 1.414a7 7 0 0 1-9.9-9.9l1.415-1.414L7.05 9.88l-1.414 1.414a5 5 0 1 0 7.071 7.071l1.414-1.414 1.415 1.414zm-.708-10.607l1.415 1.415-7.071 7.07-1.415-1.414 7.071-7.07z' fill='rgba(55,71,133,1)'/%3E%3C/svg%3E");
}

/* .results-actions li a.glance::before {
  background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iU3ZnanNTdmcxMDAxIiB3aWR0aD0iMjg4IiBoZWlnaHQ9IjI4OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczpzdmdqcz0iaHR0cDovL3N2Z2pzLmNvbS9zdmdqcyI+PGRlZnMgaWQ9IlN2Z2pzRGVmczEwMDIiPjwvZGVmcz48ZyBpZD0iU3ZnanNHMTAwOCIgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsMSwwLDApIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI4OCIgaGVpZ2h0PSIyODgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiB2aWV3Qm94PSIwIDAgMzIgMzIiPjxwb2x5bGluZSBmaWxsPSJub25lIiBzdHJva2U9IiNGRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2Utd2lkdGg9IjIiIHBvaW50cz0iNjQ5IDEzNy45OTkgNjc1IDEzNy45OTkgNjc1IDE1NS45OTkgNjYxIDE1NS45OTkiPjwvcG9seWxpbmU+PHBvbHlsaW5lIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMTAiIHN0cm9rZS13aWR0aD0iMiIgcG9pbnRzPSI2NTMgMTU1Ljk5OSA2NDkgMTU1Ljk5OSA2NDkgMTQxLjk5OSI+PC9wb2x5bGluZT48cG9seWxpbmUgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgc3Ryb2tlLXdpZHRoPSIyIiBwb2ludHM9IjY2MSAxNTYgNjUzIDE2MiA2NTMgMTU2Ij48L3BvbHlsaW5lPjxnIGZpbGw9IiMzNzQ3ODUiIGNsYXNzPSJjb2xvcjAwMCBzdmdTaGFwZSI+PHBhdGggZD0iTTE2LDI1Yy00LjI2NSwwLTguMzAxLTEuODA3LTExLjM2Ny01LjA4OGMtMC4zNzctMC40MDMtMC4zNTUtMS4wMzYsMC4wNDgtMS40MTNjMC40MDQtMC4zNzcsMS4wMzYtMC4zNTUsMS40MTQsMC4wNDggICAgQzguNzc4LDIxLjQxOSwxMi4yOTUsMjMsMTYsMjNjNC43NjMsMCw5LjE0OS0yLjYwNSwxMS44NC03Yy0yLjY5LTQuMzk1LTcuMDc3LTctMTEuODQtN2MtNC45MzgsMC05LjQ3MiwyLjgwMS0xMi4xMyw3LjQ5MyAgICBjLTAuMjcyLDAuNDgxLTAuODg0LDAuNjUxLTEuMzYzLDAuMzc3Yy0wLjQ4MS0wLjI3Mi0wLjY0OS0wLjg4Mi0wLjM3Ny0xLjM2M0M1LjE0NywxMC4xOCwxMC4zMzMsNywxNiw3ICAgIGM1LjY2OCwwLDEwLjg1MywzLjE4LDEzLjg3LDguNTA3YzAuMTczLDAuMzA2LDAuMTczLDAuNjgsMCwwLjk4NUMyNi44NTMsMjEuODE5LDIxLjY2OCwyNSwxNiwyNXoiIGZpbGw9IiMzNzQ3ODUiIGNsYXNzPSJjb2xvcjAwMCBzdmdTaGFwZSI+PC9wYXRoPjxwYXRoIGQ9Ik0xNiwyMWMtMi43NTcsMC01LTIuMjQzLTUtNXMyLjI0My01LDUtNXM1LDIuMjQzLDUsNVMxOC43NTcsMjEsMTYsMjF6IE0xNiwxM2MtMS42NTQsMC0zLDEuMzQ2LTMsM3MxLjM0NiwzLDMsMyAgICBzMy0xLjM0NiwzLTNTMTcuNjU0LDEzLDE2LDEzeiIgZmlsbD0iIzM3NDc4NSIgY2xhc3M9ImNvbG9yMDAwIHN2Z1NoYXBlIj48L3BhdGg+PC9nPjwvc3ZnPjwvZz48L3N2Zz4=");
} */

.results-actions li a.glance::before {
  display: none;
}

.ig-details {
  margin: 2rem 0 1rem;
}

.result-date {
  font-size: 12px;
  text-align: right;
}

.day-time {
  font-size: 1.2rem !important;
  font-weight: 600 !important;
}

.day-time small {
  font-size: 1rem;
  font-weight: normal;
}

.format {
  font-size: 1rem;
  font-weight: normal;
}

.show-on-print {
  display: none;
  align-items: center;
  justify-content: space-between;
}

.show-on-print h2 {
  margin-bottom: 0;
}

#btn-cancel {
  margin-left: 1rem;
}

/**************************\
  Basic Modal Styles
\**************************/

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal__container {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  min-width: 400px;
  max-height: 100vh;
  border-radius: 4px;
  overflow-y: auto;
  box-sizing: border-box;
}

.modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal__title {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #00449e;
  box-sizing: border-box;
}

.modal__close {
  background: transparent;
  border: 0;
}

.modal__header .modal__close:before {
  content: "\2715";
}

.modal__content {
  margin-top: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
  color: rgba(0, 0, 0, 0.8);
}

.modal__btn {
  font-size: 0.875rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: #e6e6e6;
  color: rgba(0, 0, 0, 0.8);
  border-radius: 0.25rem;
  border-style: none;
  border-width: 0;
  cursor: pointer;
  -webkit-appearance: button;
  text-transform: none;
  overflow: visible;
  line-height: 1.15;
  margin: 0;
  will-change: transform;
  -moz-osx-font-smoothing: grayscale;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: -webkit-transform 0.25s ease-out;
  transition: transform 0.25s ease-out;
  transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
}

.modal__btn:focus,
.modal__btn:hover {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

.modal__btn-primary {
  background-color: #00449e;
  color: #fff;
}

/**************************\
  Demo Animation Style
\**************************/
@keyframes mmfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mmfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes mmslideIn {
  from {
    transform: translateY(15%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mmslideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-10%);
  }
}

.micromodal-slide {
  display: none;
}

.micromodal-slide.is-open {
  display: block;
}

.micromodal-slide[aria-hidden="false"] .modal__overlay {
  animation: mmfadeIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="false"] .modal__container {
  animation: mmslideIn 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__overlay {
  animation: mmfadeOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide[aria-hidden="true"] .modal__container {
  animation: mmslideOut 0.3s cubic-bezier(0, 0, 0.2, 1);
}

.micromodal-slide .modal__container,
.micromodal-slide .modal__overlay {
  will-change: transform;
}

/* Edit a Meeting — compact redesign matching the Today's Meetings widget's
 * look (same --tm-* tokens). Scoped to form.edit-a-meeting specifically so
 * the other forms sharing .cea-form/.m-row (Add a Meeting, Cancel a
 * Meeting, Find an Intergroup, etc.) are unaffected. Field names, dropdown
 * helpers, and the show/hide JS (#status-toggle, #state-province-toggle,
 * type-select handling) are untouched — this only changes layout/spacing,
 * flowing each .m-row into a wrapping multi-column strip instead of one
 * full-width row per field. Rows that need the full line (paired m-col
 * fields, textareas) carry an .m-row-wide modifier set in the PHP partial. */

.edit-a-meeting-wrap .cea-form.edit-a-meeting {
  padding: 1.5rem;
  border-radius: var(--tm-radius);
  border: 1px solid var(--tm-border);
  background: var(--tm-surface);
  box-shadow: var(--tm-shadow);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.85rem 1rem;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting > h2,
.edit-a-meeting-wrap .cea-form.edit-a-meeting > h3 {
  flex: 1 1 100%;
  margin: 0.75rem 0 0;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--tm-border);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tm-teal);
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting > h2.no-margin-top {
  margin-top: 0;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting > .m-row {
  flex: 1 1 220px;
  margin: 0;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting > .m-row.m-row-wide {
  flex: 1 1 100%;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .row-label {
  margin: 0 0 0.3rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tm-text-sec);
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .required {
  color: var(--tm-coral);
  font-style: normal;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting input,
.edit-a-meeting-wrap .cea-form.edit-a-meeting select,
.edit-a-meeting-wrap .cea-form.edit-a-meeting textarea {
  padding: 0.55rem 0.7rem !important;
  border-radius: var(--tm-radius-sm);
  border: 1px solid var(--tm-border);
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting input:focus,
.edit-a-meeting-wrap .cea-form.edit-a-meeting select:focus,
.edit-a-meeting-wrap .cea-form.edit-a-meeting textarea:focus {
  border-color: var(--tm-teal) !important;
  outline: none;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting textarea {
  min-height: 4.5rem;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .actions {
  flex: 1 1 100%;
  margin: 0.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .actions .button {
  background-color: var(--tm-teal);
  border-bottom-color: #1f2c5a !important;
  margin: 0;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .actions .button:hover {
  background-color: #1f2c5a !important;
  border-color: #1f2c5a !important;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .actions #btn-cancel {
  color: var(--tm-text-sec);
}

/* Find an Intergroup: single-page view (dropdowns + every intergroup's
   card, shown/hidden client-side). Cards reuse .tm-detail-grid/
   .tm-detail-chip/.tm-action-btn etc. from the Today's Meetings widget,
   so this wrapper establishes the same named container those rules
   query against (@container tm-widget ...) rather than duplicating them. */

.find-an-intergroup-wrap {
  container-type: inline-size;
  container-name: tm-widget;
}

/* Grid, not flex, for the 50/50 split: with flex-grow, Select Area
   rendered full width until an Area was picked, then visibly snapped
   down to half width the instant the button list appeared beside it
   (the second flex item taking its share of the row). A grid with
   two explicit equal tracks reserves both columns' width up front
   regardless of whether the second item is currently
   hidden (display: none), so Select Area's width never changes. */
.ig-select-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  background: var(--tm-surface);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

@container tm-widget (min-width: 460px) {
  .ig-select-row {
    grid-template-columns: 1fr 1fr;
  }
}

.ig-select-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.ig-select-group label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tm-text-sec);
}

.ig-select-group select {
  /* Avada's own select styling otherwise wins on height/line-height,
     clipping the text — same fight as .edit-a-meeting-wrap's buttons
     elsewhere in this file, hence !important here too. */
  height: auto !important;
  line-height: 1.5 !important;
  padding: 0.75rem !important;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  font-size: 1rem;
  color: var(--tm-text);
}

.ig-select-group select:focus {
  outline: none;
  border-color: var(--tm-teal);
}

/* Stacked buttons replacing the old second dropdown — every
   intergroup in the selected Area is already in the DOM (see
   cea-meetings-manager-find-an-intergroup-display.php); JS just
   toggles .cea-hidden on the ones outside the picked Area. Always
   shows the full list (no capped height/inner scroll) even for the
   Areas with a long roster — per user feedback, a scrollbar buried
   inside the card was worse than just letting the list run long. */
.ig-button-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ig-button {
  /* Explicit border-box so padding/border can never push width:100%
     wider than the column and overflow past the card's edge. */
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.65rem 0.85rem;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  color: var(--tm-text);
  font-size: 0.95rem;
  font-family: inherit;
  cursor: pointer;
}

.ig-button:hover,
.ig-button:focus-visible {
  border-color: var(--tm-teal);
  background: rgba(46, 63, 124, 0.08);
  outline: none;
}

.ig-no-selection {
  color: var(--tm-text-sec);
}

.ig-card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 1.25rem 1.5rem;
}

.ig-card-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ig-card-title {
  margin: 0;
  font-size: 1.27rem;
  font-weight: 700;
  color: var(--tm-text);
}

.ig-card-subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.94rem;
  color: var(--tm-text-sec);
}

.ig-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.ig-card-number {
  font-weight: 700;
}

/* Two fixed columns (not CSS-grid auto-flow) so a given field — e.g.
   Mailing Address — always lands in the same column regardless of
   which other fields happen to be present for a given intergroup; the
   left/right split is assigned per-field in
   cea-meetings-manager-intergroup-card.php, not by DOM order. */
.ig-detail-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
}

.ig-detail-col {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.ig-detail-btn {
  margin-top: 0.2rem;
}

/* Overrides .tm-detail-link's color just within intergroup cards,
   without touching the shared rule (also used by Today's Meetings). */
.ig-card .tm-detail-link {
  color: rgb(28, 126, 255);
}

/* .tm-detail-label/-value/-chip and .tm-action-btn are shared with the
   Today's Meetings widget — scoped 10% size bump here instead of
   changing those rules globally. */
.ig-card .tm-detail-label {
  font-size: 0.75rem;
}

.ig-card .tm-detail-value {
  font-size: 1rem;
}

.ig-card .tm-detail-chip {
  font-size: 0.9rem;
}

.ig-card .tm-action-btn {
  font-size: 0.88rem;
}

/* Find an Area: same pattern as Find an Intergroup above, reusing the
   shared .tm-detail-chip/.tm-action-btn etc. from the Today's Meetings
   widget, so this wrapper establishes the same named container those
   rules query against (@container tm-widget ...). */

.find-an-area-wrap {
  container-type: inline-size;
  container-name: tm-widget;
}

.area-select-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--tm-surface);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.area-select-group {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.area-select-group label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tm-text-sec);
}

.area-select-group select {
  /* Avada's own select styling otherwise wins on height/line-height,
     clipping the text — same fight as .ig-select-group's select. */
  height: auto !important;
  line-height: 1.5 !important;
  padding: 0.75rem !important;
  border: 1.5px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  font-size: 1rem;
  color: var(--tm-text);
}

.area-select-group select:focus {
  outline: none;
  border-color: var(--tm-teal);
}

.area-no-selection {
  color: var(--tm-text-sec);
}

.area-card {
  background: var(--tm-surface);
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
  padding: 1.25rem 1.5rem;
}

.area-card-header {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.area-card-title {
  margin: 0;
  font-size: 1.27rem;
  font-weight: 700;
  color: var(--tm-text);
}

.area-card-subtitle {
  margin: 0.3rem 0 0;
  font-size: 0.94rem;
  color: var(--tm-text-sec);
}

.area-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}

.area-card-number {
  font-weight: 700;
}

/* Two fixed columns (not CSS-grid auto-flow) so a given field — e.g.
   Mailing Address — always lands in the same column regardless of
   which other fields happen to be present for a given area; the
   left/right split is assigned per-field in
   cea-meetings-manager-area-card.php, not by DOM order. */
.area-detail-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 2rem;
}

.area-detail-col {
  flex: 1 1 16rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.area-detail-btn {
  margin-top: 0.2rem;
}

/* Overrides .tm-detail-link's color just within area cards, without
   touching the shared rule (also used by Today's Meetings). */
.area-card .tm-detail-link {
  color: rgb(28, 126, 255);
}

/* .tm-detail-label/-value/-chip and .tm-action-btn are shared with the
   Today's Meetings widget — scoped 10% size bump here instead of
   changing those rules globally, matching .ig-card. */
.area-card .tm-detail-label {
  font-size: 0.75rem;
}

.area-card .tm-detail-value {
  font-size: 1rem;
}

.area-card .tm-detail-chip {
  font-size: 0.9rem;
}

.area-card .tm-action-btn {
  font-size: 0.88rem;
}

/* No hairline over the Area card's button row (Map #105): the header
   rule above already separates it, a second line was clutter. */
.area-card .tm-detail-actions {
  border-top: 0;
  padding-top: 0;
  margin-top: 1.25rem;
}

/* Edit a Meeting Wizard (trial) — [cea-edit-a-meeting-wizard]. Fully
   separate wrapper class from .edit-a-meeting-wrap (the live page's
   own wrapper, styled higher up in this file) so this can never leak
   onto or be affected by it — same compact multi-column field layout
   as that page, reusing the same --tm-* tokens (mostly -- see the
   palette block below), just split across three step panels instead
   of one long list. See CLAUDE.md for context on why this exists as
   a separate page. */

/* Client's confirmed core brand palette (2026-07-20) -- --wiz-* is
   now declared at :root (see top of file) since Close a Meeting/
   Intergroup and Edit an Intergroup/Area adopted it too on
   2026-07-21, not just this wizard. */

.cea-wizard-wrap .cea-form.cea-wizard-form {
  padding: 2.5rem;
  border-radius: 24px;
  border: 1px solid #e5e5e5;
  background: var(--tm-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.85rem 1rem;
}

/* Plain descendant selector (no ">") -- some h2s (Location/Online/
   Phone Meeting Information in step 2) are nested inside their own
   #wizard-location-section / #online-meeting-information /
   #phone-meeting-information wrapper divs, one level deeper than the
   others, so a direct-child selector missed them and let the theme's
   unstyled default h2 leak through again (same failure mode as the
   original bug this replaced -- just a different wrapper this time).
   Blue, sentence/initial case (no text-transform -- the PHP strings
   are already "Meeting Settings" etc.), sized down from the original
   untransformed browser-default heading size (not from the smaller
   all-caps version this replaces). */
.cea-wizard-wrap .wizard-step h2 {
  flex: 1 1 100%;
  margin: 1.75rem 0 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: "Roboto Slab", serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--wiz-sky);
}

.cea-wizard-wrap .wizard-step h2.no-margin-top {
  margin-top: 0;
}

/* Access step (wizard-fields-step2-display.php): explains why the step
   looks empty when no Meeting Type has been chosen yet on General Info
   -- toggled by updateAccessSections() in cea-meetings-manager-public.js
   alongside the Location/Online/Phone sections it's paired with. */
.cea-wizard-notice {
  flex: 1 1 100%;
  padding: 0.85rem 1.1rem;
  border-radius: var(--tm-radius);
  border: 1px solid rgba(76, 166, 238, 0.35);
  border-left: 4px solid var(--wiz-sky);
  background: rgba(76, 166, 238, 0.08);
  color: var(--wiz-navy-dark);
  font-size: 0.95rem;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .m-row {
  flex: 1 1 220px;
  margin: 0;
  /* .wizard-step (the parent flex-wrap container) defaults to
     align-items: stretch, so every .m-row sharing a wrapped line
     stretches to match its tallest neighbor. A row with a .row-label
     absorbs the extra height in the gap under its label, but a bare
     row (e.g. the Focus/Format dropdowns, which have no label) has
     nothing to absorb it into, so its lone <select> -- height:auto,
     which is exactly the value align-self:stretch fills -- stretched
     to match, making that one field look much taller than the rest. */
  align-self: flex-start;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .m-row.m-row-wide {
  flex: 1 1 100%;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .row-label {
  margin: 0 0 0.3rem;
  font-size: 14px;
  font-weight: 700;
  color: #333;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .row-hint,
.cea-branded-form-wrap .cea-form .row-hint {
  margin: -0.1rem 0 0.4rem;
  font-size: 13px;
  line-height: 1.4;
  color: #666;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .required {
  color: var(--tm-coral);
  font-style: normal;
}

.cea-wizard-wrap .cea-form.cea-wizard-form input,
.cea-wizard-wrap .cea-form.cea-wizard-form select,
.cea-wizard-wrap .cea-form.cea-wizard-form textarea {
  border-radius: 8px !important;
  border: 1px solid #ccc;
  font-size: 15px !important;
}

.cea-wizard-wrap .cea-form.cea-wizard-form input,
.cea-wizard-wrap .cea-form.cea-wizard-form select {
  height: 44px !important;
}

/* Phone-widget inputs left out -- see the .m-row input note. */
.cea-wizard-wrap .cea-form.cea-wizard-form input:not(.iti__tel-input),
.cea-wizard-wrap .cea-form.cea-wizard-form select {
  padding: 0 14px !important;
}

/* Time row (hour / minute / AM-PM, Map #130): at the 220px column
   width the three selects with 14px padding pushed AM/PM onto a line
   of its own. A wider basis for that one row, tighter selects, and no
   wrapping between them. */
.cea-wizard-wrap .cea-form.cea-wizard-form .m-row:has(> select[name="meeting_ampm"]) {
  flex-basis: 260px;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .m-row > select.inline {
  padding: 0 10px !important;
  margin-right: 0.4rem;
}

.cea-wizard-wrap .cea-form.cea-wizard-form .m-row > select[name="meeting_ampm"] {
  margin-right: 0;
}

.cea-wizard-wrap .cea-form.cea-wizard-form input:focus,
.cea-wizard-wrap .cea-form.cea-wizard-form select:focus,
.cea-wizard-wrap .cea-form.cea-wizard-form textarea:focus {
  border-color: var(--wiz-steel) !important;
  outline: none;
}

.cea-wizard-wrap .cea-form.cea-wizard-form textarea {
  height: 110px;
  padding: 10px 14px !important;
}

/* Required field left empty when the user tries to advance a step --
   see the [data-wizard-next] handler in the JS, which toggles this
   class on every invalid field in the current step (not just the
   first one) so all of them are visibly flagged at once. Cleared
   automatically once the field passes validation again. */
.cea-wizard-wrap .cea-form.cea-wizard-form .wizard-field-invalid {
  border-color: var(--wiz-coral) !important;
  box-shadow: 0 0 0 2px rgba(240, 115, 110, 0.25);
}

/* Handicap Accessible toggle switch -- same checkbox input under the
   hood (name/id unchanged, so the backend allowlist and pre-fill
   logic don't need to know this isn't a plain checkbox), just
   visually a toggle. The checkbox itself is visually hidden (not
   display:none, so it stays focusable/keyboard-operable) rather than
   removed. */
.wizard-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
}

.wizard-toggle input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.wizard-toggle-track {
  position: relative;
  display: inline-block;
  width: 2.6rem;
  height: 1.5rem;
  flex-shrink: 0;
  background: var(--tm-border);
  border-radius: var(--tm-radius-badge);
  transition: background 0.15s ease;
}

.wizard-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.wizard-toggle input[type="checkbox"]:checked ~ .wizard-toggle-track {
  background: var(--wiz-navy);
}

.wizard-toggle input[type="checkbox"]:checked ~ .wizard-toggle-track .wizard-toggle-thumb {
  transform: translateX(1.1rem);
}

.wizard-toggle input[type="checkbox"]:focus-visible ~ .wizard-toggle-track {
  outline: 2px solid var(--wiz-steel);
  outline-offset: 2px;
}

.wizard-toggle-text {
  font-size: 0.9rem;
}

/* Two-column layout: numbered step list in a left sidebar (~25%
   width), fields/panels in the remaining main column. Both are flex
   children of .wizard-layout, which itself is the single full-width
   flex child of the outer .cea-form.edit-a-meeting-wizard (so the
   form's own flex-wrap layout only ever sees this one item at its
   top level). Stacks to a single column on narrow screens since 25%
   of a phone-width screen isn't enough room for step labels. */
.wizard-layout {
  flex: 1 1 100%;
  display: flex;
  gap: 2.5rem;
  align-items: flex-start;
}

.wizard-sidebar {
  flex: 0 0 25%;
  max-width: 25%;
  position: sticky;
  /* --wizard-sticky-top is set in JS from the theme's actual sticky
     header height (which isn't constant -- see getFixedTopOffset() in
     cea-meetings-manager-public.js) so the sidebar sticks just below
     the header instead of behind it. 1rem fallback covers the brief
     window before that JS runs on load. */
  top: var(--wizard-sidebar-top, var(--wizard-sticky-top, 1rem));
}

/* Record banner inside the wizard card (Edit an Area): a full-width
   white strip across the card (negative margins reach the card's
   padding edge) holding the banner, pinned flush under the site header
   so step content slides under solid white instead of showing around
   the banner. Shadow only while pinned (.is-stuck, toggled in JS). The
   sidebar pins just below the strip (--wizard-sidebar-top, set in JS). */
.cea-wizard-wrap .cea-wizard-form > .wizard-banner-bar {
  flex: 1 1 100%;
  position: sticky;
  top: var(--wizard-header-offset, 0px);
  z-index: 3;
  margin: -1rem -2.5rem 0.25rem;
  padding: 1rem 2.5rem 0.75rem;
  background: var(--tm-surface);
  transition: box-shadow 0.15s ease;
}

.cea-wizard-wrap .cea-wizard-form > .wizard-banner-bar.is-stuck {
  box-shadow: 0 6px 12px -8px rgba(46, 63, 124, 0.25);
}

.wizard-banner-bar .meeting-context-banner {
  margin: 0;
}

@media (max-width: 700px) {
  .cea-wizard-wrap .cea-wizard-form > .wizard-banner-bar {
    margin: -0.75rem -1.5rem 0.25rem;
    padding: 0.75rem 1.5rem 0.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cea-wizard-wrap .cea-wizard-form > .wizard-banner-bar {
    transition: none;
  }
}

.wizard-main {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.85rem 1rem;
}

@media (max-width: 700px) {
  .cea-wizard-wrap .cea-form.cea-wizard-form {
    padding: 1.5rem;
  }

  .wizard-layout {
    flex-direction: column;
    gap: 1.25rem;
  }

  .wizard-sidebar {
    flex: 1 1 100%;
    max-width: 100%;
    position: static;
  }
}

/* Step progress strip — reuses the .cea-tabs list markup for its
   layout only; buttons (not the old blue <a> tabs) are styled fresh
   here to match this plugin's newer --tm-* look, same treatment as
   .tm-view-btn (Today's Meetings' List/Map/Calendar toggle). Stacked
   as a vertical column (not the .cea-tabs base's horizontal flex) to
   sit in the left sidebar. */
.wizard-step-nav {
  flex-direction: column;
  margin: 0;
  border: 1px solid var(--tm-border);
  border-radius: var(--tm-radius-sm);
  overflow: hidden;
}

.wizard-step-nav li {
  margin: 0;
}

.wizard-step-nav li:not(:last-child) {
  border-bottom: 1px solid var(--tm-border);
}

.wizard-step-btn {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: var(--tm-surface);
  color: var(--tm-text);
  font-size: 0.94rem;
  font-weight: 600;
  padding: 1.1rem 1.1rem;
  cursor: pointer;
}

.wizard-step-btn.active {
  background: var(--wiz-navy);
  color: #fff;
}

.wizard-step-btn:hover:not(.active) {
  background: var(--tm-bg);
}

/* The Access step's blank-state notice reuses .wizard-step-btn purely
   so the existing step-click JS (querySelectorAll(".wizard-step-btn"))
   picks it up for free -- this class overrides all of that button's
   block/width/padding chrome back to a plain inline text link, since
   it sits inline inside a sentence, not in the step sidebar. Two-class
   selector (not source order) is what wins here on purpose, after the
   .tm-row-day/.tm-row-time cascade mistake above. */
.wizard-step-btn.cea-wizard-notice-link {
  display: inline;
  width: auto;
  padding: 0;
  background: none;
  color: var(--wiz-steel-dark);
  font-size: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.wizard-step-btn.cea-wizard-notice-link:hover {
  color: var(--wiz-navy-dark);
}

.wizard-step {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.85rem 1rem;
}

/* Add a Meeting wizard's step 1 ("Agreement") -- arbitrary ACF
   WYSIWYG content (add_a_meeting_intro_text), needs an explicit
   full-width flex-basis like every other direct child of .wizard-step
   or it shrink-wraps instead of taking its own line. */
.wizard-agreement-intro {
  flex: 1 1 100%;
}

.wizard-step-actions {
  flex: 1 1 100%;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.wizard-step-actions .button,
.cea-wizard-wrap .actions .button {
  background-color: var(--wiz-navy);
  border: none !important;
  padding: 14px 28px;
  font-size: 15px !important;
  line-height: 1.2;
  margin: 0;
}

.wizard-step-actions .button:hover,
.cea-wizard-wrap .actions .button:hover {
  background-color: var(--wiz-navy-dark) !important;
  border-color: var(--wiz-navy-dark) !important;
}

.wizard-step-actions .wizard-btn-secondary {
  background: transparent !important;
  color: var(--tm-text-sec) !important;
  border: 1.5px solid var(--tm-border) !important;
}

/* "Report Meeting Closed" -- lives in the sidebar under the step
   list (not down in the step-1 field flow, where it was too easy to
   click by accident alongside Next/Back). Styled as a button again
   (per feedback), just contained to the sidebar's width rather than
   the full form width it had at its old location. Replaces the
   removed top action-links strip's "Close a Meeting" tab now that
   Add a Meeting lives in the site's primary nav. */
.wizard-close-meeting-box {
  margin-top: 0.75rem;
}

.wizard-close-meeting-box a {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0.7rem 1rem;
  border-radius: var(--tm-radius-sm);
  background: rgba(240, 115, 110, 0.08);
  border: 1px solid var(--wiz-coral);
  color: var(--wiz-coral-dark);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.wizard-close-meeting-box a:hover {
  background: rgba(240, 115, 110, 0.18);
}

.cea-wizard-wrap .actions {
  flex: 1 1 100%;
  margin: 0.25rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.cea-wizard-wrap .actions #btn-cancel {
  color: #555;
  text-decoration: underline;
}

/* Confirm step: captcha sits in its own block above the Back/Submit
   row (per explicit request) instead of the live page's single
   .actions row that runs captcha/submit/cancel together. No Cancel
   link on this step (removed per explicit request). */
.wizard-confirm-captcha {
  flex: 1 1 100%;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tm-border);
}

/* Step 3 diff summary */
.wizard-confirm-intro {
  flex: 1 1 100%;
  margin: 0 0 0.5rem;
  color: var(--tm-text-sec);
}

#wizard-diff-summary,
#wizard-submitter-recap {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Laid out like "Submitted by" in the WSO email ([#334]): a light
   blue box, a small steel heading, the name in bold with the phone,
   the email below. */
#wizard-submitter-recap {
  margin-top: 0.9rem;
  padding: 1rem 1.15rem;
  gap: 0.15rem;
  background: #eaf4fd;
  border-radius: 6px;
  font-size: 0.88rem;
  color: var(--tm-text);
}

#wizard-submitter-recap .wizard-diff-section-title {
  color: var(--wiz-steel-dark);
}

.wizard-submitter-line,
.wizard-submitter-email {
  overflow-wrap: anywhere;
}

.wizard-diff-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.wizard-diff-section-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tm-text-sec);
}

.wizard-diff-note {
  padding: 0.75rem 0.85rem;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  color: var(--tm-text-sec);
  font-size: 0.9rem;
}

.wizard-diff-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  border: 1px solid var(--tm-border);
}

.wizard-diff-label {
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tm-text-sec);
}

.wizard-diff-before,
.wizard-diff-after {
  font-size: 0.9rem;
  overflow-wrap: anywhere;
  white-space: pre-line; /* keep the returns typed in a text box */
}

/* Coral before / steel-blue after -- no green anywhere on this site,
   per explicit request, so "after" uses the palette's steel blue
   instead of the old teal/green treatment. */
.wizard-diff-before {
  display: inline-block;
  background: rgba(240, 115, 110, 0.12);
  border: 1px solid var(--wiz-coral);
  border-radius: var(--tm-radius-sm);
  padding: 0.15rem 0.5rem;
  color: var(--wiz-coral-dark);
  text-decoration: line-through;
}

.wizard-diff-after {
  display: inline-block;
  background: rgba(61, 143, 196, 0.12);
  border: 1px solid var(--wiz-steel);
  border-radius: var(--tm-radius-sm);
  padding: 0.15rem 0.5rem;
  color: var(--wiz-steel-dark);
  font-weight: 600;
}

.wizard-diff-arrow {
  color: var(--tm-text-sec);
}

/* Unchanged-with-a-value fields -- a plain two-column list, label
   left in grey and value beside it, no boxes, the same as the
   Unchanged list in the WSO email ([#334]). Also used for Add mode's
   "Filled In" list and the "Takes effect" line. */
.wizard-diff-unchanged-list {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  column-gap: 0.75rem;
  row-gap: 0.4rem;
}

.wizard-diff-unchanged-row {
  display: contents;
}

.wizard-diff-unchanged-label {
  font-size: 0.88rem;
  color: var(--tm-text-sec);
  overflow-wrap: anywhere;
}

.wizard-diff-unchanged-value {
  font-size: 0.88rem;
  color: var(--tm-text);
  overflow-wrap: anywhere;
  white-space: pre-line; /* keep the returns typed in a text box */
}

/* Fields left blank -- one plain grey line of their names ([#334]). */
.wizard-diff-blank-list {
  font-size: 0.88rem;
  color: var(--tm-text-sec);
}

.cea-wizard-wrap .btn-cancel-meeting {
  /* Cancel a Meeting isn't part of this trial — hide the irrelevant
     link the shared search-result partial always renders. */
  display: none;
}

/* "Email" chip standing in for an address (render_text_with_email_icons()
   in the public class) -- envelope icon + the word, inline with the
   surrounding text. Inline-block, not flex, and left on the baseline: an
   inline-block's baseline is its own text's, so the word "Email" sits on the
   same line as the words around it at any font size. (It was an inline-flex
   box nudged down a fixed 6px, which sat low -- Jason, 2026-09-21.) */
.cea-email-link {
  display: inline-block;
  padding: 3px 10px 3px 8px;
  margin: 0 2px;
  vertical-align: baseline;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  color: var(--wiz-steel);
  background: rgba(61, 143, 196, 0.12);
  text-decoration: none !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cea-email-link svg {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  /* centre the envelope on the word's lower-case letters */
  vertical-align: -3px;
}

.cea-email-link:hover,
.cea-email-link:focus-visible {
  color: #fff;
  background: var(--wiz-steel);
}

.cea-email-link:focus-visible {
  outline: 2px solid var(--wiz-navy);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .cea-email-link {
    transition: none;
  }
}

/* ------------------------------------------------------------------
   Find a Meeting pill bar (Jason, 2026-09-22; "Version 1" of the filter
   mockups). The time zone sits beside the search as "Time Zone: Pacific
   Time" with the real <select> invisible over it; the filters are pills
   after the meeting-type chips, each opening a small menu of its chips.
   Replaces the Filters button and its panel. Written last so it wins.
   ------------------------------------------------------------------ */
.tm-tz-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  padding: 0 14px;
  background: #ffffff;
  border: 1.5px solid #dcdcdc;
  border-radius: 12px;
  color: #383838;
  font-size: 0.95rem;
  white-space: nowrap;
  cursor: pointer;
}
.tm-tz-control:hover {
  border-color: #c4c4c4;
}
.tm-tz-control:focus-within {
  border-color: #3299ec;
  box-shadow: 0 0 0 4px rgba(50, 153, 236, 0.22);
}
.tm-tz-icon {
  flex: none;
  color: var(--wiz-navy);
}
.tm-tz-label {
  color: #6b6b6b;
}
.tm-tz-name {
  font-weight: 700;
  color: var(--wiz-navy);
}
.tm-tz-caret {
  font-size: 0.7rem;
  color: #767676;
}
.todays-meetings-wrap .tm-tz-control select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;
}

.tm-bar-sub .tm-format-row {
  flex: 0 0 auto;
}
/* the meeting-type chips at the pills' size (Jason: 10% smaller) */
.tm-bar-sub .tm-chip-format {
  height: 36px;
  padding: 0 14px;
  gap: 6px;
  font-size: 0.855rem;
}
.tm-bar-sub .tm-chip-format svg {
  width: 13px;
  height: 13px;
}
/* "N happening now" on its own row, the full width (Jason) */
.tm-filter-bar .tm-live-banner {
  flex: 1 1 100%;
  justify-content: center;
  margin-left: 0;
  /* the pills' height and text size (Jason). The box has to match
     .tm-bar-sub .tm-pill outright, not just its height: the base
     .tm-live-banner rule sets padding: 0.7rem 1.1rem, and 22px of
     vertical padding inside a 36px border-box leaves the text and the
     dot about 11px to sit in, which is what made it read as short. */
  height: var(--tm-pill-h);
  min-height: var(--tm-pill-h);
  padding: 0 12px;
  font-size: 0.855rem;
  line-height: 1;
}
.tm-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.tm-pills-sep {
  width: 1px;
  height: 26px;
  margin: 0 4px;
  background: #d6d6d6;
}
.tm-pill-wrap {
  position: relative;
}
.tm-bar-sub .tm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--tm-pill-h);
  min-height: var(--tm-pill-h);
  padding: 0 12px;
  border: 1.5px solid #d6d6d6;
  border-radius: 50px;
  background: #ffffff;
  color: #383838;
  font-size: 0.855rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.tm-bar-sub .tm-pill:hover {
  border-color: var(--wiz-navy);
  color: var(--wiz-navy);
}
.tm-bar-sub .tm-pill.is-set,
.tm-bar-sub .tm-pill-wrap.is-open .tm-pill {
  border-color: var(--wiz-navy);
  background: #eef1f8;
  color: var(--wiz-navy);
}
/* Accessible, switched on, looks like a pill with a choice made (Jason) */
.tm-bar-sub .tm-pill-toggle.active {
  border-color: var(--wiz-navy);
  background: #eef1f8;
  color: var(--wiz-navy);
}
.tm-pill-caret {
  font-size: 0.63rem;
  color: #767676;
}
.tm-pill-wrap.is-open .tm-pill-caret {
  transform: rotate(180deg);
}
.tm-pill-text {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tm-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 70;
  width: 300px;
  max-width: calc(100vw - 32px);
  padding: 14px;
  background: #ffffff;
  border: 1px solid #e0dede;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 33, 48, 0.16);
}
.tm-pop-wide {
  width: 460px;
}
.tm-pop .tm-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.tm-pop .tm-chip {
  border-color: #e0dede;
  background: #ffffff;
  color: #383838;
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
}
.tm-pop .tm-chip:hover {
  border-color: var(--wiz-navy);
  color: var(--wiz-navy);
}
.tm-pop .tm-chip.active {
  border-color: var(--wiz-navy);
  background: var(--wiz-navy);
  color: #ffffff;
}
.tm-pop .tm-chip.is-empty {
  opacity: 0.4;
  cursor: default;
}
.tm-pop .tm-chip.is-empty:hover {
  border-color: #e0dede;
  color: #383838;
}
.tm-chip-n {
  margin-left: 2px;
  font-size: 0.75rem;
  color: #767676;
  font-variant-numeric: tabular-nums;
}
.tm-pop .tm-chip.active .tm-chip-n {
  color: inherit;
  opacity: 0.8;
}
.todays-meetings-wrap .tm-pop input.tm-pop-search {
  width: 100%;
  height: 40px;
  margin: 0 0 10px;
  padding: 0 12px;
  border: 1.5px solid #dcdcdc !important;
  border-radius: 8px !important;
  background: #ffffff;
  color: #383838;
  font-size: 16px;
}
.tm-pop-none {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #767676;
}
.tm-pop-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #eeeeee;
}
.tm-pop-clear {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--wiz-navy);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.tm-pop-done {
  height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--wiz-navy);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}
@container tm-widget (max-width: 700px) {
  .tm-tz-control {
    flex: 1 1 auto;
  }
  .tm-pills-sep {
    display: none;
  }
  .tm-filter-bar .tm-live-banner {
    margin-left: 0;
  }
}

/* Meeting rows (Jason, 2026-09-22). Wide: the Map It / Connect / Call
   button sits at the top of its row, level with the type chip, instead of
   on the text baseline, which left it hanging above the text. Narrow
   (the list without its table header): day and time on one line, then
   the meeting and place on the left with the button on the right. */
@container tm-widget (min-width: 900px) {
  .todays-meeting-row .tm-row-actions {
    align-self: start;
  }
}
@container tm-widget (max-width: 899px) {
  /* Phones: option A of the row mockups (Jason, 2026-09-22,
     claude.ai/artifact/7ZniLHdffU8PP4Rxyb2Kam) -- the time in its own
     column on the left (time, day, zone, LIVE), the meeting in the middle
     (name, number, type chip, address), a round icon button on the right.
     .tm-row-time steps aside (display: contents) so its time, zone and
     LIVE can sit on their own lines of that column. The place is only
     shown for in-person meetings: for the others it just repeats the type. */
  .todays-meeting-row .tm-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) auto;
    grid-template-areas:
      "time meeting action"
      "day meeting action"
      "tz format action"
      "live location action";
    grid-template-rows: auto auto auto 1fr;
    column-gap: 12px;
    row-gap: 2px;
    align-items: start;
    padding: 14px 12px 14px 14px;
  }
  .todays-meeting-row .tm-row-chevron {
    display: none;
  }
  .todays-meeting-row .tm-row-time {
    display: contents;
  }
  .todays-meeting-row .tm-row-time-value {
    grid-area: time;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
  }
  .todays-meeting-row .tm-row-day {
    grid-area: day;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-sec);
  }
  .todays-meeting-row .tm-row-time small {
    grid-area: tz;
    display: block;
    margin: 0;
    font-size: 11px;
  }
  .todays-meeting-row .tm-row-time .tm-live-badge {
    grid-area: live;
    margin-top: 4px;
  }
  .todays-meeting-row .tm-row-time-value,
  .todays-meeting-row .tm-row-day,
  .todays-meeting-row .tm-row-time small,
  .todays-meeting-row .tm-row-time .tm-live-badge {
    grid-column: 1;
  }
  /* the hairline between the time column and the rest */
  .todays-meeting-row .tm-row::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    justify-self: end;
    width: 1px;
    height: 100%;
    margin-right: -6px;
    background: var(--tm-border);
  }
  .todays-meeting-row .tm-row-meeting {
    grid-area: meeting;
    margin: 0;
  }
  .todays-meeting-row .tm-row-meeting-name {
    font-size: 16px;
    font-weight: 700;
  }
  .todays-meeting-row .tm-row-format-col {
    grid-area: format;
    margin: 4px 0 0;
  }
  .todays-meeting-row .tm-row-location {
    grid-area: location;
    margin-top: 2px;
  }
  .todays-meeting-row:not([data-type~="in-person"]) .tm-row-location {
    display: none;
  }
  .todays-meeting-row .tm-row-actions {
    grid-area: action;
    align-self: center;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0;
  }
  /* round icon buttons; the word stays for screen readers */
  .todays-meeting-row .tm-row-action-btn {
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    gap: 0;
  }
  .todays-meeting-row .tm-row-action-icon {
    width: 18px;
    height: 18px;
  }
}

/* ------------------------------------------------------------------
   Find a Meeting filters on a phone (Jason, 2026-09-22; "Version 2" of
   the mockups): the pills fold behind one Filters button and open as a
   sheet from the bottom of the screen. Each pill becomes a row -- the
   group's name, what's chosen or "Any", a caret -- that opens its chips
   in place. Desktop never shows the sheet's parts.
   ------------------------------------------------------------------ */
.tm-sheet-open,
.tm-sheet-scrim,
.tm-sheet-head,
.tm-sheet-foot,
.tm-pill-name,
.tm-pill-value {
  display: none;
}
@container tm-widget (max-width: 700px) {
  .tm-bar-sub .tm-sheet-open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 2px solid var(--wiz-navy);
    border-radius: 50px;
    background: #ffffff;
    color: var(--wiz-navy);
    font-size: 0.855rem;
    font-weight: 700;
    cursor: pointer;
  }
  .tm-sheet-count:not(:empty) {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 50px;
    background: var(--wiz-navy);
    color: #ffffff;
    font-size: 0.75rem;
    line-height: 20px;
    text-align: center;
  }
  .tm-pills {
    display: none;
  }
  .tm-sheet-scrim.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(20, 24, 40, 0.45);
  }
  .tm-pills.is-sheet-open {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0 16px env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -10px 30px rgba(20, 24, 40, 0.2);
  }
  .tm-pills.is-sheet-open .tm-sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 14px 0;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
  }
  .tm-sheet-title {
    font-family: "Roboto Slab", serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: #383838;
  }
  .tm-sheet-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f2f2f2;
    color: #383838;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
  }
  .tm-pills.is-sheet-open .tm-pill-wrap {
    border-bottom: 1px solid #eeeeee;
  }
  .tm-pills.is-sheet-open .tm-pill,
  .tm-pills.is-sheet-open .tm-pill.is-set,
  .tm-pills.is-sheet-open .tm-pill-wrap.is-open .tm-pill {
    display: flex;
    width: 100%;
    height: auto;
    gap: 8px;
    padding: 15px 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: #383838;
    font-size: 1rem;
  }
  .tm-pills.is-sheet-open .tm-pill-text {
    display: none;
  }
  .tm-pills.is-sheet-open .tm-pill-name {
    display: inline;
    font-weight: 700;
  }
  .tm-pills.is-sheet-open .tm-pill-value {
    display: inline;
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #767676;
    font-weight: 500;
  }
  .tm-pills.is-sheet-open .tm-pill.is-set .tm-pill-value {
    color: var(--wiz-navy);
    font-weight: 700;
  }
  .tm-pills.is-sheet-open .tm-pop {
    position: static;
    width: auto;
    max-width: none;
    padding: 0 0 16px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .tm-pills.is-sheet-open .tm-pop .tm-chip-list {
    max-height: none;
  }
  .tm-pills.is-sheet-open .tm-pop-foot {
    display: none;
  }
  .tm-pills.is-sheet-open .tm-pill-toggle,
  .tm-pills.is-sheet-open .tm-pill-toggle.active {
    justify-content: flex-start;
    border-bottom: 1px solid #eeeeee;
  }
  .tm-pills.is-sheet-open .tm-pill-toggle.active {
    color: var(--wiz-navy);
  }
  .tm-pills.is-sheet-open .tm-pill-toggle.active::after {
    content: "\2713";
    margin-left: auto;
    font-weight: 700;
  }
  .tm-pills.is-sheet-open .tm-sheet-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    position: sticky;
    bottom: 0;
    margin-top: auto;
    padding: 12px 0 16px;
    background: #ffffff;
    border-top: 1px solid #eeeeee;
  }
  .tm-sheet-show {
    flex: 1;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--wiz-navy);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
  }
}
html.tm-sheet-locked,
html.tm-sheet-locked body {
  overflow: hidden;
}

/* The controls on a phone (Jason, 2026-09-22: "not so elegant"). The two
   rows' boxes step aside (display: contents) so every control is laid out
   in one flow: search; Filters with List / Map / Calendar on one line;
   the three meeting types in equal thirds; the time zone as a quiet line
   of text; the chosen-filter tags; happening now (tags first: Jason,
   2026-09-22). */
@container tm-widget (max-width: 700px) {
  .tm-filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }
  .tm-filter-bar .tm-bar-top,
  .tm-filter-bar .tm-bar-sub {
    display: contents;
  }
  .tm-filter-bar .tm-search-wrap {
    order: 1;
    flex: 1 1 100%;
  }
  .tm-filter-bar .tm-sheet-open {
    order: 2;
  }
  .tm-filter-bar .tm-view-toggle {
    order: 3;
    margin-left: auto;
  }
  .tm-filter-bar .tm-view-btn {
    height: 30px;
    padding: 0 12px;
    font-size: 0.85rem;
  }
  .tm-filter-bar .tm-format-row {
    order: 4;
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .tm-filter-bar .tm-format-row .tm-chip-format {
    justify-content: center;
    min-width: 0;
    padding: 0 8px;
  }
  .tm-filter-bar .tm-tz-control {
    order: 5;
    flex: 1 1 100%;
    height: auto;
    padding: 2px 0;
    border: 0;
    border-radius: 6px;
    background: none;
    font-size: 0.85rem;
  }
  .tm-filter-bar .tm-tz-icon {
    width: 15px;
    height: 15px;
  }
  .tm-filter-bar .tm-chosen {
    order: 6;
  }
  .tm-filter-bar .tm-live-banner {
    order: 7;
    height: 36px;
    font-size: 0.88rem;
  }
}

/* The list's column headings stay in view while scrolling (Jason,
   2026-09-22); --tm-head-top is the site header + admin bar, measured by
   public.js (initStickyListHeader). Wide layout only: phones have none. */
@container tm-widget (min-width: 900px) {
  .tm-table-header {
    position: sticky;
    top: var(--tm-head-top, 0px);
    z-index: 5;
    background: #ffffff;
    /* room for an opened first row's blue ring, which the headings'
       white would otherwise cover */
    margin-bottom: 6px;
  }
}

/* ==========================================================================
   Keyboard focus (Map #275)

   Several rules above set `outline: none` on a field and replaced it with
   a border colour only. A border colour is not a focus indicator: a
   keyboard user has no reliable way to see where they are, and a change
   of colour alone fails WCAG 2.4.7. These restore a real ring.

   `:focus-visible` rather than `:focus`, matching what the rest of the
   stylesheet already does, so a mouse click still doesn't draw a ring --
   only keyboard focus does.
   ========================================================================== */

.cea-wizard-wrap .cea-form.cea-wizard-form input:focus-visible,
.cea-wizard-wrap .cea-form.cea-wizard-form select:focus-visible,
.cea-wizard-wrap .cea-form.cea-wizard-form textarea:focus-visible,
.edit-a-meeting-wrap .cea-form.edit-a-meeting input:focus-visible,
.edit-a-meeting-wrap .cea-form.edit-a-meeting select:focus-visible,
.edit-a-meeting-wrap .cea-form.edit-a-meeting textarea:focus-visible,
.cea-branded-form-wrap .cea-form input:focus-visible,
.cea-branded-form-wrap .cea-form select:focus-visible,
.cea-branded-form-wrap .cea-form textarea:focus-visible,
.ig-select-group select:focus-visible,
.area-select-group select:focus-visible,
.tm-nearme-input:focus-visible {
  outline: 2px solid var(--wiz-navy);
  outline-offset: 2px;
}

/* The time zone control is a <select> laid over the visible text at
   opacity 0, so focusing it showed nothing at all. Ring the wrapper. */
.tm-tz-control:focus-within {
  outline: 2px solid var(--wiz-navy);
  outline-offset: 2px;
  border-radius: var(--tm-radius-sm);
}

/* Panels and boxes we move focus to programmatically (the view panels, the
   error notice, the thank-you panel). They are focus targets, not controls,
   so they take no ring -- the visitor did not tab there. */
.tm-view-panel:focus,
.cea-form-notices:focus,
.cea-submission-success:focus {
  outline: none;
}

/* A focused field is one thick navy box, as in wp-admin, in place of the
   steel border plus the navy ring set 2px outside it (the "double line").
   Jason, 2026-09-22: tried on Close an Intergroup, then carried to every
   form and the Find an Intergroup / Area dropdowns. */
.cancel-a-meeting-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.cancel-a-meeting-wrap .cea-form select:focus,
.cancel-a-meeting-wrap .cea-form textarea:focus,
.ig-select-group select:focus,
.area-select-group select:focus,
.cancel-an-intergroup-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.cancel-an-intergroup-wrap .cea-form select:focus,
.cancel-an-intergroup-wrap .cea-form textarea:focus,
.edit-an-intergroup-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.edit-an-intergroup-wrap .cea-form select:focus,
.edit-an-intergroup-wrap .cea-form textarea:focus,
.edit-an-area-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.edit-an-area-wrap .cea-form select:focus,
.edit-an-area-wrap .cea-form textarea:focus,
.add-a-meeting-wizard-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.add-a-meeting-wizard-wrap .cea-form select:focus,
.add-a-meeting-wizard-wrap .cea-form textarea:focus,
.edit-a-meeting-wizard-wrap .cea-form input:not([type="checkbox"]):not([type="radio"]):focus,
.edit-a-meeting-wizard-wrap .cea-form select:focus,
.edit-a-meeting-wizard-wrap .cea-form textarea:focus {
  border-color: var(--wiz-navy) !important;
  box-shadow: 0 0 0 1px var(--wiz-navy) !important;
  outline: 2px solid transparent !important;
}

/* Add a Meeting: the Area follows the Intergroup (Map #366), so it is
   greyed and can't be changed by hand */
.cea-area-auto select {
  pointer-events: none;
  background-color: var(--tm-surface-2, #f1f2f5) !important;
  color: var(--tm-text-sec) !important;
}

/* Add a Meeting, Agreement step: "Yes, our group meets these
   requirements" as a switch (Map #368) */
.cea-agree-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 1.25rem 0 0.5rem;
  cursor: pointer;
  font-weight: 600;
  color: var(--tm-text);
}

.cea-agree-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.cea-agree-track {
  position: relative;
  flex: none;
  width: 46px;
  height: 26px;
  border-radius: 13px;
  background: #c3c7d3;
  transition: background-color 0.15s;
}

.cea-agree-track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 0.15s;
}

.cea-agree-toggle input:checked + .cea-agree-track {
  background: var(--wiz-navy);
}

.cea-agree-toggle input:checked + .cea-agree-track::after {
  transform: translateX(20px);
}

.cea-agree-toggle input:focus-visible + .cea-agree-track {
  outline: 2px solid var(--wiz-navy);
  outline-offset: 2px;
}

.cea-agree-toggle input.wizard-field-invalid + .cea-agree-track {
  box-shadow: 0 0 0 2px #c62828;
}

@media (prefers-reduced-motion: reduce) {
  .cea-agree-track,
  .cea-agree-track::after {
    transition: none;
  }
}

/* A shared link focuses the opened row before anyone has clicked or
   typed; no focus ring until a key is pressed (Map #377). */
.todays-meeting-row .more-info-toggle.tm-quiet-focus:focus {
  outline: none;
  box-shadow: none;
}