/* Fly Fishing Events — shared styles.
 * The skin sets CSS custom properties; components only read the variables,
 * so a value is changed in one place. There is one skin (.ffe-skin-tu) —
 * the block below holds the fallbacks it does not restate. */

.ffe, .ffe-modal-overlay {
  --ffe-bg: #f6f4ef;
  --ffe-surface: #ffffff;
  --ffe-surface-2: #efece4;
  --ffe-text: #24312a;
  --ffe-text-soft: #5c6a61;
  --ffe-border: #d8d3c6;
  --ffe-accent: #2f6f4f;
  --ffe-accent-text: #ffffff;
  --ffe-today: #e4efe8;
  --ffe-shadow: 0 8px 30px rgba(20, 35, 25, 0.18);
  --ffe-radius: 10px;
  --ffe-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ffe-font-head: var(--ffe-font);
  font-family: var(--ffe-font);
  color: var(--ffe-text);
}

/* ---------------------------------------------------------------- skin
   One theme. The alternates (river, light, dark, high-contrast) were
   retired: each needed its own contrast audit to stay honest, and a chapter
   calendar reads better with a single considered look. The base block above
   still holds the fallbacks for anything the skin does not restate. */

/* The skin's palette and typefaces are set once, in the INDUSTRY block near
 * the end of this file — an earlier draft declared them here too, in a
 * different blue and in Figtree/Zilla Slab from Google Fonts, and every one
 * of those values was overridden further down. The dead block is gone; the
 * rules it left behind, which only read the variables, are below. */
.ffe-skin-tu .ffe-heading, .ffe-skin-tu .ffe-month-title,
.ffe-skin-tu .ffe-card-title, .ffe-skin-tu .ffe-agenda-title,
.ffe-skin-tu .ffe-modal-title, .ffe-skin-tu .ffe-partner-name {
  font-family: var(--ffe-font-head); letter-spacing: 0.01em;
}
.ffe-skin-tu .ffe-smartbar { border-left-color: var(--ffe-accent-2); }
.ffe-skin-tu .ffe-smartbar-label { color: var(--ffe-accent-2); }
.ffe-skin-tu .ffe-footer-tool:hover { color: var(--ffe-accent-2); border-bottom-color: var(--ffe-accent-2); }
.ffe-skin-tu .ffe-partner { border-top-color: var(--ffe-accent-2); }

.ffe {
  background: var(--ffe-bg);
  border-radius: var(--ffe-radius);
  padding: 16px;
  box-sizing: border-box;
  max-width: 100%;
}
.ffe *, .ffe-modal-overlay * { box-sizing: border-box; }

/* Inside someone else's theme. WordPress themes style bare tags — Divi
   pads every <p>, sizes every <h3>, and gives every <button> a radius,
   letter-spacing and a text-transform — and the calendar draws its titles,
   rows, chips and pills as buttons. These clear that, at the specificity of
   a single class so every component rule below still wins over them. */
.ffe :where(button), .ffe-modal-overlay :where(button) {
  font: inherit; text-transform: none; letter-spacing: normal; text-align: inherit;
  border-radius: 0; box-shadow: none; text-shadow: none; margin: 0;
  min-height: 0; line-height: 1.3;
}
.ffe :where(p, h2, h3, h4), .ffe-modal-overlay :where(p, h3, h4) {
  padding: 0; text-transform: none; letter-spacing: normal;
}
.ffe :where(a), .ffe-modal-overlay :where(a) { box-shadow: none; }

