/* =========================================================
   app.css
   ======
   Layout and component styles for app.iadtx.com. Builds on
   tokens.css and fonts.css. No tokens are redefined here.
   ========================================================= */

/* ─── Layout ──────────────────────────────────────────── */

.nav {
  background: var(--color--primary);
  padding: 0 28px;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--color--white);
}

/* Nav logo: img-based wordmark (items 15-18).
   The old span-based wordmark had a click-gap on the X because
   .wordmark__x inherited pointer-events from the parent anchor
   inconsistently across browsers. The WebP asset is a single
   fully-clickable element with no dead zones. */
.nav__logo {
  display: inline-flex;
  align-items: center;
  opacity: 1;
  transition: opacity .15s ease;
  /* No colour-darkening hover - navy background makes dark text invisible. */
}
.nav__logo:hover,
.nav__logo:focus-visible {
  opacity: .85;
}

.nav__logo-img {
  height: 28px;
  width: auto;
  display: block;
}

/* ─── Wordmark ───────────────────────────────────────
   The entire wordmark (all five letters) is set in Cal Sans SemiBold.
   .wordmark__x adds the brand green only. One rule, applied everywhere
   the brand name is shown: nav, password gate, reports, limit screen. */
.wordmark {
  font-family: var(--font--wordmark);
  font-weight: var(--fw--semibold);
  letter-spacing: var(--letter-spacing--tight);
  color: inherit;
}
.wordmark__x {
  color: var(--color--secondary);
  font-weight: var(--fw--semibold);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav__link {
  font-size: var(--text-size--small);
  color: rgba(255, 255, 255, 0.5);
  padding: 5px 8px;
  border-radius: 5px;
  font-weight: var(--fw--regular);
  transition: color var(--motion--fast) var(--ease--standard);
}
.nav__link:hover { color: var(--color--white); }

.nav__sep {
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 0.15);
}

.plan-badge {
  font-size: var(--text-size--tiny);
  font-weight: var(--fw--semibold);
  padding: 3px 9px;
  border-radius: var(--radius--pill);
  background: rgba(32, 166, 93, 0.18);
  color: var(--color--secondary);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color--secondary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--fw--semibold);
  color: var(--color--white);
}

.page {
  min-height: calc(100vh - var(--nav-height));
  padding: 0 0 var(--spacing--2xlarge);
}

.content-col {
  max-width: var(--content-col--width);
  margin: 0 auto;
  padding: var(--spacing--xlarge) var(--content-col--padding-x) 0;
}
.content-col--account { max-width: var(--content-col--account); }

/* ─── Typography helpers ──────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font--primary);
  font-weight: var(--fw--semibold);
  line-height: var(--line-height--heading);
  color: var(--color--primary);
  letter-spacing: var(--letter-spacing--tight);
}

h1, .h1 { font-size: var(--text-size--xlarge); }
h2, .h2 { font-size: var(--text-size--large); }
h3, .h3 { font-size: var(--text-size--medium); }
h4, .h4 { font-size: var(--text-size--base); }

.eyebrow {
  font-size: var(--text-size--tiny);
  font-weight: var(--fw--semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing--eyebrow);
  color: var(--color--secondary);
}

.text-small { font-size: var(--text-size--small); }
.text-muted { color: var(--color--neutral-500); }

/* ─── Buttons ────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--xsmall);
  font-family: var(--font--primary);
  font-size: var(--text-size--small);
  font-weight: var(--fw--semibold);
  padding: 9px 18px;
  border-radius: var(--radius--button);
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background var(--motion--fast) var(--ease--standard),
    border-color var(--motion--fast) var(--ease--standard),
    color var(--motion--fast) var(--ease--standard);
}

.btn--primary {
  background: var(--color--secondary);
  color: var(--color--white);
}
/* Both background AND text colour must be re-asserted on hover.
   The global `a:hover` in tokens.css shifts anchor colour to
   `--color--secondary-dark`, which on a Green Action button would
   pull the label text from white to near-invisible green-on-green.
   The regression went unnoticed because `.btn--primary` defines a
   colour but did not carry that colour through to `:hover`. */
.btn--primary:hover {
  background: var(--color--secondary-dark);
  color: var(--color--white);
}

.btn--secondary {
  background: var(--color--white);
  color: var(--color--primary);
  border-color: var(--color--neutral-200);
}
/* Same reasoning: lock the text colour on hover so the global
   anchor rule never leaks through and recolours the label. */
.btn--secondary:hover {
  border-color: var(--color--primary);
  color: var(--color--primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color--neutral-600);
}
.btn--ghost:hover { color: var(--color--primary); }

/* ─── Cards ──────────────────────────────────────────── */

.card {
  background: var(--color--white);
  border: 1px solid var(--color--neutral-150);
  border-radius: var(--radius--card);
  padding: var(--spacing--large);
}

/* ─── Tier selector (dev-mode) ─────────────────────── */

.tier-selector {
  position: relative;
}

.tier-selector > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.tier-selector > summary::-webkit-details-marker { display: none; }
.tier-selector > summary::marker { content: ''; }

.tier-selector__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--color--white);
  border: 1px solid var(--color--neutral-200);
  border-radius: var(--radius--card);
  box-shadow: 0 16px 40px rgba(17, 30, 58, 0.12);
  padding: 4px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

.tier-selector__item {
  text-align: left;
  padding: 8px 12px;
  font-size: var(--text-size--small);
  font-weight: var(--fw--regular);
  color: var(--color--neutral-600);
  border-radius: 6px;
  transition: background var(--motion--fast) var(--ease--standard);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font--primary);
}
.tier-selector__item:hover {
  background: var(--color--neutral-100);
  color: var(--color--primary);
}
.tier-selector__item.is-current {
  background: var(--color--secondary-tint);
  color: var(--color--secondary-dark);
  font-weight: var(--fw--semibold);
}

/* ─── Privacy dot ────────────────────────────────────── */

.privacy-note {
  font-size: var(--text-size--small);
  color: var(--color--neutral-500);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing--xsmall);
}
.privacy-note__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color--secondary);
  display: inline-block;
}

/* ─── Responsive ─────────────────────────────────────── */

@media (max-width: 767px) {
  .nav { padding: 0 14px; }
  .content-col { padding: var(--spacing--large) 14px 0; }
}

@media (max-width: 479px) {
  .nav__link { display: none; }
  .nav__sep { display: none; }
}