/* =============================================================================
   MailGuardHQ - authenticated surfaces (sign in, sign up, verify, admin panel).
   MGH-67.

   A separate stylesheet rather than additions to site.css: these rules only
   load on four pages, and keeping them out of the marketing pages means a
   change here can never restyle the home page, which is locked.

   Everything below is built from the tokens in tokens.css, so both themes are
   covered by definition rather than by a second set of rules. Nothing here
   hard-codes a colour except where a value must stay legible on the accent
   fill in both themes.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   The hidden attribute must win.

   `hidden` only works because the UA stylesheet says display:none, and ANY
   author rule that sets display beats it - so an element with `hidden` and a
   class carrying display:flex stays on screen. That is not theoretical: during
   MGH-67 verification the sign-in card had `hidden` set after signing in and
   remained visible, with the typed password still in the field, because
   .mg-auth sets display:flex.

   Declared once, first, and with !important, because every hide in this
   stylesheet is a correctness rule rather than a visual one.
   --------------------------------------------------------------------------- */

[hidden] { display: none !important; }

/* ---------------------------------------------------------------------------
   Auth pages - one narrow column, centred, no distractions.
   --------------------------------------------------------------------------- */

.mg-auth {
  display: flex;
  justify-content: center;
  padding: var(--mg-space-7, 3rem) var(--mg-space-4, 1rem) var(--mg-space-8, 4rem);
}

.mg-auth__card {
  width: 100%;
  max-width: 27rem;
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-lg, 14px);
  box-shadow: var(--mg-shadow-md);
  padding: var(--mg-space-6, 2rem);
}

.mg-auth__title {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--mg-text);
}

.mg-auth__lede {
  margin: 0 0 var(--mg-space-5, 1.5rem);
  color: var(--mg-text-muted);
  font-size: .95rem;
  line-height: 1.55;
}

.mg-auth__alt {
  margin: var(--mg-space-5, 1.5rem) 0 0;
  padding-top: var(--mg-space-4, 1rem);
  border-top: 1px solid var(--mg-border);
  color: var(--mg-text-muted);
  font-size: .9rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------------- */

.mg-field { margin-bottom: var(--mg-space-4, 1rem); }

.mg-field__label {
  display: block;
  margin-bottom: .35rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--mg-text);
}

.mg-field__hint {
  display: block;
  margin-top: .3rem;
  font-size: .8125rem;
  color: var(--mg-text-muted);
  line-height: 1.45;
}

.mg-input {
  width: 100%;
  box-sizing: border-box;
  padding: .65rem .75rem;
  font: inherit;
  font-size: 1rem; /* 16px: anything smaller makes iOS zoom on focus */
  color: var(--mg-text);
  background: var(--mg-bg);
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-sm, 8px);
}

.mg-input:focus-visible,
.mg-btn:focus-visible,
.mg-sidenav__link:focus-visible,
.mg-sidenav__toggle:focus-visible,
.mg-crumbs__link:focus-visible,
.mg-linkbtn:focus-visible {
  outline: 3px solid var(--mg-focus);
  outline-offset: 2px;
}

.mg-input[aria-invalid='true'] { border-color: var(--mg-fail); }

.mg-field__error {
  display: block;
  margin-top: .3rem;
  font-size: .8125rem;
  color: var(--mg-fail);
  min-height: 1px;
}

.mg-btn--block { display: block; width: 100%; text-align: center; }

.mg-btn[disabled],
.mg-btn[aria-disabled='true'] { opacity: .55; cursor: not-allowed; }

/* A button that reads as a link - used for "resend", "sign out" and similar
   actions that are verbs, not navigation. Still a <button>, because a thing
   that performs an action must be reachable and announced as a button. */
.mg-linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--mg-accent);
  text-decoration: underline;
  cursor: pointer;
}

.mg-linkbtn[disabled] { color: var(--mg-text-muted); cursor: not-allowed; }

/* ---------------------------------------------------------------------------
   Feedback - one component for every message the auth pages emit.
   role=alert on the element, so the message is announced when it appears.
   --------------------------------------------------------------------------- */

.mg-alert {
  margin: 0 0 var(--mg-space-4, 1rem);
  padding: .75rem .9rem;
  border: 1px solid var(--mg-info-border);
  border-left-width: 3px;
  border-radius: var(--mg-radius-sm, 8px);
  background: var(--mg-info-bg);
  color: var(--mg-text);
  font-size: .9rem;
  line-height: 1.5;
}

.mg-alert[hidden] { display: none; }
.mg-alert--fail { border-color: var(--mg-fail-border); background: var(--mg-fail-bg); }
.mg-alert--warn { border-color: var(--mg-warn-border); background: var(--mg-warn-bg); }
.mg-alert--pass { border-color: var(--mg-pass-border); background: var(--mg-pass-bg); }

.mg-alert__action { margin: .35rem 0 0; color: var(--mg-text-muted); font-size: .85rem; }

/* The correlation id is the one string that makes a support conversation
   possible, so it is selectable and monospaced rather than decorative. */
