/* ============================================================================
   ic-auth — the class layer for the five auth screens.
   ----------------------------------------------------------------------------
   Minnie's handoff ships each screen as one file of inline styles, because the
   prototype runtime requires it. Her README is explicit that in production they
   "become the ic- class layer described below". This is that layer.

   Every value here traces to a token in sites-tokens.css. Nothing is eyeballed
   from a screenshot, and there is not one literal colour — the Agency tier
   white-labels the whole portal and a single hardcoded hex is a leak that tier
   cannot survive (Blueprint Risk #24, enforced by scripts/check-tokens.js).

   The auth screens are ALWAYS dark. They do not participate in the console's
   light/dark switch, so nothing here reads data-ic-theme.
   ========================================================================== */

/* --- The document itself -------------------------------------------------
   Without this the browser's default 8px body margin leaves a white frame
   around the dark screen, because html and body are both transparent and the
   canvas behind them is white. Minnie's prototype resets it in her inline
   block; the reset has to travel with the class layer or it is simply lost.

   Scoped by load rather than by selector: only the auth screens link this
   file. The console gets its own base when those screens are rebuilt.     */

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--carbon-black);
}

/* --- hidden actually hides -----------------------------------------------
   `hidden` is only the UA stylesheet's display:none, so ANY class here that
   sets display outranks it. Without this line the empty error flags render as
   two red bars across a clean sign-in form, the offline pill claims there is
   no connection, and both password eye icons show at once — every state in the
   screen visible simultaneously. Caught on the deployed page rather than in
   review, which is where this class of bug always surfaces.             */

[hidden] { display: none !important; }

/* --- The ground ---------------------------------------------------------- */

.ic-auth {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 24px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--ic-ground);
  font-family: var(--ic-font-body);
  -webkit-font-smoothing: antialiased;
}

.ic-auth__col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 576px;
}

.ic-auth__logo {
  display: block;
  height: 40px;
  width: auto;
  margin-bottom: 24px;
}

.ic-auth__foot {
  margin: 24px 0 0;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-2);
}

.ic-auth a { color: var(--white); text-decoration: none; }
.ic-auth a:hover { color: var(--silver); }
/* On white (X1, 5 Oct; sites-tokens.css data-ic-auth="light"): the links that
   name white follow the ink instead. */
:root[data-ic-auth="light"] .ic-auth a { color: var(--ic-ink-on-glass); }
:root[data-ic-auth="light"] .ic-auth a:hover { color: var(--ic-ink-on-glass-2); }
:root[data-ic-auth="light"] .ic-field__peek:hover { color: var(--ic-ink-on-glass); }
.ic-auth__foot a { font-weight: var(--weight-semibold); }

/* --- Decorative orbs -----------------------------------------------------
   Circles only. No squares, triangles or bars anywhere in Sites — that
   geometric motif belongs to the n3tworth marketing site.
   Purely decorative, so the layer is aria-hidden in the markup.            */

.ic-auth__orbs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.ic-orb {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--radius-round);
  /* Size scales about each orb's own centre while the offset scales
     separately, so an inner edge always lands over glass and never over type.
     Scaling the whole layer instead couples the two and drags the orbs
     across the text at narrow widths. */
  transform:
    translate(-50%, -50%)
    translate(calc(var(--ox) * var(--pv-ox, 1)), calc(var(--oy) * var(--pv-oy, 1)))
    scale(var(--pv-os, 1));
}

.ic-orb--accent { width: 330px; height: 330px; --ox: -413px; --oy: -210px; background: var(--ic-orb-accent); }
.ic-orb--silver { width: 296px; height: 296px; --ox:  396px; --oy: -238px; background: var(--ic-orb-silver); opacity: .9; }
.ic-orb--white  { width: 150px; height: 150px; --ox: -334px; --oy:  272px; background: var(--ic-orb-white); }
.ic-orb--grey   { width: 248px; height: 248px; --ox:  372px; --oy:  284px; background: var(--ic-orb-grey); }

.ic-orb--ring-a { width: 132px; height: 132px; --ox: -330px; --oy:   60px; border: 2px solid var(--ic-ring); }
.ic-orb--ring-b { width: 190px; height: 190px; --ox:  408px; --oy:   36px; border: 2px solid var(--ic-ring-soft); }
.ic-orb--ring-c { width:  74px; height:  74px; --ox: -440px; --oy: -352px; border: 2px solid var(--ic-ring); }
.ic-orb--ring-d { width:  56px; height:  56px; --ox:  470px; --oy:  360px; border: 2px solid var(--ic-ring-soft); }

