/* 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-submission notice (e.g. "Thank you for submitting your
   request...") -- styled as a card with an accent icon rather than a
   solid full-bleed color block, matching the navy/coral/steel-blue
   language used by the Today's Meetings widget and the Edit a Meeting
   wizard elsewhere on this site. Falls back to its own hex values
   (rather than depending on --wiz-*/--tm-* existing) since .notice can
   render on pages the wizard/widget CSS never touches. */
.notice {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 700px;
  margin: 2rem auto;
  padding: 1.15rem 1.4rem;
  border-radius: 10px;
  text-align: left;
  font-size: 0.95rem;
  line-height: 1.55;
  background: rgba(46, 63, 124, 0.07);
  border: 1px solid #2e3f7c;
  color: #22315e;
}

.notice::before {
  content: "\2713";
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: #2e3f7c;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
}

.notice a {
  color: #2e3f7c;
}

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

.notice.error::before {
  content: "!";
  background: #c9524d;
}

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

/* Replaces a submission form once it's been successfully submitted
   (see Cea_Meetings_Manager_Public::render_submission_success_panel())
   -- reuses .notice.success above but centers it and the return link
   as a self-contained "you're done" state inside the form's own
   wrapper, rather than relying only on the page-top notice banner. */
.cea-submission-success {
  max-width: 700px;
  margin: 2rem auto;
  text-align: center;
}

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

.cea-submission-return-link {
  margin: 0;
}

/* 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 */
.service-body-link {
  text-align: right;
  margin-bottom: 1rem;
}

.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;
}

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

.m-row input,
.m-row select,
.m-row textarea {
  width: 100%;
  padding: 0.75rem !important;
  font-size: 1rem !important;
  height: auto !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: #f76c6c;
  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(--wiz-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;
  padding: 0 14px !important;
}

.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;
}

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

/* "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;
}

/* 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-service-body,
.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-service-body,
.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 {
  --tm-teal: #157060;
  --tm-coral: #c43e3e;
  --tm-amber: #8b5d00;
  --tm-purple: #5a4080;
  --tm-navy: #374785;
  --tm-bg: #faf8f5;
  --tm-surface: #ffffff;
  --tm-text: #2d2d2d;
  --tm-text-sec: #595959;
  --tm-border: #e0dcd8;
  --tm-radius: 10px;
  --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(--tm-teal);
  border-radius: var(--tm-radius-sm);
  background: var(--tm-surface);
  font-size: 1.1rem;
  outline: none;
  box-shadow: 0 0 0 3px rgba(21, 112, 96, 0.12);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.tm-search-input:focus {
  border-color: var(--tm-teal);
  box-shadow: 0 0 0 4px rgba(21, 112, 96, 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(--tm-teal);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.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(--tm-teal);
}

.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(--tm-teal);
  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(--tm-teal);
  border-color: var(--tm-teal);
  color: #fff;
}

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

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

/* Results table header */

.tm-table-header {
  display: none;
  grid-template-columns: 6.5rem 6.5rem 5.5rem 14rem 12rem 9rem;
  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);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}

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

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

/* Result rows */

.todays-meeting-row {
  border: 1px solid var(--tm-border);
  border-left: 4px solid var(--tm-border);
  background-color: var(--tm-surface);
  border-radius: var(--tm-radius-sm);
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.todays-meeting-row[data-format="online"] {
  border-left-color: var(--tm-teal);
}
.todays-meeting-row[data-format="inperson"] {
  border-left-color: var(--tm-coral);
}
.todays-meeting-row[data-format="phone"] {
  border-left-color: var(--tm-amber);
}
.todays-meeting-row[data-format="hybrid"] {
  border-left-color: var(--tm-purple);
}

.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: 6.5rem 6.5rem 5.5rem 14rem 12rem 9rem;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: start;
  }
}

.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: 700;
  color: var(--tm-text);
  white-space: nowrap;
  line-height: 1.3;
}

.tm-row-time {
  font-weight: 700;
  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;
}

.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;
}