.mg-alert__ref {
  margin: .35rem 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .75rem;
  color: var(--mg-text-faint);
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   Admin panel
   --------------------------------------------------------------------------- */

.mg-panel { padding: var(--mg-space-5, 1.5rem) 0 var(--mg-space-8, 4rem); }

.mg-panel__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3, .75rem);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--mg-space-4, 1rem);
}

.mg-panel__title { margin: 0; font-size: 1.4rem; color: var(--mg-text); }
.mg-panel__who { margin: 0; color: var(--mg-text-muted); font-size: .9rem; }

/* Help and Sign out, on one row. align-items:center rather than the head's
   baseline, so the Help disclosure's icon buttons line up with the Sign out
   button instead of hanging off its text baseline. The disclosure panel is
   positioned against .mg-help-menu, which is position:relative in site.css. */
.mg-panel__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mg-space-2, .5rem);
}

/* ---------------------------------------------------------------------------
   The shell: a persistent left sidebar and a content column (MGH-118).

   Grid rather than flex so the sidebar keeps its width without needing a
   flex-basis on every child, and `align-items: start` so a short sidebar does
   not stretch to the height of a long view. minmax(0, 1fr) on the content
   column is what stops a wide table inside it from widening the whole grid -
   without it a data table pushes the page into horizontal scroll, which is the
   one thing this layout must never do.
   --------------------------------------------------------------------------- */

.mg-panel__layout {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  gap: var(--mg-space-6, 2rem);
  align-items: start;
}

.mg-panel__content { min-width: 0; }

.mg-sidenav {
  position: sticky;
  top: calc(var(--mg-header-h, 4rem) + var(--mg-space-3, .75rem));
  padding-right: var(--mg-space-3, .75rem);
  border-right: 1px solid var(--mg-border);
}

.mg-sidenav__group {
  margin: var(--mg-space-4, 1rem) 0 .3rem;
  padding: 0 .6rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mg-text-faint);
}

.mg-sidenav__list { margin: 0; padding: 0; list-style: none; }
.mg-sidenav__item { margin: 0; }

.mg-sidenav__link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  border-radius: var(--mg-radius-sm, 8px);
  border-left: 3px solid transparent;
  color: var(--mg-text-muted);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.3;
}

.mg-sidenav__link:hover { background: var(--mg-surface-sunken); color: var(--mg-text); }

.mg-sidenav__icon { width: 1.15rem; height: 1.15rem; flex: none; }

/* The current section. Three signals, not one: the accent bar, the weight, and
   aria-current - so it is not carried by colour alone and a screen reader
   announces it rather than inferring it from a shade. */
.mg-sidenav__link[aria-current='page'] {
  background: var(--mg-accent-soft);
  border-left-color: var(--mg-accent);
  color: var(--mg-accent);
  font-weight: 600;
}

/* The narrow-viewport control. Hidden on a wide screen, where the sidebar is
   always visible and this button would be a second way to do nothing. */
.mg-sidenav__toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-bottom: var(--mg-space-3, .75rem);
  padding: .55rem .75rem;
  font: inherit;
  font-size: .9rem;
  color: var(--mg-text);
  background: var(--mg-surface);
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-sm, 8px);
  cursor: pointer;
}

.mg-sidenav__here { margin-left: auto; color: var(--mg-text-muted); font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Breadcrumbs - where you are, at the top of the content area.
   --------------------------------------------------------------------------- */

.mg-crumbs { margin-bottom: var(--mg-space-4, 1rem); }

.mg-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  color: var(--mg-text-muted);
}

.mg-crumbs__item { display: inline-flex; align-items: center; }

/* The separator is DRAWN, not written.

   A `content: '>'` is real generated text and screen readers do announce it, so
   a three-part trail is read as "Your panel, greater-than, Your account,
   greater-than, API tokens". Two borders on an empty box rotated 45 degrees is
   the same chevron with nothing in it to announce, so the trail reads as the
   three places it names. */
.mg-crumbs__item + .mg-crumbs__item::before {
  content: '';
  display: inline-block;
  width: .3rem;
  height: .3rem;
  margin-right: .45rem;
  border-top: 1.5px solid var(--mg-text-faint);
  border-right: 1.5px solid var(--mg-text-faint);
  transform: rotate(45deg);
}

.mg-crumbs__link { color: var(--mg-text-muted); text-decoration: none; border-radius: 3px; }
.mg-crumbs__link:hover { color: var(--mg-accent); text-decoration: underline; }
/* The middle crumb is the sidebar group. It is a span, not a link, because a
   group is not a place you can go to - there is no screen behind it. */
.mg-crumbs__group { color: var(--mg-text-muted); }
.mg-crumbs__here { color: var(--mg-text); font-weight: 600; }

.mg-view[hidden] { display: none; }
.mg-view:focus { outline: none; }

.mg-view__title { margin: 0 0 .35rem; font-size: 1.1rem; color: var(--mg-text); }
.mg-view__lede { margin: 0 0 var(--mg-space-4, 1rem); color: var(--mg-text-muted); font-size: .9rem; }

/* Plan meter - what the plan permits and what is left of it. */
.mg-meter { margin: .5rem 0 0; }

.mg-meter__track {
  height: 6px;
  border-radius: 3px;
  background: var(--mg-surface-sunken);
  overflow: hidden;
}