/* --- The glass card ------------------------------------------------------ */

.ic-card.is-glass {
  width: 100%;
  box-sizing: border-box;
  padding: 48px;
  background: var(--ic-glass-fill);
  backdrop-filter: var(--ic-glass-blur);
  -webkit-backdrop-filter: var(--ic-glass-blur);
  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-radius-card);
  box-shadow: var(--ic-glass-shadow), var(--ic-glass-highlight);
}

.ic-auth__eyebrow {
  display: block;
  margin-bottom: 14px;
  font: var(--ic-type-eyebrow);
  letter-spacing: .08em;
  color: var(--ic-ink-on-glass);
}

.ic-auth__h1 {
  margin: 0;
  font: var(--weight-bold) var(--pv-h1, var(--ic-text-3xl)) / var(--leading-heading) var(--ic-font-heading);
  color: var(--ic-ink-on-glass);
  text-wrap: pretty;
}

.ic-auth__lede {
  margin: 14px 0 0;
  font: var(--ic-type-body);
  color: var(--ic-ink-on-glass-2);
}

/* --- Fields -------------------------------------------------------------- */

.ic-fields { margin-top: 32px; display: flex; flex-direction: column; gap: 20px; }

.ic-field { display: flex; flex-direction: column; gap: 9px; }

.ic-field__label {
  font: var(--ic-type-label);
  color: var(--ic-ink-on-glass);
  padding-left: 4px;
}

.ic-field__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}
.ic-field__row .ic-field__label { padding-left: 0; }
.ic-field__aside { font: var(--ic-type-small); color: var(--ic-ink-on-glass-2); }

.ic-input {
  height: 52px;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;
  background: var(--ic-glass-fill-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-radius-field);
  box-shadow: var(--ic-control-inset);
  font: var(--ic-type-body);
  font-family: var(--ic-font-body);
  color: var(--ic-ink-on-glass);
  outline: none;
  transition:
    border-color var(--ic-dur-fast) var(--ic-ease),
    box-shadow var(--ic-dur-fast) var(--ic-ease),
    background-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-input::placeholder { color: var(--ic-ink-on-glass-3); opacity: 1; }

/* Focus is never removed. */
.ic-input:focus {
  border-color: var(--ic-accent);
  background-color: var(--ic-glass-fill-strong);
  /* --ic-accent-wash is 10%, which is a paper value: on glass it disappears.
     30% is what the design uses and what stays visible here. */
  box-shadow: var(--ic-control-inset), 0 0 0 3px color-mix(in oklab, var(--ic-accent) 30%, transparent);
}

.ic-field__wrap { position: relative; display: flex; align-items: center; }
.ic-field__wrap .ic-input { padding-right: 58px; }

.ic-field__peek {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: var(--radius-round);
  background: transparent;
  color: var(--ic-ink-on-glass-3);
  cursor: pointer;
  transition: background-color var(--ic-dur-fast) var(--ic-ease), color var(--ic-dur-fast) var(--ic-ease);
}
.ic-field__peek:hover { background: var(--ic-control-glass); color: var(--white); }

/* --- Flags --------------------------------------------------------------- */

.ic-flag {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--ic-radius-control);
  animation: sites-rise var(--ic-dur-slow) var(--ic-ease);
}

/* --ic-red-bg is the LIGHT console tint, a near-white fill that is correct on
   paper and reads as a grey box on glass. The auth screens sit on --ic-ground
   and never load sites-dark.css, so they need the wash form — the same rule
   sites-dark.css states for status: on a dark ground a tint becomes a wash of
   the foreground, not a fill. The 18% and 55% match Minnie's own values.

   Derived from --ic-danger, deliberately NOT from the accent: an error stays
   red when a client white-labels the portal green. */
.ic-flag.is-red {
  background: color-mix(in oklab, var(--ic-danger) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--ic-danger) 55%, transparent);
}
.ic-flag__icon { flex: 0 0 auto; margin-top: 1px; }
.ic-flag__title { font: var(--ic-type-label); color: var(--ic-ink-on-glass); }
.ic-flag__body { margin-top: 4px; font: var(--ic-type-small); color: var(--ic-ink-on-glass-2); text-wrap: pretty; }

