/* =============================================
   COMPONENTS
   Self-contained, reusable UI pieces that appear in multiple places.
   Includes: cards, modals, nav menus, filters, dropdowns, buttons, badges.
   If it's a chunk of UI you could pick up and drop somewhere else, it belongs here.
   ============================================= */

/* Responsive logo */
.responsive-logo { max-width: 200px; max-height: 55px; margin: 5px 0; margin-left: 0; opacity: 0; transition: opacity 0.4s ease-in-out; }
.responsive-logo[src*="logo"] { opacity: 1; }

/* User email display */
.usr-email, .usr-email .navbar-email { color: var(--neut300); margin-top: 10px; font-size: 1.6rem; font-family: var(--head); border-bottom: none!important; }
.usr-email { line-height: 1.5em; }

/* =============================================
   PAGE HEADER / BREADCRUMB
   Title + breadcrumb trail row, used at the top of list & detail pages
   (Projects list, Project detail tabs, etc).
   ============================================= */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.page-breadcrumb { display: flex; align-items: center; gap: 4px; margin-top: 10px; font-family: var(--body); font-size: 1.3rem; font-weight: 500; }
.page-breadcrumb a { color: var(--secondp); text-decoration: none; }
.page-breadcrumb a:hover { color: var(--neut400); text-decoration: none;  }
.page-breadcrumb__sep { color: var(--neut200); }
.page-breadcrumb__current { color: var(--neut300); margin-top: 5px; }
.page-intro-text { max-width: 940px; }

/* =============================================
   HEADER / NAV
   ============================================= */
/* Logout button reset */
#logged-in-logout { padding: 0; }

/* Top & side menu links */
#top-menu li a, #side-main-menu li a { font-size: 12px; font-size: 1.2rem; font-family: var(--body); color: var(--neut400); font-weight: 600; line-height: normal; letter-spacing: 1px; text-transform: uppercase; }
#top-menu li a:hover, #side-main-menu li a:hover { color: var(--purp500); }
#top-menu .current_page_item a, #side-main-menu .current_page_item a { color: var(--purp500); }

/* Nav & admin menu links */
#nav-menu li a, #admin-menu li a, .uk-offcanvas-bar .nav-menu li a { box-sizing: border-box; padding: 15px 10px; font-family: var(--body); font-size: 14px; 
    font-weight: 400; color: var(--neut400); letter-spacing: 0.035em; }
#nav-menu li a:hover .menu-icon { color: #fff; }
#nav-menu li a:hover { background: var(--neut300); color: #fff; border-radius: 4px; }
#admin-panel-item { margin: 10px 0; padding-left: 10px; }

/* Logout button */
.navbar-logout-btn { color: var(--secondr)!important; }
.navbar-logout-btn:hover { color: var(--neut300); }

/* Sidebar navbar overrides */
.menu-sidebar .uk-navbar-container, .menu-sidebar .uk-navbar-container:not(.uk-navbar-transparent) { box-shadow: none; }
.menu-sidebar .footer-wrap .uk-container { padding: 0; }
.menu-sidebar .uk-navbar-container, .uk-navbar-container:not(.uk-navbar-transparent) { background: transparent; }
.icon-overview path {fill: var(--neut300); }


/* Nav menu item dividers */
.menu-sidebar .nav-menu li,
.uk-offcanvas-bar .nav-menu li { border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
.menu-sidebar .nav-menu li:last-of-type, .uk-offcanvas-bar .nav-menu li:last-of-type { border-bottom: none; }
.uk-nav-sub li a { font-size: 1.35rem !important; padding: 8px 10px!important; }


/* Active / selected nav item */
.selected-nav-item, .insights-page #insights-menu-item { background-color: rgba(255, 255, 255, 0.644) !important; color: white !important; border-radius: 4px !important;  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2);  }
.selected-nav-item a, .selected-nav-item a:hover, .insights-page #insights-menu-item a, .insights-page #insights-menu-item a:hover { pointer-events: none; cursor: default; 
    color: rgb(7, 7, 7) !important; text-decoration: none; }

#admin-panel-item.selected-nav-item { background-color: transparent!important; color: white !important; border-radius: 4px !important; 
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); line-height: 1.5 !important; }

/* Nav logo spacing */
.nav-logo.image_loaded { margin-bottom: 40px; }

/* Open accordion/dropdown parent */
.uk-parent.uk-open { background-color: rgba(255, 255, 255, 0.644) !important; color: white !important; padding: 0 0 11px 0; border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); }
.uk-parent.uk-open .uk-nav-sub li a:hover { color: var(--purp600)!important; background: none!important; }
.uk-parent.uk-open .selected-nav-item { box-shadow: none; background: transparent!important; }
.uk-parent.uk-open .selected-nav-item a { color: var(--purp700); }

/* Accordion parent chevron — rotates 180deg when open */
.uk-parent > a { display: flex; align-items: center; }
.nav-parent-chevron { margin-left: auto; width: 14px; color: var(--neut300); transition: transform 0.2s ease; }
.uk-parent.uk-open .nav-parent-chevron { transform: rotate(180deg); color: white; }

/* Sub-nav list */
ul.uk-nav-sub { padding: 5px 0; }
ul.uk-nav-sub li { width: 90%; margin: 0 auto; }

/* Menu icons */
.selected-nav-item .menu-icon { width:17px; color: var(--neut400); margin-right: 10px }
.menu-icon { width:17px; color: var(--neut300); margin-right: 10px }


.iframe-container { position:relative; }
.iframe-fullscreen-btn { position:absolute; top:-55px; right:12px; z-index:10; display:flex; align-items:center; justify-content:center; height:32px; width:80px; background:var(--purp700); color:var(--neut100); border:1px solid rgba(0,0,0,0.1); border-radius:6px; cursor:pointer; transition:background 0.2s ease; }
.iframe-fullscreen-btn:hover { background:var(--neut300); color:var(--neut100); }
/* Custom Iframe module card (Insights, Aug 22, 2026) reuses .iframe-fullscreen-btn but overrides its top:-55px — that offset assumed empty space above a full-page iframe, which a compact module card doesn't have; this floats the button over the iframe's own top-right corner instead. */
.iframe-fullscreen-btn--card{ top:8px; right:8px; height:26px; width:auto; padding:0 10px; font-size:1.1rem; }

/* =============================================
   DASHBOARD BLOCKS
   ============================================= */
.ob-card { background:rgba(253,253,253,0.25); border:1px solid rgba(255,255,255,0.5); border-radius:12px; padding:1.25rem 1.5rem; height:100%; box-sizing:border-box; }

.ob-body { display:flex; flex-direction:column; }
.ob-changelog-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.85rem; }
.ob-changelog-item strong { display:block; font-size:0.9rem; color:var(--neut400); }
.ob-changelog-item p { margin:0.2rem 0 0; font-size:0.8rem; color:var(--neut300); line-height:1.5; }
.ob-placeholder { font-size:0.85rem; color:var(--neut200); margin:0; }
.ob-stat { font-family:var(--head); font-size:2.75rem; font-weight:700; color:var(--neut400); margin:0.25rem 0 0; line-height:1; }
.ob-shortcut-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; background:var(--purp200); color:var(--purp600); font-size:1.5rem; line-height:1; text-decoration:none; margin-top:0.5rem; transition:background 0.2s; }
.ob-shortcut-btn:hover { background:var(--purp300); color:var(--purp700); }
.ob-row { margin-bottom:1.25rem; }


/* =============================================
   OVERVIEW BLOCKS
   ============================================= */
