/* Alex suite bar. A thin, calm strip that sits ABOVE the V6 header on every
   Alex app. Vendored same-origin into each app (the Ask Alex utility pattern):
   no framework, no CDN, no build step, no inline handlers, native <dialog>,
   strict-CSP (script-src 'self') safe.

   The bar reads its own brand tokens from the host stylesheet (weave.css /
   Design System v2). It falls back to literal brand values so it still renders
   correctly if vendored into an app that has not defined the tokens yet. */

.alex-suite-bar {
  --asb-ink: var(--ink, #202034);
  --asb-purple: var(--alex-purple, #413494);
  --asb-purple-deep: var(--purple-900, #2b235e);
  --asb-charcoal: var(--charcoal, #35424b);
  --asb-muted: var(--muted, #69747e);
  --asb-line: var(--line, #dedee8);
  --asb-soft: var(--lavender, #ebe8fa);
  --asb-surface: var(--surface, #ffffff);
  --asb-radius: var(--radius-sm, 12px);

  position: relative;
  z-index: 90; /* below the sticky V6 header (z-index:100); it scrolls away */
  border-bottom: 1px solid var(--asb-line);
  background: color-mix(in srgb, var(--asb-surface) 92%, var(--asb-soft));
  font-family: var(--font-display, "Montserrat", "Segoe UI", Arial, sans-serif);
}

.alex-suite-bar__inner {
  width: min(calc(100% - (var(--page, 1rem) * 2)), var(--max, 1240px));
  min-height: 40px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.alex-suite-bar__group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

/* --- shared control chrome --- */
.alex-suite-bar__btn,
.alex-suite-bar__link {
  min-height: 44px; /* 44px touch target inside the ~40px visual strip */
  min-width: 44px;
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: var(--asb-radius);
  background: transparent;
  color: var(--asb-charcoal);
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.alex-suite-bar__btn:hover,
.alex-suite-bar__link:hover {
  color: var(--asb-purple-deep);
  background: color-mix(in srgb, var(--asb-purple) 8%, transparent);
}
.alex-suite-bar__btn:focus-visible,
.alex-suite-bar__link:focus-visible {
  outline: 2px solid var(--asb-purple);
  outline-offset: 2px;
}

/* --- waffle button --- */
.alex-suite-bar__waffle-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--asb-purple);
}
.alex-suite-bar__waffle-icon rect { fill: currentColor; }

/* --- suite-home wordmark link --- */
.alex-suite-bar__home {
  color: var(--asb-purple-deep);
  letter-spacing: -.02em;
}
.alex-suite-bar__home strong { font-weight: 800; }

/* --- account slot (right side, per-app truth) --- */
.alex-suite-bar__account {
  color: var(--asb-purple-deep);
}

/* --- responsive collapse: never overflow at 390px --- */
.alex-suite-bar__collapsible {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 719px) {
  /* Drop the waffle text label and the middle links; the button stays a real
     >=44px control and keeps its accessible name via the visually-hidden
     label. Only the waffle (left) and the account slot (right) remain. */
  .alex-suite-bar__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  .alex-suite-bar__home,
  .alex-suite-bar__ihc { display: none; }
}

/* Screen-reader-only helper for any hidden-but-announced text. */
.alex-suite-bar__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ===================== the waffle dialog ===================== */
.alex-suite-dialog {
  width: min(680px, calc(100vw - 2rem));
  max-height: min(78vh, 720px);
  padding: 0;
  border: 1px solid var(--line, #dedee8);
  border-radius: var(--radius-lg, 22px);
  background: var(--surface, #ffffff);
  color: var(--ink, #202034);
  box-shadow: var(--shadow-3, 0 30px 80px rgba(32, 32, 52, .16));
  overflow: hidden;
}
.alex-suite-dialog::backdrop {
  background: rgba(32, 32, 52, .42);
}
.alex-suite-dialog__panel {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}
.alex-suite-dialog__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 22px 12px;
  border-bottom: 1px solid var(--line, #dedee8);
}
.alex-suite-dialog__heading { flex: 1 1 auto; min-width: 0; }
.alex-suite-dialog__heading h2 {
  margin: 0;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--purple-900, #2b235e);
}
.alex-suite-dialog__heading p {
  margin: 2px 0 0;
  font-family: var(--font-body, "Lora", Georgia, serif);
  font-size: .86rem;
  color: var(--muted, #69747e);
}
.alex-suite-dialog__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line, #dedee8);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #ffffff);
  color: var(--charcoal, #35424b);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.alex-suite-dialog__close:hover { background: var(--lavender, #ebe8fa); color: var(--purple-900, #2b235e); }
.alex-suite-dialog__close:focus-visible { outline: 2px solid var(--alex-purple, #413494); outline-offset: 2px; }

.alex-suite-dialog__body {
  padding: 8px 22px 20px;
  overflow-y: auto;
}

.alex-suite__group { margin-top: 16px; }
.alex-suite__group-label {
  margin: 0 0 8px;
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #69747e);
}
.alex-suite__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 559px) {
  .alex-suite__grid { grid-template-columns: 1fr; }
}

.alex-suite__card {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--line, #dedee8);
  border-radius: var(--radius-md, 16px);
  background: var(--surface, #ffffff);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.alex-suite__card:hover {
  border-color: var(--alex-purple, #413494);
  background: color-mix(in srgb, var(--alex-purple, #413494) 5%, var(--surface, #fff));
  transform: translateY(-1px);
}
.alex-suite__card:focus-visible {
  outline: 2px solid var(--alex-purple, #413494);
  outline-offset: 2px;
}
.alex-suite__card[aria-current="true"] {
  border-color: var(--alex-purple, #413494);
  background: var(--lavender, #ebe8fa);
}
.alex-suite__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.alex-suite__card-name {
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: .95rem;
  font-weight: 800;
  color: var(--purple-900, #2b235e);
}
.alex-suite__card-summary {
  margin: 4px 0 0;
  font-family: var(--font-body, "Lora", Georgia, serif);
  font-size: .82rem;
  line-height: 1.35;
  color: var(--charcoal, #35424b);
}
.alex-suite__pill {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.alex-suite__pill--live { color: var(--green-ink, #386811); background: var(--green-soft, #edf7e2); }
.alex-suite__pill--preview { color: var(--blue-ink, #14577e); background: var(--blue-soft, #e8f5fc); }
.alex-suite__pill--waitlist { color: var(--gold-ink, #765300); background: var(--gold-soft, #fff3c8); }
.alex-suite__pill--current { color: #fff; background: var(--alex-purple, #413494); }

.alex-suite-dialog__foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #dedee8);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.alex-suite-dialog__foot a {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  color: var(--charcoal, #35424b);
  font-family: var(--font-display, "Montserrat", sans-serif);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}
.alex-suite-dialog__foot a:hover { color: var(--purple-900, #2b235e); text-decoration: underline; }
.alex-suite-dialog__foot a:focus-visible { outline: 2px solid var(--alex-purple, #413494); outline-offset: 2px; border-radius: 6px; }

/* ===================== first-viewport budget ===================== */
/* The bar adds ~45px of chrome above the fold (a 44px touch target plus its
   border). On apps that carry a V6 Kinetic hero, reclaim that height from the
   hero's top padding so the "primary action in the first viewport" contract
   still holds. Scoped to pages that actually render the bar (sibling of main),
   and matches nothing on apps without a Kinetic hero. */
.alex-suite-bar ~ main .alex-hero {
  padding-top: clamp(18px, 2.2vw, 38px);
}

/* ===================== motion + print ===================== */
@media (prefers-reduced-motion: no-preference) {
  .alex-suite-dialog[open] { animation: alex-suite-in 180ms cubic-bezier(.22, 1, .36, 1); }
}
@keyframes alex-suite-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .alex-suite-bar *,
  .alex-suite-dialog,
  .alex-suite-dialog * {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .alex-suite-bar { display: none !important; }
  .alex-suite-dialog { display: none !important; }
}

/* ---------------------------------------------------------------------------
   Invest Hamilton County menu — the IHC nav button on the bar + the section
   columns rendered inside its native <dialog>. Reuses the waffle dialog panel.
   --------------------------------------------------------------------------- */
.alex-suite-bar__ihcbtn{
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: .34rem;
}
.alex-suite-bar__caret{
  width: 9px;
  height: 6px;
  opacity: .8;
  transition: transform .18s ease;
}
.alex-suite-bar__ihcbtn[aria-expanded="true"] .alex-suite-bar__caret,
.alex-suite-bar__ihcbtn:hover .alex-suite-bar__caret{ transform: translateY(1px); }

.alex-ihc__cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.6rem 2rem;
}
.alex-ihc__col-label{
  font-family: var(--font-display, "Montserrat", system-ui, sans-serif);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--brand, #413494);
  margin: 0 0 .7rem;
}
.alex-ihc__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.alex-ihc__list a{
  color: var(--ink, #1f2430);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.3;
}
.alex-ihc__list a:hover,
.alex-ihc__list a:focus-visible{
  color: var(--brand, #413494);
  text-decoration: underline;
}
@media (prefers-reduced-motion: reduce){
  .alex-suite-bar__caret{ transition: none; }
}