.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: 0.35rem;
  align-items: flex-start;
}

.tm-row-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  border-radius: var(--tm-radius-badge);
  border: 1.5px solid var(--tm-border);
  background: var(--tm-surface);
  font-size: 0.72rem;
  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-coral);
  color: var(--tm-coral);
}

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

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

/* 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(--tm-teal);
  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-teal);
}
.tm-cal-box[data-format="inperson"] {
  border-left-color: var(--tm-coral);
}
.tm-cal-box[data-format="phone"] {
  border-left-color: var(--tm-amber);
}
.tm-cal-box[data-format="hybrid"] {
  border-left-color: var(--tm-purple);
}

.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-coral);
}
.tm-map-legend-dot-online {
  background: var(--tm-teal);
}
.tm-map-legend-dot-phone {
  background: var(--tm-amber);
}
.tm-map-legend-dot-hybrid {
  background: var(--tm-purple);
}

.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;
  gap: 0.35rem;
  margin-top: 0.5rem;
}

/* 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(21, 112, 96, 0.1);
  color: var(--tm-teal);
}
.tm-badge-inperson {
  background: rgba(196, 62, 62, 0.1);
  color: var(--tm-coral);
}
.tm-badge-phone {
  background: rgba(139, 93, 0, 0.12);
  color: var(--tm-amber);
}
.tm-badge-hybrid {
  background: rgba(90, 64, 128, 0.12);
  color: var(--tm-purple);
}

.tm-lang-badge {
  font-size: 0.58rem;
}
.tm-lang-badge-en {
  background: rgba(21, 112, 96, 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;
  background: var(--tm-coral);
  color: #fff;
  width: fit-content;
}

/* "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(--tm-teal);
  border-radius: var(--tm-radius-badge);
  background: rgba(21, 112, 96, 0.06);
  color: var(--tm-teal);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}

.tm-live-banner:hover {
  background: rgba(21, 112, 96, 0.12);
}

.tm-live-banner.active {
  background: var(--tm-teal);
  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;
}

/* 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);
}

.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 {
  color: var(--tm-teal);
  text-decoration: underline;
}

.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: #0e4d42 !important;
  margin: 0;
}

.edit-a-meeting-wrap .cea-form.edit-a-meeting .actions .button:hover {
  background-color: #0e4d42 !important;
  border-color: #0e4d42 !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(21, 112, 96, 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;
}

/* 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 .required {
  color: var(--wiz-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;
  padding: 0 14px !important;
}

.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-sticky-top, 1rem);
}

.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;
}

#wizard-submitter-recap {
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tm-border);
}

.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;
}

/* 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 -- one compact row per field (label
   left, value right) stacked in a single column, not a wrapping tile
   grid, per explicit request. Still much shorter than a full
   before/after row since there's only one value to show. */
.wizard-diff-unchanged-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wizard-diff-unchanged-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--tm-radius-sm);
  background: var(--tm-bg);
  border: 1px solid var(--tm-border);
}

.wizard-diff-unchanged-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tm-text-sec);
}

.wizard-diff-unchanged-value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

/* Submitter contact recap -- deliberately styled differently (sky-
   blue tint) from the plain Unchanged rows above it, so it doesn't
   read as "just another unchanged field" -- it's new information,
   not a diff of anything. */
.wizard-submitter-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.wizard-submitter-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--tm-radius-sm);
  background: rgba(76, 166, 238, 0.1);
  border: 1px solid var(--wiz-sky);
}

.wizard-submitter-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--wiz-steel-dark);
}

.wizard-submitter-value {
  flex: 1 1 auto;
  text-align: right;
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Fields left blank -- just a name in a small pill, wrapped, so a
   long list of untouched-and-empty fields stays compact instead of
   one row per field. */
.wizard-diff-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.wizard-diff-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: var(--tm-radius-badge);
  background: var(--tm-bg);
  border: 1px dashed var(--tm-border);
  color: var(--tm-text-sec);
  font-size: 0.78rem;
}

.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;
}