/* --- The primary action --------------------------------------------------
   No shadow on a filled control beyond the accent's own raise: a raised
   shadow on a saturated fill reads as dirt.                                */

.ic-actions { margin-top: 28px; }

.ic-btn-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  box-sizing: border-box;
  padding: 10px 12px 10px 26px;
  border: none;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-accent-fill);
  box-shadow: var(--ic-accent-raise);
  font: var(--type-btn-md);
  font-family: var(--ic-font-ui);
  color: var(--white);
  cursor: pointer;
  transition:
    background-color var(--ic-dur-fast) var(--ic-ease),
    box-shadow var(--ic-dur-fast) var(--ic-ease),
    transform var(--ic-dur-fast) var(--ic-ease);
}

/* Hover and press derive DOWNWARD from the fill ceiling, never upward through
   it - that ceiling is the only reason the white label clears contrast. */
.ic-btn-primary:hover:not(:disabled) { background: var(--ic-accent-fill-hover); }
.ic-btn-primary:active:not(:disabled) { background: var(--ic-accent-fill-press); transform: scale(.98); }
.ic-btn-primary:disabled { opacity: .45; cursor: not-allowed; }

.ic-btn-primary__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-round);
  background: var(--ic-glass-fill-strong);
  font-family: var(--ic-font-mono);
  font-size: 14px;
}

/* --- Third-party sign-in -------------------------------------------------
   A link, not a button: it is a plain navigation to /api/auth/google, so it
   works with middle-click, keyboard, and before any script has run.        */

.ic-social {
  /* 28px is the design's own spacing above this block. Extracting the class
     layer dropped it with the wrapper div it was attached to, which left the
     button sitting hard against the heading. */
  margin-top: 28px;
  height: 52px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--ic-glass-fill-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-radius-pill);
  box-shadow: var(--ic-control-inset);
  font: var(--type-btn-md);
  font-family: var(--ic-font-ui);
  color: var(--ic-ink-on-glass);
  cursor: pointer;
  transition: background-color var(--ic-dur-fast) var(--ic-ease), border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-social:hover { background: var(--ic-control-glass); border-color: var(--ic-line-on-glass); color: var(--ic-ink-on-glass); }
.ic-social svg { flex: 0 0 auto; }

/* The Google button's own consent line. There is no checkbox on that path, so
   this sentence IS the consent record — it has to be visible before the click,
   not after it. */
.ic-social__consent { margin-top: 12px; text-align: center; }
.ic-social__consent a { color: var(--ic-ink-on-glass-2); text-decoration: underline; }

.ic-or {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ic-or::before,
.ic-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ic-line-on-glass);
}

.ic-or span {
  font: var(--ic-type-meta);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ic-ink-on-glass-3);
}

/* --- Consent + fine print ------------------------------------------------ */

.ic-check {
  margin-top: 24px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-2);
}

.ic-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--ic-accent-fill);
  cursor: pointer;
}

.ic-check label { cursor: pointer; text-wrap: pretty; }
.ic-check a { color: var(--ic-ink-on-glass); text-decoration: underline; }

.ic-fine {
  margin: 16px 0 0;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-3);
  text-wrap: pretty;
}

/* --- Secondary action ---------------------------------------------------- */

.ic-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 26px;
  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-radius-pill);
  background: var(--ic-glass-fill-soft);
  font: var(--type-btn-md);
  font-family: var(--ic-font-ui);
  color: var(--ic-ink-on-glass);
  cursor: pointer;
  transition: background-color var(--ic-dur-fast) var(--ic-ease), border-color var(--ic-dur-fast) var(--ic-ease);
}

.ic-btn-ghost:hover:not(:disabled) { background: var(--ic-control-glass); border-color: var(--ic-glass-border-lit); }
.ic-btn-ghost:disabled { opacity: .45; cursor: not-allowed; }

/* --- Password match ------------------------------------------------------
   Confirmation, not instruction: it appears when the two agree and says
   nothing at all while someone is still typing.                           */

.ic-match {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 4px;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-2);
  animation: sites-rise var(--ic-dur-fast) var(--ic-ease);
}

/* --- Working ------------------------------------------------------------- */

.ic-working {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  border-radius: var(--ic-radius-pill);
  /* The working state IS the primary action mid-flight, so it follows the
     accent fill rather than danger — on a white-labelled portal this is the
     client's colour, not red. */
  background: color-mix(in oklab, var(--ic-accent-fill) 55%, transparent);
  border: 1px solid var(--ic-glass-border-lit);
  font: var(--type-btn-md);
  color: var(--white);
}