.mg-meter__fill { height: 100%; background: var(--mg-accent); border-radius: 3px; }
.mg-meter__fill[data-full='true'] { background: var(--mg-warn); }
.mg-meter__label { margin: .35rem 0 0; font-size: .8125rem; color: var(--mg-text-muted); }

/* Data tables. They scroll inside their own box so the page never scrolls
   sideways on a narrow screen. */
.mg-tablewrap { overflow-x: auto; border: 1px solid var(--mg-border); border-radius: var(--mg-radius-md, 10px); }

.mg-table { width: 100%; border-collapse: collapse; font-size: .875rem; min-width: 32rem; }
.mg-table th, .mg-table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--mg-border); }
.mg-table th { background: var(--mg-surface-sunken); font-weight: 600; color: var(--mg-text); white-space: nowrap; }
.mg-table tr:last-child td { border-bottom: 0; }
.mg-table td { color: var(--mg-text-muted); vertical-align: top; }
.mg-table td strong { color: var(--mg-text); font-weight: 600; }

.mg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }

/* Grade pill - reuses the verdict palette so a B here means what a pass means
   on the check list. */
.mg-grade {
  display: inline-block;
  min-width: 1.6rem;
  padding: .1rem .4rem;
  border-radius: 5px;
  text-align: center;
  font-weight: 700;
  font-size: .8125rem;
  border: 1px solid var(--mg-na-border);
  background: var(--mg-na-bg);
  color: var(--mg-text);
}

.mg-grade[data-band='good'] { border-color: var(--mg-pass-border); background: var(--mg-pass-bg); }
.mg-grade[data-band='fair'] { border-color: var(--mg-warn-border); background: var(--mg-warn-bg); }
.mg-grade[data-band='poor'] { border-color: var(--mg-fail-border); background: var(--mg-fail-bg); }

.mg-status { font-size: .8125rem; }
.mg-status[data-state='active'] { color: var(--mg-pass); }
.mg-status[data-state='revoked'] { color: var(--mg-fail); }

/* Empty and unavailable states.

   These carry weight out of proportion to their size. A panel that invents
   plausible rows when an endpoint is missing looks like success and hides that
   nothing works - so every view that cannot get its data says exactly that,
   and says why. */
.mg-empty {
  padding: var(--mg-space-5, 1.5rem);
  border: 1px dashed var(--mg-border-strong);
  border-radius: var(--mg-radius-md, 10px);
  background: var(--mg-surface-sunken);
  color: var(--mg-text-muted);
  font-size: .9rem;
  line-height: 1.55;
}

.mg-empty strong { display: block; margin-bottom: .3rem; color: var(--mg-text); }
.mg-empty code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; }

.mg-panel__foot { margin-top: var(--mg-space-6, 2rem); padding-top: var(--mg-space-4, 1rem); border-top: 1px solid var(--mg-border); }

/* A row of small facts - used by the profile and organisation views. */
.mg-facts { display: grid; gap: .55rem var(--mg-space-4, 1rem); grid-template-columns: max-content 1fr; margin: 0; font-size: .9rem; }
.mg-facts dt { color: var(--mg-text-muted); }
.mg-facts dd { margin: 0; color: var(--mg-text); }

/* ---------------------------------------------------------------------------
   The Dashboard (MGH-118).

   auto-fit rather than a fixed column count, so the tiles reflow at every width
   without a breakpoint per size. Every colour here is a token; the only
   variation between a good and a bad reading is the verdict palette that the
   check list already uses, so a green here means what a pass means there.
   --------------------------------------------------------------------------- */

.mg-dash {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--mg-space-4, 1rem);
  margin-top: var(--mg-space-4, 1rem);
  /* Tiles size to their content rather than to the tallest one in the row. The
     stretched form leaves a short tile as a mostly-empty box, which reads as
     something that failed to load - the exact impression this screen must not
     give. */
  align-items: start;
}

.mg-tile {
  min-width: 0;
  /* An email address or a token prefix has no space in it to break at, and a
     long one otherwise runs straight out of the card and over the next one. */
  overflow-wrap: anywhere;
  padding: var(--mg-space-4, 1rem);
  background: var(--mg-surface);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md, 10px);
  box-shadow: var(--mg-shadow-sm);
}

.mg-tile--wide { grid-column: 1 / -1; }

.mg-tile__title { margin: 0 0 .25rem; font-size: 1rem; color: var(--mg-text); }
.mg-tile__subtitle { margin: var(--mg-space-4, 1rem) 0 .4rem; font-size: .875rem; color: var(--mg-text); }
.mg-tile__lede { margin: 0 0 var(--mg-space-3, .75rem); font-size: .8125rem; line-height: 1.5; color: var(--mg-text-muted); }
.mg-tile__note { margin: .6rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--mg-text-faint); }
.mg-tile__list { margin: .5rem 0; padding-left: 1.1rem; font-size: .875rem; color: var(--mg-text-muted); }
.mg-tile__body:empty { display: none; }

/* A figure and its label. The figure is only ever written by script, from a
   response - the markup ships these boxes empty, which is why an unanswered
   call leaves a stated absence rather than a zero. */
