/* oa-deai.css — v217 "de-AI + theme parity" skin (layer stylesheet).
 *
 * 1. WALLPAPER  the app-wide logo watermark (body::before) is gone, in both
 *    themes, no exceptions. Chat rooms keep only the flat solid colours.
 * 2. FLAT ACCENT gradients that say nothing are flattened to one accent.
 *    (The approved AI marks — splash, assistant disc — keep their identity.)
 * 3. NUMBER IS THE HERO admin metric cards lose the icon tile + decorative
 *    ripple; the value leads. One primary card, the rest secondary.
 * 4. SHADOW ONLY ON WHAT FLOATS cards, modals, nav keep a soft shadow;
 *    chips, badges, inputs, small buttons lose theirs.
 * 5. LIGHT THEME PARITY the full token set is defined for light, and the
 *    known dark-locked components flip. No place is an exception.
 */

/* ============ 1. wallpaper: gone, completely ============ */
body::before, body:before {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}
html[data-ux-wallpaper] body::before,
html[data-ux-wallpaper] body:before { content: none !important; background: none !important; opacity: 0 !important; }

/* v219.1 wallpaper scrim. index css: html:not([data-ux-wallpaper="default"])
   body::after { position:fixed; inset:0; background:linear-gradient(rgba(15,23,42,.58),rgba(15,23,42,.66)) }
   With the attribute ABSENT (the v217 scrub removed it) :not() still matches, so a
   full-page navy scrim painted through every transparent region — the "colored
   band" at the top in both themes. Kill the pseudo's background outright; the only
   other body::after rule is the bottom-nav scroll spacer, which paints nothing. */
body::after, body:after {
  background: none !important;
  background-image: none !important;
}

/* ============ 2. one flat accent ============ */
/* the gradient *variables* collapse to their flat base colour, which kills
   every "brand gradient" button/banner without touching layout */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --primary-grad: var(--color-primary);
  --primary-grad-soft: var(--color-primary-soft);
  --accent-grad: var(--color-primary);
}
/* gradient-painted elements become flat (both themes) */
.avatar-3d {
  background: var(--color-primary) !important;
  color: #fff !important;
  box-shadow: none !important;
  border: 0 !important;
}
button.vote, .poll-reminder-actions .vote { background: var(--color-primary) !important; color: #fff !important; }
.oa-note-filter-ico { background: var(--color-primary) !important; color: #fff !important; box-shadow: none !important; }
.oau-btn { background: var(--color-primary) !important; color: #fff !important; }
.admin-shell { background: var(--bg) !important; }
/* the streak flame pill and pill-likes: flat surface, no glow */
.oa-streak-pill { box-shadow: none !important; }

/* ============ 3. number is the hero + hierarchy (admin) ============ */
.analytics-card-ripple { display: none !important; }
.analytics-card-icon { display: none !important; }
.analytics-card-value { max-width: 100% !important; margin-top: 10px !important; }
.analytics-card-label { letter-spacing: .06em !important; font-size: 10.5px !important; }
/* one primary card, the rest secondary */
@media (min-width: 860px) {
  .analytics-card-grid > .analytics-card:first-child { grid-column: span 2; }
  .analytics-card-grid > .analytics-card:first-child .analytics-card-value { font-size: 44px !important; }
}
/* Home: the welcome banner is a compact header, not a hero */
.welcome-banner-accent { padding-top: 14px !important; padding-bottom: 14px !important; }
.welcome-banner-accent .avatar-3d { width: 36px !important; height: 36px !important; font-size: 13px !important; }

/* ============ 4. shadow only on what floats ============ */
:root, html[data-theme="dark"], html[data-theme="light"] {
  --premium-shadow: 0 10px 30px rgba(15, 23, 42, .10), 0 2px 8px rgba(15, 23, 42, .05);
}
html[data-theme="dark"] { --premium-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25); }
.icon-btn, .btn-ghost, .oa-chip, .oah-empty-cta, .oa-scope-opt, .category-badge-3d,
.oa-hlf-badge, .badge, .analytics-card-trend, .oau-drop, .oau-btn, .link-btn,
.top-bar .oa-search-bar, input, select, textarea {
  box-shadow: none !important;
}
.card-3d, .modal-3d, .bottom-nav, .poll-reminder-card, .oau-card, .analytics-card { box-shadow: 0 6px 20px rgba(15, 23, 42, .08) !important; }
html[data-theme="dark"] .card-3d, html[data-theme="dark"] .modal-3d, html[data-theme="dark"] .bottom-nav,
html[data-theme="dark"] .poll-reminder-card, html[data-theme="dark"] .oau-card, html[data-theme="dark"] .analytics-card { box-shadow: 0 8px 24px rgba(0, 0, 0, .38) !important; }

/* ============ 5. light theme: full token set ============ */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FC;
  --bg-page: #F6F8FC;
  --surface: #FFFFFF;
  --surface-raised: #FBFCFE;
  --surface-deep: #F1F4FA;
  --surface-dark: rgba(255, 255, 255, .64);
  --surface-raised-dark: rgba(248, 250, 252, .60);
  --surface-deep-dark: rgba(241, 245, 249, .72);
  --text: #0F172A;
  --text-primary: #0F172A;
  --text-secondary: #44536F;
  --text-muted: #44536F;
  --card: #FFFFFF;
  --bg-elev: #FFFFFF;
  --border: #E2E8F2;
  --edge-light: #FFFFFF;
  --edge-shadow: #C9D4E6;
  --ds-bg: #F6F8FC;
  --ds-surface: #FFFFFF;
  --ds-surface-raised: #FBFCFE;
  --ds-surface-strong: #EDF1F8;
  --ds-text: #0F172A;
  --ds-text-secondary: #44536F;
  --ds-border: #E2E8F2;
  --ds-border-strong: #CBD5E4;
  --ds-overlay: rgba(15, 23, 42, .45);
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .07);
  --ds-shadow-md: 0 4px 10px rgba(15, 23, 42, .08);
  --ds-shadow-lg: 0 10px 22px rgba(15, 23, 42, .10);
  --ds-shadow-xl: 0 20px 34px rgba(15, 23, 42, .12);
  --ds-shadow-2xl: 0 25px 50px rgba(15, 23, 42, .14);
  --oa-solid: #FFFFFF;
  --oa-solid-2: #F1F5F9;
}