.ic-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--ic-glass-border-lit);
  border-top-color: var(--white);
  border-radius: var(--radius-round);
  animation: sites-spin .7s linear infinite;
}

/* --- Offline pill -------------------------------------------------------- */

.ic-offline {
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: var(--ic-glass-fill-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ic-glass-border);
  border-radius: var(--ic-radius-pill);
  animation: sites-rise var(--ic-dur-slow) var(--ic-ease);
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass);
}

.ic-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: var(--radius-round);
  background: var(--white);
  animation: sites-pulse 1.4s var(--ic-ease) infinite;
}

/* --- Done ---------------------------------------------------------------- */

.ic-done { animation: sites-rise var(--ic-dur-slow) var(--ic-ease); }
/* The two-step code view (W7) rises in like the done card, rather than
   snapping into the password form's place. */
.ic-twostep { animation: sites-rise var(--ic-dur-slow) var(--ic-ease); }

.ic-done__tick {
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--white);
  box-shadow: var(--ic-glass-shadow);
}

/* --- Motion --------------------------------------------------------------
   No bounce, no spring, no parallax.                                       */

@keyframes sites-spin  { to { transform: rotate(360deg) } }
@keyframes sites-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
@keyframes sites-rise  { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }

/* --- Sign-in hand-off ----------------------------------------------------- */

/*
 * Minnie's "Signed In" state is a TRANSITION, not a destination. It says where
 * it is going and how long it has, and offers a button to anyone who will not
 * wait the five seconds. Before this existed the state was in the markup but
 * unreachable: onSuccess unhid it and called location.assign() in the same
 * tick, so the card was replaced in the same frame it appeared.
 */
.ic-actions--row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* The block buttons are full-width by default. In a row they sit beside a
   countdown, so they size to their label instead. */
.ic-actions--row .ic-btn-primary,
.ic-actions--row .ic-btn-ghost {
  width: auto;
  justify-content: center;
  padding-left: 32px;
  padding-right: 32px;
  text-decoration: none;
}

.ic-handoff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 10px 22px;
  border-radius: var(--ic-radius-pill);
  background: var(--ic-glass-fill-soft);
  border: 1px solid var(--ic-line-on-glass);
  font: var(--type-btn-md);
  color: var(--ic-ink-on-glass-3);
}

/* The offline pill's dot is white on purpose - it is an alert. This one is a
   timer, so it takes the same ink as the text around it. */
.ic-handoff .ic-dot { background: var(--ic-ink-on-glass-3); }

/* Tabular so the pill does not resize as 5 becomes 4. */
.ic-handoff__count {
  font-family: var(--ic-font-mono);
  font-variant-numeric: tabular-nums;
}

/* --- Verify Email -------------------------------------------------------- */

/*
 * The mark above the heading. Minnie's file carries no envelope: it is an
 * <x-import name="IconEnvelope"> pointing at her design system, which renders
 * as nothing outside her canvas — which is exactly what Nikol' saw. The glyph
 * is drawn inline in the page instead.
 */
.ic-mark {
  width: 60px;
  height: 60px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--ic-control-glass);
  border: 1px solid var(--ic-glass-border-lit);
  box-shadow: var(--ic-control-raise);
}

.ic-perks {
  margin-top: 28px;
  padding: 20px 24px;
  background: var(--ic-glass-fill-soft);
  border: 1px solid var(--ic-line-on-glass);
  border-radius: var(--ic-radius-control);
}

.ic-perks__label {
  margin-bottom: 12px;
  font: var(--ic-type-label);
  color: var(--ic-ink-on-glass);
}

.ic-perks__list { display: flex; flex-direction: column; gap: 10px; }

.ic-perk {
  display: flex;
  align-items: center;
  gap: 10px;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-2);
}

.ic-perk__tick {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-round);
  background: var(--white);
}

/* Sits under the actions rather than in them: it is a way out of this screen,
   not one of the two things to do on it. 13 Oct (Nikol', on /email-change:
   "text contrast issues"): it set no color, so on the dark glass card it fell
   back to dark ink; it reads in the card's own silver now, with room above. */
.ic-alt {
  margin: 0;
  font: var(--ic-type-small);
  font-weight: var(--weight-semibold);
  color: var(--ic-ink-on-glass-2);
}
/* Room above wherever it follows something, not only straight after the
   actions: on the two-step code screen it follows the whole <form>, and sat
   0px under Verify (Nikol', 14 Oct: "entirely too close to the button"). */
