/* =============================================================================
   Collaboration Hub password pages — setup.html, reset.html, forgot.html

   These three pages deliberately do NOT load the Hub application shell, so they
   carry styles.css for the shared visual language and this file for the handful
   of rules that surface needs and styles.css does not already provide. Nothing
   here restates a colour, a space or a radius: every value below is a var() from
   that file's token block, so the pages cannot drift away from the Hub's palette.

   hub-operations.css and hub-appointments.css are NOT loaded. Every shared class
   these pages use — .ht-login, .ht-login-card, .ht-field, .ht-input, .ht-btn,
   .ht-login-error, .hub-hint, .hub-status-banner, .ht-sr-only — lives in
   styles.css alone, so linking the other two would only ship dead bytes.

   CSP: style-src carries no 'unsafe-inline', so there is no style="" anywhere on
   these pages and no element.style.* in hub-auth-pages.js. Every state change is
   the `hidden` attribute, which styles.css forces to display:none !important.
   ============================================================================= */

/* ---------------------------------------------------------------- panels ---- */

/* Each card holds mutually exclusive panels and shows exactly one. A panel is
   focused when it replaces another, so a screen reader lands on the new content
   instead of staying on a submit button that no longer exists. The focus ring is
   suppressed because the person did not navigate here — the page moved under
   them — and a ring around a whole card reads as a rendering fault. */
.ha-panel:focus { outline: none; }

/* An outcome has no form to align to, so it centres the way .ht-login-card
   already centres its heading and its lead, rather than sitting left-ragged
   underneath a centred title. */
.ha-outcome { text-align: center; }
.ha-outcome p { margin-top: var(--s3); font-size: 13px; color: var(--text2); }
.ha-outcome .hub-hint { margin-top: var(--s3); }

/* ------------------------------------------------------------------ mark ---- */

/* .hub-state-ic already exists, but it is a 40px grey plate built around a text
   glyph and sized for a card it is the only child of. These outcomes have to read
   as "done" or "stop" before the sentence underneath is read at all, so they get
   a tinted plate and a stroked icon drawn in the shell's own icon style (compare
   .ht-btn svg in styles.css: same fill, stroke and cap treatment). */
.ha-ic {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin: 0 auto var(--s4);
  border-radius: var(--r-pill);
}
.ha-ic svg {
  width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.ha-ic-ok   { background: var(--ok-bg);   color: var(--accent-2); }
.ha-ic-stop { background: var(--warn-bg); color: var(--warn); }

/* --------------------------------------------------------------- actions ---- */

/* An outcome offers a link where the form offered a submit button, so the two
   have to sit in the same place at the same size. .ht-btn already styles an <a>
   (it sets text-decoration and its own colour, and a class beats the bare `a`
   rule), so this supplies only the spacing the form's field margins used to. */
.ha-actions { margin-top: var(--s6); }
.ha-actions .ht-btn + .ht-btn { margin-top: var(--s2); }

/* Cross-links between the three pages. .ht-login-foot already supplies the rule
   above and the muted 12px type; this only keeps several links on one line
   without letting them run together on a narrow phone. */
.ha-foot-links {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s1) var(--s4);
  margin-top: var(--s2);
}