.mg-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3, .75rem) var(--mg-space-5, 1.5rem);
  margin: var(--mg-space-3, .75rem) 0 0;
}

.mg-stat { min-width: 4rem; }

.mg-stat__value {
  display: block;
  font-size: var(--mg-fs-xl, 1.5rem);
  line-height: 1.1;
  font-weight: 700;
  color: var(--mg-text);
}

.mg-stat__value[data-band='good'] { color: var(--mg-pass); }
.mg-stat__value[data-band='fair'] { color: var(--mg-warn); }
.mg-stat__value[data-band='poor'] { color: var(--mg-fail); }

.mg-stat__label { display: block; margin-top: .15rem; font-size: .75rem; color: var(--mg-text-muted); }

/* The headline answer. The band comes from the DMARC policy the API returned,
   and the border is the signal a reader picks up before the words - paired with
   the words, never instead of them. */
.mg-forge {
  padding: var(--mg-space-4, 1rem);
  border: 1px solid var(--mg-na-border);
  border-left-width: 4px;
  border-radius: var(--mg-radius-sm, 8px);
  background: var(--mg-na-bg);
}

.mg-forge[data-band='good'] { border-color: var(--mg-pass-border); background: var(--mg-pass-bg); }
.mg-forge[data-band='fair'] { border-color: var(--mg-warn-border); background: var(--mg-warn-bg); }
.mg-forge[data-band='poor'] { border-color: var(--mg-fail-border); background: var(--mg-fail-bg); }

.mg-forge__domain {
  margin: 0 0 .2rem;
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: .8125rem;
  color: var(--mg-text-muted);
}

.mg-forge__headline { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--mg-text); line-height: 1.35; }
.mg-forge__finding { margin: .45rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--mg-text); }
.mg-forge__action { margin: .35rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mg-text-muted); }

.mg-findings { margin: 0; padding: 0; list-style: none; }

.mg-findings__item {
  padding: .5rem 0 .5rem .7rem;
  border-left: 3px solid var(--mg-na-border);
  border-bottom: 1px solid var(--mg-border);
}

.mg-findings__item:last-child { border-bottom: 0; }
.mg-findings__item[data-verdict='fail'] { border-left-color: var(--mg-fail); }
.mg-findings__item[data-verdict='warn'] { border-left-color: var(--mg-warn); }

/* The verdict, WRITTEN. The border below is a second signal, never the only
   one - a reader who cannot distinguish the two border colours still reads
   "Fail" and "Warn". */
.mg-findings__head { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }

.mg-findings__verdict {
  flex: none;
  padding: .05rem .35rem;
  border: 1px solid var(--mg-na-border);
  border-radius: 4px;
  background: var(--mg-na-bg);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--mg-text);
}

.mg-findings__verdict[data-verdict='fail'] { border-color: var(--mg-fail-border); background: var(--mg-fail-bg); color: var(--mg-fail); }
.mg-findings__verdict[data-verdict='warn'] { border-color: var(--mg-warn-border); background: var(--mg-warn-bg); color: var(--mg-warn); }
.mg-findings__verdict[data-verdict='pass'] { border-color: var(--mg-pass-border); background: var(--mg-pass-bg); color: var(--mg-pass); }

.mg-findings__title { font-size: .875rem; color: var(--mg-text); }
.mg-findings__finding { margin: .2rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mg-text-muted); }
.mg-findings__action { margin: .2rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mg-text); }

/* The activity timeline. Ordered, because it is a sequence in time. */
.mg-events { margin: 0; padding: 0; list-style: none; }

.mg-events__item {
  padding: .45rem 0;
  border-bottom: 1px solid var(--mg-border);
  font-size: .8125rem;
}

.mg-events__item:last-child { border-bottom: 0; }
.mg-events__when { display: block; color: var(--mg-text-faint); font-size: .75rem; }
.mg-events__what { display: block; color: var(--mg-text); font-size: .875rem; font-weight: 600; }
.mg-events__detail { display: block; color: var(--mg-text-muted); }

/* What to do next. Each item names the response that put it there. */
.mg-todo { margin: 0; padding: 0; list-style: none; }

.mg-todo__item {
  padding: .6rem 0;
  border-bottom: 1px solid var(--mg-border);
}

.mg-todo__item:last-child { border-bottom: 0; }
.mg-todo__title { display: block; font-size: .9rem; color: var(--mg-text); }
.mg-todo__body { margin: .2rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--mg-text-muted); }

.mg-todo__source {
  margin: .3rem 0 0;
  font-family: var(--mg-font-mono, ui-monospace, monospace);
  font-size: .6875rem;
  line-height: 1.45;
  color: var(--mg-text-faint);
  word-break: break-word;
}

/* The one control on the Dashboard. */
.mg-dashcheck { margin-top: var(--mg-space-4, 1rem); padding-top: var(--mg-space-3, .75rem); border-top: 1px solid var(--mg-border); }
.mg-dashcheck__row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .3rem; }
.mg-dashcheck__row .mg-input { flex: 1 1 12rem; width: auto; }

.mg-btn--sm { margin-top: .6rem; font-size: .8125rem; padding: .35rem .7rem; }

