/* ============================================================================
   Force Multiplier Leadership Assessment — Participant-account styles
   BDM Squared Professional Services
   ----------------------------------------------------------------------------
   This stylesheet ADDS the account screens. It reuses the existing brand tokens
   declared in css/style.css (--blue, --teal, --lblue, --pale, --ink, --line,
   --radius, --shadow-*) and defines no new palette. It overrides nothing in
   css/style.css, so the assessment screens, progress bar and results layout are
   unaffected.

   It also adds the one missing input type (.field input[type="password"]),
   matching the existing text/email input treatment exactly.
   ========================================================================== */

/* ------------------------------------------------------------- header nav -- */
.site-header .wrap { gap: 1.2rem; }

.header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  min-width: 0;
}

.account-nav {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.account-nav__who {
  font-size: .86rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.account-nav__who strong { color: var(--ink); }

.account-nav__link {
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  padding: .35rem .2rem;
}
.account-nav__link:hover { text-decoration: underline; }

/* The administrative link is set apart from the participant links, so the two
   destinations are never mistaken for each other. It appears ONLY for an
   address the centralized roster check grants dashboard access. */
.account-nav__link--admin {
  color: var(--blue-dark);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: .3rem .6rem;
}
.account-nav__link--admin:hover { border-color: var(--blue); }

/* Small button variant for the header, so it does not dominate the bar. */
.btn-sm {
  padding: .5rem 1rem;
  font-size: .88rem;
  min-height: 40px;
}

/* ---------------------------------------------------------- demo banner --- */
/* Deliberately prominent and unmistakable: nothing in the account screens is
   operational yet, and the interface must not imply otherwise. */
.account-banner {
  border: 1.5px solid var(--warn);
  border-left-width: 6px;
  background: #FFFBF2;
  border-radius: var(--radius-sm);
  padding: .95rem 1.15rem;
  margin: 1.4rem 0 0;
  color: #6B3707;
}
.account-banner h2 {
  font-size: .95rem;
  margin: 0 0 .35rem;
  color: #6B3707;
  letter-spacing: 0;
}
.account-banner p {
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- screens --- */
.account-narrow { max-width: 560px; }
.account-wide { max-width: 820px; }

.account-note {
  border: 1px dashed var(--pale);
  background: var(--lblue);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  font-size: .86rem;
  color: var(--ink-soft);
  margin-bottom: 1.15rem;
}
.account-note p { margin: 0; }
.account-note--warn {
  border-style: solid;
  border-color: var(--warn);
  background: #FFFBF2;
  color: #6B3707;
}

/* Password inputs — same treatment as the existing text/email fields. */
.field input[type="password"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .8rem .9rem;
  min-height: 50px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.field input[type="password"]:focus { border-color: var(--blue); outline: var(--focus); outline-offset: 1px; }
.field input[type="password"][aria-invalid="true"] { border-color: var(--stop); background: #FFF7F7; }

/* Field-level hint under a password input. */
.field .field-hint {
  display: block;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--ink-faint);
}

/* Two-column name row that collapses on narrow screens. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

.account-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1.6rem;
}

.account-links {
  margin-top: 1.3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.4rem;
}
.account-links p { margin: 0; }

/* ------------------------------------------------------------ dashboard --- */
.dashboard-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.dashboard-head .who {
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}

.account-card { margin-top: 1.1rem; }
.account-card:first-of-type { margin-top: 0; }

.account-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  margin-top: .9rem;
  background: var(--white);
}
.account-item__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.account-item__title {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.account-item__meta {
  font-size: .83rem;
  color: var(--ink-faint);
}
.account-item__progress { margin-top: .7rem; }

/* Status chip so state is never conveyed by colour alone. */
.account-item .tag { white-space: nowrap; }

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 720px) {
  .site-header .wrap {
    flex-wrap: wrap;
    row-gap: .5rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
  }
  .account-nav { width: 100%; justify-content: flex-start; gap: .6rem 1rem; }
  .account-nav__who { width: 100%; }
  /* Every header control keeps a comfortable tap target on a phone, and the
     administrative link stays a distinct, clearly tappable control. */
  .account-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .account-nav__link--admin { padding: .3rem .6rem; }
  .dashboard-head { flex-direction: column; gap: .2rem; }
  .account-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .account-form-actions .btn { width: 100%; }
}

/* ---------------------------------------------------------------- print --- */
@media print {
  .account-nav, .account-banner, .account-form-actions, .account-links { display: none !important; }
}