/* ═══════════════════════════════════════════════════════
FTUSA DESIGN SYSTEM
Fonts: Rubik (body), Source Serif Pro (headings), JetBrains Mono (data)
Navy: #313D7F Green: #93D73B Dark Green: #6B9D2B
Body: #666666 Headings: #313D7F Dark: #39373A
═══════════════════════════════════════════════════════ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Rubik", sans-serif; background: #ffffff; color: #666666; line-height: 1.7; font-size: 16px; -webkit-text-size-adjust: 100%; }
.mono { font-family: "JetBrains Mono", monospace; }
h1, h2, h3, h4 { font-family: "Source Serif Pro", serif; color: #313D7F; font-weight: 700; line-height: 1.15; }
a { color: #1B7F96; text-decoration: none; transition: color 0.2s; }
a:hover { color: #313D7F; }
/* GREEN UNDERLINE ACCENT — signature FTUSA pattern */
.section-heading { display: inline-block; margin-bottom: 40px; font-size: 30px; }
.section-heading::after { content: ''; display: block; width: 80px; height: 4px; background: #93D73B; margin-top: 12px; border-radius: 2px; }
/* ═══ TOP UTILITY BAR ═══ */
/* utility-bar removed — no longer used */
/* ═══ MAIN NAV ═══ */
.main-nav { position: sticky; top: 38px; background: white; border-bottom: 1px solid #e8e8e8; padding: 0 40px; display: flex; align-items: center; height: 60px; z-index: 1000; transition: background .35s ease, border-color .35s ease, box-shadow .35s ease; }
/* Transparent over the dark hero; flips to solid white once scrolled past it. */
.main-nav.nav-clear { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.main-nav.nav-clear .nav-links a { color: #fff; }
.main-nav.nav-clear .nav-links a:hover { color: #fff; }
.main-nav.nav-clear .nav-links a.active { color: #fff; border-bottom-color: #93D73B; }
.main-nav.nav-clear .nav-logo-word { color: #fff !important; }
.main-nav.nav-clear .hamburger-btn { color: #fff; }
/* ═══ MAP FULLSCREEN — available on ALL viewports (was mobile-only) ═══ */
#map-expand-btn { display: inline-flex !important; align-items: center; gap: 6px; position: absolute; right: 12px; bottom: 12px; z-index: 600; background: #313D7F; color: #fff; border: none; border-radius: 24px; padding: 9px 15px; font: 600 14px 'Rubik', sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(0,0,0,0.25); }
#map-expand-btn:hover { background: #232b5c; }
#map-expand-btn:active { transform: scale(0.97); }
body.map-fullscreen #map-expand-btn { display: none !important; }
body.map-fullscreen #map-close-btn { display: inline-flex !important; align-items: center; justify-content: center; position: fixed; top: 14px; right: 14px; z-index: 10100; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: #313D7F; border: 1px solid #313D7F; font-size: 28px; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.2); padding: 0; }
body.map-fullscreen { overflow: hidden !important; }
body.map-fullscreen #internal-banner, body.map-fullscreen .main-nav, body.map-fullscreen #chat-bubble { display: none !important; }
body.map-fullscreen #map-container { position: fixed !important; inset: 0 !important; z-index: 10000 !important; height: 100vh !important; width: 100vw !important; border-radius: 0 !important; margin: 0 !important; border: none !important; }
body.map-fullscreen #map-container > #world-map, body.map-fullscreen #world-map { height: 100vh !important; width: 100vw !important; border-radius: 0 !important; }
/* Profile/story modals opened from map dots must sit ABOVE the fullscreen
map (container z-index 10000); at 2000 they opened invisibly behind it,
which read as "cannot click the dots". */
body.map-fullscreen .modal-overlay { z-index: 10200 !important; }
.nav-logo { height: 56px; width: auto; margin-right: 40px; }
.nav-links { display: flex; gap: 32px; align-items: center; }
.nav-links a { font-size: 16px; color: #39373A; font-weight: 500; padding: 24px 0; border-bottom: 3px solid transparent; transition: all 0.2s; font-family: "Rubik", sans-serif; }
.nav-links a:hover { color: #313D7F; }
.nav-links a.active { color: #313D7F; border-bottom-color: #93D73B; }
.nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; color: #313D7F; align-items: center; justify-content: center; }
.signed-in-badge { display: none; font-size: 14px; color: #666; background: #f0f7e4; border: 1px solid #d4e8b4; border-radius: 16px; padding: 4px 12px; font-family: "Rubik", sans-serif; white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.signed-in-badge.visible { display: inline-block; }
.btn { display: inline-block; padding: 10px 24px; border-radius: 24px; font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.2s; text-decoration: none; border: 2px solid transparent; }
.btn-green { background: #93D73B; color: #1a3300; border-color: #93D73B; }
.btn-green:hover { background: #6B9D2B; border-color: #6B9D2B; color: #0F2400; }
.btn-outline { background: white; color: #39373A; border-color: #39373A; }
.btn-outline:hover { background: #39373A; color: white; }
.btn-navy { background: #313D7F; color: white; border-color: #313D7F; }
.btn-navy:hover { background: #232b5c; border-color: #232b5c; color: white; }
/* ═══ HERO ═══ */
.hero { background: #ffffff; padding: 60px 40px 48px; position: relative; overflow: hidden; }
.hero-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.hero-text h1 { font-size: 44px; line-height: 1.1; margin-bottom: 16px; color: #313D7F; }
.hero-text h1::after { content: ''; display: block; width: 80px; height: 4px; background: #93D73B; margin-top: 16px; border-radius: 2px; }
.hero-text p { font-size: 18px; color: #666666; margin-top: 24px; margin-bottom: 30px; line-height: 1.7; }
.hero-text .btn { margin-right: 12px; }
/* ── Hero people carousel (right column of hero) ── */
.hero-carousel { position: relative; width: 100%; height: 380px; border-radius: 20px; overflow: hidden; background: #1a2257; box-shadow: 0 8px 40px rgba(49,61,127,0.22); }
.hero-carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s ease; }
.hero-carousel-slide.active { opacity: 1; }
.hero-carousel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 15%; filter: grayscale(100%) contrast(1.15) brightness(0.68); mix-blend-mode: luminosity; }
.hero-carousel-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(18,24,72,0.88) 0%, rgba(18,24,72,0.1) 55%, transparent 100%); }
.hero-carousel-caption { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 40px 18px 14px; display: flex; flex-direction: column; gap: 3px; }
.hero-carousel-name { font: 700 15px "Source Serif Pro", serif; color: #fff; }
.hero-carousel-from { font: 400 11px "Rubik", sans-serif; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.5px; }
.hero-carousel-dots { position: absolute; bottom: 16px; right: 16px; z-index: 3; display: flex; gap: 6px; }
.hero-carousel-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.28); border: none; padding: 0; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.hero-carousel-dot.on { background: #93D73B; transform: scale(1.4); }
.kpis-bar { background: #f5f5f5; padding: 40px 40px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; }
.kpi { text-align: center; }
.kpi-value { font-size: 36px; font-weight: 700; color: #313D7F; font-family: "JetBrains Mono", monospace; margin-bottom: 8px; }
.kpi-label { font-size: 15px; color: #666666; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
/* ═══ SECTIONS ═══ */
.section { padding: 80px 40px; max-width: 1200px; margin: 0 auto; scroll-margin-top: 72px; }
.section-alt { background: #f5f5f5; }
.section-alt .section { max-width: 1200px; margin: 0 auto; }
.section-green { background: #487410; color: white; padding: 60px 40px; }
.section-green h2, .section-green h3 { color: white; }
.section-green .section-heading::after { background: #93D73B; }
/* ═══ PROGRAM DATA TABLES ═══ */
.program-data { margin-bottom: 48px; }
.program-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.program-table-card { background: white; border: 1px solid #e8e8e8; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.program-table-card h4 { font-size: 18px; margin-bottom: 16px; font-family: "Source Serif Pro", serif; color: #313D7F; }
.program-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.program-table thead { background: #f5f5f5; }
.program-table th { padding: 10px 14px; text-align: right; font-size: 13px; font-weight: 600; color: #313D7F; text-transform: uppercase; letter-spacing: 0.3px; }
.program-table th:first-child { text-align: left; }
.program-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid #f0f0f0; color: #39373A; font-family: "JetBrains Mono", monospace; font-size: 14px; }
.program-table td:first-child { font-family: "Rubik", sans-serif; font-weight: 500; text-align: left; font-size: 15px; }
.program-table tr.total-row td { font-weight: 700; border-top: 2px solid #313D7F; color: #313D7F; }
.program-table .year-header { color: #313D7F; }
.trend-up { color: #4A7A1B; }
.trend-down { color: #D35E28; }
.tab-buttons { display: flex; gap: 8px; margin-bottom: 20px; }
/* ═══ MAP UX UPGRADES ═══ */
.map-controls { transition: all 0.3s ease; }
.map-controls.collapsed { padding: 8px 12px; max-width: 48px; overflow: hidden; }
.map-controls.collapsed .map-control-group { display: none; }
.map-ctrl-toggle { background: none; border: none; font-size: 13px; color: #313D7F; cursor: pointer; padding: 2px 6px; margin-left: auto; flex-shrink: 0; font-family: "Rubik", sans-serif; font-weight: 600; }
.map-controls.collapsed .map-ctrl-toggle { margin-left: 0; font-size: 13px; }
.map-legend .legend-body { transition: all 0.3s; overflow: hidden; }
.map-legend.collapsed .legend-body { max-height: 0; overflow: hidden; padding: 0; }
.legend-section { font-size: 12px; font-weight: 700; color: #313D7F; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; padding-top: 2px; display: inline-block; margin-right: 8px; font-weight: 600; }
.legend-group { display: block; }
/* ═══ LEAFLET INTEGRATION ═══ */
#world-map { width: 100%; height: 100%; z-index: 1; }
.leaflet-container { background: #eaeef2; font-family: "Rubik", sans-serif; }
.leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 6px 24px rgba(49,61,127,0.18); }
.leaflet-popup-content { margin: 16px 20px; font-family: "Rubik", sans-serif; font-size: 16px; color: #39373A; line-height: 1.5; min-width: 220px; }
.leaflet-popup-content h4 { font-family: "Source Serif Pro", serif; color: #313D7F; font-size: 24px; margin: 0 0 6px 0; font-weight: 700; }
.leaflet-popup-content .pop-meta { font-size: 15px; color: #767676; margin-bottom: 8px; }
.leaflet-popup-content .pop-link { display: inline-block; margin-top: 10px; color: #313D7F; font-weight: 600; font-size: 15px; text-decoration: underline; cursor: pointer; }
.leaflet-popup-content .pop-indicator { margin-top: 10px; padding-top: 10px; border-top: 1px solid #eee; font-size: 15px; color: #666; }
.leaflet-popup-content .pop-indicator strong { color: #313D7F; }
.leaflet-control-attribution { font-size: 12px !important; background: rgba(255,255,255,0.8) !important; }
.leaflet-control-zoom { border: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; }
.leaflet-control-zoom a { background: white !important; color: #313D7F !important; border: 1px solid #e8e8e8 !important; }
.leaflet-control-zoom a:hover { background: #f5f5f5 !important; }
/* ═══ MAP ═══ */
#map-container { background: #eaeef2; border-radius: 16px; overflow: hidden; border: 1px solid #e8e8e8; height: 680px; position: relative; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
.map-controls { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border: 1px solid rgba(232,232,232,0.8); border-radius: 12px; padding: 10px 14px; z-index: 500; display: flex; flex-direction: column; gap: 6px; max-width: 900px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.map-control-row { display: flex; gap: 10px; align-items: center; }
.map-legend { position: absolute; bottom: 20px; left: 16px; background: white; border: 1px solid #e8e8e8; border-radius: 10px; padding: 12px 20px; z-index: 500; font-size: 13px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); max-width: 92%; width: auto; }
.map-legend-title { font-weight: 600; color: #313D7F; margin-bottom: 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; }
.legend-section { display: block; clear: both; font-weight: 600; color: #313D7F; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin-top: 8px; margin-bottom: 4px; }
.legend-section:first-child { margin-top: 0; }
.legend-row { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; }
.legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.legend-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.legend-line { width: 16px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.map-control-group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.map-control-label { font-size: 13px; font-weight: 600; color: #666666; text-transform: uppercase; letter-spacing: 0.5px; }
.pill { border: 1px solid #e8e8e8; background: white; color: #39373A; padding: 5px 12px; border-radius: 20px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all 0.2s; font-family: "Rubik", sans-serif; white-space: nowrap; }
.pill:hover { background: #f5f5f5; }
#category-control-row .map-control-group { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.pill.active { background: #93D73B; color: #39373A; border-color: #93D73B; }
/* ═══ ADMIN PANEL ═══ */
.admin-trigger { background: none; border: 1px solid #e0e0e0; color: #666; padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 500; font-family: "Rubik", sans-serif; margin-left: 8px; transition: all 0.2s; display: none; }
.admin-trigger.visible { display: inline-block; }
.admin-trigger:hover { border-color: #313D7F; color: #313D7F; }
/* Login overlay */
.login-overlay { position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#313D7F 0%,#1a2350 100%);z-index:100000;display:flex;align-items:center;justify-content:center;font-family:"Rubik",sans-serif; }
.login-box { background:#fff;border-radius:16px;padding:48px 40px;max-width:380px;width:90%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,0.3); }
.login-box img { width:60px;margin-bottom:16px; }
.login-box h2 { font-family:"Source Serif Pro",serif;color:#313D7F;font-size:24px;margin:0 0 6px; }
.login-box p { color:#666;font-size:14px;margin:0 0 24px; }
.login-box input { width:100%;padding:12px 16px;border:1px solid #ddd;border-radius:8px;font-size:15px;font-family:"Rubik",sans-serif;margin-bottom:12px;box-sizing:border-box;transition:border-color 0.2s; }
.login-box input:focus { outline:none;border-color:#313D7F; }
.login-box button { width:100%;padding:12px;background:#313D7F;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;font-family:"Rubik",sans-serif;cursor:pointer;transition:background 0.2s; }
.login-box button:hover { background:#44AEC8; }
.login-error { color:#D35E28;font-size:13px;margin-top:8px;display:none; }
.admin-overlay { position: fixed; inset: 0; background: rgba(49,61,127,0.45); backdrop-filter: blur(6px); z-index: 3000; display: none; padding: 40px 20px; overflow-y: auto; }
.admin-overlay.active { display: flex; align-items: flex-start; justify-content: center; }
.admin-panel { background: white; border-radius: 20px; width: 100%; max-width: 1100px; max-height: calc(100vh - 80px); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0,0,0,0.24); }
.admin-header { padding: 24px 32px; border-bottom: 1px solid #e8e8e8; display: flex; justify-content: space-between; align-items: center; }
.admin-header h2 { font-family: "Source Serif Pro", serif; color: #313D7F; font-size: 24px; margin: 0; }
.admin-header .admin-subtitle { font-size: 14px; color: #767676; margin-top: 4px; }
.admin-close { background: none; border: none; font-size: 28px; cursor: pointer; color: #767676; padding: 0 8px; }
.admin-close:hover { color: #313D7F; }
.admin-tabs { display: flex; border-bottom: 1px solid #e8e8e8; padding: 0 32px; gap: 0; flex-shrink: 0; overflow-x: auto; }
.admin-tab { padding: 14px 18px; background: none; border: none; cursor: pointer; font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 500; color: #666; border-bottom: 3px solid transparent; white-space: nowrap; transition: all 0.15s; }
.admin-tab:hover { color: #313D7F; }
.admin-tab.active { color: #313D7F; border-bottom-color: #93D73B; font-weight: 600; }
.admin-content { padding: 32px; overflow-y: auto; flex: 1; }
.admin-panel-section { display: none; }
.admin-panel-section.active { display: block; }
.admin-panel-section h3 { font-family: "Source Serif Pro", serif; color: #313D7F; font-size: 20px; margin-bottom: 6px; }
.admin-panel-section .admin-section-desc { font-size: 15px; color: #666; margin-bottom: 24px; }
.admin-form-row { margin-bottom: 16px; }
.admin-form-row label { display: block; font-size: 13px; font-weight: 700; color: #313D7F; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.admin-form-row input, .admin-form-row textarea, .admin-form-row select { width: 100%; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: "Rubik", sans-serif; font-size: 15px; color: #39373A; box-sizing: border-box; }
.admin-form-row input:focus, .admin-form-row textarea:focus, .admin-form-row select:focus { outline: none; border-color: #93D73B; }
.admin-form-row textarea { min-height: 140px; resize: vertical; font-family: "Rubik", sans-serif; line-height: 1.5; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-btn { padding: 10px 20px; border-radius: 8px; font-family: "Rubik", sans-serif; font-size: 15px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
.admin-btn.primary { background: #313D7F; color: white; }
.admin-btn.primary:hover { background: #232b5c; }
.admin-btn.secondary { background: white; color: #313D7F; border: 1px solid #313D7F; }
.admin-btn.secondary:hover { background: #f5f5f5; }
.admin-btn.danger { background: white; color: #D35E28; border: 1px solid #D35E28; }
.admin-btn.danger:hover { background: #fff5f0; }
.admin-status { padding: 12px 16px; border-radius: 8px; font-size: 15px; margin-top: 16px; display: flex; align-items: center; gap: 10px; }
.admin-status::before { content: ''; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.admin-status.not-connected { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.admin-status.not-connected::before { background: #f59e0b; }
.admin-status.connected { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.admin-status.connected::before { background: #10b981; }
.admin-note { padding: 14px 18px; background: #f7f8fa; border-left: 3px solid #313D7F; border-radius: 6px; font-size: 14px; color: #666; margin-top: 16px; line-height: 1.6; }
.admin-note strong { color: #313D7F; }
.admin-dropzone { border: 2px dashed #d0d0d0; border-radius: 12px; padding: 48px 32px; text-align: center; cursor: pointer; transition: all 0.2s; background: #fafbfc; }
.admin-dropzone:hover, .admin-dropzone.dragover { border-color: #93D73B; background: #f8fdf0; }
.admin-dropzone .dropzone-icon { font-size: 36px; color: #767676; margin-bottom: 8px; }
.admin-dropzone p { font-size: 15px; color: #666; margin: 8px 0 0 0; }
.admin-dropzone p.sub { font-size: 14px; color: #767676; }
.admin-dropzone input[type="file"] { display: none; }
.upload-preview { margin-top: 20px; }
.upload-preview table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid #e8e8e8; border-radius: 8px; overflow: hidden; }
.upload-preview th { background: #f5f5f5; padding: 8px 12px; text-align: left; font-weight: 600; color: #313D7F; font-size: 13px; text-transform: uppercase; }
.upload-preview td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; font-family: "JetBrains Mono", monospace; font-size: 13px; color: #39373A; }
.upload-preview .preview-info { font-size: 14px; color: #666; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.stories-admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stories-admin-table th { background: #f5f5f5; padding: 10px 12px; text-align: left; font-size: 12px; font-weight: 700; color: #313D7F; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 2px solid #e8e8e8; }
.stories-admin-table td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; color: #39373A; vertical-align: top; }
.stories-admin-table tr { cursor: pointer; transition: background 0.1s; }
.stories-admin-table tr:hover { background: #fafbf5; }
.stories-admin-table .td-name { font-weight: 600; color: #313D7F; max-width: 220px; }
.stories-admin-table .td-title { max-width: 260px; color: #666; }
.stories-admin-table .td-badge { display: inline-block; padding: 2px 8px; background: #eaf5d6; color: #4A7A1B; border-radius: 10px; font-size: 12px; font-weight: 600; }
.admin-search-row { display: flex; gap: 12px; margin-bottom: 16px; align-items: center; }
.admin-search-row input { flex: 1; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 8px; font-family: "Rubik", sans-serif; font-size: 15px; }
.admin-search-row .admin-count { font-size: 14px; color: #767676; }
.story-edit-modal { position: fixed; inset: 0; background: rgba(49,61,127,0.5); backdrop-filter: blur(4px); z-index: 4000; display: none; padding: 40px 20px; overflow-y: auto; }
.story-edit-modal.active { display: flex; align-items: flex-start; justify-content: center; }
.story-edit-inner { background: white; border-radius: 16px; max-width: 760px; width: 100%; padding: 32px; box-shadow: 0 24px 80px rgba(0,0,0,0.3); }
.story-edit-inner h3 { font-family: "Source Serif Pro", serif; color: #313D7F; margin-bottom: 20px; font-size: 22px; }
.story-edit-actions { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #e8e8e8; justify-content: flex-end; }
.export-card { background: white; border: 1px solid #e8e8e8; border-radius: 12px; padding: 24px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.export-card .export-info h4 { font-family: "Source Serif Pro", serif; color: #313D7F; font-size: 16px; margin-bottom: 4px; }
.export-card .export-info p { font-size: 14px; color: #666; margin: 0; }
/* ═══ TABLES ═══ */
.table-wrapper { background: white; border: 1px solid #e8e8e8; border-radius: 16px; overflow: auto; box-shadow: 0 2px 12px rgba(0,0,0,0.04); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
thead { background: #f5f5f5; }
th { padding: 16px 20px; text-align: left; font-weight: 600; color: #313D7F; cursor: pointer; user-select: none; white-space: nowrap; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
th:hover { background: #eaeaea; }
td { padding: 14px 20px; border-bottom: 1px solid #f0f0f0; color: #39373A; }
tbody tr:hover { background: #fafbf5; }
/* ═══ ANALYTICS ═══ */
.metrics-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; margin-bottom: 48px; }
.metric-card { background: white; border: 1px solid #e8e8e8; padding: 28px; border-radius: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.metric-value { font-size: 32px; font-weight: 700; color: #313D7F; margin-bottom: 8px; font-family: "JetBrains Mono", monospace; }
.metric-label { font-size: 13px; color: #666666; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.analytics-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 48px; }
.analytics-table { background: white; border: 1px solid #e8e8e8; border-radius: 16px; padding: 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.analytics-table h4 { font-size: 16px; font-weight: 700; margin-bottom: 16px; font-family: "Source Serif Pro", serif; color: #313D7F; }
.analytics-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.analytics-row:last-child { border-bottom: none; }
.analytics-row strong { color: #39373A; font-weight: 500; }
.analytics-row span { color: #666666; font-family: "JetBrains Mono", monospace; font-size: 14px; }
.analytics-collapse-header { cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e8e8e8; margin-bottom: 16px; }
.analytics-collapse-header .collapse-arrow { transition: transform 0.3s; font-size: 14px; color: #767676; }
.analytics-collapse-header.collapsed .collapse-arrow { transform: rotate(-90deg); }
/* Collapsed-state preview so the section isn't a bare caret (shows key totals) */
.analytics-collapse-header .collapsed-preview { display: none; font-family: 'Rubik', sans-serif; font-size: 12.5px; font-weight: 400; color: #767676; margin-left: auto; margin-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analytics-collapse-header.collapsed .collapsed-preview { display: inline-block; }
@media (max-width: 768px) { .analytics-collapse-header .collapsed-preview { font-size: 11.5px; max-width: 60%; } }
.analytics-bar { height: 28px; border-radius: 4px; background: linear-gradient(90deg, #313D7F, #4A5BA0); margin-bottom: 4px; transition: width 0.8s; display: flex; align-items: center; padding: 0 10px; color: white; font-size: 13px; font-weight: 600; }
.analytics-bar-container { margin-bottom: 20px; }
.analytics-bar-label { display: flex; justify-content: space-between; font-size: 13px; color: #39373A; margin-bottom: 2px; }
.analytics-bar-label span:last-child { font-family: "JetBrains Mono", monospace; color: #666; }
/* Dashboard layout — FTUSA brand */
.dashboard-metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.dashboard-metric-card { padding: 28px 28px 24px; border-radius: 14px; position: relative; overflow: hidden; }
.dashboard-metric-card.navy { background: #313D7F; }
.dashboard-metric-card.teal { background: #44AEC8; }
.dashboard-metric-card.green { background: #6B9D2B; }
.dashboard-metric-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,0.08); pointer-events: none; }
.dashboard-metric-value { font-size: 36px; font-weight: 700; color: #fff; margin-bottom: 6px; font-family: "JetBrains Mono", monospace; }
.dashboard-metric-label { font-size: 12px; color: rgba(255,255,255,0.8); font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; }
/* Contrast review 2026-08-25: white text held AA only on the navy card.
Measured on the actual backgrounds: teal 2.58:1 for the value, and the
0.8-alpha white label read 2.17 to 3.84 on teal, green, coral and purple.
The light and mid tiles now take solid dark text in their own hue, the
treatment the gold card already used; hierarchy comes from size and
weight, never from alpha, because alpha is what failed. All pairs are
pinned in tools/a11y-check.mjs. */
.dashboard-metric-card.coral { background: #E8743B; }
.dashboard-metric-card.purple { background: #5A6BB5; }
.dashboard-metric-card.gold { background: #EBC44E; }
.dashboard-metric-card.teal .dashboard-metric-value,
.dashboard-metric-card.teal .dashboard-metric-label { color: #0B3540; }
.dashboard-metric-card.green .dashboard-metric-value,
.dashboard-metric-card.green .dashboard-metric-label { color: #0F2400; }
.dashboard-metric-card.coral .dashboard-metric-value,
.dashboard-metric-card.coral .dashboard-metric-label { color: #3D1503; }
.dashboard-metric-card.purple .dashboard-metric-label { color: #FFFFFF; }
.dashboard-metric-card.gold .dashboard-metric-value { color: #313D7F; }
.dashboard-metric-card.gold .dashboard-metric-label { color: #313D7F; }
.dashboard-metric-card.gold::after { background: rgba(255,255,255,0.22); }
/* Partner hero metric strip — solid FTUSA cards on a light band under the hero */
.partner-metrics-band { background: #fff; border-bottom: 1px solid #eceef3; }
.partner-metrics-band .inner { max-width: 1140px; margin: 0 auto; padding: 28px 28px 30px; }
.partner-metrics-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.partner-metrics-row .dashboard-metric-value { font-size: clamp(20px, 2.4vw, 28px); margin-bottom: 6px; letter-spacing: -0.5px; line-height: 1.1; overflow-wrap: anywhere; }
.partner-metrics-row .dashboard-metric-card { padding: 20px 20px 18px; }
@media (max-width: 560px) { .partner-metrics-row { grid-template-columns: 1fr 1fr; } }
.dashboard-charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; }
.dashboard-chart-card { background: white; border: 1px solid #e8e8e8; border-radius: 16px; padding: 24px 28px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
/* Scroll-reveal for charts — enabled only when JS adds .charts-animate, so the
charts are never hidden if scripts fail or reduced-motion is on. */
.charts-animate .dashboard-chart-card { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.charts-animate .dashboard-chart-card.chart-in { opacity: 1; transform: none; }
.charts-animate .dashboard-chart-card svg { opacity: 0; transform: scale(.93); transform-origin: center; transition: opacity .85s ease .12s, transform .9s cubic-bezier(.2,.7,.2,1) .12s; }
.charts-animate .dashboard-chart-card.chart-in svg { opacity: 1; transform: none; }
.dashboard-chart-card h4 { font-size: 18px; font-weight: 700; color: #313D7F; font-family: 'Source Serif Pro', serif; margin: 0 0 16px 0; padding-bottom: 12px; border-bottom: 2px solid #93D73B; }
.dashboard-table-details { margin-bottom: 16px; }
.dashboard-table-details > summary { cursor: pointer; font-weight: 700; font-size: 15px; color: #313D7F; padding: 12px 0; font-family: "Source Serif Pro", serif; list-style: none; display: flex; align-items: center; gap: 8px; }
.dashboard-table-details > summary::before { content: "▶"; font-size: 11px; color: #767676; transition: transform 0.3s; display: inline-block; } /* literal char — unicode escapes break in the JSON.stringify build */
.dashboard-table-details[open] > summary::before { transform: rotate(90deg); }
.dashboard-table-details > summary::-webkit-details-marker { display: none; }
@media (max-width: 768px) {
.dashboard-metrics-row { grid-template-columns: 1fr; }
.dashboard-charts-row { grid-template-columns: 1fr; }
/* The map-section KPI band is inline background:transparent for the desktop
cinematic look; on mobile that let lower sections ghost through the cards.
Give it a solid, opaque backdrop and its own stacking context so the
cards always sit cleanly over the section. */
.partner-metrics-band { background: #fff !important; position: relative; z-index: 2; isolation: isolate; }
.partner-metrics-band .inner { padding: 16px 0 4px !important; }
.partner-metrics-row { gap: 12px; }
}
.premium-breakdown { background: white; border: 1px solid #e8e8e8; border-radius: 16px; padding: 28px; margin-bottom: 48px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.breakdown-item { display: flex; align-items: center; margin-bottom: 16px; }
.breakdown-item:last-child { margin-bottom: 0; }
.breakdown-bar { flex: 1; height: 28px; background: #f0f0f0; border-radius: 6px; overflow: hidden; margin: 0 16px; position: relative; }
.breakdown-fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; color: white; font-size: 13px; font-weight: 600; border-radius: 6px; }
.breakdown-label { font-size: 15px; font-weight: 500; color: #39373A; min-width: 160px; }
.breakdown-value { min-width: 140px; text-align: right; font-family: "JetBrains Mono", monospace; font-size: 14px; color: #666666; }
/* ═══ SYNERGY TILES ═══ */
.synergy-card {
background: #fff;
border: 1px solid #e8e8e8;
border-left: 3px solid #313D7F;
border-radius: 14px;
padding: 24px;
min-height: 280px;
overflow: hidden;
cursor: pointer;
transition: box-shadow 0.25s, transform 0.25s;
display: flex;
flex-direction: column;
position: relative;
}
.synergy-card:hover {
box-shadow: 0 8px 32px rgba(49,61,127,0.12);
transform: translateY(-2px);
}
.synergy-card .synergy-title {
font-family: 'Source Serif Pro', serif;
font-size: 17px;
font-weight: 700;
color: #313D7F;
margin-bottom: 10px;
line-height: 1.35;
}
.synergy-card .synergy-body-preview {
font-size: 14px;
color: #555;
line-height: 1.65;
margin-bottom: 14px;
flex: 1;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.synergy-card .synergy-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.synergy-card .synergy-tag {
font-size: 11px;
font-weight: 600;
color: #313D7F;
background: rgba(49,61,127,0.08);
padding: 3px 10px;
border-radius: 20px;
}
.synergy-card .synergy-hint {
font-size: 11px;
color: #44AEC8;
text-align: center;
margin-top: auto;
padding-top: 6px;
font-weight: 600;
letter-spacing: 0.3px;
text-transform: uppercase;
opacity: 0.7;
transition: opacity 0.2s;
}
.synergy-card:hover .synergy-hint { opacity: 1; }
/* Synergy overlay modal — immersive */
.synergy-overlay {
position: fixed; inset: 0;
background: rgba(49,61,127,0.5);
backdrop-filter: blur(8px);
z-index: 2500;
display: none;
overflow-y: auto;
padding: 40px 20px;
}
.synergy-overlay.active { display: flex; align-items: flex-start; justify-content: center; }
.synergy-overlay-inner {
background: white;
border-radius: 20px;
max-width: 860px;
width: 100%;
position: relative;
box-shadow: 0 24px 80px rgba(0,0,0,0.28);
overflow: hidden;
}
.synergy-overlay-close {
position: absolute; top: 16px; right: 20px;
background: rgba(255,255,255,0.9); border: none; font-size: 24px;
cursor: pointer; color: #313D7F; padding: 4px 10px;
border-radius: 50%; z-index: 10; line-height: 1;
}
.synergy-overlay-close:hover { background: white; }
/* Hero banner */
.synergy-hero {
background: #313D7F;
padding: 40px 44px 32px;
position: relative;
overflow: hidden;
}
/* FTUSA seal — sits top-right of the hero. Semi-transparent so it reads
as a watermark seal on screen; the PDF export uses the same asset at
full opacity in the header. */
.synergy-hero .ftusa-seal {
position: absolute; top: 24px; right: 28px;
width: 84px; height: 84px;
opacity: 0.9;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15));
pointer-events: none;
}
.synergy-hero h3 {
font-family: 'Source Serif Pro', serif;
color: #fff; font-size: 26px;
margin: 0 0 8px 0; padding-right: 110px;
line-height: 1.3; letter-spacing: -0.01em;
}
.synergy-hero .synergy-subtitle {
font-family: 'Source Serif Pro', serif;
font-style: italic;
font-size: 16px;
color: rgba(255,255,255,0.78);
margin: 0 0 16px 0;
padding-right: 110px;
line-height: 1.5;
}
.synergy-hero .synergy-key-insight {
font-size: 15px; color: rgba(255,255,255,0.95);
line-height: 1.6; margin: 0;
padding: 12px 16px;
background: rgba(255,255,255,0.1);
border-left: 3px solid rgba(255,255,255,0.4);
border-radius: 4px;
}
/* Article-format body: subheadings (## from Markdown), pull quotes (> ),
and dense prose. Designed to feel like a two-page research article. */
.synergy-overlay-body h4.body-section {
font-family: 'Source Serif Pro', serif;
color: #313D7F;
font-size: 19px;
font-weight: 700;
margin: 28px 0 12px;
padding-bottom: 6px;
border-bottom: 2px solid #e8e8e8;
letter-spacing: -0.005em;
}
.synergy-overlay-body h4.body-section:first-child { margin-top: 4px; }
.synergy-overlay-body blockquote.pull-quote {
font-family: 'Source Serif Pro', serif;
font-style: italic;
font-size: 20px;
line-height: 1.45;
color: #313D7F;
margin: 24px 0;
padding: 18px 28px;
border-left: 4px solid #44AEC8;
background: linear-gradient(180deg, #f7f9fc, #fff);
border-radius: 0 8px 8px 0;
position: relative;
}
.synergy-overlay-body blockquote.pull-quote::before {
content: "“"; /* opening curly double quote — literal char; unicode escapes break in the JSON.stringify build */
position: absolute; top: 4px; left: 10px;
font-size: 40px; color: #44AEC8;
opacity: 0.4; font-family: Georgia, serif;
line-height: 1;
}
.synergy-overlay-body p { margin: 0 0 14px 0; }
/* Content area */
.synergy-overlay-content { padding: 32px 44px 40px; }
/* Map section */
.synergy-overlay-map {
background: #f7f8fa; border-radius: 14px;
padding: 20px; margin-bottom: 28px;
text-align: center; border: 1px solid #e8e8e8;
}
.synergy-overlay-map .map-label {
font-size: 11px; font-weight: 600; color: #313D7F;
text-transform: uppercase; letter-spacing: 0.5px;
margin-bottom: 12px;
}
.synergy-regions-list {
display: flex; gap: 8px; flex-wrap: wrap;
justify-content: center; margin-top: 12px;
}
.synergy-regions-list .region-chip {
font-size: 12px; font-weight: 600; color: #313D7F;
background: white; border: 1px solid #d0d4e8;
padding: 4px 12px; border-radius: 20px;
}
/* Stats row */
.synergy-stats-row {
display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 16px; margin-bottom: 28px;
}
.synergy-stat-card {
background: #f7f8fa; border-radius: 12px; padding: 16px 20px;
border-left: 3px solid #93D73B; text-align: left;
}
.synergy-stat-value {
font-size: 20px; font-weight: 700; color: #313D7F;
font-family: 'JetBrains Mono', monospace; margin-bottom: 2px;
}
.synergy-stat-label {
font-size: 11px; color: #666; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
}
/* Narrative body */
.synergy-overlay-body {
font-size: 15px; color: #39373A;
line-height: 1.85; margin-bottom: 28px;
}
.synergy-overlay-body strong { color: #313D7F; }
/* Organizations section */
.synergy-orgs-section {
background: #f7f8fa; border-radius: 14px; padding: 20px 24px;
margin-bottom: 28px; border: 1px solid #e8e8e8;
}
.synergy-orgs-section h4 {
font-size: 14px; font-weight: 600; color: #313D7F;
text-transform: uppercase; letter-spacing: 0.5px;
margin: 0 0 12px 0;
font-family: "Rubik", sans-serif;
}
.synergy-orgs-grid {
display: flex; gap: 8px; flex-wrap: wrap;
}
.synergy-org-chip {
font-size: 13px; color: #444; background: white;
border: 1px solid #ddd; padding: 6px 14px;
border-radius: 8px; font-weight: 600;
font-family: "Rubik", sans-serif;
}
/* Tags footer */
.synergy-overlay-tags {
display: flex; gap: 8px; flex-wrap: wrap;
padding-top: 20px; border-top: 1px solid #e8e8e8;
}
.synergy-overlay-tags .synergy-tag {
font-size: 12px; font-weight: 600; color: #313D7F;
background: rgba(49,61,127,0.08); padding: 5px 14px;
border-radius: 20px;
}
/* ═══ SYNERGIES LIBRARY ═══ */
.synergies-library-overlay {
display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.6); z-index: 9999; backdrop-filter: blur(4px);
}
.synergies-library-overlay.active { display: flex; align-items: flex-start; justify-content: center; }
.synergies-library-inner {
background: white; border-radius: 16px; max-width: 960px; width: 95%;
max-height: 90vh; overflow: hidden; margin-top: 5vh;
box-shadow: 0 20px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column;
min-height: 0; /* allow flex children to actually shrink */
}
/* library-list-view: make it a flex column so its scroll-area child can grow.
Was missing height/flex setup → child's `flex:1` did nothing → couldn't scroll. */
#library-list-view {
display: flex; flex-direction: column;
flex: 1 1 auto; min-height: 0;
width: 100%;
}
.synergies-library-header {
padding: 28px 32px 20px; border-bottom: 1px solid #eee;
display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.synergies-library-header h3 {
font-family: 'Source Serif Pro', serif; color: #313D7F; font-size: 24px; margin: 0;
}
.library-scroll-area { overflow-y: auto; flex: 1; }
.library-gen-item {
padding: 16px 32px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
transition: background 0.15s;
}
.library-gen-item:hover { background: #f8f9ff; }
.library-gen-item.expanded { background: #f5f7ff; }
.library-gen-date { font-size: 15px; font-weight: 600; color: #313D7F; }
.library-gen-meta { font-size: 12px; color: #767676; margin-top: 2px; }
.library-gen-titles { font-size: 13px; color: #555; margin-top: 6px; line-height: 1.5; }
/* Legacy classes kept for safety; new design uses .library-tile-grid below */
.library-gen-cards { display: none; }
.library-card-mini { display: none; }
/* ── New tile-based library layout ── */
.library-tile-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
gap: 16px;
padding: 20px 24px 28px;
}
.library-tile {
background: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 14px;
padding: 18px 18px 16px;
cursor: pointer;
transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
display: flex; flex-direction: column;
position: relative;
overflow: hidden;
}
.library-tile::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, #313D7F, #44AEC8);
opacity: 0.85;
}
.library-tile:hover {
box-shadow: 0 8px 24px rgba(49,61,127,0.14);
transform: translateY(-2px);
border-color: rgba(49,61,127,0.25);
}
.library-tile-meta {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: #888;
text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
margin-bottom: 10px;
}
.library-tile-lang {
display: inline-flex; align-items: center; gap: 4px;
background: #f0f4ff; color: #313D7F;
padding: 3px 9px; border-radius: 10px;
font-size: 10.5px; letter-spacing: 0.3px;
}
.library-tile h4 {
font-family: 'Source Serif Pro', serif;
font-size: 17px; color: #313D7F;
margin: 0 0 8px; line-height: 1.3;
font-weight: 700;
}
.library-tile .library-tile-insight {
font-size: 13px; color: #1B7F96; font-style: italic;
line-height: 1.5; margin: 0 0 10px;
font-weight: 500;
}
.library-tile .library-tile-body {
font-size: 13px; color: #555;
line-height: 1.55; margin: 0 0 12px;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
overflow: hidden;
}
.library-tile-tags {
display: flex; flex-wrap: wrap; gap: 5px;
margin-top: auto; padding-top: 10px;
border-top: 1px solid #f0f0f0;
}
.library-tile-tag {
background: #f5f7fa; color: #555;
padding: 3px 9px; border-radius: 10px;
font-size: 11px; font-weight: 500;
}
.library-tile-tag.region { background: #eaf2ed; color: #2d6a4f; }
.library-tile-cta {
font-size: 11.5px; color: #313D7F; font-weight: 600;
margin-top: 8px; display: flex; align-items: center; gap: 4px;
}
.library-tile.archived {
opacity: 0.65; cursor: default;
background: linear-gradient(180deg, #fafafa, #f5f5f5);
}
.library-tile.archived:hover { box-shadow: none; transform: none; border-color: #e8e8e8; }
.library-tile.archived::before { background: linear-gradient(90deg, #bbb, #ddd); }
.library-tile.archived h4 { color: #888; }
/* Optional: a small section header above the grid that summarizes the result count */
.library-summary {
padding: 16px 28px 0; font-size: 13px; color: #888;
display: flex; justify-content: space-between; align-items: center;
}
.library-lang-tab { padding: 6px 16px; border-radius: 20px; border: 1px solid #ddd; background: white; cursor: pointer; font-size: 13px; font-weight: 500; color: #555; transition: all 0.15s; }
.library-lang-tab.active { background: #313D7F; color: white; border-color: #313D7F; }
.library-no-cards-badge { display: inline-block; font-size: 10px; color: #767676; background: #f0f0f0; padding: 2px 8px; border-radius: 10px; margin-left: 8px; }
/* Library card detail view (inside library overlay) */
.library-card-detail { display: none; flex-direction: column; height: 100%; }
.library-card-detail.active { display: flex; }
.library-card-detail-header { padding: 16px 32px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.library-back-btn { background: none; border: 1px solid #ddd; border-radius: 8px; padding: 6px 14px; font-size: 13px; cursor: pointer; color: #313D7F; font-weight: 600; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
.library-back-btn:hover { background: #f0f4ff; border-color: #313D7F; }
.library-card-nav { display: flex; gap: 6px; margin-left: auto; }
.library-card-nav button { background: #f0f4ff; border: 1px solid #ddd; border-radius: 6px; width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: #313D7F; transition: all 0.15s; }
.library-card-nav button:hover { background: #313D7F; color: white; }
.library-card-nav button:disabled { opacity: 0.3; cursor: default; background: #f0f0f0; color: #767676; }
.library-detail-scroll { overflow-y: auto; flex: 1; padding: 32px; }
.library-detail-title { font-family: 'Source Serif Pro', serif; font-size: 28px; color: #313D7F; margin: 0 0 8px; line-height: 1.3; }
.library-detail-insight { font-size: 16px; color: #555; line-height: 1.5; margin-bottom: 24px; font-style: italic; }
.library-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; }
.library-detail-stat { background: #f5f7ff; border-radius: 10px; padding: 14px; text-align: center; }
.library-detail-stat-val { font-size: 20px; font-weight: 700; color: #313D7F; }
.library-detail-stat-lbl { font-size: 12px; color: #666; margin-top: 2px; }
.library-detail-body { font-size: 15px; color: #39373A; line-height: 1.75; }
.library-detail-body strong { color: #313D7F; }
.library-detail-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.library-detail-tag { background: #f0f4ff; color: #313D7F; padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; }
.library-detail-meta { font-size: 12px; color: #767676; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; }
@media (max-width: 768px) { .library-gen-cards { grid-template-columns: 1fr; } .synergies-library-inner { width: 98%; } .library-detail-title { font-size: 22px; } .library-detail-scroll { padding: 20px; } }
/* ═══ STORIES ═══ */
.stories-filters { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; align-items: center; }
.filter-group { display: flex; gap: 8px; align-items: center; }
.filter-label { font-size: 14px; font-weight: 600; color: #313D7F; text-transform: uppercase; letter-spacing: 0.3px; }
.filter-select { padding: 8px 14px; border: 1px solid #e8e8e8; border-radius: 8px; font-size: 16px; font-family: "Rubik", sans-serif; background: white; color: #39373A; min-height: 44px; }
.search-input { padding: 8px 14px; border: 1px solid #e8e8e8; border-radius: 8px; font-size: 15px; font-family: "Rubik", sans-serif; width: 240px; }
.stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.story-card { background: white; border: 1px solid #e8e8e8; border-radius: 16px; overflow: hidden; cursor: pointer; transition: all 0.3s; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
.story-card:hover { border-color: #93D73B; box-shadow: 0 8px 28px rgba(147, 215, 59, 0.15); transform: translateY(-3px); }
.story-card-draft { position: relative; opacity: 0.85; border-style: dashed; }
.story-card-draft:hover { border-color: #313D7F; box-shadow: 0 8px 28px rgba(49,61,127,0.1); }
.story-image { width: 100%; height: 200px; background: #f5f5f5; overflow: hidden; }
.story-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.story-image.hidden { display: none; }
.story-content { padding: 20px; }
.story-header { margin-bottom: 10px; }
.story-name { font-size: 15px; font-weight: 600; color: #39373A; margin-bottom: 2px; font-family: "Rubik", sans-serif; }
.story-origin { font-size: 14px; color: #666666; }
.story-title { font-size: 16px; font-weight: 700; color: #313D7F; margin-bottom: 8px; line-height: 1.4; font-family: "Source Serif Pro", serif; }
.story-excerpt { font-size: 15px; color: #666666; margin-bottom: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.story-meta { font-size: 14px; color: #39373A; margin-bottom: 12px; display: flex; gap: 14px; font-family: "Rubik", sans-serif; font-weight: 500; }
.story-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.story-tag { display: inline-block; padding: 4px 10px; background: #f5f5f5; color: #666666; border-radius: 20px; font-size: 13px; font-weight: 500; }
.story-tag.commodity { background: #eaf5d6; color: #4A7A1B; }
.results-count { font-size: 15px; color: #666666; margin-left: auto; }
/* ═══ MODAL ═══ */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(49,61,127,0.4); display: none; z-index: 2000; overflow-y: auto; padding: 60px 20px; backdrop-filter: blur(4px); }
.modal-overlay.active { display: flex; align-items: flex-start; justify-content: center; }
.modal { background: white; border-radius: 20px; max-width: 780px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 48px; position: relative; }
.modal-close { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 28px; cursor: pointer; color: #666666; }
.modal-close:hover { color: #313D7F; }
.modal h2 { font-size: 28px; margin-bottom: 8px; padding-right: 40px; }
.modal .story-meta-line { margin-bottom: 24px; font-size: 15px; color: #666666; }
.modal-image { width: 100%; height: 340px; background: #f5f5f5; border-radius: 12px; overflow: hidden; margin-bottom: 20px; }
.modal-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.modal-image.hidden { display: none; }
.modal-body { font-size: 16px; color: #39373A; line-height: 1.8; margin-bottom: 24px; }
.modal-gallery { display: flex; gap: 10px; margin-bottom: 24px; }
.modal-gallery img { width: 100px; height: 80px; object-fit: cover; object-position: center 20%; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.2s; }
.modal-gallery img:hover { border-color: #93D73B; }
.modal-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; border-top: 1px solid #e8e8e8; padding-top: 24px; }
.modal-stat { text-align: center; }
.modal-stat-value { font-size: 24px; font-weight: 700; color: #313D7F; font-family: "JetBrains Mono", monospace; margin-bottom: 4px; }
.modal-stat-label { font-size: 13px; color: #666666; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; }
/* ═══ FOOTER ═══ */
.site-footer { background: #f5f5f5; padding: 60px 40px 24px; }
.footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 60px; align-items: start; padding-bottom: 40px; border-bottom: 1px solid #d8d8d8; margin-bottom: 24px; }
.footer-logo { height: 72px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { font-size: 15px; color: #39373A; font-weight: 400; }
.footer-links a:hover { color: #93D73B; }
.footer-ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-bottom { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #767676; }
.footer-bottom a { color: #39373A; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-left: 24px; }
/* ═══ RESPONSIVE ═══ */
@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; } .analytics-grid { grid-template-columns: 1fr; } .stories-grid { grid-template-columns: repeat(2, 1fr); } .metrics-row { grid-template-columns: repeat(3, 1fr); } .footer-inner { grid-template-columns: 1fr 1fr; } .program-tables { grid-template-columns: 1fr; } #synergies-content { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 768px) {
/* Top nav, hamburger, and FAB are hidden by the mobile-nav block above */
.nav-links { display: none; }
.hamburger-btn { display: none !important; }
/* Section spacing — tighter on mobile, more breathing room between sections */
.section { padding: 48px 18px; }
.section h2 { font-size: 26px; line-height: 1.25; margin-bottom: 16px; }
.section h3 { font-size: 20px; line-height: 1.3; }
/* ════════════════════════════════════════════════════════════════
FTUSA-BRANDED LANDING HERO (mobile)
Navy → teal gradient background with white text — matches the
FTUSA brand palette (#313D7F, #44AEC8, #93D73B). Glass-morphism
KPI cards float over the gradient with backdrop-blur. Bold serif
headline. Professional, not generic.
════════════════════════════════════════════════════════════════ */
#overview {
background: linear-gradient(155deg, #313D7F 0%, #3e4d9b 45%, #44AEC8 100%) !important;
position: relative;
overflow: hidden;
}
#overview::before {
/* Large subtle FTUSA seal anchored to top-right of the section.
Mostly off-canvas, low opacity — texture not focal point. */
content: '';
position: absolute;
top: -80px;
right: -120px;
width: 320px;
height: 320px;
background: url('https://www.fairtradecertified.org/wp-content/uploads/2022/03/FTC-Full-Seal_RGB.svg') center/contain no-repeat;
opacity: 0.08;
pointer-events: none;
}
#overview::after {
/* Decorative green accent stripe along the bottom edge — FTUSA's
signature lime/green that you see across their brand site. */
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, #93D73B 0%, #6B9D2B 100%);
z-index: 1;
}
.hero {
padding: 36px 22px 28px !important;
background: transparent !important;
position: relative;
z-index: 1;
}
.hero::before { display: none !important; } /* kill the small earlier watermark */
.hero-inner { position: relative; z-index: 1; }
.hero-text { position: relative; }
/* Brand kicker — small uppercase pill, glass-style */
.hero-text::before {
content: 'Fair Trade USA · Impact Intelligence'; /* literal middot — unicode escapes break in the JSON.stringify build */
display: inline-block;
font-family: 'Rubik', sans-serif;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.14);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.18);
padding: 7px 14px;
border-radius: 18px;
margin-bottom: 20px;
}
.hero-text h1 {
font-family: 'Source Serif Pro', 'Source Serif 4', Georgia, serif !important;
font-size: 36px !important;
line-height: 1.08 !important;
letter-spacing: -0.02em !important;
margin-bottom: 0 !important;
font-weight: 700 !important;
color: #ffffff !important;
text-shadow: 0 2px 12px rgba(20,28,60,0.18);
}
.hero-text h1::after {
width: 56px !important;
height: 3px !important;
margin-top: 22px !important;
background: #93D73B !important; /* lime accent, the FTUSA signature */
border-radius: 2px;
}
.hero-text p {
font-family: 'Rubik', sans-serif !important;
font-size: 15.5px !important;
line-height: 1.6 !important;
margin: 20px 0 26px !important;
color: rgba(255,255,255,0.88) !important;
}
/* CTAs — primary lime button, secondary glass-outline */
.hero .btn {
width: 100%;
padding: 18px 24px !important;
font-size: 15px !important;
justify-content: center;
margin-top: 0 !important;
font-weight: 700 !important;
border-radius: 14px !important;
letter-spacing: 0.05em;
text-transform: uppercase;
font-family: 'Rubik', sans-serif !important;
display: flex;
align-items: center;
gap: 10px;
}
.hero-text > a.btn { margin-right: 0 !important; }
.hero .btn-green {
background: #93D73B !important;
color: #1a2347 !important;
border: none !important;
box-shadow: 0 6px 20px rgba(147,215,59,0.35) !important;
}
.hero .btn-outline {
background: rgba(255,255,255,0.10) !important;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: #ffffff !important;
border: 1.5px solid rgba(255,255,255,0.35) !important;
}
.hero-text > a.btn + a.btn { margin-top: 14px !important; }
/* Hide the giant desktop seal column on mobile */
.hero-inner > div:nth-child(2) { display: none !important; }
/* ─── GLASS KPI CARDS ─── */
.kpis-bar {
padding: 4px 22px 28px !important;
background: transparent !important;
margin-top: 0 !important;
position: relative;
z-index: 1;
}
.kpis {
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px !important;
}
.kpi {
background: rgba(255,255,255,0.13) !important;
-webkit-backdrop-filter: blur(14px) saturate(140%);
backdrop-filter: blur(14px) saturate(140%);
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 18px !important;
padding: 16px 14px !important;
text-align: left !important;
box-shadow:
0 4px 16px rgba(20,30,60,0.18),
inset 0 1px 0 rgba(255,255,255,0.20) !important;
position: relative;
overflow: hidden;
}
.kpi::after {
content: '';
position: absolute;
top: -16px; right: -16px;
width: 52px; height: 52px;
border-radius: 50%;
background: radial-gradient(circle, rgba(147,215,59,0.28), rgba(147,215,59,0));
}
.kpi-value {
font-family: 'Source Serif Pro', 'Source Serif 4', Georgia, serif !important;
font-size: 28px !important;
color: #ffffff !important;
font-weight: 700 !important;
line-height: 1.05 !important;
letter-spacing: -0.015em !important;
}
.kpi-label {
font-size: 10.5px !important;
color: rgba(255,255,255,0.78) !important;
margin-top: 6px !important;
line-height: 1.35 !important;
letter-spacing: 0.08em !important;
font-weight: 600 !important;
text-transform: uppercase;
font-family: 'Rubik', sans-serif !important;
}
.kpis { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.stories-grid { grid-template-columns: 1fr; }
.stories-filters { gap: 8px; }
.search-input { width: 100%; }
.modal { padding: 20px; border-radius: 12px; }
.modal h2 { font-size: 22px; }
.modal-image { height: 200px; }
.modal-footer { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.modal-stat-value { font-size: 18px; }
.metrics-row { grid-template-columns: 1fr 1fr; }
.utility-bar { display: none; }
.program-tables { grid-template-columns: 1fr; }
.program-table { font-size: 13px; }
.program-table td, .program-table th { padding: 6px 8px; }
.chat-panel { width: 100% !important; right: 0 !important; bottom: 0 !important; border-radius: 16px 16px 0 0 !important; max-height: 75vh !important; height: 75vh; }
.chat-panel .chat-messages { min-height: 0 !important; max-height: none !important; flex: 1 1 0 !important; overflow-y: auto; }
.chat-panel .chat-header button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.chat-panel .chat-input-row { padding: 10px 12px; gap: 6px; }
.chat-panel .chat-input-row input { font-size: 16px; padding: 10px 14px; }
.chat-panel .chat-input-row button { padding: 10px 14px; font-size: 14px; }
.chat-panel #chat-report-btn { padding: 8px 10px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.chat-panel .chat-msg { font-size: 14px; padding: 10px 14px; max-width: 90%; }
.chat-panel .chat-suggestions { gap: 6px; padding: 0 12px 8px; }
.chat-panel .chat-suggest-btn { font-size: 12px; padding: 6px 10px; }
.chat-bubble { right: 16px !important; bottom: 16px !important; width: 52px !important; height: 52px !important; }
#synergies-content { grid-template-columns: 1fr !important; }
.synergy-card { min-height: auto; padding: 20px; }
.synergy-overlay { padding: 16px 8px; }
.synergy-overlay-inner { border-radius: 14px; }
.synergy-hero { padding: 24px 20px 20px; }
.synergy-hero h3 { font-size: 20px; padding-right: 32px; }
.synergy-hero .synergy-key-insight { font-size: 14px; }
.synergy-overlay-content { padding: 20px 16px 24px; }
.synergy-stats-row { grid-template-columns: 1fr; gap: 10px; }
.synergy-stat-value { font-size: 18px; }
.synergy-overlay-body { font-size: 14px; line-height: 1.7; }
.synergy-overlay-close { top: 10px; right: 12px; font-size: 20px; padding: 2px 8px; }
.footer-inner { grid-template-columns: 1fr; gap: 32px; }
.footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
.breakdown-label { min-width: 80px; font-size: 13px; }
.breakdown-value { min-width: 80px; font-size: 12px; }
/* Dashboard metric cards */
.dashboard-metrics-row { grid-template-columns: 1fr; }
.dashboard-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.kpis { grid-template-columns: 1fr; }
.metrics-row { grid-template-columns: 1fr; }
.modal-footer { grid-template-columns: 1fr; }
.hero-text h1 { font-size: 24px; }
.nav-right .btn { display: none; }
.chat-panel { max-height: 80vh !important; height: 80vh; }
.chat-panel .chat-input-row { padding: 8px 10px; gap: 5px; }
.chat-panel .chat-input-row input { font-size: 16px; padding: 8px 12px; }
.chat-panel .chat-suggest-btn { font-size: 11px; padding: 5px 8px; }
}
/* ═══ MOBILE FLOATING GLASS NAV BAR ═══
Bottom-anchored, 4-item nav (Map / Stories / Analytics / Chat).
Only renders on mobile via media query. Frosted glass via
backdrop-filter + semi-transparent background. Hides on
scroll-down, returns on scroll-up.
*/
.mobile-nav { display: none; }
@media (max-width: 768px) {
.mobile-nav {
position: fixed;
left: 50%;
bottom: calc(12px + env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: space-around;
gap: 4px;
width: calc(100% - 24px);
max-width: 440px;
padding: 8px 10px;
background: rgba(255, 255, 255, 0.72);
-webkit-backdrop-filter: blur(24px) saturate(180%);
backdrop-filter: blur(24px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 28px;
box-shadow: 0 10px 32px rgba(20, 30, 60, 0.18), 0 1px 2px rgba(0,0,0,0.04);
z-index: 10000;
transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.2s ease;
}
.mobile-nav.hidden {
transform: translate(-50%, calc(100% + 30px));
opacity: 0;
}
.mobile-nav-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 8px 4px;
background: transparent;
border: none;
color: #5a5d6b;
font-family: 'Rubik', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
border-radius: 18px;
position: relative;
transition: color 0.2s, background 0.2s, transform 0.15s;
min-height: 52px;
-webkit-tap-highlight-color: transparent;
}
.mobile-nav-item:active { transform: scale(0.92); }
.mobile-nav-item .nav-icon {
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
}
.mobile-nav-item .nav-icon svg {
width: 22px; height: 22px;
stroke: currentColor; stroke-width: 1.9;
fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.mobile-nav-item.active {
color: #313D7F;
background: linear-gradient(180deg, rgba(49,61,127,0.10), rgba(68,174,200,0.08));
}
.mobile-nav-item.active .nav-icon svg {
stroke-width: 2.2;
}
.mobile-nav-item.chat-trigger.active {
color: #fff;
background: linear-gradient(135deg, #313D7F, #44AEC8);
box-shadow: 0 4px 12px rgba(49,61,127,0.3);
}
/* FTUSA brand mark — dead center between the labeled items, larger
circular "home" button that pops above the bar (Instagram-style
center action). Pushes Map/Stories to the left, Data/Chat to the
right via flex order. */
.mobile-nav-brand {
flex: 0 0 auto;
order: 3 !important;
width: 56px; height: 56px;
margin: -14px 6px 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff;
border: 1px solid rgba(20,30,60,0.08);
box-shadow: 0 6px 16px rgba(20,30,60,0.16), 0 1px 2px rgba(0,0,0,0.06);
transition: transform 0.15s, box-shadow 0.2s;
-webkit-tap-highlight-color: transparent;
position: relative;
z-index: 1;
}
.mobile-nav-brand img { width: 38px; height: 38px; display: block; }
.mobile-nav-brand:active { transform: scale(0.92); }
/* Reorder nav items so seal sits center: Map(1) Stories(2) Seal(3) Data(4) Chat(5) */
.mobile-nav-item[data-target="#map"] { order: 1 !important; }
.mobile-nav-item[data-target="#stories"] { order: 2 !important; }
.mobile-nav-item[data-target="#analytics"] { order: 4 !important; }
.mobile-nav-item.chat-trigger { order: 5 !important; }
/* Backdrop dim for chat sheet */
.chat-sheet-backdrop {
position: fixed; inset: 0;
background: rgba(20, 28, 50, 0.45);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 9998;
opacity: 0; pointer-events: none;
transition: opacity 0.28s ease;
}
.chat-sheet-backdrop.open { opacity: 1; pointer-events: auto; }
/* Chat panel as bottom sheet on mobile */
.chat-panel.mobile-sheet {
position: fixed !important;
left: 0 !important; right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
height: 82vh !important;
max-height: 82vh !important;
border-radius: 22px 22px 0 0 !important;
transform: translateY(100%);
transition: transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
z-index: 9999 !important;
display: flex !important;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.chat-panel.mobile-sheet.open { transform: translateY(0); }
/* Drag handle at top of sheet */
.chat-sheet-handle {
position: absolute;
top: 8px; left: 50%;
transform: translateX(-50%);
width: 40px; height: 4px;
background: rgba(0,0,0,0.18);
border-radius: 2px;
z-index: 1;
pointer-events: none;
}
/* Ensure body has padding so floating nav doesn't cover content */
body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
/* Hide the top nav (and hamburger) — bottom nav takes over */
.main-nav { display: none !important; }
/* Hide the desktop chat FAB on mobile — chat lives in the bottom nav.
ID selector + visibility + opacity belt-and-suspenders so even if
display gets toggled by inline JS we still don't see it. */
#chat-bubble,
#chat-bubble.visible,
#chat-bubble[style] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
}
/* Stories filter dropdowns — COMMODITY / COUNTRY / THEME were
laying out inline and overlapping on narrow viewports. Force them
to stack vertically with full-width labels and dropdowns. */
.stories-filter-row,
.stories-filter-row-dropdowns {
flex-direction: column !important;
gap: 12px !important;
align-items: stretch !important;
}
.stories-filter-row .filter-group,
.stories-filter-row-dropdowns .filter-group {
flex: 1 1 100% !important;
min-width: 0 !important;
width: 100% !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 12px !important;
}
.stories-filter-row .filter-group > label,
.stories-filter-row-dropdowns .filter-group > label {
flex: 0 0 96px;
font-size: 13px;
}
.stories-filter-row .filter-group > select,
.stories-filter-row-dropdowns .filter-group > select {
flex: 1 1 auto !important;
min-width: 0 !important;
width: 100% !important;
}
.stories-filter-row-year { padding-bottom: 12px !important; }
/* Tighten the synergy hero title so the FTUSA seal doesn't overlap text */
.synergy-hero h3 { padding-right: 96px !important; font-size: 19px !important; line-height: 1.28 !important; }
.synergy-hero .synergy-subtitle { padding-right: 96px !important; font-size: 14px !important; }
.synergy-hero .ftusa-seal { width: 68px !important; height: 68px !important; top: 18px !important; right: 18px !important; }
/* Map section: give it real estate on mobile */
#map .map-container, #map iframe, #map > div[id*="map"] { min-height: 460px !important; }
.leaflet-container { min-height: 420px !important; }
/* Producer profile / story modal — fix mobile scroll trap.
Reduce overlay padding so the modal title isn't pushed offscreen.
Reduce modal max-height to leave room for the floating nav.
Body lock prevents touch scroll from hijacking to the page
underneath. */
.modal-overlay { padding: 12px 12px 100px !important; }
.modal { max-height: calc(100vh - 130px) !important; padding: 28px 20px !important; }
.modal h2 { padding-right: 36px; }
/* Story image height on mobile shouldn't dominate */
.modal-image, .profile-hero-img { max-height: 200px !important; }
/* Internal banner: hide the long description on mobile; keep title +
Take a Tour + dismiss. Single-line, compact, doesn't eat the viewport. */
#internal-banner {
padding: 8px 36px 8px 14px !important;
font-size: 12px !important;
line-height: 1.3 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Hide the | separator and long description on mobile */
#internal-banner > span:nth-child(2),
#internal-banner > span:nth-child(3) { display: none !important; }
#internal-banner .tour-start-btn {
padding: 4px 10px !important;
font-size: 11px !important;
margin-left: auto !important;
margin-right: 28px !important;
}
#internal-banner .tour-start-btn svg { width: 12px !important; height: 12px !important; }
}
/* ═══ CHAT BUBBLE & PANEL ═══ */
.chat-bubble { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #313D7F, #4a5ba0); color: white; border: none; cursor: pointer; box-shadow: 0 4px 20px rgba(49,61,127,0.35); z-index: 10010; display: none; align-items: center; justify-content: center; font-size: 24px; transition: transform 0.2s, box-shadow 0.2s; }
.chat-bubble:hover { transform: scale(1.08); box-shadow: 0 6px 28px rgba(49,61,127,0.45); }
.chat-bubble.visible { display: flex; }
.chat-panel { position: fixed; bottom: 96px; right: 28px; width: 480px; max-height: 740px; background: #ffffff; border-radius: 16px; box-shadow: 0 12px 48px rgba(0,0,0,0.18); z-index: 10009; display: none; flex-direction: column; overflow: hidden; border: 1px solid #e8e8e8; }
.chat-panel.open { display: flex; }
.chat-header { padding: 16px 20px; background: linear-gradient(135deg, #313D7F, #4a5ba0); color: white; display: flex; align-items: center; justify-content: space-between; }
.chat-header h4 { margin: 0; font-family: "Rubik", sans-serif; font-size: 16px; font-weight: 600; color: #ffffff; }
.chat-header button { background: none; border: none; color: rgba(255,255,255,0.8); cursor: pointer; font-size: 18px; padding: 0; line-height: 1; }
.chat-header button:hover { color: white; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 380px; max-height: 580px; }
.chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 12px; font-size: 15px; line-height: 1.6; font-family: "Rubik", sans-serif; word-wrap: break-word; }
.chat-msg.assistant { background: #f0f4ff; color: #1a2340; align-self: flex-start; border-bottom-left-radius: 4px; overflow-wrap: break-word; word-break: break-word; }
.chat-msg.assistant p { margin: 0 0 8px; }
.chat-msg.assistant p:last-child { margin-bottom: 0; }
.chat-msg.assistant strong { color: #313D7F; }
.chat-table-wrap { overflow-x: auto; margin: 8px 0; border-radius: 8px; border: 1px solid #dde3f0; }
.chat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.chat-table th { background: #313D7F; color: #fff; padding: 7px 10px; text-align: left; font-weight: 600; white-space: nowrap; }
.chat-table td { padding: 6px 10px; border-bottom: 1px solid #e8ecf4; white-space: nowrap; }
.chat-table tbody tr:last-child td { border-bottom: none; }
.chat-table tbody tr:nth-child(even) { background: rgba(49,61,127,0.03); }
.chat-table tbody tr:hover { background: rgba(49,61,127,0.07); }
.chat-list { margin: 6px 0; padding-left: 18px; }
.chat-list li { margin-bottom: 3px; font-size: 15px; }
.chat-msg.user { background: #313D7F; color: #ffffff; align-self: flex-end; border-bottom-right-radius: 4px; }
.chat-msg.system { background: #f5f5f5; color: #666; font-size: 14px; text-align: center; align-self: center; padding: 6px 12px; border-radius: 8px; }
.chat-input-row { padding: 12px 16px; border-top: 1px solid #e8e8e8; display: flex; gap: 8px; background: #fafafa; }
.chat-input-row input { flex: 1; border: 1px solid #ddd; border-radius: 20px; padding: 8px 16px; font-size: 15px; font-family: "Rubik", sans-serif; outline: none; transition: border-color 0.2s; }
.chat-input-row input:focus { border-color: #313D7F; }
.chat-input-row button { background: #313D7F; color: white; border: none; border-radius: 20px; padding: 8px 16px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: "Rubik", sans-serif; transition: background 0.2s; }
.chat-input-row button:hover { background: #4a5ba0; }
.chat-input-row button:disabled { opacity: 0.5; cursor: not-allowed; }
.chat-typing { display: flex; gap: 4px; padding: 8px 14px; align-self: flex-start; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #313D7F; opacity: 0.4; animation: chatDot 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDot { 0%,80%,100%{opacity:0.4;transform:scale(1)} 40%{opacity:1;transform:scale(1.2)} }
/* WALKTHROUGH TOUR */
/* Tour z-indexes bumped above cookie banner (10020) and prefs modal (10030)
so tour visually dominates when active. Tour is an opt-in modal experience. */
.tour-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:10050;transition:opacity 0.3s; }
.tour-highlight { position:absolute;z-index:10051;border-radius:12px;box-shadow:0 0 0 4000px rgba(0,0,0,0.55);pointer-events:none;transition:all 0.4s cubic-bezier(.4,0,.2,1); }
.tour-tooltip { position:absolute;z-index:10052;background:#fff;border-radius:14px;padding:24px 28px 20px;max-width:380px;min-width:280px;box-shadow:0 12px 48px rgba(0,0,0,0.22);font-family:'Rubik',sans-serif;animation:tourFadeIn 0.35s ease; }
.tour-tooltip::before { content:'';position:absolute;width:14px;height:14px;background:#fff;transform:rotate(45deg);z-index:-1; }
.tour-tooltip.arrow-top::before { top:-6px;left:32px; }
.tour-tooltip.arrow-bottom::before { bottom:-6px;left:32px; }
.tour-tooltip.arrow-left::before { left:-6px;top:24px; }
.tour-tooltip.arrow-right::before { right:-6px;top:24px; }
.tour-step-counter { font-size: 13px;font-weight:700;color: #1B7F96;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:8px; }
.tour-title { font-size:16px;font-weight:700;color:#313D7F;margin-bottom:6px;font-family:'Source Serif Pro',serif; }
.tour-desc { font-size: 15px;color:#555;line-height:1.6;margin-bottom:18px; }
.tour-actions { display:flex;justify-content:space-between;align-items:center; }
.tour-dots { display:flex;gap:5px; }
.tour-dot { width:7px;height:7px;border-radius:50%;background:#ddd;transition:all 0.3s; }
.tour-dot.active { background:#313D7F;width:18px;border-radius:4px; }
.tour-btn { border:none;border-radius:8px;padding:8px 18px;font-size: 15px;font-weight:600;cursor:pointer;font-family:'Rubik',sans-serif;transition:all 0.2s; }
.tour-btn-next { background:#313D7F;color:#fff; }
.tour-btn-next:hover { background:#44AEC8; }
.tour-btn-skip { background:transparent;color: #767676;font-weight:500; }
.tour-btn-skip:hover { color:#666; }
.tour-progress { position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#313D7F,#44AEC8);z-index:10001;transition:width 0.4s ease; }
@keyframes tourFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.tour-start-btn { display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.18);color:#fff;border:1px solid rgba(255,255,255,0.3);border-radius:8px;padding:5px 14px;font-size: 14px;font-weight:600;cursor:pointer;font-family:'Rubik',sans-serif;transition:all 0.2s;margin-left:12px; }
.tour-start-btn:hover { background:rgba(255,255,255,0.3); }
.cat-dot { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;position:relative;top:-1px; }
/* CASE / CORRECTION SYSTEM */
.case-card { background:#fff;border:1px solid #e8e8e8;border-left:4px solid #44AEC8;border-radius:10px;padding:18px 20px; }
.case-card.resolved { border-left-color:#93D73B;opacity:0.7; }
.case-meta { font-size: 13px;color: #767676;margin-bottom:8px;display:flex;gap:16px;flex-wrap:wrap; }
.case-meta strong { color:#313D7F; }
.case-body { font-size: 15px;color:#39373A;line-height:1.6;margin-bottom:12px; }
.case-context { font-size: 14px;color:#666;background:#f7f8fa;padding:10px 14px;border-radius:8px;margin-bottom:12px; }
.case-actions { display:flex;gap:8px; }
.case-badge { display:inline-block;padding:2px 10px;border-radius:10px;font-size: 12px;font-weight:600; }
.case-badge.open { background:#FFF3E0;color:#B23E00; }
.case-badge.resolved { background:#eaf5d6;color: #4A7A1B; }
.case-filter-btn { border:none;background:transparent;font-size:12px;font-weight:600;color:#767676;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:'Rubik',sans-serif; }
.case-filter-btn.active { background:#fff;color:#313D7F;box-shadow:0 1px 3px rgba(0,0,0,0.1); }
.case-notes-input { width:100%;border:1px solid #e0e0e0;border-radius:8px;padding:8px 10px;font-size:13px;font-family:'Rubik',sans-serif;resize:vertical;min-height:38px;margin-bottom:8px; }
.chat-case-banner { background:linear-gradient(135deg,#f0f7ff,#e8f5e9);border:1px solid #44AEC8;border-radius:10px;padding:12px 16px;margin:8px 16px;font-size: 14px;color:#313D7F;line-height:1.5; }
.chat-case-banner button { background:#313D7F;color:#fff;border:none;border-radius:6px;padding:6px 14px;font-size: 13px;font-weight:600;cursor:pointer;margin-top:8px;font-family:'Rubik',sans-serif; }
.chat-case-banner button:hover { background:#44AEC8; }
.chat-suggestions { display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 8px; }
.chat-suggest-btn { background:#f0f2f8;color:#313D7F;border:1px solid #e0e3ef;border-radius:12px;padding:6px 12px;font-size: 13px;font-family:'Rubik',sans-serif;cursor:pointer;text-align:left;line-height:1.4;transition:all 0.15s; }
.chat-suggest-btn:hover { background:#313D7F;color:#fff;border-color:#313D7F; }
.chat-followups { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.chat-followup-btn { background:#f7f8fa;color:#313D7F;border:1px solid #e0e3ef;border-radius:10px;padding:4px 10px;font-size: 12px;font-family:'Rubik',sans-serif;cursor:pointer;transition:all 0.15s; }
.chat-followup-btn:hover { background:#313D7F;color:#fff; }
/* ═══════════════════════════════════════════════════════════
MOBILE READINESS FIXES (Session 2, May 2026)
Merged output from 4 parallel agent batches.
See MOBILE_AUDIT.md for the per-issue analysis.
═══════════════════════════════════════════════════════════ */
/* === Batch A: Touch Targets === */
/* Addresses MOBILE_AUDIT.md P1 #1 (banner close), P1 #2 (leaflet zoom), P2 #4 (global 44x44 floor). */
/* ── Unconditional (pure improvement at every breakpoint) ─────────── */
/* P1 #1: Banner close glyph was 9×19 with no padding — untappable. Give it real hit area at all sizes. */
#internal-banner button[aria-label="Dismiss internal preview banner"] {
min-width: 44px;
min-height: 44px;
padding: 10px;
font-size: 20px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ── Mobile floor: <768px ─────────────────────────────────────────── */
@media (max-width: 768px) {
/* P2 #4: Global 44×44 floor for interactive controls per WCAG 2.5.5 AAA / Apple HIG. */
button,
.btn,
a.btn,
[role="button"] {
min-height: 44px;
min-width: 44px;
}
/* P2 #4 exclusion: chat suggestion chips intentionally compact in dense chat panel (existing 768/480 rules keep them small). */
.chat-panel .chat-suggest-btn {
min-height: 0;
min-width: 0;
}
/* P2 #4 exclusion: map-controls collapse toggle is a thin inline chevron; 44px would distort the controls strip. */
.map-ctrl-toggle {
min-height: 32px;
min-width: 32px;
}
/* P2 #4 exclusion: tour button sits inside the slim banner — use compact 36px target rather than full 44px to avoid 3-line banner blowup (P3 #11). */
#internal-banner .tour-start-btn {
min-height: 36px;
min-width: 36px;
padding: 6px 14px;
}
/* P2 #4 (audit table): EN/ES language pills measured 39×24 — bump vertical only, keep pill row tidy. */
.lang-btn {
min-height: 44px;
min-width: 44px;
padding: 8px 12px !important; /* override inline style */
}
/* P1 #2: Leaflet zoom controls are 30×30 by default — bump to 44×44 on mobile. !important needed to beat Leaflet's own CSS. */
.leaflet-control-zoom a {
width: 44px !important;
height: 44px !important;
line-height: 44px !important;
font-size: 22px !important;
}
}
/* === Batch B: iOS Zoom Prevention === */
/*
* iOS Safari auto-zooms whenever a focused /