/* tight.css — the app's shared visual language (2026-09-05 canvas). Loaded after
   tokens.css on every page; page stylesheets keep their class names, this file
   restyles them. No layout logic lives here — only surfaces, type, spacing.
   Bump the SW cache after editing (sw.js precaches this file). */

/* ---- top row (replaces the dark page header) ---- */
.page-toprow, .page-title-row { width: 100%; box-sizing: border-box; align-self: stretch; }
.page-toprow { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 0; height: calc(56px + env(safe-area-inset-top, 0px)); box-sizing: border-box; max-width: 680px; margin: 0 auto; }
.page-toprow-right { display: flex; gap: 4px; align-items: center; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--forest-700, #234d38); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font: inherit; -webkit-tap-highlight-color: transparent; }
.icon-btn:active { background: var(--cream-50, #f5ede0); }
.icon-btn svg { display: block; }
.page-title-row { padding: 8px 20px 0; max-width: 680px; margin: 0 auto; }
.page-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; font-weight: 600; color: var(--forest-800, #1a3a2a); margin: 0; letter-spacing: -0.015em; line-height: 1.1; }
.page-subtitle { font-size: 0.95rem; color: var(--text-secondary, #555); margin: 6px 0 0; }
body.tight .header { display: none; }

/* ---- section labels ---- */
.eyebrow { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); }
.section-label { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 20px 8px; max-width: 680px; margin: 0 auto; }
.section-label .see-all { font-size: 0.8rem; font-weight: 600; color: var(--forest-600, #2d5a3d); text-decoration: none; }

/* ---- rows ---- */
.kagn-row { display: flex; align-items: center; gap: 14px; padding: 10px 20px; border-bottom: 1px solid #efebe2; background: transparent; text-decoration: none; color: inherit; }
.kagn-row-thumb { position: relative; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; overflow: hidden; background: #e4e0d4; }
.kagn-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kagn-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kagn-row-name { font-size: 1rem; font-weight: 600; line-height: 1.2; color: var(--text-primary, #1a1a1a); }
.kagn-row-sub { font-size: 0.85rem; color: var(--text-muted, #666); }
.kagn-row-chev { color: #9a9a9a; display: flex; }

/* ---- stat strip ---- */
.stat-strip { margin: 0 20px; display: flex; background: #fff; border: 1px solid #e4e0d4; border-radius: 14px; }
.stat-strip > * { flex: 1; text-align: center; padding: 14px 4px; border-right: 1px solid #efebe2; background: transparent; box-shadow: none; border-radius: 0; }
.stat-strip > *:last-child { border-right: 0; }
.stat-strip .stat-number { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 700; color: var(--forest-700, #234d38); line-height: 1; }
.stat-strip .stat-label { font-size: 0.75rem; color: var(--text-muted, #666); margin-top: 6px; font-weight: 500; }

/* ---- underline tabs ---- */
.tabs-underline { display: flex; gap: 22px; padding: 10px 20px 0; border-bottom: 1px solid #e4e0d4; overflow-x: auto; scrollbar-width: none; background: transparent; }
.tabs-underline::-webkit-scrollbar { display: none; }
.tabs-underline > * { padding: 12px 0 10px; font-size: 0.95rem; font-weight: 500; color: var(--text-muted, #666); border: 0; border-bottom: 2px solid transparent; background: transparent; white-space: nowrap; font-family: inherit; cursor: pointer; border-radius: 0; box-shadow: none; flex: 0 0 auto; }
.tabs-underline > .active, .tabs-underline > [aria-selected="true"] { color: var(--forest-800, #1a3a2a); font-weight: 700; border-bottom-color: var(--forest-800, #1a3a2a); background: transparent; box-shadow: none; }

/* ---- chips ---- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid #e4e0d4; background: #fff; color: var(--forest-700, #234d38); font-size: 0.85rem; font-weight: 500; white-space: nowrap; font-family: inherit; cursor: pointer; text-decoration: none; }
.chip.active, .chip[aria-pressed="true"] { background: var(--forest-800, #1a3a2a); border-color: var(--forest-800, #1a3a2a); color: var(--cream-50, #f5ede0); font-weight: 600; }
.chip svg { display: block; }
.chip-row { display: flex; gap: 8px; padding: 12px 20px 0; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }

/* ---- buttons ---- */
.btn-primary { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; box-sizing: border-box; background: linear-gradient(135deg, var(--forest-700, #234d38), var(--forest-500, #3d7a52)); color: #fff; padding: 16px 20px; border: 0; border-radius: 16px; font-size: 1.05rem; font-weight: 700; box-shadow: 0 6px 16px rgba(26, 58, 42, 0.22); font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-primary svg { display: block; }
.btn-secondary { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; background: #fff; border: 1px solid #e4e0d4; color: var(--forest-700, #234d38); padding: 14px 20px; border-radius: 16px; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; text-decoration: none; }
.btn-row { display: flex; gap: 10px; padding: 14px 20px 0; }
.btn-row .btn-primary { flex: 1; }
.btn-row .btn-secondary { flex: 0 0 auto; width: auto; }

/* ---- fields ---- */
.field { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 13px 14px; border-radius: 14px; background: #fff; border: 1px solid #e4e0d4; color: var(--text-primary, #1a1a1a); font-size: 0.95rem; font-family: inherit; }
.field::placeholder { color: #757575; }
.field-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); margin: 14px 0 6px; display: block; }

/* ---- sheets (bottom) ---- */
.sheet-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(13, 40, 24, 0); display: flex; align-items: flex-end; transition: background 0.2s; }
.sheet-backdrop.is-open { background: rgba(13, 40, 24, 0.45); }
.sheet-backdrop[hidden] { display: none; }
.sheet { width: 100%; max-height: 92vh; overflow-y: auto; background: #faf8f4; border-radius: 20px 20px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-sizing: border-box; transform: translateY(100%); transition: transform 0.22s ease-out; }
.sheet-backdrop.is-open .sheet { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; border-radius: 2px; background: #d6d0c0; margin: 10px auto 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px 0; }
.sheet-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: var(--forest-800, #1a3a2a); }
.sheet-head-title-row { display: flex; align-items: baseline; justify-content: space-between; padding: 14px 20px 8px; }
.sheet-link { font-size: 0.85rem; font-weight: 600; color: var(--forest-600, #2d5a3d); text-decoration: none; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 46px; padding: 0 20px; border: 0; border-bottom: 1px solid #efebe2; background: transparent; text-align: left; font-family: inherit; cursor: pointer; color: var(--text-primary, #1a1a1a); box-sizing: border-box; }
.sheet-row-name { font-size: 0.95rem; font-weight: 500; }
.sheet-row.is-active .sheet-row-name { font-weight: 700; }
.sheet-row-sub { font-size: 0.75rem; color: var(--text-muted, #666); }
.sheet-row svg { color: var(--forest-800, #1a3a2a); }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-backdrop { transition: none; } }

/* ---- pack chip ---- */
.pack-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid var(--forest-800, #1a3a2a); background: var(--forest-800, #1a3a2a); color: var(--cream-50, #f5ede0); font-size: 0.85rem; font-weight: 600; font-family: inherit; letter-spacing: 0.01em; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: 70vw; }
.pack-chip:active { background: var(--forest-700, #234d38); }
.pack-chip-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pack-chip-ico, .pack-chip-chev { display: flex; }

/* ---- credits + inline icons ---- */
.credit-i { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; font-family: Georgia, serif; font-style: italic; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; }
.icon-inline { display: inline-flex; vertical-align: middle; }
.icon-inline svg { display: block; }

/* ---- Phase 3: modals become bottom sheets (visual only; ids + handlers untouched).
   The modal templates inject their own <style>; `html body` wins on specificity. ---- */
/* login */
html body .kagn-modal-overlay { align-items: flex-end; padding: 0; background: rgba(13, 40, 24, 0.45); }
html body .kagn-modal { max-width: none; border-radius: 20px 20px 0 0; padding: 0 20px calc(20px + env(safe-area-inset-bottom, 0px)); background: #faf8f4; max-height: 92vh; overflow-y: auto; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
html body .kagn-modal > .sheet-handle { margin: 10px auto 6px; }
html body .kagn-modal-close { top: 14px; right: 12px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--forest-800, #1a3a2a); background: #f1eee6; font-size: 22px; line-height: 1; }
html body .kagn-modal-header { text-align: left; margin: 4px 0 16px; }
html body .kagn-modal-icon { color: var(--forest-800, #1a3a2a); margin-bottom: 4px; line-height: 1; }
html body .kagn-modal-header h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.35rem; color: var(--forest-800, #1a3a2a); margin: 0; }
html body .kagn-modal-header h3, html body .kagn-modal h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--forest-800, #1a3a2a); margin: 4px 0; }
html body .kagn-modal-subtitle { color: var(--text-muted, #666); font-size: 0.9rem; }
html body .kagn-modal input[type="email"], html body .kagn-modal input[type="text"] { border: 1px solid #e4e0d4 !important; border-radius: 14px !important; padding: 13px 14px !important; background: #fff; font-family: inherit; }
html body .kagn-modal input:focus { outline: none; border-color: var(--forest-600, #2d5a3d) !important; }
html body .kagn-modal #kagnOtpCode { font-family: 'Fraunces', Georgia, serif; }
html body .kagn-btn-primary { background: var(--forest-800, #1a3a2a); border-radius: 14px; font-weight: 600; font-family: inherit; }
/* profile edit */
html body .profile-edit-overlay { align-items: flex-end; padding: 0; background: rgba(13, 40, 24, 0.45); }
html body .profile-edit-modal { max-width: none; border-radius: 20px 20px 0 0; background: #faf8f4; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; }
html body .profile-edit-header { padding: 4px 20px 12px; border-bottom: 0; }
html body .profile-edit-content { padding: 4px 20px 16px; overflow-y: auto; }
html body .profile-edit-close { width: 36px; height: 36px; border-radius: 50%; background: #f1eee6; color: var(--forest-800, #1a3a2a); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
html body .profile-edit-field input, html body .profile-edit-field select { border: 1px solid #e4e0d4; border-radius: 14px; padding: 13px 14px; background: #fff; font-family: inherit; }
html body .profile-edit-field label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); }
html body .profile-edit-footer { background: transparent; border-top: 1px solid #efebe2; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
html body .profile-edit-btn { border-radius: 14px; font-weight: 600; font-family: inherit; }
html body .profile-edit-btn-primary { background: var(--forest-800, #1a3a2a); }
html body .profile-edit-btn-secondary { background: #fff; border: 1px solid #e4e0d4; color: var(--forest-800, #1a3a2a); }
/* trial paywall */
html body .trial-paywall-overlay { align-items: flex-end; padding: 0; background: rgba(13, 40, 24, 0.55); backdrop-filter: none; }
html body .trial-paywall { max-width: none; border-radius: 20px 20px 0 0; background: #faf8f4; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
html body .trial-paywall > .sheet-handle { margin: 10px auto 8px; }
html body .trial-paywall-close { top: 14px; right: 12px; width: 36px; height: 36px; border-radius: 50%; background: #f1eee6; color: var(--forest-800, #1a3a2a); padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; }
html body .trial-paywall-emoji { color: var(--forest-800, #1a3a2a); line-height: 1; }
html body .trial-paywall h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--forest-800, #1a3a2a); }
html body .trial-paywall-cta { background: var(--forest-800, #1a3a2a); border-radius: 14px; font-weight: 600; font-family: inherit; }
/* upgrade (full page) */
html body .upgrade-modal-overlay { padding: 0; background: rgba(13, 40, 24, 0.55); backdrop-filter: none; align-items: flex-end; }
html body .upgrade-modal.pricing-modal { max-width: none; border-radius: 20px 20px 0 0; background: #faf8f4; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px)); max-height: 94vh; }
html body .upgrade-modal-close { background: #f1eee6; color: var(--forest-800, #1a3a2a); }
html body .upgrade-modal-header h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--forest-800, #1a3a2a); }
html body .pricing-col { border-radius: 16px; border: 1px solid #e4e0d4; background: #fff; box-shadow: none; }
html body .pricing-col.pricing-featured { border-color: var(--forest-800, #1a3a2a); }
/* log-sighting sheet: light header, icon buttons */
html body .sighting-edit-overlay { background: rgba(13, 40, 24, 0.45); }
html body .sighting-edit-panel { background: #faf8f4; border-radius: 20px 20px 0 0; max-width: none; }
html body .sighting-edit-header { background: #faf8f4; color: var(--forest-800, #1a3a2a); border-bottom: 1px solid #efebe2; padding: 12px 12px 10px; }
html body .sighting-edit-header h2 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; }
html body .sighting-edit-close, html body .sighting-edit-save { color: var(--forest-800, #1a3a2a); width: 36px; height: 36px; border-radius: 50%; background: #f1eee6; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
html body .sighting-edit-save { background: var(--forest-800, #1a3a2a); color: #fff; }
html body .sighting-edit-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); }
html body .sighting-edit-input { border: 1px solid #e4e0d4; border-radius: 14px; padding: 12px 14px; background: #fff; }
/* activity: bottom sheet */
html body .kagn-act-drawer { top: auto; bottom: 0; left: 0; right: 0; width: 100%; max-height: 85vh; border-radius: 20px 20px 0 0; border: 0; background: #faf8f4; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); transform-origin: bottom center; transform: translateY(100%); opacity: 1; transition: transform 0.22s ease-out; padding-bottom: env(safe-area-inset-bottom, 0px); }
html body .kagn-act-drawer.is-open { transform: translateY(0); }
html body .kagn-act-head { padding: 14px 16px 10px; border-bottom: 1px solid #efebe2; }
html body .kagn-act-head h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.2rem; color: var(--forest-800, #1a3a2a); }
html body .kagn-act-close { width: 36px; height: 36px; background: #f1eee6; color: var(--forest-800, #1a3a2a); }
/* packs sheets: taxa as chips */
html body .packs-sheet { background: #faf8f4; }
html body .packs-sheet-taxa-grid { display: flex; flex-wrap: wrap; gap: 8px; }
html body .packs-sheet-taxa-row { border-radius: 999px; padding: 8px 14px; }
html body .packs-sheet-taxa-row .taxa-ico { display: none; }
html body .packs-sheet-taxa-row .taxa-count { display: inline; margin-left: 6px; font-size: 11px; }
html body .packs-sheet-taxa-row .taxa-body { display: flex; align-items: baseline; }
/* identify chooser sheet (hub) */
.identify-sheet-row { text-decoration: none; min-height: 64px; }
.identify-sheet-left { display: flex; align-items: center; gap: 14px; }
.identify-sheet-ico { width: 44px; height: 44px; border-radius: 12px; background: #f1eee6; color: var(--forest-800, #1a3a2a); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* photo credit popover (credit.js) */
.credit-pop { position: absolute; right: 4px; bottom: 30px; z-index: 6; background: rgba(0, 0, 0, 0.85); color: #fff; font-size: 0.72rem; line-height: 1.3; padding: 6px 9px; border-radius: 8px; max-width: 240px; min-width: 120px; white-space: normal; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); }
.credit-pop[hidden] { display: none; }
.credit-pop a { color: #fff; text-decoration: underline; }

/* extended profile editor (profile-edit.css .pe2-*) as a bottom sheet */
html body .pe2-overlay { align-items: flex-end; padding: 0; background: rgba(13, 40, 24, 0.45); }
html body .pe2-modal { max-width: none; width: 100%; border-radius: 20px 20px 0 0; background: #faf8f4; max-height: 92vh; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18); }
html body .pe2-modal.pe2-delete-modal { border-radius: 20px 20px 0 0; }
html body .pe2-header { border-bottom: 0; padding: 14px 20px 6px; }
html body .pe2-title { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--forest-800, #1a3a2a); }
html body .pe2-close { width: 36px; height: 36px; border-radius: 50%; background: #f1eee6; color: var(--forest-800, #1a3a2a); display: inline-flex; align-items: center; justify-content: center; }
html body .pe2-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--forest-800, #1a3a2a); }
html body .pe2-input, html body .pe2-textarea, html body .pe2-modal select { border: 1px solid #e4e0d4; border-radius: 14px; padding: 12px 14px; background: #fff; }
html body .pe2-input:focus, html body .pe2-textarea:focus { border-color: var(--forest-600, #2d5a3d); box-shadow: none; outline: none; }
html body .pe2-share-profile { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e4e0d4; border-radius: 14px; background: #fff; color: var(--forest-800, #1a3a2a); font-weight: 600; }
html body .pe2-footer { background: transparent; border-top: 1px solid #efebe2; }
html body .pe2-footer button { border-radius: 14px; font-weight: 600; }
/* log sheet fields */
html body .sighting-edit-header { background: #fff; }
html body .sighting-edit-date-select { padding: 12px 6px; font-size: 0.95rem; min-width: 0; }
html body .sighting-edit-radio-group { flex-wrap: wrap; gap: 6px 14px; }
html body .sighting-edit-radio { white-space: nowrap; font-size: 0.9rem; }
html body .sighting-edit-date-selects { gap: 6px; }
html body .sighting-edit-date-select { padding: 12px 4px; font-size: 0.9rem; }
html body .sighting-edit-close { border: 0; }
html body .sighting-edit-add-media { display: inline-flex; align-items: center; gap: 6px; }
html body .sighting-edit-search-result-thumbwrap { position: relative; display: inline-block; flex-shrink: 0; line-height: 0; }
html body .sighting-edit-search-result-thumbwrap .credit-i { top: auto; bottom: 2px; right: 2px; width: 18px; height: 18px; font-size: 0.62rem; }
/* extended editor core layout — lives here too so the modal can never paint
   as an unstyled block if profile-edit.css lags or fails to load */
html body .pe2-overlay { position: fixed; inset: 0; z-index: 10005; display: flex; justify-content: center; overflow-y: auto; }
html body .pe2-modal { display: flex; flex-direction: column; overflow: hidden; }
html body .pe2-body { overflow-y: auto; padding: 4px 20px 16px; }
/* credit popover lives on <body> (credit.js, 2026-09-06) so no row, card or
   sheet can clip it; credit.js sets left/top from the button's rectangle */
.credit-pop.credit-pop-fixed { position: fixed; right: auto; bottom: auto; left: 0; top: 0; z-index: 10050; max-width: 260px; min-width: 0; }

/* dark filter chips — the pack-selector look (packs.css .packs-loc-chip) shared
   by the Community feed + People filters. .chip-select wraps a real <select>
   (transparent, on top) so the phone's native picker opens; the visible label
   mirrors the selected option. .chip-btn is a toggle in the same shape. */
.chip-row { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-select, .chip-btn { flex-shrink: 0; position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px 7px 10px; border-radius: 999px; border: 1px solid var(--forest-800, #1a3a2a); background: var(--forest-800, #1a3a2a); color: #fff; font: inherit; font-size: 12.8px; font-weight: 600; line-height: 1.25; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: 100%; box-sizing: border-box; }
.chip-select .chip-label, .chip-btn .chip-label { overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.chip-select .icon-inline, .chip-btn .icon-inline { display: inline-flex; flex-shrink: 0; }
.chip-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; padding: 0; border: 0; font-size: 16px; cursor: pointer; -webkit-appearance: none; appearance: none; }
.chip-btn.chip-outline { background: #fff8ec; border-color: #f1e3c4; color: var(--forest-800, #1a3a2a); }
.chip-btn.chip-outline[aria-pressed="true"], .chip-btn.chip-outline.active { background: var(--forest-800, #1a3a2a); border-color: var(--forest-800, #1a3a2a); color: #fff; }