/* ---- light: components that were dark-locked ---- */
html[data-theme="light"] .muted, html[data-theme="light"] p.muted, html[data-theme="light"] span.muted,
html[data-theme="light"] small { color: #44536F !important; }
html[data-theme="light"] .btn-ghost { color: #1E3A8A !important; }
html[data-theme="light"] .oa-chip.on { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }
html[data-theme="light"] .oa-scope-opt.active { background: var(--color-primary) !important; color: #fff !important; }
html[data-theme="light"] .oa-news-readmore { color: #1D4ED8 !important; }
html[data-theme="light"] .mono { color: #334155 !important; }
html[data-theme="light"] .oa-hlf-badge.lost { color: #7F1D1D !important; background: #FEE2E2 !important; }
html[data-theme="light"] .category-badge-3d.cat-school { color: #1E3A8A !important; background: #DBEAFE !important; }
html[data-theme="light"] .oah-empty-t { color: #334155 !important; }
html[data-theme="light"] .oah-empty-cta { color: #1D4ED8 !important; }
html[data-theme="light"] .oa-cont-empty { color: #44536F !important; }

/* admin console in light */
html[data-theme="light"] .admin-shell, html[data-theme="light"] .admin-main { background: #F6F8FC !important; color: #0F172A !important; }
html[data-theme="light"] .admin-main h1, html[data-theme="light"] .admin-main h2,
html[data-theme="light"] .admin-shell h1, html[data-theme="light"] .admin-shell h2 { color: #0F172A !important; }
html[data-theme="light"] .link-btn { color: #1D4ED8 !important; }
html[data-theme="light"] .admin-main p, html[data-theme="light"] .admin-shell p { color: #334155 !important; }
html[data-theme="light"] .value { color: #0F172A !important; }
html[data-theme="light"] .u-sub { color: #44536F !important; }
html[data-theme="light"] .analytics-card-sub { color: #44536F !important; }
html[data-theme="light"] .oap-brand-sm { color: #44536F !important; }
html[data-theme="light"] .oap-msep { color: #64748B !important; }
html[data-theme="light"] .oap-hc-detail { color: #44536F !important; }
html[data-theme="light"] .oap-live { color: #047857 !important; }

/* assisted-upload card: theme-aware instead of hardcoded white */
.oau-card { background: var(--surface, #fff) !important; border-color: var(--border, #e2e8f0) !important; color: var(--text, #0f172a) !important; }
.oau-head h2 { color: inherit !important; }
.oau-sub { color: var(--text-secondary, #64748b) !important; }
.oau-drop { background: var(--surface-raised, #f8fafc) !important; color: var(--text, #334155) !important; border-color: var(--ds-border, #94a3b8) !important; }
.oau-row { background: var(--surface, #fff) !important; border-color: var(--border, #e2e8f0) !important; }
.oau-btn.ghost { background: var(--surface-raised, #f1f5f9) !important; color: var(--text, #334155) !important; border-color: var(--border, #e2e8f0) !important; }

/* ============ 6. dark theme: lift the too-quiet greys ============ */
html[data-theme="dark"] .muted, html[data-theme="dark"] p.muted, html[data-theme="dark"] span.muted,
html[data-theme="dark"] small { color: #B7C4DC !important; }
html[data-theme="dark"] .btn-ghost { color: #C7D6F0 !important; }
html[data-theme="dark"] .mono { color: #C7D6F0 !important; }
html[data-theme="dark"] .oa-news-readmore { color: #93B4F5 !important; }
html[data-theme="dark"] .oa-chip.on { background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important; }
html[data-theme="dark"] .oa-scope-opt.active { background: var(--color-primary) !important; color: #fff !important; }
html[data-theme="dark"] .oa-streak-dlbl { color: #B7C4DC !important; }
html[data-theme="dark"] .analytics-card-sub { color: #AEBDD8 !important; }
html[data-theme="dark"] .oap-brand-sm { color: #AEBDD8 !important; }
html[data-theme="dark"] .oap-msep { color: #93A3C2 !important; }
html[data-theme="dark"] .oap-live { color: #6EE7B7 !important; }
html[data-theme="dark"] .oap-hc-detail { color: #AEBDD8 !important; }

/* ============ batch 2: the last dark-locked / gradient spots ============ */
/* admin shell radial glow — their rule is !important, so out-rank it */
html[data-theme="dark"] .admin-shell,
html[data-theme="light"] .admin-shell { background: var(--bg) !important; }

/* admin section header: no blue scrim; muted line readable */
.admin-section-head { background: none !important; background-image: none !important; }
html[data-theme="light"] .admin-section-head p { color: #44536F !important; }

/* admin mobile top bar flips with the theme */
html[data-theme="light"] .oap-mbar { background: rgba(255, 255, 255, .95) !important; border-bottom: 1px solid #E2E8F2 !important; }
html[data-theme="light"] .oap-mt { color: #0F172A !important; }
html[data-theme="light"] [data-oap-crumb] { color: #0F172A !important; }

/* profile header card: flat accent, white text (was blue gradient + grey email) */
html .senior-user-profile-page .page > .center.col:first-child { background: var(--color-primary) !important; color: #fff !important; }
html .senior-user-profile-page .page > .center.col:first-child .muted { color: rgba(255, 255, 255, .92) !important; }
html .senior-user-profile-page .page > .center.col:first-child h1,
html .senior-user-profile-page .page > .center.col:first-child h2,
html .senior-user-profile-page .page > .center.col:first-child h3 { color: #fff !important; }

/* premium heroes + gradient icon tiles: one flat accent (T1/T2) */
.pq-hero, .premium-notification-hero { background: var(--color-primary) !important; }
.oa-profile-dd-ico, .anon-hero-badge { background: var(--color-primary) !important; }

/* last quiet greys */
html[data-theme="dark"] .premium-recent-heading span { color: #93B4F5 !important; }
html[data-theme="dark"] .no { color: #B7C4DC !important; }
html[data-theme="dark"] .oap-hc-meta { color: #B7C4DC !important; }
html[data-theme="light"] .oa-streak-dlbl { color: #44536F !important; }

/* decorative spark glyph: gets a readable tone in each theme (class set by oa-theme.js) */
html[data-theme="light"] .oa-deai-spark { color: #1E40AF !important; }
html[data-theme="dark"] .oa-deai-spark { color: #93B4F5 !important; }

/* own-profile header tint: one flat tint instead of a gradient */
html .senior-profile-page .page > .center.col { background: rgba(var(--color-primary-rgb), .14) !important; }

/* focus rings survive the shadow diet */
html input:focus-visible, html select:focus-visible, html textarea:focus-visible,
html button:focus-visible, html a:focus-visible {
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .35) !important;
  outline: none !important;
}

/* ============ v218.2: owner palette — Off-White #F8F8F5 / Soft Black #111111 ============ */
/* light: warm off-white page, white cards, neutral warm borders */
html[data-theme="light"] {
  --bg: #F8F8F5 !important;
  --bg-page: #F8F8F5 !important;
  --ds-bg: #F8F8F5 !important;
  --surface: #FFFFFF !important;
  --surface-raised: #FFFFFF !important;
  --surface-deep: #EFEDE7 !important;
  --card: #FFFFFF !important;
  --bg-elev: #FFFFFF !important;
  --border: #E3E2DA !important;
  --ds-surface: #FFFFFF !important;
  --ds-surface-raised: #FFFFFF !important;
  --ds-surface-strong: #EFEDE7 !important;
  --ds-border: #E3E2DA !important;
  --oa-solid: #FFFFFF !important;
  --oa-solid-2: #EFEDE7 !important;
}
html[data-theme="light"] body { background: #F8F8F5 !important; }
html[data-theme="light"] .admin-shell, html[data-theme="light"] .admin-main { background: #F8F8F5 !important; }

/* dark: soft black page, neutral charcoal cards (no blue tint) */
html[data-theme="dark"] {
  --bg: #111111 !important;
  --bg-page: #111111 !important;
  --ds-bg: #111111 !important;
  --surface: #1A1A1A !important;
  --surface-raised: #181818 !important;
  --surface-deep: #202020 !important;
  --surface-dark: #1A1A1A !important;
  --surface-raised-dark: #181818 !important;
  --surface-deep-dark: #202020 !important;
  --ds-surface: #1A1A1A !important;
  --ds-surface-raised: #181818 !important;
  --ds-surface-strong: #202020 !important;
  --ds-border: #2A2A2A !important;
  --oa-solid: #1A1A1A !important;
  --oa-solid-2: #202020 !important;
}
html[data-theme="dark"] body { background: #111111 !important; }

/* the html element paints overscroll: follow the palette too */
html { background: #F8F8F5; }
html[data-theme="dark"] { background: #111111; }

/* ============ v219.2 top-bar: exactly the page colour ============
   The inner-page header kept a translucent tint (light #ffffffb8, dark
   rgba(24,24,24,.94)) that read as a different-coloured band at the top.
   Flatten it to the page palette; keep only a hairline separator. */
header.top-bar, .top-bar {
  background: #F8F8F5 !important;
  border-bottom: 1px solid rgba(148, 163, 184, .14) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] header.top-bar,
html[data-theme="dark"] .top-bar {
  background: #111111 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============ v219.2 number badges: bare number, no circle ============
   Owner directive: every number badge is just the number, no red pill.
   The number keeps the red signal colour and sits close to its icon.
   NOTE: the app's `.icon-btn > .badge-count` / `.nav-icon > .badge-count`
   rules are (0,2,1) with !important — every selector here must match that
   or higher, and oa-deai.css must stay the last stylesheet. */
/* v219.5 sizing (owner): badges reduced by 70% — the number is now 30% of
   its icon's size; icons unchanged. Still anchored directly at the TOP RIGHT
   of the icon. Measured icons: header bell 20.8px, bottom-nav 24px,
   notif orb 25px, anon card emoji 20px, anon tab pill ~18px. */
html .badge-count, html .chat-nav-badge, html .anon-card-badge,
html .anonymous-tab-badge, html .premium-hero-orb > b,
html .icon-btn > .badge-count, html .nav-icon > .badge-count,
html .chat-nav-badge.chat-nav-badge, html .anon-card-badge.anon-card-badge {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  color: #dc2626 !important;
  font-size: 7px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  display: inline-block !important;
  animation: none !important;
  text-shadow: none !important;
  transform: none !important;
  letter-spacing: 0 !important;
}
html[data-theme="dark"] .badge-count, html[data-theme="dark"] .chat-nav-badge,
html[data-theme="dark"] .anon-card-badge, html[data-theme="dark"] .anonymous-tab-badge,
html[data-theme="dark"] .premium-hero-orb > b,
html[data-theme="dark"] .icon-btn > .badge-count,
html[data-theme="dark"] .nav-icon > .badge-count { color: #f87171 !important; }

/* icon-anchored badges: tiny number directly at the icon's TOP-RIGHT corner. */
html .icon-btn > .badge-count {
  position: absolute !important;
  top: 9px !important;       /* v224: right AT the icon's top-right corner, slightly down */
  right: 8px !important;
  font-size: 6px !important;    /* bell icon 20.8px -> badge 30% of it */
}
html .nav-icon > .badge-count,
html .chat-nav-badge.chat-nav-badge {
  position: absolute !important;
  top: -9px !important;
  right: 2px !important;
  font-size: 7px !important;    /* nav icon 24px -> badge 30% of it */
}
html .anon-card-badge.anon-card-badge {
  position: absolute !important;
  top: -6px !important;
  right: -2px !important;
  font-size: 6px !important;    /* card emoji 20px -> badge 30% of it */
}
html .premium-hero-orb > b {
  position: absolute !important;
  top: -8px !important;
  right: -2px !important;
  font-size: 7.5px !important;  /* orb icon 25px -> badge 30% of it */
}
/* tab badge stays inline, right beside its label */
html .anonymous-tab-badge { margin-left: 3px !important; font-size: 5.5px !important; }

/* ============ v220: profile identity block, flattened ============
   The avatar + name + email sat inside a tinted, bordered, rounded box
   (div.center.col: rgba(37,99,235,.14) bg, 1px border, 16px radius) that
   served no purpose. Content and spacing stay; the decoration goes. */
.page-enter.senior-profile-page .center.col:has(h2),
.page-enter.senior-profile-page .center.col:has(.avatar-3d) {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
/* fallback for browsers without :has - the identity box is the only
   .center.col that directly contains an avatar or an email address */
@supports not selector(:has(*)) {
  .page-enter.senior-profile-page .page > .center.col:first-child {
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
}

/* v220: the Lost & Found home section carried the app's fadeUp entrance
   (a leftover in the patched build) - it replayed on every return to Home.
   Everything else already plays no entrance (oa-look.js); this closes the gap. */
.senior-home-page .oa-hlf { animation: none !important; }


/* ============ v230: notifications page trimmed (owner) ============
   The "Stay in the loop" hero banner with its big blue orb, and the search
   field, are gone. The page opens straight onto the filter chips and the
   notification list. */
.premium-notifications-page .premium-notification-hero { display: none !important; }
.premium-notifications-page .premium-notification-search { display: none !important; }

/* ============ v231: search bar field has no outline line (owner) ============ */
.oa-search-bar-field { border: 0 !important; box-shadow: none !important; }

/* ============ v232: NO focus lines anywhere (owner - applies to ALL users) ==
   Tapping a text box, search bar, button or icon must never draw a line,
   ring or glow around it. Idle borders stay exactly as they are; only the
   focus decoration is gone. */
*:focus, *:focus-visible, *:focus-within {
  outline: none !important;
}
/* text boxes: no focus ring, no focus glow, border keeps its idle colour */
input:focus, textarea:focus, select:focus, [contenteditable]:focus,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  box-shadow: none !important;
}
.input-3d:focus, .vs-input:focus, .news-comments textarea:focus {
  border-color: var(--ds-border-strong, rgba(148,163,184,.4)) !important;
  box-shadow: none !important;
}
.ux-chat-textarea:focus { box-shadow: none !important; }
.anon-input:focus, .anon-composer textarea:focus, .anon-composer input:focus {
  border-color: #475569 !important;
  box-shadow: none !important;
}
.ux-wp-search input:focus { border-color: var(--premium-border, #94a3b833) !important; box-shadow: none !important; }
.oa-inbar:focus-within { border-color: var(--premium-border, #94a3b833) !important; box-shadow: none !important; }
.oa-lfc-form input:focus { border-color: var(--border, #E5E7EB) !important; box-shadow: none !important; }
.oa-profile-dd-item:focus-visible, .oa-chat-more-item:focus-visible { outline: none !important; }

/* search bars carry no line at all - home expanding bar (v231) and the
   Notes page fast-search box */
.senior-notes-page .note-fast-search-box:focus-within {
  border-color: transparent !important;
  box-shadow: none !important;
}
.senior-notes-page .note-fast-search-box .input-3d {
  border: 0 !important;
}

/* the bundle's own blue 3px focus ring (html input:focus-visible ...) is the
   'line around it' - same specificity + later sheet wins */
html input:focus, html input:focus-visible,
html textarea:focus, html textarea:focus-visible,
html select:focus, html select:focus-visible,
html button:focus, html button:focus-visible,
html a:focus, html a:focus-visible {
  box-shadow: none !important;
}
/* notes page fast-search box: no border line at all */
.senior-notes-page .note-fast-search-box { border: 0 !important; }

/* ============ v235: notifications - options always visible, no shape ====
   Owner: "I only want the shape around the options to go, not the options."
   The filter options (All / Chat / News / ...) show directly - no box, no
   border, no background around them. The toolbar is an invisible container;
   the chips are the app's own buttons, unchanged. */
.premium-notifications-page .premium-notification-toolbar {
  display: flex !important; align-items: center; gap: 4px;
  border: 0 !important; background: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important;
  padding: 0 !important; margin: 14px 0 0 !important; position: static !important;
}
.premium-notifications-page .premium-filter-strip {
  display: flex !important; flex: 1 1 auto; min-width: 0;
}

/* ============ v236: de-line & de-colour sweep (owner) ======================
   "remove things like that": round lines around small buttons/icons, lines
   around search bars and chips, and the candy colours on Lost & Found. */
/* round line around the L&F comment icon */
.oa-hlf-comment-btn { border: 0 !important; }
/* ghost buttons ("See all" on home news, and friends) - flat */
.btn-ghost { border: 0 !important; }
/* icon buttons (top bar bell, etc.) - raised surface, no edge line */
.icon-btn { border: 0 !important; }
/* saved-page collection chips incl. "+ New collection" - no dashed line */
.oa-col-chip, .oa-col-chip.add { border: 0 !important; }
/* notes search box - fully flat now (last shadow line removed) */
.senior-notes-page .note-fast-search-box { box-shadow: none !important; }

/* Lost & Found: colourful tabs/chips/buttons -> neutral slate */
.lf-tab.lost.active, .lf-tab.found.active,
.lf-kind.lost.on, .lf-kind.found.on { background: #475569 !important; }
.lf-chip.lost, .lf-chip.found, .lf-chip.done { background: #475569 !important; }
.lf-btn.wa, .lf-btn.call { background: #475569 !important; }
/* Lost & Found: lines gone */
.lf-tabs { border: 0 !important; }
.lf-cat, .lf-mini, .lf-kind { border: 0 !important; }
.lf-sep, .lf-contact { border-top: 0 !important; }
/* Lost & Found: text alignment - timestamp centres with the title block,
   one consistent gap from the chips to the title */
.lf-card .row.between { align-items: center !important; }
.lf-title { margin-top: 8px !important; }
/* home L&F section: badges + status text go neutral too */
.oa-hlf-badge.lost { background: #475569 !important; }
.oa-hlf-badge.found { background: #334155 !important; }
.oa-hlf-status { color: var(--text-secondary, #64748b) !important; }

/* ============================================================================
   v240 (2026-09-14, owner work order):
   1. Lost & Found: the "+ I lost something" button uses .mb-12 which never
      existed in the app CSS -> zero gap to the first post below. Defined.
   2. LIGHT THEME visibility sweep. Several surfaces were designed dark-only
      and stayed near-white in light theme (anonymous hero/tabs/post text,
      profile menu edit+personalize sheets, admin rail/nav/tags). All scoped
      to html[data-theme="light"] so dark is untouched.
   3. Admin: filter chips used to shrink and wrap into tall coloured blocks
      (the "two blue rectangles") - now they never wrap, in either theme.
   * ============================================================================ */

/* --- 1. Lost & Found spacing ----------------------------------------------- */
.mb-12 { margin-bottom: 12px !important; }

/* --- 2a. Anonymous section readable in light theme -------------------------- */
html[data-theme="light"] .anon-hero-title { color: #0F172A !important; }
html[data-theme="light"] .anon-hero-sub { color: #5B6B84 !important; opacity: 1 !important; }
html[data-theme="light"] .anonymous-main-tabs .pill { color: #475569 !important; }
html[data-theme="light"] .anon-post > div:not(.row):not(.anon-actions):not(.anon-comments):not(.anon-image) { color: #0F172A !important; }
html[data-theme="light"] .anon-post .u-sub { color: #5B6B84 !important; opacity: 1 !important; }
html[data-theme="light"] .anon-post .anon-name-btn { color: #0F172A !important; }
html[data-theme="light"] .anon-post .anon-action { color: #33415C !important; }
html[data-theme="light"] .anon-post .anon-action:hover { background: rgba(15, 23, 42, .05) !important; color: #0F172A !important; }
html[data-theme="light"] .anon-post .anon-image { border-top-color: rgba(15, 23, 42, .08) !important; border-bottom-color: rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .anon-post .anon-actions { border-top-color: rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .anon-post:hover { border-color: rgba(15, 23, 42, .18) !important; box-shadow: 0 6px 16px rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .senior-anon-room .empty-state,
html[data-theme="light"] .senior-anon-room .anon-empty { background: #FFFFFF !important; border-color: rgba(15, 23, 42, .14) !important; color: #5B6B84 !important; }
html[data-theme="light"] .anon-privacy-note b { color: #15803D !important; }

/* --- 2b. Profile menu sheets (Edit profile / Personalize) in light ---------- */
html[data-theme="light"] .oax-sec h4 { color: #5B6B84 !important; }
html[data-theme="light"] .oax-card { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .oax-line { border-bottom-color: rgba(15, 23, 42, .06) !important; }
html[data-theme="light"] .oax-line .k { color: #5B6B84 !important; }
html[data-theme="light"] .oax-line .v { color: #0F172A !important; }
html[data-theme="light"] .oax-line .t { color: #0F172A !important; }
html[data-theme="light"] .oatg-panel { background: rgba(255, 255, 255, .98) !important; border-color: rgba(15, 23, 42, .10) !important; }
html[data-theme="light"] .oatg-head { border-bottom-color: rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .oatg-head b { color: #0F172A !important; }
html[data-theme="light"] .oatg-sec { color: #5B6B84 !important; }
html[data-theme="light"] .oatg-mode { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .10) !important; }
html[data-theme="light"] .oatg-mode b { color: #0F172A !important; }
html[data-theme="light"] .oatg-acc { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .10) !important; }
html[data-theme="light"] .oatg-acc b { color: #0F172A !important; }
html[data-theme="light"] .oatg-acc span { color: #5B6B84 !important; }
html[data-theme="light"] .oatg-row { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .08) !important; color: #0F172A !important; }
html[data-theme="light"] .oatg-row .val { color: #5B6B84 !important; }
html[data-theme="light"] .oatg-rowbtn { background: rgba(15, 23, 42, .03) !important; border-color: rgba(15, 23, 42, .08) !important; color: #0F172A !important; }

/* --- 3. Admin: chips never collapse into wrapped blocks --------------------- */
.oap-chip { white-space: nowrap !important; flex-shrink: 0 !important; }

/* --- 2c. Admin panel readable in light theme -------------------------------- */
html[data-theme="light"] .oap-navbtn { color: #33415C !important; }
html[data-theme="light"] .oap-navbtn:hover { background: rgba(15, 23, 42, .05) !important; color: #0F172A !important; }
html[data-theme="light"] .oap-navbtn.active { background: rgba(37, 99, 235, .10) !important; color: #1D4ED8 !important; box-shadow: inset 2px 0 0 0 #2563EB !important; }
html[data-theme="light"] .oap-navbtn.active .oap-ic { color: #1D4ED8 !important; }
html[data-theme="light"] .oap-navgroup { color: #64748B !important; }
html[data-theme="light"] .oap-nd .admin-nav-item { color: #33415C !important; }
html[data-theme="light"] .oap-nd .admin-nav-item.active { background: rgba(37, 99, 235, .10) !important; color: #1D4ED8 !important; }
html[data-theme="light"] .oap-nd .admin-nav-group { color: #64748B !important; }
html[data-theme="light"] .oap-mbar { background: rgba(255, 255, 255, .94) !important; border-bottom-color: rgba(15, 23, 42, .08) !important; }
html[data-theme="light"] .oap-mt [data-oap-crumb] { color: #0F172A !important; }
html[data-theme="light"] .oap-mt .oap-brand-sm { color: #5B6B84 !important; }
html[data-theme="light"] .oap-mt .oap-msep { color: #64748B !important; }
html[data-theme="light"] .oap-tag { background: #EEF2F7 !important; color: #33415C !important; }
html[data-theme="light"] .oap-tl:before { background: #E2E8F0 !important; }
html[data-theme="light"] .oap-rr .br { background: #E9EEF5 !important; }
html[data-theme="light"] .oap-hc-strip { background: #F5F8FD !important; }
html[data-theme="light"] .oap-skel { background: #EEF2F7 !important; }
html[data-theme="light"] .oap-toast { background: #FFFFFF !important; color: #0F172A !important; border-color: rgba(15, 23, 42, .12) !important; }
html[data-theme="light"] .analytics-card-icon { background: #E8EFFC !important; color: #1D4ED8 !important; }
html[data-theme="light"] .admin-shell .icon-badge { background: #E8EFFC !important; color: #1D4ED8 !important; }
html[data-theme="light"] .admin-shell .badge { color: #1D4ED8 !important; }
html[data-theme="light"] .admin-shell .category-badge-3d,
html[data-theme="light"] .admin-shell .cat-academic,
html[data-theme="light"] .admin-shell .cat-sug,
html[data-theme="light"] .admin-shell .cat-faculty,
html[data-theme="light"] .admin-shell .cat-department,
html[data-theme="light"] .admin-shell .cat-scholarships,
html[data-theme="light"] .admin-shell .cat-internships,
html[data-theme="light"] .admin-shell .cat-events { color: #1D4ED8 !important; }
html[data-theme="light"] .admin-shell .file-type-pill,
html[data-theme="light"] .admin-shell .ft-pdf,
html[data-theme="light"] .admin-shell .ft-docx,
html[data-theme="light"] .admin-shell .ft-ppt,
html[data-theme="light"] .admin-shell .ft-pptx,
html[data-theme="light"] .admin-shell .ft-img,
html[data-theme="light"] .admin-shell .ft-zip,
html[data-theme="light"] .admin-shell .ft-default { background: #E8EFFC !important; color: #33415C !important; }
html[data-theme="light"] .admin-shell a { color: #1D4ED8 !important; }
html[data-theme="light"] .oap-modal .icon-btn { background: #EEF2F7 !important; }
html[data-theme="light"] .oap-empty { color: #5B6B84 !important; }

/* ==========================================================================
   v241 (2026-09-14)
   1) LIGHT THEME - selected/active states that were invisible:
      .toggle-track.active used --surface-raised (#F3F7FF light) so an ON
      toggle looked OFF; profile rows and settings items pressed to
      near-white; group toggles (.oatg-*) only changed border color.
   2) DEFAULT CHAT WALLPAPER - chat rooms had no wallpaper at all until a
      user picked one. Give every CHAT room (.senior-chat-room: direct +
      departmental + private) a subtle default pattern in both themes. Any
      picked wallpaper (html[data-chat-wall], chat-wallpaper.js) still wins.
      v247 (owner report: "the anonymous post shows the chat background/
      wallpaper - remove it") removes the anonymous area from every wallpaper
      rule here and in chat-wallpaper.js: Posts, Polls, Chat and Profile are
      tabs of one feed page, and the owner wants no chat wallpaper anywhere in
      it. The anonymous room keeps its own plain surfaces.
   ========================================================================== */

/* ---- 1) light theme: make selected things look selected ---- */
html[data-theme="light"] .toggle-track.active {
  background: rgba(37, 99, 235, .20) !important;
}
html[data-theme="light"] .oa-pm-item:active,
html[data-theme="light"] .oac-item:active {
  background: #E8EEF7 !important;
}
html[data-theme="light"] .oatg-mode.on,
html[data-theme="light"] .oatg-acc.on {
  background: rgba(37, 99, 235, .10) !important;
}

/* ---- 2) default chat wallpaper - Telegram-style: solid tinted base +
     education doodle pattern (pens, books, laptops), adapts to the app
     theme automatically (dark block below, light block further down). ---- */
/* ---- default chat wallpaper (dark theme) - Telegram dark slate #17212B ---- */
html:not([data-chat-wall]) .senior-chat-room {
  background-color: #17212B !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27 viewBox=%270 0 240 240%27 fill=%27none%27 stroke=%27rgba(203,213,225,0.26)%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cg transform=%27translate(16 12) rotate(-18) scale(1.25)%27%3E%3Cpath d=%22M4 20l1.2-4.2L16.5 4.5l2.9 2.9L8.1 18.8 4 20z%22/%3E%3Cpath d=%22M14.8 6.3l2.9 2.9%22/%3E%3C/g%3E%3Cg transform=%27translate(126 16) rotate(6) scale(1.2)%27%3E%3Cpath d=%22M12 6.2C10.1 4.8 7.2 4.2 4.2 4.2v13.2c3 0 5.9.6 7.8 2 1.9-1.4 4.8-2 7.8-2V4.2c-3 0-5.9.6-7.8 2z%22/%3E%3Cpath d=%22M12 6.2v13.2%22/%3E%3C/g%3E%3Cg transform=%27translate(92 84) rotate(-5) scale(1.15)%27%3E%3Cpath d=%22M6.5 4.5h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z%22/%3E%3Cpath d=%22M3 16.5l1.5-2.7h15l1.5 2.7H3z%22/%3E%3C/g%3E%3Cg transform=%27translate(184 92) rotate(-9) scale(1.15)%27%3E%3Cpath d=%22M2.5 9.3L12 5l9.5 4.3L12 13.6 2.5 9.3z%22/%3E%3Cpath d=%22M6.8 11.4v4.1c0 1.4 2.3 2.6 5.2 2.6s5.2-1.2 5.2-2.6v-4.1%22/%3E%3Cpath d=%22M21.5 9.3v5.1%22/%3E%3C/g%3E%3Cg transform=%27translate(24 118) rotate(12) scale(1.1)%27%3E%3Cpath d=%22M12 3a6 6 0 0 0-3.9 10.6c.7.6 1 1.4 1 2.4h5.8c0-1 .3-1.8 1-2.4A6 6 0 0 0 12 3z%22/%3E%3Cpath d=%22M9.4 19h5.2%22/%3E%3Cpath d=%22M10.4 21.5h3.2%22/%3E%3C/g%3E%3Cg transform=%27translate(148 164) rotate(-15) scale(1)%27%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.4%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22 transform=%22rotate(60 12 12)%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22 transform=%22rotate(120 12 12)%22/%3E%3C/g%3E%3Cg transform=%27translate(52 180) rotate(22) scale(1.1)%27%3E%3Cpath d=%22M3 9.2h18v5.6H3z%22/%3E%3Cpath d=%22M6.5 9.2v2.8%22/%3E%3Cpath d=%22M10 9.2v2.8%22/%3E%3Cpath d=%22M13.5 9.2v2.8%22/%3E%3Cpath d=%22M17 9.2v2.8%22/%3E%3C/g%3E%3Cg transform=%27translate(190 198) rotate(-18) scale(1)%27%3E%3Cpath d=%22M20.8 3.4L3.6 10l5.7 2.7 2.6 5.8 8.9-15.1z%22/%3E%3Cpath d=%22M9.3 12.7L20.8 3.4%22/%3E%3C/g%3E%3Ccircle cx=%2778%27 cy=%2742%27 r=%271.5%27/%3E%3Ccircle cx=%27202%27 cy=%2742%27 r=%271.2%27/%3E%3Ccircle cx=%2718%27 cy=%27212%27 r=%271.5%27/%3E%3Ccircle cx=%27120%27 cy=%27224%27 r=%271.2%27/%3E%3Ccircle cx=%27222%27 cy=%27132%27 r=%271.4%27/%3E%3Ccircle cx=%2764%27 cy=%27102%27 r=%271.1%27/%3E%3Ccircle cx=%27150%27 cy=%27120%27 r=%271.2%27/%3E%3Ccircle cx=%2736%27 cy=%2764%27 r=%271.0%27/%3E%3C/svg%3E") !important;
  background-size: 240px 240px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}
/* keep the room inner surfaces transparent so the pattern shows through */
html:not([data-chat-wall]) .senior-chat-room > .grow,
html:not([data-chat-wall]) .senior-chat-room .chat-messages {
  background: transparent !important;
}

/* default chat wallpaper (light theme) */
html[data-theme="light"]:not([data-chat-wall]) .senior-chat-room {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27240%27 height=%27240%27 viewBox=%270 0 240 240%27 fill=%27none%27 stroke=%27rgba(37,99,235,0.22)%27 stroke-width=%271.7%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cg transform=%27translate(16 12) rotate(-18) scale(1.25)%27%3E%3Cpath d=%22M4 20l1.2-4.2L16.5 4.5l2.9 2.9L8.1 18.8 4 20z%22/%3E%3Cpath d=%22M14.8 6.3l2.9 2.9%22/%3E%3C/g%3E%3Cg transform=%27translate(126 16) rotate(6) scale(1.2)%27%3E%3Cpath d=%22M12 6.2C10.1 4.8 7.2 4.2 4.2 4.2v13.2c3 0 5.9.6 7.8 2 1.9-1.4 4.8-2 7.8-2V4.2c-3 0-5.9.6-7.8 2z%22/%3E%3Cpath d=%22M12 6.2v13.2%22/%3E%3C/g%3E%3Cg transform=%27translate(92 84) rotate(-5) scale(1.15)%27%3E%3Cpath d=%22M6.5 4.5h11a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-8a1 1 0 0 1 1-1z%22/%3E%3Cpath d=%22M3 16.5l1.5-2.7h15l1.5 2.7H3z%22/%3E%3C/g%3E%3Cg transform=%27translate(184 92) rotate(-9) scale(1.15)%27%3E%3Cpath d=%22M2.5 9.3L12 5l9.5 4.3L12 13.6 2.5 9.3z%22/%3E%3Cpath d=%22M6.8 11.4v4.1c0 1.4 2.3 2.6 5.2 2.6s5.2-1.2 5.2-2.6v-4.1%22/%3E%3Cpath d=%22M21.5 9.3v5.1%22/%3E%3C/g%3E%3Cg transform=%27translate(24 118) rotate(12) scale(1.1)%27%3E%3Cpath d=%22M12 3a6 6 0 0 0-3.9 10.6c.7.6 1 1.4 1 2.4h5.8c0-1 .3-1.8 1-2.4A6 6 0 0 0 12 3z%22/%3E%3Cpath d=%22M9.4 19h5.2%22/%3E%3Cpath d=%22M10.4 21.5h3.2%22/%3E%3C/g%3E%3Cg transform=%27translate(148 164) rotate(-15) scale(1)%27%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%221.4%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22 transform=%22rotate(60 12 12)%22/%3E%3Cellipse cx=%2212%22 cy=%2212%22 rx=%229.5%22 ry=%223.8%22 transform=%22rotate(120 12 12)%22/%3E%3C/g%3E%3Cg transform=%27translate(52 180) rotate(22) scale(1.1)%27%3E%3Cpath d=%22M3 9.2h18v5.6H3z%22/%3E%3Cpath d=%22M6.5 9.2v2.8%22/%3E%3Cpath d=%22M10 9.2v2.8%22/%3E%3Cpath d=%22M13.5 9.2v2.8%22/%3E%3Cpath d=%22M17 9.2v2.8%22/%3E%3C/g%3E%3Cg transform=%27translate(190 198) rotate(-18) scale(1)%27%3E%3Cpath d=%22M20.8 3.4L3.6 10l5.7 2.7 2.6 5.8 8.9-15.1z%22/%3E%3Cpath d=%22M9.3 12.7L20.8 3.4%22/%3E%3C/g%3E%3Ccircle cx=%2778%27 cy=%2742%27 r=%271.5%27/%3E%3Ccircle cx=%27202%27 cy=%2742%27 r=%271.2%27/%3E%3Ccircle cx=%2718%27 cy=%27212%27 r=%271.5%27/%3E%3Ccircle cx=%27120%27 cy=%27224%27 r=%271.2%27/%3E%3Ccircle cx=%27222%27 cy=%27132%27 r=%271.4%27/%3E%3Ccircle cx=%2764%27 cy=%27102%27 r=%271.1%27/%3E%3Ccircle cx=%27150%27 cy=%27120%27 r=%271.2%27/%3E%3Ccircle cx=%2736%27 cy=%2764%27 r=%271.0%27/%3E%3C/svg%3E") !important;
  background-color: #E9EDF2 !important;
  background-size: 240px 240px !important;
  background-position: 0 0 !important;
  background-repeat: repeat !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   v244: chat wallpaper painting - ALWAYS available. The same rules lived
   only inside the lazy-loaded chat-wallpaper.js, so on a fresh open (module
   not warmed yet) a saved wallpaper was set on <html> but never painted.
   These mirror the module's rules exactly; a picked or custom wallpaper now
   paints on first paint.
   ========================================================================== */
html[data-chat-wall] .senior-chat-room {
  background-image: linear-gradient(rgba(6,10,18,var(--chat-wall-dim,.35)),rgba(6,10,18,var(--chat-wall-dim,.35))), var(--chat-wall) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
html[data-chat-wall] .senior-chat-room > .grow,
html[data-chat-wall] .senior-chat-room .chat-messages {
  background: transparent !important;
}
html[data-chat-wall-tone="light"] .senior-chat-room .chat-messages {
  --bubble-wash: rgba(255,255,255,.10);
}

/* ==========================================================================
   v245: STATIONARY CHAT FURNITURE (Telegram-style), scoped per surface.
   1) ROOMS - the room page is clamped to the viewport as a flex column:
      the header and the message text box are fixed furniture and ONLY the
      message thread scrolls. Previously the whole page scrolled in the
      window, so the text box and header travelled up and down with every
      swipe (owner complaint).
   2) ANONYMOUS FULL CHAT - hard viewport clamp: nothing but the thread
      can move (a ~96px window-scroll leak used to shift the whole header
      block). The composer is pinned by oa-anon-full.js.
   3) ANON POST OPEN - when a post's comments are open the screen shows
      only the post: the hero title block and the compose FAB step aside.
   4) PULL-TO-REFRESH - .ptr-content translates the entire page during a
      pull, dragging the search bar up and down with it (owner complaint).
      Chat surfaces disable the translation (the same pattern the bundle
      itself uses for modals/readers) so a pull can never move them.
   ========================================================================== */

/* 1) rooms: header + text box stationary, only the thread scrolls */
.page-enter.senior-chat-room{height:100dvh;max-height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.page-enter.senior-chat-room>.top-bar{flex:0 0 auto}
.page-enter.senior-chat-room>.grow{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-bottom:96px}
.page-enter.senior-chat-room>.row.chat-composer{flex:0 0 auto;position:static;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
body:has(.page-enter.senior-chat-room){overflow:hidden !important;overscroll-behavior:none}
body:has(.page-enter.senior-chat-room) .app-shell{min-height:0;padding-bottom:0}

/* 2) anonymous full chat: hard clamp, no window scroll at all */
body:has(.oaf-full){overflow:hidden !important;overscroll-behavior:none}
body:has(.oaf-full) .app-shell{min-height:0;padding-bottom:0}

/* 3) an open anonymous post shows only the post (+ its comments) */
body:has(.anon-comments) .anon-hero-head{display:none !important}
body:has(.anon-comments) .fab-host{display:none !important}

/* 4) pull-to-refresh must not drag chat surfaces around */
body:has(.senior-chat-hub-page) .ptr-content,
body:has(.page-enter.senior-chat-room) .ptr-content,
body:has(.senior-anon-room) .ptr-content{transform:none !important;will-change:auto !important}
body:has(.senior-chat-hub-page) .ptr-indicator,
body:has(.page-enter.senior-chat-room) .ptr-indicator,
body:has(.senior-anon-room) .ptr-indicator{display:none !important}

/* ------------------------------------------------------------------
   5) ADVERT PICTURES ARE CAPPED IN THE FIRST PAINT (v247).
   Owner report: "the ad pic is so big, then when I exit the app and opened
   again it went back to normal". The caps used to live ONLY in late-loading
   JS layers (oa-home.js, oa-ad-details.js), so a cold start painted the raw
   picture and the cap arrived a moment later. This file is a <head>
   stylesheet, so the same cap is already in force for the very first paint.
   Kept identical to the JS layers (230px, cover) so nothing shifts when the
   layers land.
   ------------------------------------------------------------------ */
.oa-add-img,
.oa-ad-img,
.oa-ad-banner img,
.oa-ad-carousel img,
.oa-ad-ann img,
.oa-adv-prev img,
.oa-adv-hero img{width:100%;max-height:230px;object-fit:cover}