/* ---------------------------------------------------------------------------
   Narrow viewports.

   Below 60rem the sidebar stops being a column and becomes a disclosure above
   the content: it is removed from the layout until the toggle opens it, so the
   content keeps the full width and nothing is pushed sideways. The page itself
   never scrolls horizontally - wide tables scroll inside .mg-tablewrap instead.
   --------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .mg-panel__layout { grid-template-columns: minmax(0, 1fr); gap: var(--mg-space-4, 1rem); }
  .mg-sidenav__toggle { display: flex; }

  .mg-sidenav {
    display: none;
    position: static;
    padding: var(--mg-space-2, .5rem);
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-md, 10px);
    background: var(--mg-surface);
  }

  .mg-sidenav[data-open] { display: block; }
  .mg-sidenav__group { margin-top: var(--mg-space-3, .75rem); }
}

@media (max-width: 30rem) {
  .mg-facts { grid-template-columns: 1fr; gap: .1rem 0; }
  .mg-facts dd { margin-bottom: .55rem; }
  .mg-auth__card { padding: var(--mg-space-5, 1.5rem); }
  .mg-dash { grid-template-columns: minmax(0, 1fr); }
  .mg-panel__head { align-items: flex-start; }
}

/* ---------------------------------------------------------------------------
   THE IMPERSONATION BANNER (MGH-120).

   The console's banner says "you are staff". This one says "you are, right now,
   somebody else" - a sharper claim, so it is louder: the FAIL palette rather
   than warn, sticky at the top of the viewport rather than in the flow, and a
   rule down the whole left edge of the page while it is up.

   STICKY, NOT FIXED. Fixed would sit over the content and hide whatever is
   underneath it on a short viewport, and it would need the page to reserve
   space it cannot know the height of. Sticky keeps it in the flow, so the
   layout is correct with the banner and correct without it, and it still cannot
   be scrolled past.

   THREE INDEPENDENT SIGNALS, for the same reason the console has three: the
   words, the rule, and the ground. Colour alone reaches nobody who cannot see
   it and survives no screenshot.
   --------------------------------------------------------------------------- */

.mg-imp {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  gap: var(--mg-space-3, .75rem);
  align-items: flex-start;
  margin: 0 0 var(--mg-space-4, 1rem);
  padding: var(--mg-space-4, 1rem);
  background: var(--mg-fail-bg);
  border: 1px solid var(--mg-fail-border);
  border-left: 6px solid var(--mg-fail);
  border-radius: var(--mg-radius-md, 10px);
  color: var(--mg-text);
}

/* The whole panel is marked while a session is borrowed, so the signal is not
   only at the top of the page: a reader who has scrolled a long list still has
   the rule in the corner of their eye. */
.mg-panel[data-imp-active] {
  border-left: 6px solid var(--mg-fail);
  padding-left: var(--mg-space-4, 1rem);
}

.mg-imp__icon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mg-fail);
}

.mg-imp__text { min-width: 0; flex: 1 1 20rem; }

.mg-imp__title {
  margin: 0 0 .25rem;
  font-weight: var(--mg-fw-bold, 700);
  font-size: var(--mg-fs-md, 1.05rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--mg-text);
}

.mg-imp__body {
  margin: 0 0 .5rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--mg-text-muted);
  max-width: var(--mg-prose-max, 62ch);
}

.mg-imp__who {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem var(--mg-space-3, .75rem);
  margin: 0;
  font-size: .85rem;
  color: var(--mg-text-muted);
}

.mg-imp__badge {
  display: inline-block;
  padding: .12rem .5rem;
  border: 1px solid var(--mg-fail);
  border-radius: var(--mg-radius-pill, 999px);
  font-weight: var(--mg-fw-bold, 700);
  color: var(--mg-fail);
}

.mg-imp__badge strong { color: var(--mg-text); }

.mg-imp__exit { flex: none; align-self: center; }

/* ---------------------------------------------------------------------------
   ACCOUNT ACTIVITY (MGH-120).

   A list rather than a table. The rows are read as sentences - who did what,
   when - and a table asks a reader to carry four column headings in their head
   to make the same sentence themselves.

   The support rows are marked with the same fail-tinted rule the banner uses,
   because they are the same fact seen from the other side: this is the screen
   on which a customer learns that somebody at MailGuardHQ opened the account.
   --------------------------------------------------------------------------- */

.mg-activity { list-style: none; margin: 0; padding: 0; }

.mg-activity__row {
  display: flex;
  gap: var(--mg-space-3, .75rem);
  align-items: flex-start;
  padding: var(--mg-space-3, .75rem) 0;
  border-top: 1px solid var(--mg-border);
}

.mg-activity__row:first-child { border-top: 0; }

.mg-activity__row--support {
  padding-left: var(--mg-space-3, .75rem);
  border-left: 4px solid var(--mg-fail);
  background: var(--mg-fail-bg);
  border-radius: var(--mg-radius-sm, 6px);
}

.mg-activity__when {
  flex: none;
  width: 11rem;
  font-size: .85rem;
  color: var(--mg-text-muted);
  font-variant-numeric: tabular-nums;
}

.mg-activity__main { min-width: 0; flex: 1 1 auto; }

