/*
 * Community dashboard — reusable modules.
 * --signal is reserved for live surfaces only (running happy hour, open now count).
 */
.ob-dashboard { max-width: var(--max-w); margin: 0 auto; padding: 0 20px 72px; }

/* Pulse bar ------------------------------------------------------------ */
.ob-pulse {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 28px;
  border-top: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 16%, transparent);
  padding: 14px 0; margin: 8px 0 24px;
}
.ob-pulse__lede { display: flex; align-items: center; gap: 8px; }
.ob-pulse__stats { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 0; }
.ob-pulse__stats div { display: flex; align-items: baseline; gap: 6px; }
.ob-pulse__stats dt {
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin: 0;
}
.ob-pulse__stats dd { font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.ob-pulse__time { margin-left: auto; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }

/* Filters -------------------------------------------------------------- */
.ob-filters { margin: 0 0 32px; display: grid; gap: 10px; }
.ob-filters__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-filters__search { flex: 1 1 260px; }
.ob-filters__search input {
  width: 100%; padding: 10px 14px; font-family: var(--font-body); font-size: .95rem;
  border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); background: transparent; color: inherit;
}
.ob-chip {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent);
  background: transparent; color: inherit; cursor: pointer; transition: background var(--t-fast) var(--ease);
}
.ob-chip--sm { font-size: .6rem; padding: 3px 8px; cursor: default; }
.ob-chip:hover { background: color-mix(in oklab, var(--ink) 6%, transparent); }
.ob-chip.is-active { background: var(--ink); color: var(--paper); }
.ob-filters__results { margin-top: 18px; }
.ob-filters__results .ob-card { margin-bottom: 0; }
.ob-filters__results { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.ob-filters__results[hidden] { display: none; }

/* Modules -------------------------------------------------------------- */
.ob-dashboard__grid { display: grid; gap: 44px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ob-mod { min-width: 0; }
.ob-mod--wide, .ob-mod--directory, .ob-mod--map { grid-column: 1 / -1; }
.ob-mod--narrow { grid-column: auto; }
.ob-mod__head {
  display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); padding-bottom: 8px;
}
.ob-mod__head h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .01em; margin: 0; }
.ob-mod__note { font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; opacity: .55; margin-left: auto; }
.ob-mod__note--sub { display: block; margin: 16px 0 6px; }
.ob-mod__empty { font-family: var(--font-serif); font-size: 1rem; opacity: .7; margin: 6px 0 0; }
.ob-mod__skeleton { display: grid; gap: 10px; }
.ob-mod__skeleton span {
  display: block; height: 46px; background: color-mix(in oklab, var(--ink) 7%, transparent);
  animation: ob-fade 1.6s ease-in-out infinite;
}
@keyframes ob-fade { 0%,100% { opacity: .5 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ob-mod__skeleton span { animation: none } }

/* Cards ---------------------------------------------------------------- */
.ob-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.ob-card { display: flex; flex-direction: column; min-width: 0; }
.ob-card__media { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: color-mix(in oklab, var(--ink) 8%, transparent); }
.ob-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-card__media--blank {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-family: var(--font-display); font-size: 2rem; opacity: .35;
}
.ob-card__body { padding: 8px 0 0; }
.ob-card__title { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 4px; line-height: 1.15; }
.ob-card__title a { text-decoration: none; color: inherit; }
.ob-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; opacity: .65; }
.ob-card__flags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.ob-card__actions { display: flex; gap: 12px; margin: 8px 0 0; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; }
.ob-card__actions a { text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; opacity: .8; }
.ob-card__actions a:hover { opacity: 1; }

/* Rows (events, promotions, stories) ----------------------------------- */
.ob-rows { display: grid; }
.ob-row {
  display: flex; gap: 14px; align-items: baseline; padding: 12px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ink) 10%, transparent);
}
.ob-row__time {
  flex: 0 0 84px; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.ob-row__body { display: grid; gap: 2px; min-width: 0; }
.ob-row__title { font-family: var(--font-display); font-size: 1.05rem; text-decoration: none; color: inherit; }
a.ob-row__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ob-row__place { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; opacity: .65; text-decoration: none; color: inherit; }
.ob-row__note { font-family: var(--font-serif); font-size: .95rem; opacity: .75; }
.ob-row.is-live .ob-row__time { color: var(--signal); opacity: 1; }

/* Conditions ----------------------------------------------------------- */
.ob-conditions { display: grid; gap: 6px 20px; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); margin: 0; }
.ob-conditions dt { font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; opacity: .6; }
.ob-conditions dd { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }

.ob-more {
  margin-top: 18px; padding: 9px 16px; background: transparent; cursor: pointer; color: inherit;
  border: 1px solid color-mix(in oklab, var(--ink) 24%, transparent);
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase;
}
.ob-more:hover { background: var(--ink); color: var(--paper); }
.ob-more[hidden] { display: none; }

@media (max-width: 860px) {
  .ob-dashboard__grid { grid-template-columns: 1fr; gap: 36px; }
  .ob-pulse__time { margin-left: 0; width: 100%; }
  .ob-row { flex-wrap: wrap; }
  .ob-row__time { flex-basis: 100%; }
}

/* ---- Calendar + search (v4.0.0) ---- */
.ob-cal__controls { display:flex; flex-direction:column; gap:.6rem; margin:1.4rem 0 2rem; }
.ob-cal__ranges, .ob-cal__types { display:flex; flex-wrap:wrap; gap:.4rem; }
.ob-chip { display:inline-block; padding:.34rem .7rem; border:1px solid var(--hairline,rgba(0,0,0,.16));
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:inherit; }
.ob-chip.is-active { background:var(--ink,#1a1c1e); color:var(--paper,#f6f4ef); border-color:var(--ink,#1a1c1e); }
.ob-cal__day { margin-bottom:2.2rem; }
.ob-cal__dayhead { font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7; margin-bottom:.6rem; }
.ob-cal__list { list-style:none; margin:0; padding:0; }
.ob-cal__item { display:flex; gap:1rem; padding:.9rem 0; border-top:1px solid var(--hairline,rgba(0,0,0,.12)); }
.ob-cal__time { min-width:5.5rem; font-size:.8rem; opacity:.7; }
.ob-cal__body h3 { margin:0 0 .2rem; font-size:1.05rem; }
.ob-cal__meta { margin:0; font-size:.86rem; opacity:.75; }
.ob-cal__tags { margin:.35rem 0 0; display:flex; gap:.3rem; flex-wrap:wrap; }
.ob-tag { font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; opacity:.6; }
.ob-row--music .ob-row__meta a { text-decoration:none; border-bottom:1px solid currentColor; }
.ob-search .ob-list { list-style:none; padding:0; margin:0; }
.ob-search .ob-list li { padding:.5rem 0; border-top:1px solid var(--hairline,rgba(0,0,0,.12)); }

/* v4.3.0 — Surf & sand + Rec Center */
.ob-coast{display:grid;gap:1.25rem}
.ob-coast__cams{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ob-coast__cams a{display:block;padding:.85rem 1rem;border:1px solid color-mix(in oklab,var(--ink) 14%,transparent);text-decoration:none;color:var(--ink);transition:border-color var(--t-fast) var(--ease)}
.ob-coast__cams a:hover{border-color:var(--sea-weathered)}
.ob-coast__cam-name{display:block;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:1.1rem}
.ob-coast__cam-note{font-size:.8rem;color:var(--sea-weathered)}
.ob-coast__notes{margin:0;display:grid;gap:.6rem}
.ob-coast__notes dt{font-family:var(--font-display);text-transform:uppercase;font-size:.8rem;letter-spacing:.06em;color:var(--sea-weathered)}
.ob-coast__notes dd{margin:0;font-size:.92rem;line-height:1.45}
.ob-civic__lede{font-size:.95rem;line-height:1.5;max-width:var(--measure)}
.ob-civic__group{margin:.75rem 0}
.ob-civic__group summary{cursor:pointer;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em}
.ob-civic__table{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:.5rem}
.ob-civic__table th,.ob-civic__table td{padding:.4rem .5rem;border-bottom:1px solid color-mix(in oklab,var(--ink) 10%,transparent);text-align:left}
.ob-civic__table td{font-variant-numeric:tabular-nums;white-space:nowrap}
.ob-civic__table small{display:block;color:var(--sea-weathered);font-weight:400}
.ob-civic__foot{font-size:.78rem;color:var(--sea-weathered)}

/* The Barrier Layer — what to wear */
.ob-layer { display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .75rem; margin:.9rem 0 .4rem; padding:.7rem 0; border-top:1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-bottom:1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.ob-layer__kicker { font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; color:var(--sea-weathered); }
.ob-layer__label { font-family:var(--font-display); text-transform:uppercase; font-size:1.25rem; letter-spacing:.02em; color:var(--atlantic-deep); }
.ob-layer__tip { font-family:var(--font-serif); font-style:italic; font-size:1.05rem; }
.ob-layer__meta { flex-basis:100%; font-size:.78rem; color:var(--sea-weathered); }