/* VENDORED FILE - DO NOT EDIT.
Copied from design/agent-elite-style-guide @ 6138d18 (css/agent-elite-components.css)
by scripts/sync-style-guide.sh. Edit it upstream, then re-run that script. */
/* =====================================================================
AGENT ELITE: CLASS LIBRARY
Requires agent-elite-tokens.css to be linked FIRST.
Opt in by putting class="ae-scope" on a wrapper element; nothing here
restyles bare elements globally.
===================================================================== */
/* BASE + TYPE CLASSES: opt in by putting .ae-scope on a wrapper.
Nothing here restyles bare elements globally. */
.ae-scope, .ae-scope *, .ae-scope *::before, .ae-scope *::after { box-sizing: border-box; }
.ae-scope { font-family: var(--ae-font-body); color: var(--ae-ink); font-size: var(--ae-text-base); line-height: var(--ae-leading-body); -webkit-font-smoothing: antialiased; }
.ae-scope h1, .ae-scope h2, .ae-scope h3, .ae-scope h4, .ae-scope h5 { font-family: var(--ae-font-display); color: var(--ae-ink); margin: 0; }
.ae-scope a { color: var(--ae-blue); text-decoration: none; }
.ae-scope a:hover { color: var(--ae-blue-dark); text-decoration: underline; }
.ae-h1 { font-family: var(--ae-font-display); font-weight: 800; font-size: var(--ae-text-4xl); line-height: var(--ae-leading-tight); letter-spacing: -.02em; }
.ae-h2 { font-family: var(--ae-font-display); font-weight: 700; font-size: var(--ae-text-3xl); line-height: var(--ae-leading-snug); letter-spacing: -.01em; }
.ae-h3 { font-family: var(--ae-font-display); font-weight: 600; font-size: var(--ae-text-2xl); line-height: var(--ae-leading-snug); }
.ae-h4 { font-family: var(--ae-font-display); font-weight: 600; font-size: var(--ae-text-xl); }
.ae-eyebrow { font-family: var(--ae-font-body); font-weight: 700; font-size: var(--ae-text-sm); letter-spacing: .1em; text-transform: uppercase; color: var(--ae-blue); }
.ae-body { font-family: var(--ae-font-body); font-size: var(--ae-text-base); line-height: var(--ae-leading-body); color: var(--ae-gray); }
.ae-small { font-size: var(--ae-text-sm); color: var(--ae-gray); }
.ae-mono { font-family: var(--ae-font-mono); font-size: var(--ae-text-sm); }
.ae-micro-label { font: 700 11px var(--ae-font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--ae-gray); }
.ae-section-label { font: 700 13px var(--ae-font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ae-gray); }
/* =====================================================================
AGENT ELITE: COMPONENT LIBRARY v2.0
Requires ae-tokens.css loaded first. No box-shadow, no gradients,
anywhere in this file: elevation comes from a border and the page's
own gray-vs-white contrast, never a drop shadow.
Icons: Lucide, line style, 2px stroke, currentColor. No other icon
set, no emoji, anywhere in product UI.
===================================================================== */
/* ---------------------------------------------------------------------
BUTTONS: three functional types + one promo type. No shadow, no
gradient. Promo is the only pill/uppercase button, and it's reserved
for upsell/marketing moments inside the product: never for a
functional action like Save or Cancel.
--------------------------------------------------------------------- */
.ae-btn {
display: inline-flex; align-items: center; gap: 8px;
border-radius: var(--ae-radius);
padding: 11px 20px;
font: 600 15px var(--ae-font-body);
cursor: pointer;
border: 1px solid transparent;
transition: background var(--ae-dur) var(--ae-ease), border-color var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease);
white-space: nowrap;
}
.ae-btn:focus-visible { outline: 2px solid var(--ae-blue); outline-offset: 2px; }
.ae-btn svg, .ae-btn i { flex: none; }
/* Primary: the one solid-fill button in the system */
.ae-btn-primary { background: var(--ae-blue); color: #fff; border-color: var(--ae-blue); }
.ae-btn-primary:hover { background: var(--ae-blue-dark); border-color: var(--ae-blue-dark); }
.ae-btn-primary.is-danger { background: var(--ae-danger); border-color: var(--ae-danger); }
.ae-btn-primary.is-danger:hover { background: #b23636; border-color: #b23636; }
.ae-btn-primary:disabled { background: var(--ae-bg); border-color: var(--ae-border); color: var(--ae-gray); cursor: not-allowed; }
/* Secondary: outline, the workhorse for row/card actions */
.ae-btn-secondary { background: #fff; color: var(--ae-ink); border-color: var(--ae-border); }
.ae-btn-secondary:hover { border-color: var(--ae-blue); color: var(--ae-blue); }
/* Promo: pill, uppercase, reserved for upsell/marketing CTAs inside the product */
.ae-btn-promo { border-radius: var(--ae-radius-pill); background: var(--ae-blue); color: #fff; border-color: var(--ae-blue); text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; padding: 12px 24px; }
.ae-btn-promo:hover { background: var(--ae-blue-dark); border-color: var(--ae-blue-dark); }
/* Headline emphasis: wraps the outcome phrase in Elite Blue, matching the site */
.ae-emphasis { color: var(--ae-blue); }
/* Marketing-only utilities. Not product button types; used only inside the
Marketing Surfaces section and on the corporate site itself. */
.ae-btn-marketing { border-radius: var(--ae-radius-pill); padding: 13px 26px; font-size: 14.5px; }
.ae-btn-marketing.is-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.5); }
.ae-btn-marketing.is-outline:hover { border-color: #fff; }
.ae-btn-promo-outline { display: inline-flex; align-items: center; gap: 8px; border-radius: var(--ae-radius-pill); padding: 12px 24px; font: 600 13.5px var(--ae-font-body); text-transform: uppercase; letter-spacing: .04em; background: transparent; color: var(--ae-blue); border: 1.5px solid var(--ae-blue); cursor: pointer; }
.ae-btn-promo-outline:hover { background: var(--ae-blue-light); }
.ae-btn-text { background: none; border-color: transparent; padding: 0; color: var(--ae-blue); font: 600 14px var(--ae-font-body); }
.ae-btn-text:hover { color: var(--ae-blue-dark); }
.ae-btn-text.is-muted { color: var(--ae-gray); }
.ae-btn-text.is-muted:hover { color: var(--ae-ink); }
.ae-btn-text.is-danger { color: var(--ae-danger); }
.ae-btn-text.is-danger:hover { color: #b23636; }
/* ---------------------------------------------------------------------
SELECTABLE ROW: the one selection pattern (billing cycle, cancel
reasons, etc.) Border changes on select; never a fill-in radio dot.
--------------------------------------------------------------------- */
.ae-option-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ae-s-3); width: 100%; text-align: left; background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: 20px 24px; cursor: pointer; }
.ae-option-row.is-selected { border: 1.5px solid var(--ae-blue); background: var(--ae-blue-light); }
.ae-option-row .title { font: 600 15px var(--ae-font-body); color: var(--ae-ink); }
.ae-option-row .desc { font: 400 13px var(--ae-font-body); color: var(--ae-gray); margin-top: 2px; }
/* ---------------------------------------------------------------------
BADGES & CHIPS: status only. Chips reuse the blue tint, no
dedicated "identity" color exists or should be invented.
--------------------------------------------------------------------- */
.ae-badge { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ae-radius-pill); padding: 4px 12px; font: 600 12.5px var(--ae-font-body); }
.ae-badge .dot { width: 6px; height: 6px; border-radius: 50%; }
.ae-badge-success { background: var(--ae-success-light); color: var(--ae-success); }
.ae-badge-success .dot { background: var(--ae-success); }
.ae-badge-warning { background: var(--ae-warning-light); color: var(--ae-warning); }
.ae-badge-warning .dot { background: var(--ae-warning); }
.ae-badge-danger { background: var(--ae-danger-light); color: var(--ae-danger); }
.ae-badge-danger .dot { background: var(--ae-danger); }
.ae-badge-neutral { background: var(--ae-bg); color: var(--ae-gray); }
.ae-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--ae-radius-pill); padding: 5px 14px; font: 600 13px var(--ae-font-body); background: var(--ae-blue-light); color: var(--ae-blue-dark); }
/* ---------------------------------------------------------------------
ICON TILES: light-blue tile, blue icon. Two sizes, no more.
--------------------------------------------------------------------- */
.ae-icon-tile { display: inline-flex; align-items: center; justify-content: center; background: var(--ae-blue-light); color: var(--ae-blue-dark); flex: none; border-radius: var(--ae-radius); }
.ae-icon-tile.sz-sm { width: 36px; height: 36px; }
.ae-icon-tile.sz-lg { width: 48px; height: 48px; border-radius: var(--ae-radius-lg); }
.ae-avatar-tile { width: 52px; height: 52px; border-radius: var(--ae-radius-lg); background: var(--ae-bg); color: var(--ae-ink); display: inline-flex; align-items: center; justify-content: center; font: 700 18px var(--ae-font-display); flex: none; }
/* ---------------------------------------------------------------------
CARDS & PANELS: border only, no shadow, no exceptions.
--------------------------------------------------------------------- */
.ae-card { background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: var(--ae-card-p); }
.ae-card.is-compact { padding: var(--ae-card-p-compact); }
.ae-panel { background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); max-width: var(--ae-panel-max); }
.ae-panel-header { padding: var(--ae-panel-header-p); }
.ae-panel-body { padding: var(--ae-panel-body-p); display: flex; flex-direction: column; gap: var(--ae-section-gap); }
/* Section stack: the top level of a screen. Major sections (a stats block, a
product grid, an activity table) sit --ae-section-gap apart so the eye can
tell one section from the next without a rule or a heavier heading. */
.ae-section-stack { display: flex; flex-direction: column; gap: var(--ae-section-gap); }
/* Card grid: side-by-side cards sit --ae-card-gap apart; stacked cards use
--ae-stack-gap (the .ae-panel-body default). */
.ae-card-grid { display: grid; gap: var(--ae-card-gap); }
.ae-card-stack { display: flex; flex-direction: column; gap: var(--ae-stack-gap); }
.ae-strip { background: var(--ae-blue-light); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: var(--ae-s-5) var(--ae-s-6); display: flex; align-items: center; gap: var(--ae-s-3); }
/* Dark promo card: the one place a black card is allowed inside product
UI. At most one per screen; reuses the sidebar's own near-black, never
pure black, and never a whole panel. */
.ae-card-dark { background: var(--ae-chrome-bg); color: #fff; border-radius: var(--ae-radius-lg); padding: var(--ae-card-p); }
.ae-card-dark .ae-small { color: var(--ae-chrome-fg-dim); }
/* ---------------------------------------------------------------------
FORMS
--------------------------------------------------------------------- */
.ae-field { min-width: 0; }
.ae-field label { display: block; font: 600 12px var(--ae-font-body); color: var(--ae-gray); margin-bottom: 8px; }
.ae-field input, .ae-field select, .ae-field textarea {
box-sizing: border-box; max-width: 100%;
width: 100%; border: 1px solid var(--ae-border); border-radius: var(--ae-radius);
padding: 12px 14px; font: 400 14.5px var(--ae-font-body); color: var(--ae-ink);
background: #fff;
}
.ae-field input:focus, .ae-field select:focus, .ae-field textarea:focus { outline: none; border-color: var(--ae-blue); }
.ae-field input:disabled { background: var(--ae-bg); color: var(--ae-gray); }
.ae-field textarea { min-height: 96px; resize: vertical; font-family: var(--ae-font-body); }
.ae-field .helper { font: 400 12.5px var(--ae-font-body); color: var(--ae-gray); margin-top: 6px; }
.ae-field .error { font: 400 12.5px var(--ae-font-body); color: var(--ae-danger); margin-top: 6px; }
.ae-field.has-error input { border-color: var(--ae-danger); }
/* Select: native element, styled to match text inputs, with a leading/trailing icon wrap */
.ae-select-wrap, .ae-search-wrap { position: relative; }
.ae-select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.ae-select-wrap svg { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--ae-gray); pointer-events: none; }
.ae-search-wrap svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ae-gray); pointer-events: none; }
.ae-search-wrap input { padding-left: 40px; }
/* Checkbox: real input, visually hidden, paired with a styled box via sibling selector */
.ae-checkbox { display: inline-flex; align-items: center; gap: var(--ae-s-3); cursor: pointer; font: 500 14.5px var(--ae-font-body); color: var(--ae-ink); position: relative; }
.ae-checkbox input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ae-checkbox .box { width: 20px; height: 20px; border: 1.5px solid var(--ae-border); border-radius: var(--ae-radius-sm); display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; position: relative; }
.ae-checkbox .box::after { content: ''; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--ae-dur) var(--ae-ease); margin-top: -2px; }
.ae-checkbox input:checked + .box { background: var(--ae-blue); border-color: var(--ae-blue); }
.ae-checkbox input:checked + .box::after { transform: rotate(45deg) scale(1); }
.ae-checkbox input:focus-visible + .box { outline: 2px solid var(--ae-blue); outline-offset: 2px; }
/* Radio: same hidden-input pattern, circular */
.ae-radio { display: inline-flex; align-items: center; gap: var(--ae-s-3); cursor: pointer; font: 500 14.5px var(--ae-font-body); color: var(--ae-ink); position: relative; }
.ae-radio input { position: absolute; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.ae-radio .dot-outer { width: 20px; height: 20px; border: 1.5px solid var(--ae-border); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; background: #fff; }
.ae-radio .dot-outer::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ae-blue); transform: scale(0); transition: transform var(--ae-dur) var(--ae-ease); }
.ae-radio input:checked + .dot-outer { border-color: var(--ae-blue); }
.ae-radio input:checked + .dot-outer::after { transform: scale(1); }
.ae-radio input:focus-visible + .dot-outer { outline: 2px solid var(--ae-blue); outline-offset: 2px; }
/* Toggle: on/off setting, not a multi-choice control */
.ae-toggle { display: inline-flex; align-items: center; gap: var(--ae-s-3); cursor: pointer; position: relative; }
.ae-toggle input { position: absolute; opacity: 0; width: 42px; height: 24px; margin: 0; cursor: pointer; }
.ae-toggle .track { width: 42px; height: 24px; border-radius: var(--ae-radius-pill); background: var(--ae-border); position: relative; transition: background var(--ae-dur) var(--ae-ease); flex: none; }
.ae-toggle .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform var(--ae-dur) var(--ae-ease); }
.ae-toggle input:checked + .track { background: var(--ae-blue); }
.ae-toggle input:checked + .track::after { transform: translateX(18px); }
.ae-toggle input:focus-visible + .track { outline: 2px solid var(--ae-blue); outline-offset: 2px; }
/* Inline control cluster: checkboxes, radios and toggles sitting on one
row. 32px between controls so labels never crowd their neighbour's box,
16px between wrapped rows. Fields (inputs/selects) in the same row use
24px via .ae-field-row. */
.ae-inline-controls { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--ae-s-6); row-gap: var(--ae-s-4); }
.ae-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--ae-s-5); row-gap: var(--ae-s-5); }
/* ---------------------------------------------------------------------
TABLES: border only, generous cell padding
--------------------------------------------------------------------- */
.ae-table { width: 100%; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); border-collapse: separate; overflow: visible; }
.ae-table thead th { background: var(--ae-bg); text-align: left; font: 700 11px var(--ae-font-body); text-transform: uppercase; letter-spacing: .05em; color: var(--ae-gray); padding: var(--ae-table-head-p); }
.ae-table thead tr:first-child th:first-child { border-top-left-radius: 11px; }
.ae-table thead tr:first-child th:last-child { border-top-right-radius: 11px; }
.ae-table tbody td { padding: var(--ae-table-cell-p); border-top: 1px solid var(--ae-border); font: 400 14px var(--ae-font-body); }
.ae-table tfoot td { background: var(--ae-bg); font: 700 14px var(--ae-font-body); padding: var(--ae-table-head-p); }
/* ---------------------------------------------------------------------
NAVIGATION: content tabs + sidebar chrome
--------------------------------------------------------------------- */
.ae-tabs { display: flex; gap: var(--ae-s-7); border-bottom: 1px solid var(--ae-border); }
.ae-tab { font: 600 14.5px var(--ae-font-body); color: var(--ae-gray); padding: 12px 0; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
.ae-tab.is-active { color: var(--ae-blue); border-bottom-color: var(--ae-blue); }
/* Portal sidebar: --ae-portal-nav-bg (#363638), the client portal only. Other
products (the WordPress plugin, standalone tools) use a white surface with
.ae-tabs, not this fill. */
.ae-sidebar { width: var(--ae-sidebar-w); background: var(--ae-portal-nav-bg); color: var(--ae-portal-nav-fg); display: flex; flex-direction: column; min-height: 100%; padding: 24px 16px; box-sizing: border-box; }
.ae-sidebar .ae-nav-item { display: flex; align-items: center; gap: var(--ae-s-3); padding: 11px 14px; border-radius: var(--ae-radius); color: var(--ae-portal-nav-fg-dim); font: 500 14.5px var(--ae-font-body); cursor: pointer; }
.ae-sidebar .ae-nav-item:hover { color: #fff; }
.ae-sidebar .ae-nav-item.is-active { background: rgba(255,255,255,.08); color: #fff; }
/* Plugin shell: the WordPress-admin surface. One white panel that fills the
admin content area (no 1200px cap, no page-canvas margin), a blue header
strip carrying the logo, and a blue nav rail for top-level sections. Second
level inside a section is .ae-tabs; never a third level. */
.ae-plugin-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); overflow: hidden; }
.ae-plugin-header { display: flex; align-items: center; gap: var(--ae-s-5); padding: 20px var(--ae-s-6); background: var(--ae-plugin-nav-bg); color: var(--ae-plugin-nav-fg); }
.ae-plugin-header .ae-plugin-meta { font: 400 13px var(--ae-font-body); color: var(--ae-plugin-nav-fg-dim); border-left: 1px solid rgba(255,255,255,.35); padding-left: var(--ae-s-5); }
.ae-plugin-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.ae-sidebar.is-plugin { width: var(--ae-plugin-nav-w); background: var(--ae-plugin-nav-bg); color: var(--ae-plugin-nav-fg); padding: 20px 12px; }
.ae-sidebar.is-plugin .ae-nav-item { color: var(--ae-plugin-nav-fg-dim); min-height: 40px; width: 100%; text-align: left; background: none; border: none; }
.ae-sidebar.is-plugin .ae-nav-item:hover { background: var(--ae-plugin-nav-hover); color: var(--ae-plugin-nav-fg); }
.ae-sidebar.is-plugin .ae-nav-item.is-active { background: var(--ae-plugin-nav-active); color: var(--ae-plugin-nav-fg); font-weight: 600; }
.ae-sidebar.is-plugin .ae-plugin-version { font: 400 12px var(--ae-font-body); color: var(--ae-plugin-nav-fg-dim); padding: var(--ae-s-4) 14px 4px; }
/* ---------------------------------------------------------------------
ALERTS & BANNERS: status tint + status border, no shadow
--------------------------------------------------------------------- */
.ae-alert { display: flex; align-items: flex-start; gap: var(--ae-s-4); border-radius: var(--ae-radius-lg); padding: var(--ae-s-5); border: 1px solid; }
.ae-alert .title { font: 700 15px var(--ae-font-body); color: var(--ae-ink); }
.ae-alert .body { font: 400 13px/1.5 var(--ae-font-body); color: var(--ae-gray); margin-top: 2px; }
.ae-alert-warning { background: var(--ae-warning-light); border-color: var(--ae-warning); }
.ae-alert-warning svg { color: var(--ae-warning); }
.ae-alert-danger { background: var(--ae-danger-light); border-color: var(--ae-danger); }
.ae-alert-danger svg { color: var(--ae-danger); }
.ae-alert-info { background: var(--ae-blue-light); border-color: var(--ae-blue); }
.ae-alert-info svg { color: var(--ae-blue-dark); }
/* ---------------------------------------------------------------------
EMPTY STATES
--------------------------------------------------------------------- */
.ae-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--ae-s-10) var(--ae-s-6); color: var(--ae-gray); }
.ae-empty svg { color: var(--ae-border); margin-bottom: 16px; }
.ae-empty .headline { font: 600 15px var(--ae-font-body); color: var(--ae-ink); }
/* ---------------------------------------------------------------------
TOAST: no shadow; separation comes from the dark fill vs page bg
--------------------------------------------------------------------- */
.ae-toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); background: var(--ae-ink); color: #fff; font: 500 14px var(--ae-font-body); padding: 12px 22px; border-radius: var(--ae-radius-pill); display: flex; align-items: center; gap: 10px; }
/* ---------------------------------------------------------------------
MODAL SHELL: border only, no shadow; the scrim provides separation
--------------------------------------------------------------------- */
.ae-modal-overlay { position: fixed; inset: 0; background: rgba(14,14,16,.5); display: flex; align-items: center; justify-content: center; }
.ae-modal { background: #fff; border: 1px solid var(--ae-border); border-radius: var(--ae-radius-lg); padding: var(--ae-modal-p); max-width: 480px; width: 100%; }
.ae-modal .title { font: 700 19px var(--ae-font-display); color: var(--ae-ink); }
.ae-modal .body { font: 400 14.5px/1.65 var(--ae-font-body); color: var(--ae-gray); }
.ae-modal .footer { display: flex; justify-content: flex-end; gap: var(--ae-s-3); margin-top: var(--ae-s-6); }
/* ---------------------------------------------------------------------
INSIGHT LAYER: the portal's personality. Every number in the portal is
accompanied by plain language; these are the containers that carry it.
--------------------------------------------------------------------- */
/* Delta pill: a number's change vs the previous period. Tinted, never bare. */
.ae-delta { display: inline-flex; align-items: center; gap: 3px; border-radius: var(--ae-radius-pill); padding: 3px 9px; font: 700 12.5px var(--ae-font-body); white-space: nowrap; }
.ae-delta-up { background: var(--ae-success-light); color: var(--ae-success); }
.ae-delta-down { background: var(--ae-danger-light); color: var(--ae-danger); }
.ae-delta-flat { background: var(--ae-bg); color: var(--ae-gray); }
/* Arrow link: the portal's standard way out of a card into the detail view. */
.ae-arrow-link { display: inline-flex; align-items: center; gap: 7px; font: 600 14.5px var(--ae-font-body); color: var(--ae-blue); text-decoration: none; background: none; border: none; padding: 0; cursor: pointer; transition: color var(--ae-dur) var(--ae-ease), gap var(--ae-dur) var(--ae-ease); }
.ae-arrow-link:hover { color: var(--ae-blue-dark); gap: 11px; text-decoration: none; }
/* Insight note: the encouraging plain-language read on a number. Lives INSIDE
a card, under the figure it explains. Blue tint = neutral/positive read. */
.ae-insight { display: flex; gap: 10px; background: var(--ae-blue-light); border-radius: var(--ae-radius); padding: 14px 16px; font: 400 13.5px/1.55 var(--ae-font-body); color: var(--ae-ink); }
.ae-insight > svg, .ae-insight > i { color: var(--ae-blue); flex: none; margin-top: 1px; }
.ae-insight.is-amber { background: var(--ae-amber-light); }
.ae-insight.is-amber > svg, .ae-insight.is-amber > i { color: var(--ae-amber-text); }
/* Advisory banner: amber. Nothing is broken; this is an opportunity or a
nudge. Distinct from .ae-alert, which is a problem the user must act on. */
.ae-advisory { display: flex; gap: var(--ae-s-4); align-items: flex-start; background: var(--ae-amber-light); border-radius: var(--ae-radius-lg); padding: var(--ae-s-5); }
.ae-advisory .ae-advisory-eyebrow { font: 700 11.5px var(--ae-font-body); text-transform: uppercase; letter-spacing: .09em; color: var(--ae-amber-text); }
.ae-advisory .ae-advisory-title { font: 700 20px var(--ae-font-display); color: var(--ae-ink); margin-top: 6px; }
.ae-advisory .ae-advisory-body { font: 400 14px/1.6 var(--ae-font-body); color: var(--ae-ink); opacity: .78; margin-top: 5px; }
/* Progress meter: big percentage, supportive headline, amber track. */
.ae-meter-track { height: 9px; border-radius: var(--ae-radius-pill); background: var(--ae-border); overflow: hidden; }
.ae-meter-fill { height: 100%; border-radius: var(--ae-radius-pill); background: var(--ae-progress-fill); transition: width .4s var(--ae-ease); }
.ae-meter-ends { display: flex; justify-content: space-between; margin-top: 8px; font: 700 11px var(--ae-font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--ae-gray); }
/* Counter pill: "3 left", an amber count of things outstanding. */
.ae-counter { display: inline-flex; align-items: center; border-radius: var(--ae-radius-pill); padding: 3px 10px; background: var(--ae-amber-light); color: var(--ae-amber-text); font: 700 12px var(--ae-font-body); }
/* Context pill: cream. Says which account or mode you are operating in. */
.ae-context-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--ae-radius); padding: 8px 14px; background: var(--ae-amber-cream); color: var(--ae-amber-text); font: 600 14px var(--ae-font-body); }
/* Segmented control: a closed set of ranges or views. Active = blue pill. */
.ae-segmented { display: inline-flex; gap: 2px; background: var(--ae-bg); border: 1px solid var(--ae-border); border-radius: var(--ae-radius-pill); padding: 3px; }
.ae-segmented button { border: none; background: none; cursor: pointer; border-radius: var(--ae-radius-pill); padding: 7px 16px; font: 500 13.5px var(--ae-font-body); color: var(--ae-gray); transition: background var(--ae-dur) var(--ae-ease), color var(--ae-dur) var(--ae-ease); }
.ae-segmented button:hover { color: var(--ae-ink); }
.ae-segmented button.is-active { background: var(--ae-blue); color: #fff; font-weight: 600; }
/* Help dot: the small circled "?" that opens an explanation. */
.ae-help-dot { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ae-blue-light); color: var(--ae-blue); font: 700 11px var(--ae-font-body); cursor: help; border: none; vertical-align: middle; }
/* Stat card header: icon tile + label. The portal's signature card opening. */
.ae-stat-head { display: flex; align-items: center; gap: 12px; }
.ae-stat-head .ae-stat-label { font: 600 15px var(--ae-font-body); color: var(--ae-ink); }
.ae-stat-figure { display: flex; align-items: center; gap: 12px; margin-top: var(--ae-s-4); }
.ae-stat-figure .ae-stat-value { font: 800 44px var(--ae-font-display); color: var(--ae-ink); line-height: 1.05; letter-spacing: -.02em; }
/* Mini stat: small bordered box holding a micro label and one value. */
.ae-mini-stat { border: 1px solid var(--ae-border); border-radius: var(--ae-radius); padding: 10px 14px; }
.ae-mini-stat .ae-mini-label { font: 700 10px var(--ae-font-body); text-transform: uppercase; letter-spacing: .08em; color: var(--ae-gray); }
.ae-mini-stat .ae-mini-value { font: 600 15px var(--ae-font-body); color: var(--ae-ink); margin-top: 3px; }
/* Nav activity dot: something changed in that section since you last looked. */
.ae-nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ae-blue); flex: none; }
/* Watermark: the round logo, very low contrast, as decoration behind a dark
card or in a footer corner. Decoration only; never carries meaning. */
.ae-watermark { position: absolute; opacity: .07; pointer-events: none; user-select: none; }