/*
 * family-menu.css — shared gear/settings menu design language
 * Applies to both Planning Tool (.a11y-menu) and Marketing Tool (.gear-menu).
 * Both apps add .fam-* classes alongside their existing legacy classes.
 * DO NOT remove legacy classes — existing JS targets element IDs, not classes.
 *
 * Section order (canonical):
 *   Text size → Palette → Contrast → [product-specific] → Configuration → Signed in / Sign out
 *
 * Version: fam-menu-v2-20260526-1125
 */

/* ── Panel chrome ── */
/* ID-prefixed for specificity — beats any legacy selectors that survived elsewhere */
#gear-menu.fam-menu,
#a11y-menu.fam-menu,
.fam-menu {
  min-width: 230px;
  max-width: 260px;
  border-radius: 10px;
  border: 1px solid var(--line, #d8d6d0);
  background: var(--surface, #ffffff);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  padding: 6px 0;
}

/* ── Section wrapper ── */
.fam-menu-section {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft, #ececec);
}
.fam-menu-section:last-child {
  border-bottom: none;
}

/* Flush variant — used for link-style rows (Configuration, Sign out) */
.fam-menu-section-flush {
  padding: 2px 0;
  border-bottom: 1px solid var(--line-soft, #ececec);
}
.fam-menu-section-flush:last-child {
  border-bottom: none;
}

/* ── Section label ── */
.fam-menu-label {
  display: block;
  font-size: var(--text-xs, 11px);
  font-weight: 700;
  color: var(--ink-dim, #6d6863);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 7px;
}

/* ── Button row (flex container for size/palette buttons) ── */
.fam-menu-row {
  display: flex;
  gap: 6px;
}

/* ── Generic menu button (size, palette, wide toggle) ── */
.fam-menu-btn {
  flex: 1 1 auto;
  padding: 6px 10px;
  min-height: 34px;
  border: 1px solid var(--line, #d8d6d0);
  border-radius: 6px;
  background: var(--surface, #ffffff);
  color: var(--ink-muted, #555);
  font-family: inherit;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              border-color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              transform var(--dur-fast, 120ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.fam-menu-btn:hover {
  background: var(--surface-2, #f7f5f1);
  border-color: var(--line, #b8b6b0);
}
.fam-menu-btn:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: 2px;
}
/* Active / pressed state — both aria-pressed="true" and .active are honoured */
.fam-menu-btn[aria-pressed="true"],
.fam-menu-btn.active {
  background: var(--accent-soft, #ede9fe);
  color: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
}

/* Wide toggle (full-width button acting as a toggle) */
.fam-menu-btn-wide {
  width: 100%;
  text-align: left;
}
.fam-menu-btn-wide[aria-pressed="true"],
.fam-menu-btn-wide.active {
  background: var(--accent-soft, #ede9fe);
  color: var(--accent, #7c3aed);
  border-color: var(--accent, #7c3aed);
}

/* ── Text-size glyph sizes ── */
.fam-menu-size-sm { font-size: var(--text-xs, 11px); }
.fam-menu-size-md { font-size: var(--text-lg, 14px); }
.fam-menu-size-lg { font-size: 18px; }

/* ── Link-style rows (Configuration, Sign out) ── */
.fam-menu-link {
  display: block;
  width: 100%;
  padding: 9px 14px;
  background: none;
  border: none;
  font-family: inherit;
  font-size: var(--text-md, 13px);
  font-weight: 400;
  color: var(--ink, #222);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.fam-menu-link:hover {
  background: var(--surface-2, #f7f5f1);
}
.fam-menu-link:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: -2px;
}
.fam-menu-link-danger {
  color: #b1361c;
}
.fam-menu-link-danger:hover {
  background: #fcecea;
}

/* ── Signed-in row ── */
.fam-menu-signed-in-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.fam-menu-username {
  font-size: var(--text-md, 13px);
  font-weight: 600;
  color: var(--ink, #222);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Inline sign-out inside signed-in row */
.fam-menu-signout-inline {
  flex: 0 0 auto;
  padding: 4px 10px;
  min-height: 30px;
  border: 1px solid var(--line, #d8d6d0);
  border-radius: 6px;
  background: var(--surface, #ffffff);
  color: var(--ink-muted, #555);
  font-family: inherit;
  font-size: var(--text-sm, 12px);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
              color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
}
.fam-menu-signout-inline:hover {
  background: #fcecea;
  color: #b1361c;
  border-color: #e8c0b8;
}
.fam-menu-signout-inline:focus-visible {
  outline: 2px solid var(--accent, #7c3aed);
  outline-offset: 2px;
}

/* ── Meta row (Build info, env badge — marketing only) ── */
.fam-menu-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 14px;
  font-size: var(--text-xs, 11px);
}
.fam-menu-meta-label {
  color: var(--ink-muted, #555);
}
.fam-menu-meta-val {
  font-weight: 600;
  color: var(--ink, #222);
}

/* ── Dark palette overrides ── */
/* Planning uses html.palette-dark; marketing uses html[data-palette="dark"] */
html.palette-dark .fam-menu,
html[data-palette="dark"] .fam-menu {
  background: var(--surface, #1a2533);
  border-color: var(--line, #243245);
}
html.palette-dark .fam-menu-section,
html[data-palette="dark"] .fam-menu-section,
html.palette-dark .fam-menu-section-flush,
html[data-palette="dark"] .fam-menu-section-flush {
  border-bottom-color: var(--line-soft, #243245);
}
html.palette-dark .fam-menu-label,
html[data-palette="dark"] .fam-menu-label {
  color: var(--ink-dim, #768898);
}
html.palette-dark .fam-menu-btn,
html[data-palette="dark"] .fam-menu-btn {
  background: var(--surface-2, #243245);
  color: var(--ink, #d8e4ee);
  border-color: var(--line, #2e3e54);
}
html.palette-dark .fam-menu-btn:hover,
html[data-palette="dark"] .fam-menu-btn:hover {
  background: #2e3e54;
}
html.palette-dark .fam-menu-btn[aria-pressed="true"],
html.palette-dark .fam-menu-btn.active,
html[data-palette="dark"] .fam-menu-btn[aria-pressed="true"],
html[data-palette="dark"] .fam-menu-btn.active {
  background: #7dd3fc;
  color: #0f1722;
  border-color: #7dd3fc;
}
html.palette-dark .fam-menu-link,
html[data-palette="dark"] .fam-menu-link {
  color: var(--ink, #d8e4ee);
}
html.palette-dark .fam-menu-link:hover,
html[data-palette="dark"] .fam-menu-link:hover {
  background: #243245;
}
html.palette-dark .fam-menu-link-danger:hover,
html[data-palette="dark"] .fam-menu-link-danger:hover {
  background: #3a1a1a;
}
html.palette-dark .fam-menu-signout-inline,
html[data-palette="dark"] .fam-menu-signout-inline {
  background: #243245;
  color: #d8e4ee;
  border-color: #2e3e54;
}
html.palette-dark .fam-menu-signout-inline:hover,
html[data-palette="dark"] .fam-menu-signout-inline:hover {
  background: #3a1a1a;
  color: #f9a89a;
  border-color: #5a2a22;
}
html.palette-dark .fam-menu-username,
html[data-palette="dark"] .fam-menu-username {
  color: var(--ink, #d8e4ee);
}
html.palette-dark .fam-menu-meta-label,
html[data-palette="dark"] .fam-menu-meta-label {
  color: var(--ink-dim, #768898);
}
html.palette-dark .fam-menu-meta-val,
html[data-palette="dark"] .fam-menu-meta-val {
  color: var(--ink, #d8e4ee);
}

/* ── Reduced motion ── */
/* Directive: disable transforms but PRESERVE colour fades. */
@media (prefers-reduced-motion: reduce) {
  .fam-menu-btn,
  .fam-menu-link,
  .fam-menu-signout-inline {
    transition: background var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
                border-color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
                color var(--dur-hover, 140ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1));
    transform: none !important;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .fam-menu {
    max-width: calc(100vw - 16px);
  }
  /* Rule #4 — every interactive element ≥44px tall on touch (mobile-pattern.md).
     Bumps gear-menu children (text-size A/AA/AAA, palette toggles, High contrast,
     Configuration, Sign out) up from their desktop ~30-34px defaults. */
  .fam-menu-btn,
  .fam-menu-btn-wide {
    min-height: 44px;
    padding: 10px 12px;
  }
  .fam-menu-link {
    min-height: 44px;
    padding: 12px 14px;
  }
  .fam-menu-signout-inline {
    min-height: 44px;
    padding: 10px 14px;
  }
}