.ob-grid { display:grid; grid-template-columns:1fr 2fr; grid-template-rows:auto auto; gap:1.25rem; grid-template-areas:'changelog tones' 'shortcuts shortcuts'; }
.ob-shortcuts { display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
.ob-card { background: transparent; border:1px solid var(--purp100); border-radius:12px; padding:1.25rem 1.5rem; overflow-x: auto;  }
.ob-eyebrow { font-family:var(--head); font-size:1.6rem; font-weight: 600; letter-spacing:0.08em; text-transform:uppercase; color:var(--neut300); margin:0; display: flex; align-items: center; justify-content: space-between;}
.ob-eyebrow span { font-weight: 400; font-size: 13px; }
.ob-body { display:flex; flex-direction:column; justify-content: center; height: 205px; }
.ob-changelog-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.85rem; max-height: 180px; }
.ob-changelog-item strong { display:block; font-size: 1.2rem; color:var(--neut400); }
.ob-changelog-item p { margin:0.2rem 0 0; font-size:1.2rem; color:var(--neut300); line-height:1.5; }
.ob-placeholder { font-size:0.85rem; color:var(--neut200); margin:0; }
.ob-stat { font-family:var(--head); font-size: 2.75rem; font-weight:600; color:var(--neut400); margin:0.25rem 0 0; }
.ob-stat--muted { color: var(--neut200); }
.ob-shortcut-btn { display:flex; align-items:center; justify-content:center; width: 60px; height: 60px; border-radius:50%; background:var(--neut200); color:var(--purp600); font-size: 4.75rem; line-height:1; text-decoration:none; margin:0.5rem auto 0; transition:background 0.2s; color: #FFF; }
.ob-shortcut-btn:hover { background:var(--purp300); text-decoration:none; }

/* Project Detail Back Button */
.selected-nav-item a, .selected-nav-item a:hover { pointer-events: none; cursor: default; }


/* =============================================
   ARTICLE CARDS
   ============================================= */
/* Content visibility toggle */
#content-toggle-form::before { content: "Show or hide:"; font-size: 1.2rem; letter-spacing: 0.05em; }
#content-toggle-form { flex-direction: row; margin-top: 0; }
#content-toggle-form label { margin: 0 0 0 20px; font-size: 1.2rem; text-transform: capitalize; letter-spacing: 0.05em; }
#content-toggle-form label input { margin-right: 5px; }
.content-toggle-form { padding: 10px; }

/* Checkbox & radio overrides */
.uk-checkbox:checked, .uk-checkbox:indeterminate, .uk-radio:checked, .uk-checkbox:checked:focus, .uk-radio:checked:focus { background-color: #7869bf; 
    border: 1px solid #7869bf; }

/* Card container */
#articles-menu-item.selected-nav-item a { color: var(--purp700)!important; }
.news-card { background-color: white; padding: 15px 15px 40px 15px; box-shadow: 1px 1px 6px rgba(85, 84, 89, 0.25) !important; border: 1px solid var(--neut100); border-radius: 12px;  overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform 0.3s ease-in-out; }
.news-card:hover { transform: translateY(-5px); }

/* Card image */
.image-container { max-height:200px; overflow:hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; position: relative;  }
.article-image { width:100%; height:160px; object-fit:cover; }

.feed_by { width: 100%; position: absolute; bottom: -20px; left: 0; background: var(--neut100); color: var(--secondp); padding: 8px 10px; border-top-right-radius: 4px; 
    border-bottom-right-radius: 4px; font-size: 1.0rem; font-family: var(--head); border: none; font-weight: 500; letter-spacing: 0.5px; }

/* Card title */
.news-content h3 { font-size: 1.6rem; margin-top: 10px; margin-bottom: 20px; font-family: var(--head); font-weight: 600; line-height: 1.25em; color: var(--neut400); }
.news-content h3 a { color: var(--neut400) !important; text-decoration: none !important; font-family: var(--head) !important; }

/* Score display */
.content-section { margin: 12px 0; }
.score-container { display: flex; margin: 12px 0; flex-direction: row; justify-content: left; align-items: center; font-size: 1.1rem; }
.score-container strong { margin: 0!important; }
.score-circles-container { display: flex; justify-content: center; }
.score-circle { width: 12px; height: 12px; border-radius: 50%; margin: 0 2px; }

/* Card meta fields */
#additional-metrics-section {margin-bottom:40px;}
.source, .date, .category, .overtone_type, .description, .show-source_location, .show-source_zip_code { font-size: 1.5rem; font-family: var(--body); font-weight: 400; 
    color: var(--neut300); display: block; padding: 5px; margin: 5px 0; border-top: 1px solid var(--neut100); }
.additional-metric span { display: block; font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; }
.metric-label { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.125em; }
.date-range { color: var(--neut300); }
.description { line-height: 1.45em; }
.show-Tone_Label { text-transform: capitalize; }

/* Skeleton loading states */
.source.skeleton, .date.skeleton { color: transparent; border: 1px solid transparent; }
.overtone_type_skeleton { display: inline-block; background-color: #ffffff; color: #00accc; font-size: 16px; font-weight: 400; padding: 5px 10px; border-radius: 5px; 
    margin: 5px 5px 5px 0; transition: all 0.3s ease; }
.category_skeleton { display: inline-block; background-color: #ffffff; color: #9f54f0; font-size: 16px; font-weight: 400; padding: 5px 10px; border-radius: 5px; 
    margin: 5px 5px 5px 0; transition: all 0.3s ease; }

/* Hide empty tags */
.category:empty, .overtone_type:empty { display: none; }

/* Card body */
.news-content { padding: 3px; background-color: #fff; position: relative; z-index: 0; }

/* Feedback button */
.feedback-button { color: var(--secondp); font-size: 1.2rem; cursor: pointer; background: var(--neutral); border: none; padding: 10px 0 10px 20px; position: absolute; 
    bottom: 0; left: 0; border-top: 1px solid var(--neut200); width: 100%; font-size: 1.2rem; }

/* Table row stripes */
.even-stripe { background-color: #fff; }
.odd-stripe { background-color: var(--neut100); }


/* =============================================
   FILTERS
   ============================================= */
.filters-trigger-btn { color: var(--purp800); padding: 10px; align-items: center; display: flex; background: var(--purp100); }
.filters-trigger-btn span { margin-right: 8px;}

/* Filter panel container */
.uk-offcanvas-bar { background: var(--neutral); color: var(--neut400); }
.search-left-panel h2, .search-left-panel h3, .search-left-panel h4, .uk-offcanvas-bar h2, .uk-offcanvas-bar h3, .uk-offcanvas-bar h4 { color: var(--neut400)!important; 
    font-weight: 600!important; }
.search-left-panel h4 { margin-top:20px; }
.search-highlight{ background: var(--secondm); color:inherit; border-radius:2px; padding:0 2px; }

/* Filter action buttons */
.submit-btn { background: var(--secondp); border-radius: 2px!important; border: 1px solid var(--secondp); font-size: 1.2rem!important; font-weight: 400!important;
    color: #fff!important; }
.submit-btn:disabled{ background:var(--neut100)!important; border-color:var(--neut100)!important; color:var(--neut200)!important; cursor:not-allowed!important; }
.filter-btn { margin-left: 20px; padding: 0 30px; height: 44px; line-height: 44px; }
.filter-btn:hover { background: var(--neut300); color: #fff !important; }
.filter-btn { background: #7869bf; color: #fff; border: 1px solid var(--purp500); font-size: 1.2rem; letter-spacing: 2px; border-radius: 4px; font-family: var(--body); }
.filter-button { background: #fbfaff; color: var(--purp900); border: 1px solid var(--neut100); font-size: 1.2rem; letter-spacing: 2px; border-radius: 4px; 
    font-family: var(--body); }
.filter-off-button { background: var(--neut100); border-color: var(--neut100); padding: 0 20px; border-radius: 3px; font-size: 1rem; }
.filter-off-button span { margin-left: 4px; }
.filter-sort-btns { align-items: center!important; }

/* Accordion */
.uk-accordion-title { font-weight: 600; }
.filters-date-grid, .filters-accordion { width:100%; }

/* Checklist */
.filters-check { text-transform: capitalize; }
.filters-check input { margin-right:5px; }
.filters-checklist { list-style: none; padding-left:5px; }
.filters-divider { background-color: var(--neut100); display: block; width: 100%; height: 1px; }

/* Dropdown list */
.uk-nav.drop-list { margin: 10px 0; }
.uk-nav.drop-list a, .uk-dropdown li a { font-size: 14px; font-family: var(--body); color: var(--neut300); text-transform: capitalize; }
.double, .dropdown-submenu .dropdown-menu { width: 100%; border: none !important; border-radius: 0 !important; padding: 20px !important; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); }
.dropdown-submenu .dropdown-menu.show { max-height: 363px; overflow: auto; }
.dropdown-submenu .dropdown-menu li { margin: 10px 0; }
.dropdown-menu.show { left: 0; }
.dropdown-menu.show li a { text-wrap: balance; }
.dropdown-menu.show li a:focus { background: #f1eefc; }

/* Metric dropdown */
.form-check { display: flex; flex-direction: column; align-items: center; margin-right: 5px; }
.form-check .form-check-input { float: none; margin-left: auto; width: 26px; }
.form-check-label { margin-right: 5px; }
.metric-drop-label { text-align: center; width: 100%; margin: 5px 0 !important; }
.metric-drop-label:nth-of-type(1) { margin-top: 0 !important; }

/* Result count */
.text-count p { font-size: 14px; color: #555459; letter-spacing: 1px; margin: 0; }
.article-count { border-right: 1px solid var(--neut200); padding-right: 30px; }


/* Seacrh Form */
.uk-form-icon { height: 50px; }

/* =============================================
   SEARCH CARDS
   ============================================= */
#project-hits { margin-top:40px; }
/* Election filter select */
#election-select { height: 40px; padding: 10px 15px; width: 66%; border: 1px solid var(--neut200); border-radius: 5px; margin-right: 5px; }

/* Refresh button */
#refresh-button { border: 1px solid var(--neut200); border-radius: 5px; background: var(--purp500); height: 40px; padding: 10px 15px; color: #fff; font-family: var(--body); }

/* Clear refinements */
#clear-refinements { margin-top: 30px; margin-bottom: 30px; }
#clear-refinements button:not(:disabled) { background: var(--neut400); padding: 20px 0; border-radius: 7px; color: #fff; font-family: var(--body); font-size: 14px; text-transform: capitalize; }
#clear-refinements button:not(:disabled):hover { background: var(--neut100); color: var(--neut300); }

/* Search box */
#searchbox { width: 76%; box-sizing: border-box; flex: 1; margin-top: -20px; }
#tone-label { margin: 2rem auto; text-align: left; }
.search-panel { display: flex; align-items: center; margin-bottom: 40px; }
.ais-SearchBox-form:before { height: 20px !important; width: 20px !important; margin-top: 1px !important; background-repeat: no-repeat !important; left: .8rem !important; }
.ais-SearchBox-form { flex-direction: row; width: 100%; height: 42px; }
.ais-SearchBox-input { height: 44px; padding-left: 30px!important; font-size: 1.2rem!important; }

/* AlgoliaSearch overrides */
.ais-Hits-item:first-of-type, .ais-InfiniteHits-item:first-of-type, .ais-Hits-item, .ais-InfiniteHits-item { border-radius: 15px!important; align-items: baseline!important; }
.ais-RefinementList-item { font-size: 1.4rem!important; margin: 5px 0; }
.ais-RefinementList-count { padding: 4px 5px!important; font-size: 1.1rem!important; }
.ais-RefinementList-checkbox { height: 14px!important; min-width:14px!important; color: var(--lavender)!important; }
.ais-ClearRefinements-button:disabled[disabled] { font-size: 1.2rem; color: var(--neut200); background: var(--neut300); }
.ais-Pagination-link { height: 40px!important; padding: 0 15px!important; font-size: 1.2rem!important; }

/* Offcanvas panel overrides */
.uk-offcanvas-overlay::before { background: rgba(0, 0, 0, 0.75); }
.uk-offcanvas-bar hr { border-top-color: rgba(0, 0, 0, 0.2); }
.uk-offcanvas-bar .uk-close { color: var(--neut400); }
.uk-offcanvas-bar .uk-button-default { background: var(--purp500); font-family: var(--body); font-size: 14px; color: #fff; text-transform: capitalize; border: none; }
.search-left-panel .dropdown-container { margin-top: 30px; }
.panel-title { margin-top: 30px; color: #555459 !important; font-weight: 700; }

/* Article meta */
.article-concepts { letter-spacing: 0.015em; font-family: var(--body); font-size: 14px; font-weight: 300; }
.articles-paragraph-label { font-family: var(--body); font-size: 12px; line-height: 1.45em; color: var(--neut300); }
.article-pub-date, .article-concepts { font-size: 14px; font-family: var(--body); font-weight: 400; text-transform: uppercase; color: var(--neut300); }
.article-details { margin: 20px 0; }
.article-details div { padding: 0; }

/* Card image */
.hit-img-wrap { width: 100%; height: 165px; overflow: hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.seacrh-article-image { height: 200px; overflow: hidden; border-top-left-radius: 6px; border-top-right-radius: 6px; }

/* Panel dropdown button */
/*.drop-btn{ width: 100%; margin: 5px 0 20px; line-height: 1em!important; padding: 20px 0; } */
.panel-drop { width: 100%; margin: 5px 0 10px; line-height: 1em !important; padding: 14px 0; border-radius: 7px; }
.panel-drop:hover { background: var(--neut300) !important; color: #fff; }

/* =============================================
   MODAL PANEL
   ============================================= */
.uk-modal-dialog { background: var(--neutral)!important; }
.modal-wrap {padding: 20px;  background: #fff; border-radius: 20px; }


/* =============================================
   OFFCANVAS PANEL
   ============================================= */
.vue-offcanvas-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }

/* Show overlay */
.vue-offcanvas-overlay.active { opacity: 1; pointer-events: auto; }

/* Offcanvas panel base */
.offcanvas-panel { position: fixed; top: 0; bottom: 0; width: 280px; background: #fff; box-shadow: 0 0 20px rgba(0,0,0,0.3); padding: 20px; z-index: 1001; transition: transform 0.3s ease-in-out; }

/* Slide from left (default) */
.offcanvas-panel.left { left: 0; transform: translateX(-100%); }
.vue-offcanvas-overlay.active .offcanvas-panel.left { transform: translateX(0); }

/* Slide from right */
.offcanvas-panel.right { right: 0; left: auto; transform: translateX(100%); }
.vue-offcanvas-overlay.active .offcanvas-panel.right { transform: translateX(0); }

@media (max-width: 640px) {
  .offcanvas-panel { width: 90%; }
}

/* =============================================
   UPLOADS / ARTICLE ZOOM-IN
   ============================================= */
/* Upload wrapper */
.submit-upload-wrapper { display: flex; justify-content: space-between; align-items: center; margin: 30px 0; box-sizing: border-box; width: 90%; }

/* Article card */
.article-card-title { font-weight: 600; color: var(--purp800); text-transform: uppercase; }
.article-summary { border-radius: 15px; max-width: 620px; }
.article-content-wrap { display: flex; justify-content: center; align-items: center; }

/* Text clip & fade */
.text-clipped { position: relative; max-height: 300px; overflow: hidden; }
.fade-overlay { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, transparent, white); pointer-events: none; }

/* Icon text label */
.icon-txt { text-transform: uppercase; color: var(--purp400); font-weight: 600; }

/* Icons — active (purple) */
.icon-audience { width: 18px; height: 16.2px; color: var(--purp400); }
.icon-type { width: 18px; height: 17.5px; color: var(--purp400); }
.icon-tone { width: 18px; height: 15.48px; color: var(--purp400); }
.icon-safety { width: 15px; height: 17.5px; color: var(--purp400); }
.icon-voice { width: 15.31px; height: 18px; color: var(--purp400); }
.icon-share { width: 28px; height: 28px; color: var(--purp400); }
.icon-add { width: 28px; height: 28px; color: var(--purp400); }
.icon-arrow { width: 28px; height: 28px; color: var(--purp400); }

/* Icons — inactive (grey) */
.icon-audience-grey { width: 18px; height: 16.2px; color: var(--neut200)!important; }
.icon-type-grey { width: 18px; height: 17.5px; color: var(--neut200)!important; }
.icon-tone-grey { width: 18px; height: 15.48px; color: var(--neut200)!important; }
.icon-safety-grey { width: 15px; height: 17.5px; color: var(--neut200)!important; }
.icon-voice-grey { width: 15.31px; height: 18px; color: var(--neut200)!important; }
.icon-share-grey { width: 28px; height: 28px; color: var(--neut200)!important; }
.icon-add-grey { width: 28px; height: 28px; color: var(--neut200)!important; }
.icon-arrow-grey { width: 28px; height: 28px; color: var(--neut200)!important; }

/* Icon button */
.icon-btn { background: transparent; color: var(--neut400); padding: 2px; }

/* Small button */
.btn-small { line-height: 24px; border-radius: 4px; background: var(--purp500); padding: 0 20px; }
.btn-small:hover { background: var(--purp800); }

/* UIkit close button */
.uk-close { color: var(--purp900); }
.uk-close:hover { color: var(--neut100); background: var(--neut400); }
.uk-checkbox, .uk-radio { border: 1px solid var(--neut300); }

/* Recommendation panel */
.recommendation-box { position: absolute; width: 45%; bottom: 120px; margin: 30px 0; }
.recommendation-footer { position: absolute; width: 45%; bottom: 40px; text-align: center; justify-content: center; align-items: center; }
.recommendation-footer > div > p { margin-top: 10px; }

/* Upload inputs */
#remaining-uploads-count { font-weight: 600; font-size: 1.6rem; }
#url-box { width: 90%; max-width: 100%; border-radius: 15px; padding: 15px; font-size: 16px; resize: vertical; box-sizing: border-box; }

/* Upload progress */
#progress-text { margin-top: 0.5rem; font-size: 1.2rem; }
.spinner { width: 50px; height: 50px; border: 6px solid #ccc; border-top: 6px solid var(--purp500); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }
#global-progress { display: block !important; width: 320px; height: 30px; margin: 1rem auto 0; appearance: auto; -webkit-appearance: progress-bar; accent-color: var(--purp500); }
#global-progress::-webkit-progress-bar { background-color: #eee; }
#global-progress::-webkit-progress-value { background-color: var(--purp500); transition: width 0.2s ease-in-out; }
#global-progress::-moz-progress-bar { background-color: var(--purp500); }

/* Filter menu frame */
.filter_menu-frame { margin-top: 20px; padding: 10px 0; width: 100%; max-width: 100%; box-sizing: border-box; border-bottom: 1px solid var(--neut100); }


/* =============================================
   COLLECTION SELECTOR
   ============================================= */

.collections-state { text-align: center;}
.collection-selector{ position:relative; }
.collection-selector__btn{ display:flex; align-items:center; gap:8px; padding:8px 14px; background:#fff; border:1.5px solid var(--purp200); border-radius:4px; cursor:pointer; font-family:var(--body); font-size:1.3rem; font-weight:600; color:var(--secondp); transition:border-color 0.15s ease, box-shadow 0.15s ease; white-space:nowrap; }
.collection-selector__btn:hover{ border-color:var(--neut300); box-shadow:0 2px 8px rgba(89,71,178,0.12); }
.collection-selector__label{ max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.collection-selector__dropdown{ position:absolute; top:calc(100% + 6px); left:0; min-width:280px; background:#fff; border:1.5px solid var(--purp200); border-radius:10px; box-shadow:0 8px 24px rgba(89,71,178,0.12); z-index:100; overflow:hidden; }
.collection-selector__item{ display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; transition:background 0.1s ease; }
.collection-selector__item:hover{ background:var(--purp100); }
.collection-selector__item--active{ background:var(--purp200); }
.collection-selector__item--active .collection-selector__item-name{ color:var(--purp600); }
.collection-selector__item--muted{ color:var(--neut200); font-size:1.2rem; font-style:italic; cursor:default; }
.collection-selector__item-name{ font-family:var(--body); font-size:1.3rem; font-weight:600; color:var(--neut400); line-height:1.3; }
.collection-selector__item-meta{ font-family:var(--body); font-size:1.1rem; color:var(--secondr); }
.collection-selector__delete{ background:none; border:none; padding:4px; cursor:pointer; color:var(--neut200); border-radius:4px; display:flex; align-items:center; transition:color 0.15s ease, background 0.15s ease; }
.collection-selector__delete:hover{ color:var(--secondr); background:rgba(230,42,118,0.08); }

/* "Set as default" star — Saved Insights dropdown only (see
   insightsToolbarComponent.js's setDefaultSavedView). Amber when active to
   read as "starred" rather than reusing the delete button's danger color.
   Forced solid (Aug 30, 2026 — Cio's request: "hard to read" as UIkit's
   stock outline glyph) by overriding the SVG's own fill, since UIkit's
   icon set has no separate filled-star variant to swap in for — this
   applies regardless of active state, so even the unstarred gray version
   reads as a shape rather than a thin outline. */
.collection-selector__star{ background:none; border:none; padding:4px; cursor:pointer; color:var(--neut200); border-radius:4px; display:flex; align-items:center; transition:color 0.15s ease, background 0.15s ease; }
.collection-selector__star:hover{ color:var(--secondm); background:rgba(208,153,0,0.08); }
.collection-selector__star--active{ color:var(--secondm); }
.collection-selector__star svg *{ fill:currentColor; }

/* Rename pencil — Saved Insights + Collections dropdowns (Aug 30, 2026 —
   Cio's request). Same sizing/hover shape as its star/delete siblings,
   neutral color (no "danger" or "amber" meaning to convey, unlike those
   two) so it doesn't compete with either for attention. */
.collection-selector__edit{ background:none; border:none; padding:4px; cursor:pointer; color:var(--neut200); border-radius:4px; display:flex; align-items:center; transition:color 0.15s ease, background 0.15s ease; }
.collection-selector__edit:hover{ color:var(--purp500); background:rgba(89,71,178,0.08); }

.collect-options { padding-top: 15px; }
.collection-title { margin: 0; }

/* Articles */
.article-range-text { font-weight: 600; }
.article-bottom-toolbar { border-top: 1px solid var(--neutral); padding-top: 20px; margin: 20px 0; }
.article-search__input { margin:0!important; background: rgba(255,255,255, 0.5)!important; }
.article-search { border: 1px solid var(--neut100); border-radius: 4px;}
.article-search__clear { color: var(--secondp); }
.uk-search-default .uk-search-input:focus { border-color: var(--secondm); }
.setting-options { padding: 20px; }


/* Wikipedia autocomplete dropdown (project create) */
.create-project__wiki-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  z-index: 100;
  max-height: 200px;
  overflow-y: auto;
  margin-top: 2px;
}
.create-project__wiki-option {
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}
.create-project__wiki-option:hover { background: #f3f4f6; }
.accordion-item{ border:1px solid #e5e7eb; border-radius:6px; margin-bottom:8px; overflow:hidden; }
.accordion-header{ width:100%; display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:#f9fafb; border:none; cursor:pointer; font-weight:400; font-size:14px; text-align:left; color: var(--neut300); }
.accordion-header:hover{ background: var(--purp200); color: var(--neut300); }
.accordion-count{ font-weight:400; color:#6b7280; margin-left:4px; }
.accordion-icon{ display:inline-block; transition:transform 0.15s ease; color:#6b7280; }
.accordion-icon.open{ transform:rotate(180deg); }
.accordion-body{ padding:14px; border-top:1px solid #e5e7eb; }
.feed-chip--locked{ opacity:0.7; cursor:default; }

/* =============================================
   COLLECTIONS FILTERS & SETTINGS PANEL
   ============================================= */
.filters-form{ display:flex; flex-direction:column; height:100%; overflow-y:auto; padding:0; }
.filters-header{ display:flex; align-items:flex-start; justify-content:space-between; padding:20px 20px 0; }
.filters-title{ font-family:var(--head); font-size:1.6rem; font-weight:700; color:var(--neut400); margin:0; }
.filters-subtitle{ font-family:var(--body); font-size:1.2rem; color:var(--neut200); margin:4px 0 0; }
.filters-clear-btn{ background:none; border:none; font-family:var(--body); font-size:1.2rem; color:var(--purp500); cursor:pointer; padding:0; text-decoration:underline; white-space:nowrap; }
.filters-clear-btn:hover{ color: var(--neut100); }
.filters-divider{ background:var(--neut100); border:none; height:1px; margin:0; }

/* Date grid */
.filters-date-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 20px; box-sizing: border-box; }
.filters-date-grid label{ font-family:var(--body); font-size:1.1rem; font-weight:600; color:var(--neut300); display:block; margin-bottom:4px; }
.filters-date-grid .uk-input{ font-size:1.2rem; height:36px; border-radius:6px; border-color:var(--neut100); }

/* Accordion sections */
.filters-section{ padding:0 20px; box-sizing: border-box; }
.filters-section-header{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; padding:14px 0; cursor:pointer; font-family:var(--body); font-size:1.3rem; font-weight:600; color:var(--neut400); }
.filters-section-header:hover{ color:var(--neut300); background:none;}

/* Depth buttons */
.filters-depth{ display:flex; gap:8px; padding-bottom:14px; }
.depth-btn{ width:40px; height:40px; border-radius:8px; border:1.5px solid var(--neut200); background:#fff; font-family:var(--head); font-size:1.4rem; font-weight:700; color:var(--neut300); cursor:pointer; transition:all 0.15s ease; display:flex; align-items:center; justify-content:center; padding: 0 24px; }
.depth-btn:hover{ border-color:var(--neut300); color:var(--neut100); }
.depth-btn.active{ background:var(--secondp); border-color:var(--secondp); color:var(--neut100); }

/* Checklists */
.filters-checklist{ display:flex; flex-direction:column; gap:8px; padding-bottom:14px; }
.filters-checklist--scroll{ max-height:200px; overflow-y:auto; padding-right:4px; }
.filters-check{ display:flex; align-items:center; gap:10px; cursor:pointer; font-family:var(--body); font-size:1.3rem; color:var(--neut400); }
.filters-check input{ flex-shrink:0; }
.filters-count{ font-size:1.1rem; color:var(--neut200); margin-left:4px; }

/* Signal chips */
.filters-signals{ display:flex; flex-wrap:wrap; gap:8px; padding-bottom:14px; }
.signal-chip{ padding:5px 12px; border-radius:20px; border:1.5px solid var(--neut100); background:#fff; font-family:var(--body); font-size:1.2rem; font-weight:600; color:var(--neut300); cursor:pointer; transition:all 0.15s ease; }
.signal-chip:hover{ border-color:var(--neut300); color:var(--neut100); }
.signal-chip.active{ background:var(--secondp); border-color:var(--secondp); color: var(--neut100); }

/* Footer */
.filters-footer{ display:flex; gap:12px; justify-content:flex-end; align-items:center; padding:16px 20px; margin-top:auto; border-top:1px solid var(--neut100); position:sticky; bottom:0; background:#fff;box-sizing: border-box; }
.filters-inline-btns { display:flex; gap:12px; margin-left: 35px;}
.filters-footer .uk-button-default{ background:#fff; border:1.5px solid var(--neut100); color:var(--neut300); font-family:var(--body); font-size:1.2rem; border-radius:6px; }
.filters-footer .uk-button-default:hover{ border-color:var(--neut200); color:var(--neut400); }
.filters-footer .submit-btn{ background:var(--secondp); border:none; color:var(--neut100); font-family:var(--body); font-size:1.2rem; border-radius:6px; padding:0 24px; }
.filters-footer .submit-btn:hover{ background:var(--neut300); }

/* Filters trigger button in toolbar */
.filters-trigger-btn{ display:flex; align-items:center; gap:6px; padding:6px 14px; border-radius:8px; border:1.5px solid var(--neut100); background:#fff; font-family:var(--body); font-size:1.2rem; font-weight:700; color:var(--neut300); letter-spacing:0.05em; cursor:pointer; transition:all 0.15s ease; position:relative; }
.filters-trigger-btn:hover{ border-color:var(--neut300); color:var(--neut100); }
.filters-trigger-btn--active{ border-color:var(--secondp); color:var(--secondp); background:var(--purp100); }
.filters-active-dot{ width:7px; height:7px; border-radius:50%; background:var(--purp500); position:absolute; top:-3px; right:-3px; }

/* Offcanvas panel width override for filters */
.offcanvas-panel{ width:340px!important; padding:0!important; overflow:hidden; display:flex; flex-direction:column; }
@media(max-width:640px){ .offcanvas-panel{ width:100%!important; } }

/* =============================================
   LIST VIEW
   ============================================= */
.news-grid--list{ grid-template-columns:1fr; gap:18px; }
.news-grid--list .news-card{ display:flex; flex-direction:row; align-items: center; gap:16px; padding:0; border-radius:4px; border: none; justify-content: center; }
.news-grid--list .news-card:hover{ transform:none; box-shadow:2px 2px 8px rgba(85,84,89,0.2)!important; }
.news-grid--list .image-container{ flex-shrink:0; width:72px; height:72px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.news-grid--list .article-image{ width:72px; height:72px; object-fit:cover; border-radius:0; }
.news-grid--list .feed_by{ display:none; }
.news-grid--list .news-content{ flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 16px; margin: 0; padding: 15px 0; }
.news-grid--list .news-content h3{ width:100%; margin:0; font-size:1.6rem; }
.news-grid--list .news-content h3 a{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; margin:0; }
.news-grid--list .score-container{ display:flex; align-items:center; gap:4px; margin: 0; }
.news-grid--list .content-section{ margin:0; font-size:1.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.news-grid--list .show-description{ display:none; }
.news-grid--list .feedback-button{ display:none; }
.icon-btn--active { background: var(--secondm); color: var(--neut100); }

/* =============================================
   SETTINGS PANELS
   Tab transitions, status indicators, toggle labels.
   ============================================= */
thead { background: #FFF; }

.uk-table-striped tbody tr:nth-of-type(odd) { background: rgba(255,255,255, 0.4);}
.uk-tab>.uk-active>a { border-color: var(--secondm); font-size: 1.2rem; color: var(--neut400); }
.uk-tab>*>a { font-size: 1.2rem; color: var(--neut300); }
.uk-form-controls { min-width: 50%; width: 320px; }
.panel-fade-enter-active, .panel-fade-leave-active { transition: opacity 0.15s ease; }
.panel-fade-enter-from, .panel-fade-leave-to { opacity: 0; }
.uk-table th { font-size: 1.2rem; color: var(--neut200); font-family: var(--head); font-weight: 600; }
.uk-table-small td, .uk-table-small th { font-size: 1.2rem; position: relative; }
.account-feeds {  max-width:180px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-panel { padding: 0; }

/* Status */
.status-paused { background-color: #888780; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.status-dot--active { background-color: var(--teal); }
.status-dot--inactive { background-color: var(--neut200); }
.enterprise-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background-color: var(--lavender); border-radius: 10px; vertical-align: middle; }
.enterprise-tier-radio:checked, .enterprise-tier-radio:checked:focus { background-color: var(--secondp); border: 1px solid var(--secondp); }
.project-row--inactive { opacity: .5; }
.project-row--inactive:hover { opacity: .7; }

/* Feedback */
.label-downgrade::before { background-color: var(--secondr)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-add::before  { background-color: var(--secondp)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-comment::before  { background-color: var(--neut200); width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-upgrade::before  { background-color: var(--teal)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }
.label-remove::before  { background-color: var(--secondm)!important; width:8px; height:8px; border-radius: 10px; margin-right: 6px; content:''; }

/* Toggle */
.switch-label { display: inline-flex; align-items: center; cursor: pointer; gap: 8px; }
.switch-label input[type="checkbox"] { -webkit-appearance: none; appearance: none; width: 44px; height: 24px; background: #d1d5db; 
    border-radius: 9999px; position: relative; cursor: pointer; transition: background 0.25s ease; flex-shrink: 0; }
.switch-label input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: #fff;
    border-radius: 50%; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); }
.switch-label input[type="checkbox"]:checked { background: var(--secondp); }
.switch-label input[type="checkbox"]:checked::before { transform: translateX(20px); }
.switch-label input[type="checkbox"]:focus-visible { outline: 2px solid var(--secondp); outline-offset: 2px; }
.panel-date { font-size: 1.1rem; width: 90px; }
.status { width: 90px; }
.score { display: flex; align-items: center; }

/* Chips */
.feed-chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 0 8px 0 0; border: none!important; 
    cursor: text; transition: border-color 0.15s ease; background: transparent; }
.feed-chips-input:focus-within { border-color: var(--purp500); outline: none; }
.feed-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; background: var(--purp200); color: var(--purp700); 
    border-radius: 99px; font-size: 1.2rem; font-family: var(--body); font-weight: 600; white-space: nowrap; line-height: 1.6; }
.feed-chip-remove { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; 
    color: var(--purp400); padding: 0; font-size: 1rem; line-height: 1; width: 16px; height: 16px; border-radius: 50%; 
    transition: background 0.15s ease, color 0.15s ease; }
.feed-chip-remove:hover { background: var(--purp400); color: #fff; }
.feed-chip-text-input { border: none; outline: none; flex: 1; min-width: 200px; font-size: 1.3rem; font-family: var(--body); color: var(--neut400); 
    background: #fff;  padding: 2px 0; }
.feed-chip-text-input::placeholder { color: var(--neut200); font-style: italic; }

/* Notifications */
.uk-notification-message-success { color: var(--secondp)!important; font-size: 16px; font-weight: 500; text-align: center; }
.uk-notification-message-danger { color: var(--secondr)!important; font-size: 16px; font-weight: 500; text-align: center; }
.uk-notification-message-warning { color: var(--neut400)!important; font-size: 16px; font-weight: 500; text-align: center; }

/* =============================================
   PROJECT OVERVIEW
   ============================================= */
.overview-card{ background:#fff; border-radius:12px; padding:24px; box-shadow:0 2px 8px rgba(89,71,178,0.07); min-height:120px; display:flex; flex-direction:column; gap:12px; }
.overview-card:not(.overview-card--chart){ max-height: 140px!important; overflow-y: auto;}
.overview-card--chart{ min-height:280px; }
.overview-card__label{ font-family:var(--head); font-size:1.1rem; font-weight:700; letter-spacing:0.08em; color:var(--neut200); margin:0; text-transform:uppercase; }
.overview-card__big-number{ font-family:var(--head); font-size:3.6rem; font-weight:700; color:var(--purp500); margin:0; line-height:1; }
.overview-card__spinner{ display:flex; align-items:center; justify-content:center; flex:1; }
.overview-card__empty{ color:var(--neut200); font-size:1.3rem; font-style:italic; flex:1; display:flex; align-items:center; }
.overview-card__chart-wrap{ flex:1; position:relative; }
.overview-card__chips{ display:flex; flex-wrap:wrap; gap:8px; }
.overview-chip{ display:inline-block; padding:4px 12px; border-radius:20px; font-size:1.2rem; font-family:var(--body); font-weight:600; background:var(--purp200); color:var(--purp600); }
.overview-chip--signal{ background:var(--neut100); color:var(--neut300); }
.overview-chip--muted{ background:var(--neut100); color:var(--neut200); font-weight:500; }

/* =============================================
   MODULE CARD (shared)
   Generic reusable card shell — chrome only, no content awareness.
   Reused across Overview / Projects / Insights grids.
   See docs/insights-module-card-build-spec.md
   ============================================= */
.module-card{ background:#fff; border-radius:12px; padding:20px; box-shadow:0 2px 8px rgba(89,71,178,0.07); display:flex; flex-direction:column; gap:12px; position:relative; }
.module-card--editing{ box-shadow:0 2px 12px rgba(89,71,178,0.16); }
.module-card__header{ display:flex; align-items:center; gap:10px; min-height:24px; }
.module-card__header-main{ flex:1; min-width:0; }
.module-card__title{ font-family:var(--head); font-size:1.4rem; font-weight:700; color:var(--neut300); margin:0; display:flex; align-items:center; }
.module-card-row-label{ font-family:var(--head); font-size:1.4rem; font-weight:700; color:var(--neut400); margin:0 0 10px 0; }
.module-card__edit-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.module-card__actions{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.module-card__icon-btn{ display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:none; background:transparent; border-radius:6px; color:var(--neut200); cursor:pointer; transition:background 0.15s ease, color 0.15s ease; }
.module-card__icon-btn:hover{ background:var(--neut100); color:var(--purp500); }
.module-card__close-btn{ display:flex; align-items:center; gap:4px; height:28px; padding:0 8px; border:none; background:transparent; border-radius:6px; color:var(--neut300); cursor:pointer; transition:background 0.15s ease, color 0.15s ease; }
.module-card__close-btn:hover{ background:var(--neut100); color:var(--purp500); }
.module-card__close-label{ font-family:var(--body); font-size:1.2rem; color:var(--neut300); }
.module-card__edit-btn{ opacity:0; transition:opacity 0.15s ease; }
.module-card:hover .module-card__edit-btn{ opacity:1; }
@media (hover: none){ .module-card__edit-btn{ opacity:1; } }
.module-card__options-btn{ opacity:0; transition:opacity 0.15s ease; }
.module-card:hover .module-card__options-btn,
.module-card__options-wrap:focus-within .module-card__options-btn{ opacity:1; }
@media (hover: none){ .module-card__options-btn{ opacity:1; } }
.module-card__body{ flex:1; min-width:0; }
.chip-row .module-card__body { max-height: 136px; overflow-x: auto; }
.card-drag-handle{ display:flex; align-items:center; justify-content:center; width:20px; height:24px; color:var(--neut200); opacity:0.6; cursor:grab; flex-shrink:0; }
.card-drag-handle:active{ cursor:grabbing; }
.module-card__size-group{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.module-card__size-label{ font-family:var(--body); font-size:1.1rem; color:var(--neut300); white-space:nowrap; }
.module-card__size-toggle{ display:flex; align-items:center; gap:4px; flex-shrink:0; }
.module-card__size-btn{ display:flex; align-items:center; justify-content:center; height:20px; padding:0; border:1.5px solid var(--purp200); background:#fff; border-radius:5px; color:var(--purp400); cursor:pointer; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.module-card__size-btn--small{ width:20px; }
.module-card__size-btn--large{ width:32px; }
.module-card__size-btn:hover{ border-color:var(--purp400); color:var(--purp600); }
.module-card__size-btn.active{ background:var(--purp500); border-color:var(--purp500); color:#fff; }
.module-card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:20px; }
.module-card.sortable-ghost{ opacity:0.35; }
.module-card.sortable-chosen{ box-shadow:0 4px 16px rgba(89,71,178,0.2); }
.module-card.sortable-drag{ cursor:grabbing; }

/* Overview grid — rows are computed (see overviewRows), not fixed markup.
   Each row is its own grid container so column widths can reflect the
   weight ratio (small=1fr, large=3fr) of whatever's actually in it.
   There's no separate top toolbar anymore — Save lives at the bottom
   next to "+ Add module" for both Overview and Insights (see
   .page-footer-row below), and its old status text ("Up to date" /
   "Unsaved changes" / "Saved ✓") is now the button's own label instead
   of a second element next to it — see saveButtonLabel() in
   mainViewProjectDetail.js and .save-status-btn below. */
.module-card-grid-wrap{ display:flex; flex-direction:column; gap:20px; }
.trending-keywords-standalone{ margin-top:20px; }
.module-card-row{ display:grid; gap:20px; align-items:stretch; position:relative; }
.module-card-row .module-card{ min-height:140px; min-width:0; }
.module-card-row__lock-btn{ position:absolute; top:-11px; right:10px; z-index:3; display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; border:1.5px solid var(--purp200); color:var(--purp400); cursor:pointer; opacity:0; transition:opacity 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease; box-shadow:0 2px 6px rgba(89,71,178,0.12); }
.module-card-row:hover .module-card-row__lock-btn{ opacity:1; }
.module-card-row__lock-btn--active{ opacity:1; background:var(--purp500); border-color:var(--purp500); color:#fff; }
.module-card-row__lock-btn:hover{ border-color:var(--purp400); color:var(--purp600); }
.module-card-row__lock-btn--active:hover{ color:#fff; }
@media (hover: none){ .module-card-row__lock-btn{ opacity:1; } }
.overview-module-body{ display:flex; flex-direction:column; flex:1; min-height:auto; }
.overview-module-swap-select{ font-family:var(--body); font-size:1.2rem; padding:4px 8px; border-radius:6px; border:1px solid var(--purp200); background:#fff; color:var(--neut400); max-width:100%; }
.module-card[data-card-id="table"], .module-card[data-card-id="line-3"] { min-height:140px; max-height: 600px; overflow-x: auto; }
.module-card[data-card-id="trending-keywords"]{ min-height:140px; max-height:520px; overflow-y:auto; }
.module-card-add-tile{ display:block; }
.module-card-add-tile__trigger{ display:flex; align-items:center; justify-content:center; width:100%; min-height:64px; border:1.5px dashed var(--purp300); border-radius:12px; background:transparent; color:var(--purp400); font-family:var(--body); font-size:1.3rem; font-weight:600; cursor:pointer; transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.module-card-add-tile__trigger:hover{ border-color:var(--purp400); color:var(--purp600); background:var(--purp100); }
.module-card-add-picker{ width:320px; max-width:90vw; }
.module-card-add-picker__option{ display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; cursor:pointer; text-align:left; }
.module-card-add-picker__option:hover{ background:var(--neut100); }
.module-card-add-picker__option strong{ font-family:var(--head); font-size:1.2rem; color:var(--neut400); display:flex; align-items:center; }
.comparison-badge{ display:inline-block; margin-left:6px; padding:1px 6px; font-size:0.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--neut300); background:var(--neut100); border-radius:8px; vertical-align:middle; }
.module-card-add-picker__option span{ font-family:var(--body); font-size:1.1rem; color:var(--neut300); }
.overview-module-hint{ font-family:var(--body); font-size:1.1rem; color:var(--neut300); margin:0 0 10px; }
.overview-module-empty{ font-family:var(--body); font-size:1.2rem; font-style:italic; color:var(--neut200); margin:0; }
.trending-keywords-section{ margin-bottom:16px; }
.trending-keywords-section:last-child{ margin-bottom:0; }
.trending-keywords-section__title{ font-family:var(--head); font-size:1.1rem; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--purp500); margin:0 0 8px; }
.trending-keywords-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.trending-keywords-list li{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.trending-keywords-list__x{ color:var(--neut200); font-size:1.1rem; }
.trending-keywords-list__stat{ margin-left:auto; font-family:var(--body); font-size:1.1rem; font-weight:700; color:var(--purp500); }
.trending-keywords-add-btn{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--purp300); background:#fff; color:var(--purp400); font-family:var(--body); font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.trending-keywords-add-btn:hover:not(:disabled){ border-color:var(--purp400); color:var(--purp600); background:var(--purp100); }
.trending-keywords-add-btn:disabled{ border-color:var(--neut100); color:var(--neut200); cursor:default; }

/* Structurally Tied Terms -- "Linked Row" (Sep 11, 2026, Cio's redesign,
   Option 3). Same row-list shape as .trending-keywords-list above, but
   with an inline strength bar next to the percentage instead of a bare
   number, and no bottom-border-per-row divider look since this list now
   lives in its own card rather than stacked under another section. */
.trending-ties-rows{ display:flex; flex-direction:column; max-height:324px; overflow-y:auto; }
.trending-ties-rows::-webkit-scrollbar{ width:6px; }
.trending-ties-rows::-webkit-scrollbar-thumb{ background:var(--neut200); border-radius:3px; }
.trending-ties-row{ display:grid; grid-template-columns:1fr 120px 44px; align-items:center; gap:16px; padding:12px 4px; border-bottom:1px solid var(--neut100); }
.trending-ties-row:last-child{ border-bottom:none; }
.trending-ties-row-terms{ display:flex; align-items:center; gap:6px; font-size:1.2rem; min-width:0; }
.trending-ties-row-terms .k{ font-weight:700; color:var(--neut400); white-space:nowrap; }
.trending-ties-row-terms .arrow{ color:var(--purp400); flex-shrink:0; }
.trending-ties-row-terms .d{ color:var(--neut300); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trending-ties-row-bar-wrap{ display:flex; align-items:center; gap:8px; }
.trending-ties-row-bar-track{ flex:1; height:5px; border-radius:3px; background:var(--neut100); overflow:hidden; }
.trending-ties-row-bar-fill{ height:100%; border-radius:3px; background:var(--teal); }
.trending-ties-row-pct{ font-size:1.1rem; font-weight:700; color:var(--neut300); font-variant-numeric:tabular-nums; width:32px; text-align:right; }
.trending-ties-row-add{ justify-self:end; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--purp300); background:#fff; color:var(--purp400); font-family:var(--body); font-size:1.3rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.trending-ties-row-add:hover:not(:disabled){ border-color:var(--purp400); color:var(--purp600); background:var(--purp100); }
.trending-ties-row-add:disabled{ border-color:var(--neut100); color:var(--neut100); cursor:default;    background: var(--secondp); }
@media (max-width:520px){ .trending-ties-row{ grid-template-columns:1fr 90px 36px; gap:10px; } }

/* Popular Term Pairs / Term Associations -- capped ranked lists with a
   "View all" expand (Sep 13, 2026, Cio's request), replacing the carousels
   both cards used since Sep 11 -- three carousels doing the same
   swipe-through-tiles interaction on one page read as repetitive rather
   than purposeful, and this pattern shows the top 5 of the up-to-10
   computed items with nothing to swipe, expanding the rest in place on
   click via overview.trendingPairsExpanded/discoveryStableExpanded
   (v-show, not v-if, so toggling doesn't re-render the rows). The two
   cards deliberately use different row shapes (boxed row vs. bar row) --
   Popular Term Pairs' stat needs its own visual weight (arrow + %), while
   Term Associations reads better as a plain ranked bar list since its
   value is a single %/meter, not a stat you want to visually shout. */
.pair-list{ display:flex; flex-direction:column; gap:8px; }
.pair-row{ background:transparent; border:1px solid var(--purp100); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:14px; }
.pair-row__term{ flex:1; min-width:0; font-family:var(--head); font-weight:700; font-size:1.2rem; color:var(--neut400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pair-row__stat{ font-family:var(--body); font-size:1.3rem; font-weight:700; white-space:nowrap; }
.pair-row__stat--up{ color:var(--stat-up); }
.pair-row__stat--down{ color:var(--stat-down); }
.pair-row__count{ font-family:var(--body); font-size:1.2rem; color:var(--neut300); white-space:nowrap; }

.bar-list{ display:flex; flex-direction:column; }
.bar-row{ display:grid; grid-template-columns:1fr 96px 40px; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--purp100); }
.bar-row:last-child{ border-bottom:none; }
.bar-row__label{ min-width:0; font-family:var(--body); font-size:1.3rem; color:var(--neut400); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; gap:4px; }
.bar-row__label .arrow{ color:var(--purp400); }
.bar-row__track{ height:7px; border-radius:4px; background:var(--neut100); overflow:hidden; }
.bar-row__fill{ height:100%; border-radius:4px; background:var(--purp400); }
.bar-row__value{ font-family:var(--body); font-size:1.2rem; font-weight:700; color:var(--neut300); text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-row__add{ flex-shrink:0; width:20px; height:20px; border-radius:50%; border:1px solid var(--purp500); background:var(--purp100); color:var(--purp500); font-family:var(--body); font-size:2rem; line-height:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; padding:0; transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.bar-row__add:hover:not(:disabled){ border-color:var(--purp400); color:var(--purp600); background:var(--purp100); }
.bar-row__add:disabled{ border-color:var(--secondt); color:var(--purp100); background: var(--secondt); cursor:default; }

.view-all-row{ display:flex; justify-content:flex-end; margin-top:10px; }
.view-all-link{ background:none; border:none; padding:0; font-family:var(--body); font-weight:700; font-size:1.15rem; color:var(--purp500); cursor:pointer; display:flex; align-items:center; gap:4px; }
.view-all-link:hover{ color:var(--secondp); text-decoration:underline; background: none; }
.view-all-link svg{ transition:transform 0.15s ease; }
.view-all-link.expanded svg{ transform:rotate(180deg); }

@media (max-width:720px){ .bar-row{ grid-template-columns:1fr 64px 36px; gap:10px; } }

/* Related trend chart next to Structurally Tied Terms (Sep 11, 2026) --
   fixed height since this card isn't resizable like the Insights grid
   cards, which get their chart-wrap height from an inline style instead
   (see insightsChartWrapStyle()). position:relative is still needed here
   for Chart.js's responsive canvas sizing to work at all. */
.anchor-term-chart-wrap{ position:relative; height:260px; }
/* Trending Now cards (Sep 7 2026, third pass) — individual stat cards per Cio's reference mockup, back to a white/shadowed box style (matching .overview-card's language) now that Trending Now is its own standalone card (see 'trending-now' in overviewModuleCatalog.js / mainViewProjectDetail.js) rather than nested inside the Trending Keywords .module-card — no more double-boxing concern, so the transparent "Layout cards" treatment from the previous pass no longer applies here. Capped at 5 cards (backend still computes/stores up to top_n=10) via .slice(0,5) in the template. --stat-up now points at the brand's own --teal (was a one-off green, since replaced per Cio's request) — --stat-down still uses --secondr (Deep Pink) since the brand book has no semantic red either. */
.trending-keywords-carousel{ padding:0 32px; }
.trending-keywords-carousel .uk-slider-items > li{ padding-left:6px; display:flex; }
.trending-keywords-carousel__nav{ color:var(--purp400); }
.trending-keywords-carousel__nav:hover{ color:var(--purp600); }
.trending-keywords-card-item{ background: transparent; border: 1px solid var(--purp100); border-radius:12px; padding:16px; box-shadow:0 2px 8px rgba(89,71,178,0.07); display:flex; flex-direction:column; gap:6px; }
.trending-keywords-card-item__term{ font-family:var(--head); font-size:1.3rem; font-weight:700; color:var(--neut400); margin:0; line-height:1.3; }
.trending-keywords-card-item__stat{ font-family:var(--body); font-size:1.3rem; font-weight:700; margin:0; display:flex; align-items:center; gap:4px; }
.trending-keywords-card-item__stat--up{ color:var(--stat-up); }
.trending-keywords-card-item__stat--down{ color:var(--stat-down); }
.trending-keywords-card-item__count{ font-family:var(--body); font-size:1.3rem; color:var(--neut300); margin:0; }

/* "Newly Attaching to Your Keywords" tiles (Sep 11, 2026, Cio's request) --
   Option 2 ("Stat Tile") from the earlier design-options artifact, applied
   instead of the plain chip-row list, then carouseled the same day (see
   .trending-keywords-carousel below, shared with Trending Term Pairs --
   the wrapper/nav classes are generic, not pair-specific, so no new CSS
   was needed for the carousel shell itself). Transparent-with-border, same
   treatment as .trending-keywords-card-item so both carousels in this
   card family read the same. */
.trending-keywords-tile{ position:relative; background:transparent; border:1px solid var(--purp100); border-radius:12px; padding:18px 16px 14px; box-shadow:0 2px 8px rgba(89,71,178,0.07); width:100%; box-sizing:border-box; display:flex; flex-direction:column; }
.trending-keywords-tile-add{ position:absolute; top:10px; right:10px; width:20px; height:20px; border-radius:50%; border:1px solid var(--purp500); background: var(--purp100); color:var(--purp500); font-family:var(--body); font-size:2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease; }
.trending-keywords-tile-add:hover:not(:disabled){ border-color:var(--purp400); color:var(--purp600); background:var(--purp100); }
.trending-keywords-tile-add:disabled{ border-color:var(--secondt); color:var(--purp100); background: var(--secondt); cursor:default; }
/* "+" spinner (Sep 13, 2026, per Cio: click-to-toast had no in-between feedback). Shared by .bar-row__add and .trending-keywords-tile-add while a term is being added -- see overview.pendingAdds / isTermPending() in mainViewProjectDetail.js. */
.add-term-spinner{ width:10px; height:10px; border-radius:50%; border:1.5px solid currentColor; border-top-color:transparent; animation:add-term-spin 0.6s linear infinite; }
@keyframes add-term-spin{ to{ transform:rotate(360deg); } }
.bar-row__add.is-pending, .trending-keywords-tile-add.is-pending{ cursor:default; }
.trending-keywords-tile-stat{ font-family:var(--head); font-size:2.4rem; font-weight:700; color:var(--purp600); line-height:1; margin:0 0 8px; font-variant-numeric:tabular-nums; }
.trending-keywords-tile-term{ font-size:1.4rem; color:var(--neut300); margin:0; line-height:1.4; }
.trending-keywords-tile-term b{ color:var(--neut400); font-weight:700; }
.flat-row-title, .flat-row-title .module-card__title { color: var(--neut300)!important; }
.grey { color: var(--neut300); }

/* Insights "+ Add Cards" panel — searchable accordion, replaces the old
   flat .module-card-add-picker list for Insights only (Overview keeps that
   flat picker as-is). Reuses .accordion-item/.accordion-header/
   .accordion-body/.accordion-icon and .enterprise-badge as-is — see
   custom-data-and-account-cards-addendum.md Section 22. */
.add-cards-picker{ width:340px; max-width:90vw; max-height:70vh; overflow-y:auto; }
.add-cards-picker .accordion-body{ padding:8px; }
.add-cards-empty{ font-family:var(--body); font-size:1.2rem; font-style:italic; color:var(--neut200); margin:0; padding:10px 12px; }

/* Insights module grid — reuses .module-card-grid-wrap/.module-card-row/
   .overview-module-swap-select as-is (see mainViewProjectDetail.js's
   Insights template block). */
.insights-limit-input{ font-family:var(--body); font-size:1.2rem; padding:4px 8px; border-radius:6px; border:1px solid var(--purp200); background:#fff; color:var(--neut400); width:64px; }
.insights-field-label{ display:flex; flex-direction:column; gap:2px; font-family:var(--body); font-size:1rem; color:var(--neut300); white-space:nowrap; }
.insights-style-radio-group{ display:flex; align-items:center; gap:10px; margin:0 4px; }
.insights-style-radio-label{ display:flex; align-items:center; gap:4px; font-family:var(--body); font-size:1rem; color:var(--neut300); cursor:pointer; }
.insights-pie-limit-warning{ font-family:var(--body); font-size:0.9rem; color:var(--secondr); margin-left:4px; }
.insights-edit-form{ display:flex; flex-direction:column; gap:14px; padding:10px 2px 4px; }
.insights-edit-field{ display:flex; flex-direction:column; gap:4px; }
.insights-edit-field__label{ font-family:var(--body); font-size:1rem; font-weight:600; color:var(--neut400); }
.insights-edit-field .overview-module-swap-select{ width:100%; max-width:320px; }
.insights-edit-field .insights-limit-input{ width:100%; max-width:280px; }
.insights-edit-field--checkbox{ flex-direction:row; align-items:center; gap:8px; }
.insights-edit-field--checkbox input[type="checkbox"]{ width:16px; height:16px; flex-shrink:0; cursor:pointer; }
.insights-edit-field--checkbox .insights-edit-field__label{ font-weight:500; cursor:pointer; }
.insights-title-note{ display:inline-flex; align-items:center; margin-left:6px; color:var(--neut300); cursor:help; vertical-align:middle; }
.insights-period-label{ display:inline-block; margin-left:8px; padding:2px 8px; font-size:1rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--neut400); background-color:var(--neut100); border-radius:10px; vertical-align:middle; }
.insights-sortable-th{ cursor:pointer; user-select:none; white-space:nowrap; }
.insights-sortable-th:hover{ color:var(--neut400); }
.insights-sort-arrow{ margin-left:4px; font-size:1rem; color:var(--neut300); }
.insights-table-pagination{ display:flex; align-items:center; justify-content:center; gap:12px; padding:12px 0 4px; }
.insights-table-pagination__btn{ padding:4px 12px; font-family:var(--body); font-size:1.1rem; color:var(--neut400); background:var(--neut100); border:none; border-radius:6px; cursor:pointer; }
.insights-table-pagination__btn:hover:not(:disabled){ background:var(--neut200); color:#fff; }
.insights-table-pagination__btn:disabled{ opacity:0.4; cursor:default; }
.insights-table-pagination__label{ font-family:var(--body); font-size:1.1rem; color:var(--neut300); }
.insights-spotlight{ display:flex; flex-direction:column; justify-content:center; flex:1; gap:4px; }
.insights-spotlight__name{ font-family:var(--head); font-size:2.2rem; font-weight:700; color:var(--neut400); margin:0; line-height:1.2; }
.insights-spotlight__value{ font-family:var(--head); font-size:2.8rem; font-weight:700; color:var(--purp500); margin:0; line-height:1; }
.insights-spotlight__context{ font-size:1.2rem; color:var(--neut300); margin:4px 0 0; }
.insights-table-wrap{ overflow-x:auto; overflow-y:auto; min-height: auto; flex:1; }
/* Article Leaderboard bulk-action toolbar + checkbox column (Cio's request, Aug 31, 2026) */
.insights-leaderboard-toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.insights-leaderboard-toolbar__count{ font-family:var(--body); font-size:1rem; font-weight:600; color:var(--neut400); margin-right:4px; }
.insights-leaderboard-checkbox-col{ width:32px; text-align:center; }
.insights-table-wrap th.insights-leaderboard-checkbox-col{ text-align:center; }
.tone-mix-chip{ display:inline-block; font-family:var(--body); font-size:1.2rem; padding:2px 8px; margin:0 4px 4px 0; border-radius:20px; background:var(--purp100); color:var(--purp600); white-space:nowrap; }

/* Author Comparison (Cio's request, Sep 14, 2026) -- a row of 2-4 side-by-side panels, one per compared author. */
.insights-author-comparison{ flex:1; display:flex; }
.insights-author-comparison__grid{ display:flex; flex-wrap:wrap; gap:16px; width:100%; }
.insights-author-comparison__panel{ flex:1 1 220px; min-width:220px; display:flex; flex-direction:column; padding:12px; border:1px solid var(--neut100); border-radius:10px; }
.insights-author-comparison__name{ font-family:var(--head); font-size:1.4rem; font-weight:700; color:var(--neut400); margin:0; }
.insights-author-comparison__count{ font-family:var(--body); font-size:1.1rem; color:var(--neut300); margin:2px 0 8px; }
.insights-author-comparison__chart-wrap{ position:relative; height:100px; margin-bottom:8px; }
.insights-author-comparison__tones{ margin-bottom:4px; }
.insights-author-comparison__concepts{}
.insights-comparison-label{ color:var(--neut300); font-family:var(--body); font-size:1.2rem; font-weight:600; margin-right:6px; }
.insights-article-comparison{ flex:1; display:flex; }
.insights-article-comparison__grid{ display:flex; flex-wrap:wrap; gap:16px; width:100%; }
.insights-article-comparison__panel{ flex:1 1 220px; min-width:220px; display:flex; flex-direction:column; padding:12px; border:1px solid var(--neut100); border-radius:10px; }
.insights-article-comparison__headline{ font-family:var(--head); font-size:1.05rem; font-weight:700; color:var(--neut400); margin:0 0 8px; line-height:1.3; }
.insights-article-comparison__meta{ display:flex; flex-direction:column; gap:4px; }
.insights-article-comparison__meta-row{ display:flex; justify-content:space-between; gap:8px; font-family:var(--body); font-size:.85rem; color:var(--neut300); }
.insights-article-comparison__meta-row strong{ color:var(--neut400); font-weight:600; text-align:right; }

/* "+ Add module" (3fr) / Save (1fr) share one row — .page-footer-row
   is shared by Overview and Insights both (the "insights-" prefix is just
   where it was built first, not a scope restriction — worth a generic
   rename like .module-grid-footer-row next pass). .module-card-add-tile
   fills the left column unchanged; .page-footer-row__save
   right-aligns the Save button in the narrow right column. */
.page-footer-row{ display:grid; grid-template-columns:3fr 1fr; gap:20px; align-items:end; }
.page-footer-row__save{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }

/* Merged status+Save button (see saveButtonLabel() in
   mainViewProjectDetail.js) — one button whose own label does the job
   "Up to date"/"Unsaved changes" text used to do next to a plain "Save".
   min-width keeps it from visibly resizing as it cycles through "Page is
   Current" / "Save Changes" / "Saving…" / "Saved ✓", which are all
   different lengths. Disabled (not dirty) styling already comes free
   from .submit-btn:disabled above. */
.save-status-btn{ min-width:150px; width:100%; min-height: 64px;}

.page-footer-row__save .submit-btn:disabled { background: var(--purp200)!important; color: var(--neut300)!important; }

/* Insights page-title header — replaces the plain "Insights" text with
   "N articles with X and Y" once a summaryCount is loaded (see
   insightsToolbarComponent.js). Terms use --secondr to match the
   highlighted-term look from the reference screenshot. */
.insights-summary-text{ font-family:var(--head); font-size:1.4rem; color:var(--neut400); }
.insights-summary-term{ color:var(--secondr); font-weight:700; }
.insights-summary-wrap{ display:flex; flex-direction:column; align-items:center; line-height:1.3;text-align: center; max-width: 500px; }
.insights-summary-dates{ font-family:var(--head); font-size: 1.2rem; color:var(--neut300); margin-top:2px; }
.insights-initial-spinner{ display:flex; align-items:center; justify-content:center; min-height:240px; color:var(--neut200); }
.insights-count{ display:flex; flex-direction:column; justify-content:center; flex:1; }
.insights-count__delta{ margin-top:6px; font-family:var(--body); font-size:1.4rem; }
.insights-count__delta-hint{ color:var(--neut300); }
.insights-count__delta-value{ font-weight:600; }
.insights-count__delta-value--up{ color:#29b1cc; }
.insights-count__delta-value--down{ color:#E62A76; }
.insights-sentiment-value{ font-weight:600; }
.insights-sentiment-value--up{ color:#29b1cc; }
.insights-sentiment-value--down{ color:#E62A76; }
.insights-heading-card{ display:flex; flex-direction:column; justify-content:center; flex:1; }
.insights-heading-card__text{ font-family:var(--head); font-size:2rem; font-weight:700; color:var(--neut400); margin:0; line-height:1.2; }
.insights-paragraph-card{ flex:1; }
.insights-paragraph-card__text{ font-family:var(--body); font-size:1.3rem; color:var(--neut400); margin:0; line-height:1.6; white-space:pre-wrap; }
.insights-paragraph-card__text--empty{ color:var(--neut200); font-style:italic; }
.insights-section-space{ width:100%; }
.insights-paragraph-input{ resize:vertical; font-family:var(--body); }
.module-card--section-space, .module-card--trending-now, .module-card--proj-record-count, .module-card--structural-ties, .module-card--related-trend, .module-card--term-discovery { background:transparent; box-shadow: none; min-height: auto!important; padding: 20px; }

/* Heading and Paragraph split into their own rules (Sep 14, 2026, Cio's
   report) -- both used to share the line above along with every other
   flat/transparent card type, and Sep 13's cleanup pass (commit 4960a77)
   changed that shared padding from 0 24px to a uniform 20px while folding
   MORE card types into the same selector, which meant Heading/Paragraph
   silently picked up 20px of top/bottom padding they'd never had --
   visibly pushing stacked Heading + Paragraph Layout cards further apart
   than before. Kept in their own selectors now (not even shared with each
   other) specifically so a future change meant for one flat card type
   can't quietly change another's spacing again the same way. */
.module-card--heading { background:transparent; box-shadow: none; min-height: auto!important; padding: 0 24px; }
.module-card--paragraph { background:transparent; box-shadow: none; min-height: auto!important; padding: 0 24px; margin-top:-20px; }

/* Non-editable card look, option 2: transparent with a border (Sep 11,
   2026 rule -- see claude/card-styling-conventions.md). Same border look
   as .trending-keywords-card-item, generalized as a module-card modifier
   so any non-editable card can opt into "flat but with a defined edge"
   instead of the no-border flat look above. Originally used by the
   Related Trend line graph; Cio switched that card to the no-border look
   instead (.module-card--related-trend, above) same day -- kept defined
   here, unused for now, for whichever future non-editable card actually
   wants a defined edge. */
.module-card--bordered-flat{ background:transparent; box-shadow:none; border:1px solid var(--purp100); }

/* Related Trend header, flush right (Sep 11, 2026) -- the anchor keyword
   name, pushed to the far right of the card header by
   .module-card__header-main's flex:1 on the title side. Rendered via
   module-card's header-extra slot. */
.module-card--trending-now .module-card__title{ display:flex; align-items:baseline; }
.trending-keywords-standalone .module-card__title{ display:flex; align-items:baseline; }
.module-card--structural-ties .module-card__title{ display:flex; align-items:baseline; }
.trending-now-updated-note{ font-family:var(--body); font-size:1.1rem; font-weight:400; color:var(--neut300); white-space:nowrap; margin-left:auto; }
.module-card--count, .module-card--count .overview-module-body, .module-card--section-space .overview-module-body, .module-card--heading .overview-module-body, .module-card--paragraph .overview-module-body { min-height: auto!important;}
.module-card--spotlight{}
/* Header hidden until hover -- originally Insights Layout cards only (Cio's request, Aug 30, 2026), extended to the Overview Trending Now card Sep 7 2026 (same request, different card) -- same opacity-fade pattern already used for .module-card__edit-btn/.module-card__options-btn just above, not display:none, so hovering doesn't reflow the card's content up/down. */
/* Floating hover header (Cio's request, Aug 30, 2026 -- replaces the
   opacity-fade version above, which still reserved the header's flex
   space even while invisible, fighting attempts to bring two Layout
   cards close together). position:absolute pulls the header out of
   .module-card's flex flow entirely, so the card's actual content sits
   flush at the top with zero dead space; .module-card already has
   position:relative (base rule near the top of this file) so top/left/
   right:0 anchors correctly. pointer-events toggles alongside opacity --
   without that, the header (even invisible) would still intercept clicks
   meant for the content underneath it, since it's now stacked on top
   instead of pushing that content down. */
.module-card--heading .module-card__header, .module-card--paragraph .module-card__header, .module-card--section-space .module-card__header { position:absolute; top:0; left:0; right:0; z-index:2; margin:0; padding:6px 10px; background:#fff; border-radius:8px; box-shadow:0 2px 8px rgba(89,71,178,0.12); opacity:0; pointer-events:none; transition:opacity 0.15s ease; }
.module-card--heading:hover .module-card__header, .module-card--paragraph:hover .module-card__header, .module-card--section-space:hover .module-card__header { opacity:1; pointer-events:auto; }
@media (hover: none){ .module-card--heading .module-card__header, .module-card--paragraph .module-card__header, .module-card--section-space .module-card__header { opacity:1; pointer-events:auto; } }

/* Edit mode reverts the floating header back into normal flow (Cio's
   report, Sep 14, 2026). The floating/absolute rule above is deliberate
   for VIEW mode -- it's what lets two flat Layout cards sit flush
   together with zero reserved header space (see the comment above it).
   But in EDIT mode the header is no longer just an invisible title bar --
   moduleCardComponent renders the Size toggle (and would render any
   edit-controls slot content, though Heading/Paragraph/Spacer don't use
   that slot) inside it, and this project's own edit fields for these
   three types (Heading Text / Paragraph Text / Height) render in the
   card BODY, right at its top -- so the still-floating, opaque,
   z-index:2 header sat on top of and hid that content instead of framing
   it. Adding .module-card--editing to each selector raises specificity
   enough to win over the floating rule above without !important, so
   editing these three card types now behaves like every other card:
   header pinned in normal flow above the body, nothing covered. */
.module-card--heading.module-card--editing .module-card__header,
.module-card--paragraph.module-card--editing .module-card__header,
.module-card--section-space.module-card--editing .module-card__header {
  position: static; margin: 0; padding: 0; background: none; box-shadow: none; opacity: 1; pointer-events: auto;
}