.mg-activity__what { margin: 0 0 .2rem; }

.mg-activity__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem var(--mg-space-3, .75rem);
  margin: 0;
  font-size: .8rem;
  color: var(--mg-text-muted);
}

.mg-activity__ref { font-family: var(--mg-font-mono, ui-monospace, monospace); }

.mg-activity__tag {
  display: inline-block;
  padding: .05rem .45rem;
  border: 1px solid var(--mg-fail);
  border-radius: var(--mg-radius-pill, 999px);
  font-weight: var(--mg-fw-bold, 700);
  color: var(--mg-fail);
}

@media (max-width: 40rem) {
  .mg-imp { flex-direction: column; }
  .mg-imp__exit { align-self: stretch; }
  .mg-activity__row { flex-direction: column; gap: .2rem; }
  .mg-activity__when { width: auto; }
}

/* ---------------------------------------------------------------------------
   THE STAFF CONSOLE (MGH-119).

   A different surface from the customer panel, and it has to LOOK different at
   a glance - somebody who can change any account on the platform, and cannot
   tell that from an ordinary session, is one click from doing it to the wrong
   one.

   Three independent signals carry that, because colour on its own carries it to
   nobody who cannot see colour and to no screenshot pasted into a ticket:
     - the words "staff console" and "platform administrator", in the banner;
     - a heavy left rule on the banner and a tinted ground;
     - the reader's own address, named, so "acting as" is answered without
       being asked.

   Every colour below is a token, so both themes are covered by definition
   rather than by a second set of rules. The warn palette is reused rather than
   a new one invented: this surface is not an error, it is a caution.
   --------------------------------------------------------------------------- */

.mg-console { padding-bottom: var(--mg-space-8, 4rem); }

.mg-console__banner {
  display: flex;
  gap: var(--mg-space-3, .75rem);
  align-items: flex-start;
  margin: var(--mg-space-5, 1.5rem) 0 var(--mg-space-4, 1rem);
  padding: var(--mg-space-4, 1rem);
  background: var(--mg-warn-bg);
  border: 1px solid var(--mg-warn-border);
  border-left: 5px solid var(--mg-warn);
  border-radius: var(--mg-radius-md, 10px);
  color: var(--mg-text);
}

.mg-console__badgeicon {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  color: var(--mg-warn);
}

.mg-console__bannertext { min-width: 0; }

.mg-console__bannertitle {
  margin: 0 0 .25rem;
  font-weight: var(--mg-fw-bold, 700);
  font-size: var(--mg-fs-md, 1.05rem);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--mg-text);
}

.mg-console__bannerbody {
  margin: 0 0 .5rem;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--mg-text-muted);
  max-width: var(--mg-prose-max, 62ch);
}

.mg-console__bannerwho {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem var(--mg-space-3, .75rem);
  margin: 0;
  font-size: .85rem;
  color: var(--mg-text-muted);
}

.mg-console__capacity {
  display: inline-block;
  padding: .12rem .5rem;
  border: 1px solid var(--mg-warn);
  border-radius: var(--mg-radius-pill, 999px);
  font-weight: var(--mg-fw-bold, 700);
  color: var(--mg-warn);
}

.mg-console__actor strong { color: var(--mg-text); }

.mg-console__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3, .75rem);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--mg-space-4, 1rem);
}

.mg-console__title {
  margin: 0;
  font-size: var(--mg-fs-2xl, 1.6rem);
  line-height: var(--mg-lh-tight, 1.2);
  color: var(--mg-text);
}

.mg-console__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2, .5rem);
  align-items: center;
}

/* The way IN, from the customer panel. Deliberately not a plain ghost button:
   it leads somewhere else entirely, and it is the only control in the panel
   head that does. Ships `hidden`; console.js reveals it only for a platform
   administrator. */
.mg-btn--staff {
  background: transparent;
  color: var(--mg-warn);
  border: 1px solid var(--mg-warn);
  font-weight: var(--mg-fw-bold, 700);
}

.mg-btn--staff:hover {
  background: var(--mg-warn-bg);
  color: var(--mg-warn);
}

/* The DANGEROUS action. Its own border, its own weight and its own words - not
   the ordinary button in another colour, because that difference is invisible
   to a reader who does not see colour. */
.mg-btn--danger {
  background: transparent;
  color: var(--mg-fail);
  border: 2px solid var(--mg-fail);
  font-weight: var(--mg-fw-bold, 700);
}

.mg-btn--danger:hover {
  background: var(--mg-fail-bg);
  color: var(--mg-fail);
}

.mg-btn--danger[disabled] { opacity: .55; }

/* -- filters ---------------------------------------------------------------- */

.mg-consolefilter { margin: var(--mg-space-4, 1rem) 0; }

.mg-consolefilter__set {
  margin: 0;
  padding: var(--mg-space-4, 1rem);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md, 10px);
  background: var(--mg-surface-sunken);
}

.mg-consolefilter__legend {
  padding: 0 .4rem;
  font-weight: var(--mg-fw-bold, 700);
  font-size: .9rem;
  color: var(--mg-text);
}

.mg-consolefilter__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3, .75rem);
  align-items: flex-start;
}