.ic-alt:not(:first-child) { margin-top: 20px; }

/* Two choices of equal width, one above the other, with room between
   (13 Oct, /email-change: "the buttons are stacked on top of each other with
   no padding"). */
.ic-actions--stack { display: grid; gap: 12px; }
.ic-actions--stack .ic-btn-ghost { width: 100%; }

/* An address or an identifier set into running copy. Mono because the whole
   point is that someone reads it character by character to check it is theirs. */
.ic-mono {
  font-family: var(--ic-font-mono);
  font-size: 15px;
  color: var(--ic-ink-on-glass);
}

/* --- Accept Invite ------------------------------------------------------- */

/* The monogram sits beside the heading rather than above it: an invitation is
   about a specific client, and the mark and the name are one object. */
.ic-idhead { display: flex; align-items: center; gap: 16px; }

.ic-monogram {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-round);
  background: var(--ic-control-glass);
  border: 1px solid var(--ic-glass-border-lit);
  box-shadow: var(--ic-control-raise);
  font: var(--weight-bold) 17px/1 var(--ic-font-heading);
  color: var(--white);
}

.ic-monogram--sm {
  width: 38px;
  height: 38px;
  font-size: 13px;
  box-shadow: none;
}

/* Hairline rules between rows come from the 1px grid gap showing the container
   through, so there is no border to double up at the ends. */
.ic-meta {
  margin-top: 26px;
  display: grid;
  gap: 1px;
  overflow: hidden;
  background: var(--ic-line-on-glass);
  border: 1px solid var(--ic-line-on-glass);
  border-radius: var(--ic-radius-control);
}

.ic-meta__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  background: var(--ic-glass-fill-soft);
}

.ic-meta__k { font: var(--ic-type-small); color: var(--ic-ink-on-glass-3); }
.ic-meta__v { font: var(--ic-type-label); color: var(--ic-ink-on-glass); text-align: right; }

/* What the role can and cannot do, said before anything is asked for. An
   invited collaborator is the one person who arrives with no idea what Sites
   is, which is why the card explains the role rather than just naming it. */
.ic-note {
  margin: 14px 0 0;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-2);
}

.ic-existing {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--ic-glass-fill-soft);
  border: 1px solid var(--ic-line-on-glass);
  border-radius: var(--ic-radius-control);
}

.ic-existing__body { min-width: 0; }
.ic-existing__title { font: var(--ic-type-label); color: var(--ic-ink-on-glass); }
.ic-existing__sub {
  margin-top: 2px;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-3);
  overflow-wrap: anywhere;
}

.ic-fineprint {
  margin: 18px 0 0;
  font: var(--ic-type-small);
  color: var(--ic-ink-on-glass-3);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; }
  .ic-done, .ic-flag, .ic-offline { animation: none !important; }
  .ic-dot { animation: none !important; }
  .ic-spinner { animation-duration: 2.6s !important; }
}

/* --- Narrow -------------------------------------------------------------- */

@media (max-width: 640px) {
  .ic-auth { padding: 24px 16px; }
  .ic-card.is-glass { padding: 24px; }
  .ic-auth { --pv-h1: 24px; --pv-ox: .62; --pv-oy: .62; --pv-os: .5; }
}

/*
 * The resume state. Same rise as .ic-done, but a spinner where the tick goes:
 * this view says "working" rather than "finished", and the two must not be
 * mistaken for each other at a glance.
 *
 * It sizes the shared 16px .ic-spinner up to sit where .ic-done__tick's 60px
 * disc sits, so the card does not jump when one replaces the other.
 */
.ic-done--resume .ic-spinner {
  width: 34px;
  height: 34px;
  border-width: 3px;
  margin-bottom: 26px;
}

/*
 * The offline banner is a permanent live region that fills and empties
 * rather than a node that is added and removed - a [hidden] live region
 * is announced by nothing. Empty means gone.
 */
.ic-offline:empty { display: none; }

/*
 * Field rule text. PERSISTENT, and that is the whole point: this used to
 * be a placeholder, so the only statement of what a password must be
 * disappeared the moment somebody started typing one.
 */
.ic-hint {
  margin: 8px 0 0;
  font: var(--ic-type-small);
  color: var(--ic-ink-inverse-2);
}