.ffe-heading {
  margin: 0 0 12px; font-size: 1.4rem;
  font-family: var(--ffe-font-head); font-weight: 800;
}
.ffe-loading, .ffe-error, .ffe-empty {
  padding: 24px; text-align: center; color: var(--ffe-text-soft);
}
.ffe-error { color: #a8323e; }

/* ---------------------------------------------------------------- toolbar */
.ffe-toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 12px;
}
.ffe-seg {
  display: inline-flex; border: 1px solid var(--ffe-border);
  border-radius: var(--ffe-radius); overflow: hidden; background: var(--ffe-surface);
}
.ffe-seg-btn {
  border: 0; background: transparent; color: var(--ffe-text);
  padding: 8px 14px; cursor: pointer; font: inherit; font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.ffe-seg-btn + .ffe-seg-btn { border-left: 1px solid var(--ffe-border); }
.ffe-seg-btn.is-active { background: var(--ffe-accent); color: var(--ffe-accent-text); }
.ffe-search {
  flex: 1 1 160px; min-width: 140px; padding: 8px 12px; font: inherit;
  font-size: 0.9rem; border: 1px solid var(--ffe-border);
  border-radius: var(--ffe-radius); background: var(--ffe-surface); color: var(--ffe-text);
}

/* ---------------------------------------------------------------- smart bar
 * Solid brand block: accent background, white knockout text. */
.ffe-smartbar {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  background: var(--ffe-accent); color: #fff;
  border: 0; border-left: 4px solid var(--ffe-accent-2, rgba(255, 255, 255, 0.4));
  border-radius: 3px;
  padding: 10px 14px; margin-bottom: 12px; font-size: 0.86rem;
}
.ffe-smartbar-count { font-weight: 800; font-family: var(--ffe-font-head); }
.ffe-smartbar-next {
  display: inline-flex; align-items: baseline; gap: 6px;
  border: 0; background: transparent; font: inherit; font-size: 0.86rem;
  color: #fff; cursor: pointer; padding: 0; text-align: left;
}
.ffe-smartbar-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: #e8a173; font-weight: 800;
}
.ffe-smartbar-next:hover .ffe-smartbar-title { text-decoration: underline; }
.ffe-smartbar-more {
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  background: transparent; color: #fff; cursor: pointer;
  font: inherit; font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 10px;
}
.ffe-smartbar-more:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------------------------------------------------------------- filters */
.ffe-filter-toggle {
  border: 1px solid var(--ffe-border); background: var(--ffe-surface);
  color: var(--ffe-text); border-radius: var(--ffe-radius);
  padding: 8px 14px; cursor: pointer; font: inherit; font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.ffe-filter-toggle:hover { border-color: var(--ffe-accent); }
.ffe-filter-toggle.is-active {
  background: var(--ffe-accent); border-color: var(--ffe-accent); color: var(--ffe-accent-text);
}
.ffe-filter-toggle { display: inline-flex; align-items: center; gap: 6px; }
.ffe-caret { font-size: 0.7rem; line-height: 1; transform: rotate(-90deg); transition: transform 0.15s; }
.ffe-caret.is-open { transform: rotate(0deg); }
.ffe-filters { margin-bottom: 14px; }
/* Collapsed by default so events lead the page. */
.ffe-filters.is-collapsed { display: none; }
.ffe-chiprow { display: flex; gap: 8px; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; }
.ffe-chiprow-label {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ffe-text-soft); flex: 0 0 105px;
}
.ffe-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.ffe-chip {
  --chip-accent: var(--ffe-accent);
  border: 1px solid var(--ffe-border); background: var(--ffe-surface);
  color: var(--ffe-text); border-radius: 3px; padding: 4px 11px;
  font: inherit; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ffe-chip:hover { border-color: var(--chip-accent); }
.ffe-chip.is-active {
  background: var(--chip-accent); border-color: var(--chip-accent); color: var(--on-accent, #fff);
}
.ffe-filters-note {
  margin: 6px 0 0; font-size: 0.76rem; color: var(--ffe-text-soft); font-style: italic;
}
.ffe-clear {
  border: 0; background: transparent; color: var(--ffe-accent);
  font: inherit; font-size: 0.82rem; cursor: pointer; text-decoration: underline; padding: 2px 0;
}

/* ---------------------------------------------------------------- month */
.ffe-month-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ffe-month-title {
  font-family: var(--ffe-font-head); font-size: 1.1rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--ffe-accent);
  min-width: 190px; text-align: center;
}
.ffe-nav-btn, .ffe-today-btn {
  border: 1px solid var(--ffe-border); background: var(--ffe-surface); color: var(--ffe-text);
  border-radius: var(--ffe-radius); cursor: pointer; font: inherit;
}
.ffe-nav-btn { width: 34px; height: 34px; font-size: 1.2rem; line-height: 1; }
.ffe-today-btn { padding: 6px 12px; font-size: 0.85rem; margin-left: auto; }

.ffe-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.ffe-dow {
  text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ffe-accent); padding: 4px 0;
}
.ffe-cell {
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-radius: 6px; min-height: 86px; padding: 4px; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px;
}
.ffe-cell.is-empty { background: transparent; border-color: transparent; }
.ffe-cell.is-today { background: var(--ffe-today); border-color: var(--ffe-accent); }
.ffe-daynum { font-size: 0.75rem; color: var(--ffe-text-soft); }
.ffe-cell.is-today .ffe-daynum { font-weight: 700; color: var(--ffe-text); }
/* Month pills are mini-tiles: solid org color, knockout text in whichever
   ink the color can carry. */