.mg-consolefilter__field { flex: 1 1 11rem; min-width: 0; }
.mg-consolefilter__field--wide { flex: 2 1 18rem; }
.mg-consolefilter__field--submit { flex: 0 0 auto; align-self: center; }
.mg-consolefilter__field .mg-input { width: 100%; }

/* -- lists ------------------------------------------------------------------ */

.mg-consolecount {
  margin: 0 0 var(--mg-space-3, .75rem);
  font-size: .85rem;
  color: var(--mg-text-muted);
}

.mg-consolelink { color: var(--mg-accent); font-weight: var(--mg-fw-medium, 500); }
.mg-consolelink:hover { color: var(--mg-accent-hover); }

.mg-consoleusage { display: inline-flex; gap: .4rem; align-items: baseline; flex-wrap: wrap; }

/* Says an allowance came from an override rather than from the plan. A word,
   not a colour, because "why is this account allowed six?" is a question the
   screen should answer without being clicked. */
.mg-consoleflag {
  display: inline-block;
  padding: .05rem .4rem;
  border: 1px solid var(--mg-info-border);
  border-radius: var(--mg-radius-pill, 999px);
  background: var(--mg-info-bg);
  color: var(--mg-info);
  font-size: .7rem;
  white-space: nowrap;
}

/* A status, in the API's own word. data-state is what the paint keys off, so
   an unknown status still renders legibly rather than vanishing. */
.mg-consolepill {
  display: inline-block;
  padding: .1rem .5rem;
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-pill, 999px);
  font-size: .75rem;
  color: var(--mg-text-muted);
  white-space: nowrap;
}

.mg-consolepill[data-state='active'],
.mg-consolepill[data-state='verified'] {
  border-color: var(--mg-pass-border);
  background: var(--mg-pass-bg);
  color: var(--mg-pass);
}

.mg-consolepill[data-state='invited'],
.mg-consolepill[data-state='pending'] {
  border-color: var(--mg-warn-border);
  background: var(--mg-warn-bg);
  color: var(--mg-warn);
}

.mg-consolepill[data-state='suspended'],
.mg-consolepill[data-state='disabled'],
.mg-consolepill[data-state='revoked'],
.mg-consolepill[data-state='failed'],
.mg-consolepill[data-state='closed'] {
  border-color: var(--mg-fail-border);
  background: var(--mg-fail-bg);
  color: var(--mg-fail);
}

.mg-consolepager {
  display: flex;
  gap: var(--mg-space-3, .75rem);
  align-items: center;
  margin-top: var(--mg-space-3, .75rem);
}

.mg-consolepager__where { font-size: .85rem; color: var(--mg-text-muted); }

/* -- detail sections -------------------------------------------------------- */

.mg-consolesection {
  margin: var(--mg-space-5, 1.5rem) 0;
  padding: var(--mg-space-4, 1rem);
  border: 1px solid var(--mg-border);
  border-radius: var(--mg-radius-md, 10px);
  background: var(--mg-surface);
}

.mg-consolesection__title {
  margin: 0 0 .5rem;
  font-size: var(--mg-fs-lg, 1.15rem);
  color: var(--mg-text);
}

.mg-consolesection__note {
  margin: 0 0 var(--mg-space-3, .75rem);
  font-size: .85rem;
  line-height: 1.5;
  color: var(--mg-text-muted);
  max-width: var(--mg-prose-max, 62ch);
}

/* -- the four changes ------------------------------------------------------- */

.mg-consolechanges { border-color: var(--mg-border-strong); }

.mg-consolechanges__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-2, .5rem);
}

.mg-consolechanges__stage:empty { display: none; }

.mg-consolechanges__status {
  margin: var(--mg-space-3, .75rem) 0 0;
  font-size: .85rem;
  color: var(--mg-text-muted);
}

.mg-consolechanges__status:empty { display: none; }

/* The confirmation. It states the consequence BEFORE the controls, in the
   reading order as well as visually, so it cannot be skipped by somebody
   tabbing straight to the button. */
.mg-confirm {
  margin-top: var(--mg-space-4, 1rem);
  padding: var(--mg-space-4, 1rem);
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-md, 10px);
  background: var(--mg-surface-sunken);
}

.mg-confirm--danger {
  border: 2px solid var(--mg-fail);
  background: var(--mg-fail-bg);
}

.mg-confirm__title {
  margin: 0 0 .3rem;
  font-weight: var(--mg-fw-bold, 700);
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--mg-text);
}

.mg-confirm__body {
  margin: 0 0 var(--mg-space-4, 1rem);
  font-size: .9rem;
  line-height: 1.55;
  color: var(--mg-text);
  max-width: var(--mg-prose-max, 62ch);
}

.mg-confirm__fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mg-space-3, .75rem);
  align-items: flex-start;
}

.mg-confirm__fields .mg-field { flex: 1 1 10rem; }

.mg-confirm__row {
  display: flex;
  gap: var(--mg-space-2, .5rem);
  flex-wrap: wrap;
}