.ffe-pill {
  --pill-accent: var(--ffe-accent);
  display: flex; align-items: center; gap: 4px; width: 100%;
  border: 0; background: var(--pill-accent); border-radius: 3px;
  padding: 3px 6px; cursor: pointer; font: inherit; font-size: 0.72rem;
  font-weight: 600; color: var(--on-accent, #fff); text-align: left;
}
.ffe-pill:hover { filter: brightness(1.12); }
.ffe-pill.ffe-on-light:hover { filter: brightness(0.95); }
.ffe-pill.is-past { opacity: 0.45; filter: grayscale(0.85); }
.ffe-pill.is-past:hover { opacity: 1; filter: grayscale(0); }
.ffe-pill-dot { display: none; }
.ffe-pill-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffe-more {
  border: 0; background: transparent; color: var(--ffe-accent);
  font: inherit; font-size: 0.7rem; cursor: pointer; text-align: left; padding: 0 5px;
}

/* ---------------------------------------------------------------- agenda */
.ffe-agenda-month {
  font-family: var(--ffe-font-head); font-weight: 800;
  font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ffe-accent); margin: 18px 0 8px;
  display: inline-block; border-bottom: 2px solid var(--ffe-accent-2, var(--ffe-accent));
  padding-bottom: 3px;
}
.ffe-agenda-row {
  --row-accent: var(--ffe-accent);
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-left: 2px solid var(--row-accent);
  border-radius: 3px; padding: 10px 14px; margin-bottom: 6px;
  cursor: pointer; font: inherit; color: var(--ffe-text); text-align: left;
}
.ffe-agenda-row:hover { border-color: var(--row-accent); }
/* Date block is a solid mini-tile in the org color. */
.ffe-agenda-date {
  display: flex; flex-direction: column; align-items: center; min-width: 48px;
  background: var(--row-accent); color: var(--on-accent, #fff); border-radius: 3px; padding: 6px 8px;
}
.ffe-agenda-dow { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.ffe-agenda-day { font-size: 1.3rem; font-weight: 800; line-height: 1.1; font-family: var(--ffe-font-head); }
.ffe-agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ffe-agenda-title { font-weight: 600; }
.ffe-agenda-sub { font-size: 0.82rem; color: var(--ffe-text-soft); }
.ffe-agenda-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- badges */
.ffe-org-badge {
  --org-accent: var(--ffe-accent);
  background: var(--org-accent); color: var(--on-accent, #fff); border-radius: 2px;
  font-size: 0.7rem; font-weight: 700; padding: 3px 7px; letter-spacing: 0.04em;
}
/* Spelled-out organization name — wraps rather than overflowing its tile. */
.ffe-org-badge.is-full {
  white-space: normal; text-transform: uppercase; line-height: 1.25;
  max-width: 100%; overflow-wrap: anywhere;
}
.ffe-type-badge, .ffe-tag-badge {
  background: transparent; color: var(--ffe-text-soft);
  border: 1px solid var(--ffe-border); border-radius: 2px;
  font-size: 0.7rem; padding: 2px 7px; text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ffe-tag-badge { border-style: dashed; text-transform: none; letter-spacing: 0; }

/* ---------------------------------------------------------------- tiles
 * Poster-style event wall: each tile is a solid block of its org's color
 * with white knockout type, on a deep board so they glow. Finished events
 * stay on the wall, discolored. */
.ffe-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
  background: var(--ffe-board, transparent);
  padding: 16px; border-radius: 4px;
}
.ffe { --ffe-board: #22352b; }
.ffe-cards .ffe-empty { color: rgba(255, 255, 255, 0.75); grid-column: 1 / -1; }
.ffe-skin-tu { --ffe-board: #1a2f47; }
.ffe-card {
  --card-accent: var(--ffe-accent);
  background: var(--card-accent); color: var(--on-accent, #fff);
  border: 0; border-radius: 4px; overflow: hidden; cursor: pointer;
  transition: transform 0.12s, filter 0.12s;
}
.ffe-card:hover, .ffe-card:focus-visible {
  transform: translateY(-3px); filter: brightness(1.08);
}
.ffe-card-band { display: none; }
.ffe-card-body { padding: 16px 16px 15px; }
.ffe-card-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ffe-card .ffe-org-badge {
  background: #fff; color: var(--accent-ink, var(--card-accent));
}
.ffe-card .ffe-type-badge {
  background: transparent; color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.55);
}
/* The date leads the tile: a big day number, then the weekday and hours. */
.ffe-card-date { display: block; margin-bottom: 7px; }
.ffe-card-dhead { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ffe-card-dmon {
  font-size: 0.88rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--on-accent, #fff);
}
.ffe-card-dnum {
  font-family: var(--ffe-font-head); font-size: 2.3rem; font-weight: 900;
  line-height: 0.9; letter-spacing: -0.02em; color: var(--on-accent, #fff);
}
.ffe-card-dthru { font-size: 0.9rem; font-weight: 800; color: var(--on-accent, #fff); }
.ffe-card-dsub {
  display: block; margin-top: 3px; font-size: 0.79rem; font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}

.ffe-card-title {
  margin: 0 0 5px; font-size: 1.1rem; line-height: 1.15;
  font-family: var(--ffe-font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.015em; color: var(--on-accent, #fff);
}
.ffe-card-titlebtn {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.ffe-card-titlebtn:hover { text-decoration: underline; }
.ffe-card-titlebtn:focus-visible { outline: 2px solid var(--on-accent, #fff); outline-offset: 3px; }

/* One line: a long address should not push the tile out of shape. */
.ffe-card-loc {
  margin: 0; font-size: 0.82rem; color: rgba(255, 255, 255, 0.82);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A preview, held to four lines. The pop-up is where the whole thing
   lives; a tile that grows past the screen is no longer a tile. */
.ffe-card-desc {
  margin: 6px 0 0; font-size: 0.82rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
  overflow: hidden;
}
.ffe-card-full {
  display: inline-block; margin-top: 7px; padding: 4px 11px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--on-accent, #fff); color: var(--card-accent, var(--ffe-accent));
  font: inherit; font-size: 0.68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.ffe-card-full:hover { filter: brightness(0.94); }
.ffe-card-full:focus-visible { outline: 2px solid var(--on-accent, #fff); outline-offset: 2px; }

.ffe-card-more {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  background: transparent; color: var(--on-accent, #fff); cursor: pointer;
  font: inherit; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px;
}
.ffe-card-more:hover { border-color: var(--on-accent, #fff); }
.ffe-card-extra.is-closed { display: none; }

/* A light accent takes dark lettering — knocking white out of pale yellow
   is unreadable. The tint variants are re-derived in black rather than
   reusing the white ones. */
.ffe-card.ffe-on-light .ffe-card-loc,
.ffe-card.ffe-on-light .ffe-card-dsub,
.ffe-card.ffe-on-light .ffe-card-desc { color: rgba(0, 0, 0, 0.72); }
.ffe-card.ffe-on-light .ffe-card-more { border-color: rgba(0, 0, 0, 0.4); }
.ffe-card.ffe-on-light .ffe-type-badge {
  color: rgba(0, 0, 0, 0.78); border-color: rgba(0, 0, 0, 0.35);
}
/* The white plate needs an edge, or it dissolves into a pale tile. */
.ffe-card.ffe-on-light .ffe-org-badge { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18); }
.ffe-cards .ffe-card.ffe-on-light:hover,
.ffe-cards .ffe-card.ffe-on-light:focus-visible { filter: brightness(0.95); }

/* Finished events stay on the wall, discolored. */
.ffe-card.is-past {
  opacity: 0.45; filter: grayscale(0.85);
  transition: opacity 0.15s, filter 0.15s, transform 0.12s;
}
.ffe-card.is-past:hover, .ffe-card.is-past:focus-visible {
  opacity: 1; filter: grayscale(0);
}
.ffe-past-badge {
  background: rgba(0, 0, 0, 0.35); color: #fff;
  border-radius: 2px; font-size: 0.68rem; font-weight: 700;
  padding: 2px 7px; text-transform: uppercase; letter-spacing: 0.05em;
}
.ffe-agenda-row.is-past, .ffe-compact-row.is-past { opacity: 0.55; filter: grayscale(0.8); }
.ffe-agenda-row.is-past:hover, .ffe-compact-row.is-past:hover { opacity: 1; filter: none; }

/* ---------------------------------------------------------------- compact */
.ffe-compact-row {
  --row-accent: var(--ffe-accent);
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 0; border-bottom: 1px solid var(--ffe-border); background: transparent;
  padding: 9px 4px; cursor: pointer; font: inherit; color: var(--ffe-text); text-align: left;
}
.ffe-compact-row:last-child { border-bottom: 0; }
.ffe-compact-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 2px; background: var(--row-accent); }
.ffe-compact-date { flex: 0 0 58px; font-size: 0.8rem; font-weight: 800; font-family: var(--ffe-font-head); color: var(--ffe-accent); }
.ffe-compact-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ffe-compact-org {
  font-size: 0.68rem; font-weight: 700; color: var(--ffe-text-soft);
  border: 1px solid var(--ffe-border); border-radius: 4px; padding: 2px 5px;
}

/* ---------------------------------------------------------------- org footer */
.ffe-orgfooter {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--ffe-border);
}
.ffe-orgfooter-label { font-size: 0.8rem; color: var(--ffe-text-soft); }
.ffe-orgfooter-link {
  --org-accent: var(--ffe-accent);
  color: var(--org-accent); font-size: 0.84rem; font-weight: 600; text-decoration: none;
  border-bottom: 2px solid var(--org-accent);
}
.ffe-footer-tools { margin-left: auto; display: flex; gap: 12px; }
.ffe-footer-tool {
  color: var(--ffe-text-soft); font-size: 0.8rem; text-decoration: none;
  border-bottom: 1px dotted var(--ffe-text-soft);
}
.ffe-footer-tool:hover { color: var(--ffe-accent); border-bottom-color: var(--ffe-accent); }

/* ---------------------------------------------------------------- subscribe */
.ffe-subscribe {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding: 12px 14px;
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-left: 4px solid var(--ffe-accent-2, var(--ffe-accent)); border-radius: 3px;
}
.ffe-subscribe-label { font-weight: 700; font-size: 0.85rem; margin-right: 4px; }

/* modal action rows */
.ffe-calrow { align-items: center; margin-top: 8px; }
.ffe-calrow-label {
  font-size: 0.7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ffe-text-soft); margin-right: 2px;
}

/* "Remind me the day before" — hidden until asked for, so the modal opens on
   the event rather than on a form. The input sits at 16px on purpose: iOS
   zooms the whole page in on any field smaller than that. */
/* The calendar's own hide class. The pages carry an .is-hidden of their own,
   but the widget also runs inside WordPress, where that stylesheet is not
   present — so nothing here may depend on it. */
.ffe-is-hidden { display: none !important; }
.ffe-remind-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ffe-remind-input {
  font: inherit; font-size: 16px; padding: 8px 10px; min-width: 200px; flex: 1 1 200px;
  background: var(--ffe-surface); color: var(--ffe-text);
  border: 1px solid var(--ffe-border); border-radius: 2px;
}
.ffe-remind-input:focus-visible { outline: 2px solid var(--ffe-accent); outline-offset: 1px; }
.ffe-remind-status {
  font-size: 0.82rem; color: var(--ffe-text-soft); flex-basis: 100%;
}
.ffe-remind-status:empty { display: none; }

/* ---------------------------------------------------------------- map view
   Tiles are absolutely positioned <img> inside a clipped canvas; the pins sit
   in a layer above them. Nothing here is a library — see renderMapCanvas() in
   ffe.js. OpenStreetMap's attribution is required and sits under the canvas
   where it cannot be scrolled away from. */
.ffe-map { position: relative; margin-bottom: 16px; }
.ffe-map-canvas {
  position: relative; overflow: hidden;
  height: 440px; max-height: 70vh;
  background: var(--ffe-surface-2);
  border: 1px solid var(--ffe-border);
  cursor: grab; touch-action: none;
}
.ffe-map-canvas.is-dragging { cursor: grabbing; }
.ffe-map-canvas:focus-visible { outline: 2px solid var(--ffe-accent); outline-offset: 2px; }
.ffe-map-tiles, .ffe-map-pins { position: absolute; inset: 0; }
.ffe-map-pins { pointer-events: none; }
.ffe-map-tile {
  position: absolute; width: 256px; height: 256px;
  user-select: none; -webkit-user-drag: none;
}
.ffe-map-pin {
  --pin-color: var(--ffe-accent);
  position: absolute; pointer-events: auto;
  transform: translate(-50%, -100%);
  display: flex; align-items: center; justify-content: center;
  min-width: 28px; height: 28px; padding: 0 7px;
  background: var(--pin-color); color: var(--pin-ink, #fff);
  border: 2px solid #fff; border-radius: 14px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  font: inherit; font-size: 0.78rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.ffe-map-pin:hover, .ffe-map-pin:focus-visible { outline: 2px solid #1d1f20; outline-offset: 1px; }
.ffe-map-popup {
  position: absolute; z-index: 3; width: 250px; max-width: calc(100% - 12px);
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-top: 3px solid var(--ffe-accent);
  box-shadow: var(--ffe-shadow); padding: 10px 12px 12px;
}
.ffe-map-popup-close {
  position: absolute; top: 2px; right: 4px;
  border: 0; background: transparent; color: var(--ffe-text-soft);
  font: inherit; font-size: 1.1rem; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.ffe-map-popup-title {
  margin: 0 18px 6px 0; font-family: var(--ffe-font-head);
  font-size: 0.98rem; font-weight: 700;
}
.ffe-map-popup-event {
  display: block; width: 100%; text-align: left;
  border: 0; border-top: 1px solid var(--ffe-border); background: transparent;
  color: var(--ffe-text); font: inherit; font-size: 0.8rem;
  padding: 6px 0; cursor: pointer;
}
.ffe-map-popup-event:hover { color: var(--ffe-accent); }
.ffe-map-popup-directions {
  display: inline-block; margin-top: 8px; font-size: 0.78rem;
  color: var(--ffe-accent); font-weight: 700;
}
.ffe-map-ctrls {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; flex-direction: column; gap: 4px;
}
.ffe-map-ctrl {
  width: 34px; height: 34px;
  background: var(--ffe-surface); color: var(--ffe-text);
  border: 1px solid var(--ffe-border); cursor: pointer;
  font: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
}
.ffe-map-ctrl-fit { width: 34px; font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ffe-map-ctrl:hover { border-color: var(--ffe-accent); color: var(--ffe-accent); }
.ffe-map-credit {
  margin: 4px 0 0; font-size: 0.72rem; color: var(--ffe-text-soft);
}
.ffe-map-credit a { color: var(--ffe-text-soft); }

/* The venue list under the map: the same information without the picture. */
.ffe-venues { margin-top: 4px; }
.ffe-venues-title {
  margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ffe-text-soft); font-weight: 800;
}
.ffe-venue {
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-left: 3px solid var(--ffe-accent);
  padding: 10px 12px; margin-bottom: 6px;
}
.ffe-venue-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ffe-venue-name { font-weight: 700; font-size: 0.94rem; }
.ffe-venue-count { font-size: 0.78rem; color: var(--ffe-text-soft); }
.ffe-venue-unplaced {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ffe-text-soft); border: 1px solid var(--ffe-border); padding: 1px 6px;
}
.ffe-venue-directions { font-size: 0.78rem; color: var(--ffe-accent); font-weight: 700; margin-left: auto; }
.ffe-venue-events { display: flex; flex-direction: column; align-items: flex-start; margin-top: 4px; }
.ffe-venue-event {
  border: 0; background: transparent; color: var(--ffe-text);
  font: inherit; font-size: 0.82rem; text-align: left;
  padding: 3px 0; cursor: pointer;
}
.ffe-venue-event:hover { color: var(--ffe-accent); text-decoration: underline; }
.ffe-venue-more { font-size: 0.78rem; color: var(--ffe-text-soft); padding-top: 3px; }

@media (max-width: 560px) {
  .ffe-map-canvas { height: 320px; }
}

/* ---------------------------------------------------------------- partners */
.ffe-partners { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ffe-border); }
.ffe-partners-title {
  margin: 0 0 10px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ffe-text-soft);
}
.ffe-partners-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px;
}
.ffe-partner {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--ffe-surface); border: 1px solid var(--ffe-border);
  border-top: 3px solid var(--ffe-accent); border-radius: 3px;
  padding: 10px 13px; text-decoration: none; color: var(--ffe-text);
}
a.ffe-partner:hover { border-color: var(--ffe-accent-2, var(--ffe-accent)); }
.ffe-partner-name {
  font-family: var(--ffe-font-head); font-weight: 800; font-size: 0.86rem;
  color: var(--ffe-accent);
}
.ffe-partner-blurb {
  font-size: 0.76rem; color: var(--ffe-text-soft); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
a.ffe-partner-name { text-decoration: none; }
a.ffe-partner-name:hover { text-decoration: underline; }

/* follow one organization */
.ffe-partner-actions {
  --org-accent: var(--ffe-accent);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px;
}
.ffe-partner-only, .ffe-partner-follow {
  font: inherit; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 4px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ffe-border); background: transparent; color: var(--ffe-text-soft);
}
.ffe-partner-only:hover { border-color: var(--org-accent); color: var(--accent-ink, var(--org-accent)); }
.ffe-partner-follow {
  border-color: var(--org-accent); background: var(--org-accent); color: var(--on-accent, #fff);
}
.ffe-partner-follow:hover { filter: brightness(1.1); }
/* Held down while its menu is showing. */
.ffe-partner-follow.is-open { filter: brightness(0.88); }
.ffe-partner-sub {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 10px; padding-top: 5px;
}
.ffe-partner-sub.is-closed { display: none; }
/* Names what the row of links is for, so the menu reads as a choice of
   calendar app rather than three loose links. */
.ffe-sub-label {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--ffe-text-soft); align-self: center;
}
.ffe-sub-link {
  font: inherit; font-size: 0.72rem; font-weight: 600; padding: 0; cursor: pointer;
  border: 0; border-bottom: 1px dotted var(--org-accent); background: none;
  color: var(--accent-ink, var(--org-accent)); text-decoration: none;
}
.ffe-sub-link:hover { border-bottom-style: solid; }

/* ---------------------------------------------------------------- credit
 * "Powered by …" — small, last, right-aligned, in the calendar's own ink. */
.ffe-credit {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px 0;
  margin: 14px 0 0; padding-top: 8px; border-top: 1px solid var(--ffe-border);
  font-size: 0.76rem; line-height: 1.4; color: var(--ffe-text-soft);
}
.ffe-credit a { color: var(--ffe-accent); text-decoration: none; white-space: nowrap; }
.ffe-credit a:hover { text-decoration: underline; }
.ffe-credit-sep { margin: 0 6px; opacity: 0.6; }

/* ---------------------------------------------------------------- modal */
/* The overlay sits above everything on the host page. Embedded in a
   WordPress theme, a fixed header (Divi's is z-index 99999, the admin bar
   the same) otherwise paints over the top of the pop-up, and the title and
   close button end up hidden behind it. */
.ffe-modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 15, 12, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 2147483000; padding: 18px;
  /* A theme's body text settings must not reach in. */
  font-family: var(--ffe-font); font-size: 16px; line-height: 1.45; text-align: left;
}
.ffe-modal {
  background: var(--ffe-surface); color: var(--ffe-text);
  border-radius: var(--ffe-radius); box-shadow: var(--ffe-shadow);
  max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto;
  position: relative; padding: 22px 24px; margin: 0;
  /* dvh where it exists: on a phone the address bar comes out of vh, and
     an 88vh pop-up can run off the bottom of what is actually visible. */
  max-height: min(88vh, 88dvh);
}
.ffe-modal-close { padding: 4px 8px; }
.ffe-modal-close {
  position: absolute; top: 10px; right: 12px; border: 0; background: transparent;
  color: var(--ffe-text-soft); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
/* Org-color band across the top of the event pop-up. */
.ffe-modal-content::before {
  content: ''; display: block; height: 6px;
  background: var(--card-accent, var(--ffe-accent));
  margin: -22px -24px 16px; border-radius: var(--ffe-radius) var(--ffe-radius) 0 0;
}
.ffe-modal-title {
  margin: 6px 0 4px; font-size: 1.3rem;
  font-family: var(--ffe-font-head); font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.01em;
}
.ffe-modal-when { margin: 0 0 4px; font-weight: 600; color: var(--accent-ink, var(--ffe-accent)); }
.ffe-modal-loc { margin: 0 0 8px; font-size: 0.9rem; }
.ffe-modal-loc a { color: var(--ffe-text-soft); }
.ffe-modal-desc { margin: 8px 0; font-size: 0.92rem; white-space: pre-line; }
.ffe-modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.ffe-btn {
  display: inline-block; padding: 9px 15px; border-radius: var(--ffe-radius);
  border: 1px solid var(--ffe-border); background: var(--ffe-surface-2);
  color: var(--ffe-text); font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none;
}
.ffe-btn-primary {
  background: var(--card-accent, var(--ffe-accent)); border-color: transparent; color: var(--on-accent, #fff);
}
.ffe-related { margin-top: 16px; }
.ffe-related-title {
  margin: 0 0 6px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ffe-text-soft);
}
.ffe-related-row {
  --row-accent: var(--ffe-accent);
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: 1px solid var(--ffe-border); border-left: 2px solid var(--row-accent);
  background: var(--ffe-surface-2); border-radius: 3px;
  padding: 7px 10px; margin-bottom: 5px; cursor: pointer;
  font: inherit; font-size: 0.85rem; color: var(--ffe-text); text-align: left;
}
.ffe-related-date { flex: 0 0 56px; font-weight: 600; font-size: 0.78rem; }
.ffe-related-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .ffe { padding: 10px; }
  .ffe-chiprow-label { flex-basis: 100%; }
  .ffe-cell { min-height: 58px; }
  .ffe-pill-text { display: none; }
  .ffe-pill { justify-content: center; }
  .ffe-agenda-badges { display: none; }
}

/* ---------------------------------------------------------------- phones
 * The toolbar was three loose rows of controls before a single event — the
 * view switcher, then Filters beside the search box, then an unlabelled
 * dropdown. Ordered into views / search / Filters + Theme, so the wall of
 * events starts higher up the screen. Placed last so it wins over the base
 * rules it narrows. */
@media (max-width: 640px) {
  .ffe { padding: 12px 10px; }
  .ffe-toolbar { gap: 7px; margin-bottom: 10px; }
  .ffe-seg { order: 1; width: 100%; }
  .ffe-seg-btn { flex: 1; padding: 9px 2px; font-size: 0.7rem; letter-spacing: 0.02em; }
  .ffe-search { order: 2; flex: 1 1 100%; }
  .ffe-filter-toggle { order: 3; flex: 1 1 0; padding: 9px 6px; justify-content: center; }
  .ffe-heading { font-size: 1.2rem; }

  /* Two short lines rather than a label stranded beside a wrapped title. */
  .ffe-smartbar { display: block; padding: 9px 12px; margin-bottom: 10px; font-size: 0.82rem; }
  .ffe-smartbar-count { display: block; margin-bottom: 2px; }
  .ffe-smartbar-next { display: block; }
  .ffe-smartbar-label { display: block; margin-bottom: 1px; }

  .ffe-chiprow-label { flex: 0 0 100%; margin-bottom: 2px; }
  .ffe-cards { padding: 10px; gap: 10px; }
}

/* ---- cost -------------------------------------------------------------
   Reads as a price, not as another tag: no accent color, so it never
   competes with the organization badge for the eye. */
.ffe-card-cost { margin: 4px 0 0; }
.ffe-modal-cost { margin: 8px 0 0; }
.ffe-cost-tag {
  display: inline-block; font-size: 0.78rem; font-weight: 700;
  padding: 2px 8px; border-radius: 2px;
  background: var(--on-accent, #fff); color: var(--card-accent, var(--ffe-ink));
  border: 1px solid currentColor;
}
.ffe-modal-cost .ffe-cost-tag {
  background: transparent; color: var(--ffe-ink); border-color: var(--ffe-line);
}

/* ══════════════════════════════════════════════════════════════════════════
   INDUSTRY — the 'tu' skin, retuned as a wireframe plate system.

   Events stop being a rainbow of solid color tiles and become drawing-office
   plates: a warm-gray ground, hairline edges, the date set large in a
   condensed face, and organizations read as labeled tags rather than as
   colors. One steel blue carries every accent. An organization's own color
   survives only as a thin left edge, so people who learned the colors can
   still scan by them.

   Everything below is scoped to .ffe-skin-tu — the other five skins are
   untouched.
   ══════════════════════════════════════════════════════════════════════ */
.ffe-skin-tu {
  --ffe-bg: #e9e9ea;
  --ffe-surface: #f2f2f3;
  --ffe-surface-2: #e4e4e6;
  --ffe-text: #1d1f20;
  --ffe-text-soft: rgba(29, 31, 32, 0.72);
  --ffe-border: rgba(29, 31, 32, 0.16);
  /* The steel reads as text far more often than as a fill here (org tags,
     month titles, weekday heads, links), and #5980a6 only reaches ~3.7:1 on
     a light plate. Take the accent one step down the ramp so every one of
     those passes AA; fills that carry white type go darker still, below. */
  --ffe-accent: #416180;
  --ffe-accent-2: #2c455d;
  --ffe-accent-text: #ffffff;
  --ffe-today: #d6ebff;
  --ffe-board: #1d2d3d;
  --ffe-radius: 0px;
  --ffe-shadow: 0 12px 32px rgba(29, 31, 32, 0.22);
  --ffe-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ffe-font-head: 'Barlow Condensed', 'Barlow Semi Condensed', system-ui, sans-serif;
}

/* Square everything: plates are defined by their edges. */
.ffe-skin-tu .ffe-chip,
.ffe-skin-tu .ffe-card,
.ffe-skin-tu .ffe-agenda-row,
.ffe-skin-tu .ffe-agenda-date,
.ffe-skin-tu .ffe-modal,
.ffe-skin-tu .ffe-org-badge,
.ffe-skin-tu .ffe-type-badge,
.ffe-skin-tu .ffe-btn,
.ffe-skin-tu .ffe-search,
.ffe-skin-tu .ffe-select,
.ffe-skin-tu .ffe-day { border-radius: 0; }

/* Condensed, slightly wide-tracked headings throughout. */
.ffe-skin-tu .ffe-heading,
.ffe-skin-tu .ffe-month-title,
.ffe-skin-tu .ffe-card-title,
.ffe-skin-tu .ffe-agenda-title,
.ffe-skin-tu .ffe-modal-title,
.ffe-skin-tu .ffe-partner-name {
  font-family: var(--ffe-font-head); font-weight: 600; letter-spacing: 0.015em;
}

/* ---- the tile becomes a plate ------------------------------------------ */
.ffe-skin-tu .ffe-card {
  background: var(--ffe-surface);
  color: var(--ffe-text);
  border: 1px solid var(--ffe-border);
  border-left: 3px solid var(--card-accent, var(--ffe-accent));
  box-shadow: none;
  transition: background 0.12s, border-color 0.12s;
}
.ffe-skin-tu .ffe-card:hover,
.ffe-skin-tu .ffe-card:focus-visible {
  transform: none; filter: none;
  background: #fff; border-color: rgba(29, 31, 32, 0.42);
}
.ffe-skin-tu .ffe-card-body { padding: 16px 18px 15px; }

/* The date leads: a big condensed numeral over a hairline. */
.ffe-skin-tu .ffe-card-date {
  border-bottom: 1px solid var(--ffe-border);
  padding-bottom: 9px; margin-bottom: 10px;
}
.ffe-skin-tu .ffe-card-dnum {
  font-size: 3.1rem; font-weight: 600; line-height: 0.82;
  letter-spacing: 0; color: var(--ffe-text);
}
.ffe-skin-tu .ffe-card-dmon {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em;
  color: var(--ffe-accent-2);
}
.ffe-skin-tu .ffe-card-dthru { color: var(--ffe-text); font-weight: 600; }
.ffe-skin-tu .ffe-card-dsub { color: var(--ffe-text-soft); font-weight: 500; }
.ffe-skin-tu .ffe-card-title { font-size: 1.32rem; margin-bottom: 4px; }
.ffe-skin-tu .ffe-card-titlebtn { color: var(--ffe-text); }
.ffe-skin-tu .ffe-card-loc,
.ffe-skin-tu .ffe-card-desc { color: var(--ffe-text-soft); }
.ffe-skin-tu .ffe-card-cost { color: var(--ffe-text); }
.ffe-skin-tu .ffe-card-badges { margin-bottom: 0; margin-top: 10px; order: 9; }

/* Organizations as labeled tags, not color fills. */
.ffe-skin-tu .ffe-card .ffe-org-badge,
.ffe-skin-tu .ffe-agenda-badges .ffe-org-badge {
  background: transparent; color: var(--ffe-accent);
  box-shadow: inset 0 0 0 1px var(--ffe-accent);
}
.ffe-skin-tu .ffe-card .ffe-type-badge,
.ffe-skin-tu .ffe-agenda-badges .ffe-type-badge {
  background: #eef6ff; color: #2c455d; border-color: transparent;
}
.ffe-skin-tu .ffe-card-more,
.ffe-skin-tu .ffe-card-full {
  border-color: var(--ffe-border); color: var(--ffe-text);
  background: transparent;
}
.ffe-skin-tu .ffe-card-full { background: var(--ffe-accent); color: #fff; border-color: var(--ffe-accent); }
.ffe-skin-tu .ffe-card-full:hover { background: var(--ffe-accent-2); filter: none; }
.ffe-skin-tu .ffe-card-more:hover { border-color: var(--ffe-text); }
.ffe-skin-tu .ffe-card-titlebtn:focus-visible,
.ffe-skin-tu .ffe-card-full:focus-visible { outline-color: var(--ffe-accent); }
.ffe-skin-tu .ffe-cards .ffe-empty { color: var(--ffe-text-soft); }

/* ---- the agenda row: a ledger line ------------------------------------- */
.ffe-skin-tu .ffe-agenda-row {
  background: var(--ffe-surface);
  border: 1px solid var(--ffe-border);
  border-left: 3px solid var(--row-accent, var(--ffe-accent));
}
.ffe-skin-tu .ffe-agenda-row:hover { background: #fff; border-color: rgba(29, 31, 32, 0.42); }
.ffe-skin-tu .ffe-agenda-date {
  background: transparent; color: var(--ffe-text);
  border-right: 1px solid var(--ffe-border);
  border-radius: 0; padding: 4px 12px 4px 2px; min-width: 62px;
}
.ffe-skin-tu .ffe-agenda-dow {
  color: var(--ffe-accent-2); font-weight: 600; letter-spacing: 0.1em; font-size: 0.66rem;
}
.ffe-skin-tu .ffe-agenda-day {
  font-size: 2rem; font-weight: 600; line-height: 1; color: var(--ffe-text);
}
.ffe-skin-tu .ffe-agenda-title { font-size: 1.08rem; }

/* ---- chips, toolbar, month grid ---------------------------------------- */
.ffe-skin-tu .ffe-chip {
  background: transparent; border-color: var(--ffe-border);
  font-weight: 600; letter-spacing: 0.05em; font-size: 0.72rem;
}
.ffe-skin-tu .ffe-chip:hover { border-color: var(--ffe-accent); color: var(--ffe-accent); }
.ffe-skin-tu .ffe-chip.is-active {
  background: var(--ffe-accent); border-color: var(--ffe-accent); color: #fff;
}
.ffe-skin-tu .ffe-chiprow-label { letter-spacing: 0.1em; font-weight: 600; }
.ffe-skin-tu .ffe-day { border-color: var(--ffe-border); }
.ffe-skin-tu .ffe-day.is-today { background: var(--ffe-today); outline: 2px solid var(--ffe-accent); outline-offset: -2px; }

/* ---- the pop-up becomes a plate ---------------------------------------- */
.ffe-skin-tu .ffe-modal {
  background: var(--ffe-surface); border: 1px solid var(--ffe-text);
}
.ffe-skin-tu .ffe-modal-title { font-size: 1.6rem; }
.ffe-skin-tu .ffe-modal-when { color: var(--ffe-accent-2); }

/* Plates sit on the page's own ground — the dark board the color tiles
   needed would fight the hairline edges that define them now. */
.ffe-skin-tu { --ffe-board: transparent; }
.ffe-skin-tu .ffe-cards { padding: 0; }
.ffe-skin-tu .ffe-cards .ffe-empty { color: var(--ffe-text-soft); }

/* The statistics band — the one heavy element on the page, set in the
   deepest ink of the ramp with condensed figures. */
.ffe-skin-tu .ffe-smartbar {
  background: #1d2d3d; color: #eef1f4;
  border: 0; border-left: 0; border-radius: 0;
  padding: 11px 18px; font-size: 0.88rem;
}
.ffe-skin-tu .ffe-smartbar-count { font-size: 1.05rem; letter-spacing: 0.02em; }
.ffe-skin-tu .ffe-smartbar-label { color: #b5d9fd; font-weight: 600; letter-spacing: 0.1em; }
.ffe-skin-tu .ffe-smartbar-more {
  border-radius: 0; border-color: rgba(255, 255, 255, 0.45);
  font-weight: 600; letter-spacing: 0.06em;
}
.ffe-skin-tu .ffe-smartbar-more:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* Toolbar controls: square, hairline, condensed labels. */
.ffe-skin-tu .ffe-search, .ffe-skin-tu .ffe-select {
  border-color: var(--ffe-border); background: var(--ffe-surface);
}
.ffe-skin-tu .ffe-btn { font-weight: 600; letter-spacing: 0.06em; }
.ffe-skin-tu .ffe-btn.is-active {
  background: var(--ffe-accent); border-color: var(--ffe-accent); color: #fff;
}

/* Badges keep to one line where they can; a long club name may take two,
   which is the price of spelling names out instead of using codes. */
.ffe-skin-tu .ffe-card-badges { align-items: flex-start; }
.ffe-skin-tu .ffe-org-badge, .ffe-skin-tu .ffe-type-badge {
  font-weight: 600; letter-spacing: 0.05em;
}

/* Month cells: entries as quiet tinted labels rather than solid color bars,
   with the organization's color kept as a hairline left edge so the grid is
   still scannable by club. */
.ffe-skin-tu .ffe-pill {
  background: #eef6ff; color: #2c455d;
  border-left: 3px solid var(--pill-accent, var(--ffe-accent));
  border-radius: 0; font-weight: 500; padding: 3px 6px;
}
.ffe-skin-tu .ffe-pill:hover { background: #d6ebff; filter: none; }
.ffe-skin-tu .ffe-pill.ffe-on-light:hover { filter: none; }
.ffe-skin-tu .ffe-pill.is-past { opacity: 1; filter: none; background: #e4e4e6; color: rgba(29,31,32,.72); }
.ffe-skin-tu .ffe-pill.is-past:hover { opacity: 1; background: #d9d9dc; }
.ffe-skin-tu .ffe-more { font-weight: 600; }
.ffe-skin-tu .ffe-daynum { font-family: var(--ffe-font-head); font-weight: 600; }

/* ---- contrast: white text is the exception now ------------------------- */
/* The other skins fill elements with an organization's color and write on
   them in white. Industry fills almost nothing, so that default would put
   white text on a near-white plate. Flip it: ink by default, and white only
   where this skin genuinely paints a dark or accent field. */
.ffe-skin-tu { --on-accent: #1d1f20; }
.ffe-skin-tu .ffe-chip.is-active,
.ffe-skin-tu .ffe-btn-primary,
.ffe-skin-tu .ffe-card-full,
.ffe-skin-tu .ffe-partner-follow,
.ffe-skin-tu .ffe-smartbar,
.ffe-skin-tu .ffe-smartbar-next,
.ffe-skin-tu .ffe-seg-btn.is-active { --on-accent: #ffffff; color: #ffffff; }

/* The modal's primary action: the steel accent, never the club's own color —
   organization colors range from pale to near-black, so a fixed pairing is
   the only one guaranteed to stay legible. */
.ffe-skin-tu .ffe-btn-primary {
  background: var(--ffe-accent); border-color: var(--ffe-accent);
}
.ffe-skin-tu .ffe-btn-primary:hover { background: var(--ffe-accent-2); filter: none; }
.ffe-skin-tu .ffe-partner-follow {
  background: var(--ffe-accent); border-color: var(--ffe-accent);
}
/* Secondary actions stay quiet plates. */
.ffe-skin-tu .ffe-btn:not(.ffe-btn-primary) {
  background: var(--ffe-surface); border-color: var(--ffe-border); color: var(--ffe-text);
}
.ffe-skin-tu .ffe-btn:not(.ffe-btn-primary):hover { background: #fff; border-color: var(--ffe-text); }

/* White on #5980a6 measures 4.15:1 — fine for large type, short of the 4.5
   these small uppercase labels need. Filled controls therefore use the next
   step down the same ramp (#416180, ≈6.3:1); the lighter steel stays for
   links, borders and text on light plates. */
.ffe-skin-tu .ffe-btn-primary,
.ffe-skin-tu .ffe-card-full,
.ffe-skin-tu .ffe-partner-follow,
.ffe-skin-tu .ffe-chip.is-active,
.ffe-skin-tu .ffe-seg-btn.is-active {
  background: #416180; border-color: #416180;
}
.ffe-skin-tu .ffe-btn-primary:hover,
.ffe-skin-tu .ffe-card-full:hover,
.ffe-skin-tu .ffe-partner-follow:hover { background: #2c455d; border-color: #2c455d; }

/* The cost tag took its color from the organization, so a pale club color
   left it unreadable. It is a fact about the event, not about the club —
   set it in ink on a hairline, like every other label here. */
.ffe-skin-tu .ffe-cost-tag {
  background: transparent; color: var(--ffe-text);
  border: 1px solid var(--ffe-border); border-radius: 0;
  font-weight: 600; letter-spacing: 0.03em;
}

/* ---------------------------------------------------------------- motion
   Anyone who has asked their system for less motion gets none: transitions
   and animations collapse to an instant, and scripted smooth scrolling
   stops being smooth. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}