@media (max-width: 40rem) {
  .mg-console__banner { flex-direction: column; }
  .mg-consolefilter__field { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   Show password (MGH-154)

   A ROW, NOT AN OVERLAY. The usual pattern parks the button on top of the input
   and pushes the input's padding out of its way, which needs a hard-coded gap
   sized to one language's word for "Show". Here the button is a sibling in a
   flex row: it takes exactly the width its own label needs, in any language and
   in either writing direction, and it can never sit over text the user typed.

   The button ships with the `hidden` attribute and auth.js removes it, so with
   scripting off there is no control here at all rather than a dead one. Nothing
   below sets `display` on .mg-reveal, which is what leaves that attribute able
   to do its job.
   --------------------------------------------------------------------------- */

.mg-field__control {
  display: flex;
  align-items: stretch;
  gap: var(--mg-space-2, .5rem);
}

/* min-width:0 or a long value in a flex item refuses to shrink and overflows. */
.mg-field__control .mg-input { flex: 1 1 auto; min-width: 0; }

/* Edge draws its OWN reveal control INSIDE every password field. Without this
   an Edge user is offered two of them - ours in the row and the browser's over
   the text - and the browser's is not a control we own: it carries none of the
   accessible name, live region or translation above, and nothing in auth.js
   knows it exists, so hideAll() on submit and on pagehide does not put the
   field back. Typed on purpose: ::-ms-reveal can only ever match a password
   field, so this reaches every one the site renders, on this page or a later
   one, and touches nothing else.

   SEPARATE RULES, NOT A GROUPED SELECTOR LIST. An unrecognised pseudo-element
   invalidates the whole list it appears in, and Chromium Edge implements
   ::-ms-reveal but NOT ::-ms-clear - so grouping them would drop the reveal
   rule in the exact browser this exists for. ::-ms-clear is kept for the older
   engines that do draw a clear button inside a password field, on the same
   grounds: a second control in our field that we do not own. */
input[type="password"]::-ms-reveal { display: none; }
input[type="password"]::-ms-clear { display: none; }

.mg-reveal {
  flex: 0 0 auto;
  padding: 0 var(--mg-space-3, .75rem);
  font: inherit;
  font-size: var(--mg-fs-sm, .875rem);
  font-weight: var(--mg-fw-medium, 550);
  color: var(--mg-accent);
  background: var(--mg-bg-alt);
  border: 1px solid var(--mg-border-strong);
  border-radius: var(--mg-radius-sm, 6px);
  cursor: pointer;
}

.mg-reveal:hover { background: var(--mg-accent-soft); }

/* The same focus ring every other control on these pages uses. A control that
   can only be reached by keyboard by the people who most need it must be
   visible when it is reached. */
.mg-reveal:focus-visible {
  outline: 3px solid var(--mg-focus);
  outline-offset: 2px;
}

/* ---- MGH-249: Check these yourself ----------------------------------------
   The customer's own answers about the signals we cannot measure. NEUTRAL,
   NEVER GREEN: an answer is a statement a person made, not a result we
   produced, so no rule here touches the verdict palette - not even for
   "Checked, nothing found", which is exactly where green would creep in. The
   chosen answer is marked by the control's own checked state, not by colour.
   tests/unmeasured-signals.test.mjs reads these rules and fails on a verdict
   token. */
.mg-attest:empty { display: none; }
.mg-attest { margin: var(--mg-space-5, 1.5rem) 0 0; }
.mg-attest__title { margin: 0 0 var(--mg-space-2, .5rem); font-size: var(--mg-fs-lg, 1.125rem); }
.mg-attest__intro { margin: 0 0 var(--mg-space-4, 1rem); color: var(--mg-text-muted); font-size: var(--mg-fs-sm, .875rem); }
.mg-attest__domain { margin: var(--mg-space-4, 1rem) 0 var(--mg-space-2, .5rem); font-size: var(--mg-fs-md, 1rem); }
.mg-attest__list { margin: 0; padding: 0; list-style: none; }
.mg-attest__item { margin: 0 0 var(--mg-space-3, .75rem); padding: var(--mg-space-3, .75rem); border: 1px solid var(--mg-border); border-radius: var(--mg-radius-sm, 6px); background: var(--mg-surface); }
.mg-attest__name { display: block; font-weight: var(--mg-fw-medium, 550); color: var(--mg-text); }
.mg-attest__desc { margin: var(--mg-space-1, .25rem) 0; color: var(--mg-text-muted); font-size: var(--mg-fs-sm, .875rem); }
.mg-attest__how { margin: var(--mg-space-1, .25rem) 0 var(--mg-space-2, .5rem); font-size: var(--mg-fs-sm, .875rem); color: var(--mg-text); }
.mg-attest__how-label { font-weight: var(--mg-fw-medium, 550); }
.mg-attest__answers { display: flex; flex-wrap: wrap; gap: var(--mg-space-2, .5rem) var(--mg-space-4, 1rem); margin: 0; padding: 0; border: 0; }
.mg-attest__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mg-attest__answer { display: inline-flex; align-items: center; gap: var(--mg-space-1, .25rem); font-size: var(--mg-fs-sm, .875rem); color: var(--mg-text); }
.mg-attest__status { margin: var(--mg-space-1, .25rem) 0 0; min-height: 1.2em; color: var(--mg-text-muted); font-size: var(--mg-fs-sm, .875rem); }