/* weheals Portal: page layout on top of tokens.css and components.css (SCR-01).
   Prefix wh-. Values only from the tokens (--wh-*). No inline styles in templates. */

html { background: var(--wh-paper); }
body { margin: 0; }

/* Text only for screen readers (labels the layout hides visually). */
.wh-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inner mark of the status symbols (_icons.html.twig): drawn in the paper colour. */
.wh-icon-mark { stroke: var(--wh-paper); }
.wh-icon-dot { fill: var(--wh-paper); }

.wh-link { color: var(--wh-petrol); text-underline-offset: 3px; }
.wh-link:hover { color: var(--wh-ink); text-decoration-thickness: 2px; }
.wh-link--muted { color: var(--wh-ink-muted); }

/* ---------- Sign-in pages: a petrol panel with the scale, the form on paper ---------- */
.wh-auth { min-height: 100vh; display: flex; flex-wrap: wrap; align-items: stretch; }

/* The panel carries the brand's one bold gesture: a tall scale whose ocher level has risen.
   Purely decorative (aria-hidden in the template). */
.wh-auth__panel {
  position: relative; overflow: hidden;
  flex: 0 0 clamp(440px, 38vw, 560px); min-height: 220px;
  display: flex; align-items: center; justify-content: flex-start;
  padding: var(--wh-space-7) 184px var(--wh-space-7) var(--wh-space-7);
  background: var(--wh-petrol); color: var(--wh-on-petrol);
}
.wh-auth__scale {
  position: absolute; top: 0; bottom: 0; right: var(--wh-space-8); width: 64px;
  border-right: 1px solid var(--wh-on-petrol-muted);
  background:
    repeating-linear-gradient(to bottom, var(--wh-on-petrol-muted) 0 1px, transparent 1px 16px) right top / 24px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--wh-on-petrol) 0 2px, transparent 2px 80px) right top / 56px 100% no-repeat;
}
.wh-auth__level { position: absolute; right: 136px; top: 31%; bottom: 0; width: 10px; background: var(--wh-ocker-bright); }
.wh-auth__pointer {
  position: absolute; right: 146px; top: calc(31% - 12px); width: 0; height: 0;
  border-top: 12px solid transparent; border-bottom: 12px solid transparent; border-left: 18px solid var(--wh-ocker-bright);
}
.wh-auth__claim {
  position: relative; margin: 0; max-width: 100%;
  font: 620 34px/38px var(--font-sans); font-variation-settings: "wdth" 75; text-wrap: balance;
}

.wh-auth__main {
  flex: 999 1 420px; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: var(--wh-space-8) max(16px, 5vw);
}
.wh-auth__card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--wh-space-5); }
.wh-auth__card form { display: flex; flex-direction: column; gap: var(--wh-space-5); }
.wh-auth__title { font-size: 30px; line-height: 34px; }
.wh-auth__text { margin: 0; }
.wh-auth__actions { display: flex; flex-wrap: wrap; gap: var(--wh-space-3); align-items: center; justify-content: space-between; }
.wh-auth__alt { margin: 0; padding-top: var(--wh-space-4); border-top: 1px solid var(--wh-hairline); font-size: 14px; }
.wh-auth__foot { margin: 0; font-size: 13px; color: var(--wh-ink-muted); display: flex; flex-wrap: wrap; gap: var(--wh-space-2) var(--wh-space-4); }
.wh-auth__brand img { height: 40px; width: auto; }

/* Code fields: one field, narrow digits with space between them (A11Y-06). */
.wh-input--code { max-width: 220px; font-size: 22px; letter-spacing: .2em; font-variation-settings: "wdth" 75; }

/* QR code of the 2FA setup: server-rendered SVG without style attributes. */
.wh-qr { width: 200px; max-width: 100%; padding: var(--wh-space-3); background: var(--wh-paper); border: 1px solid var(--wh-hairline); border-radius: var(--wh-radius); }
.wh-qr svg { display: block; width: 100%; height: auto; }
.wh-secret { font: 600 18px/26px var(--font-sans); font-variation-settings: "wdth" 75; letter-spacing: .12em; word-break: break-all; }

/* Backup codes: a list to read, select and copy. */
.wh-codes { list-style: none; margin: 0; padding: var(--wh-space-3) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wh-space-2) var(--wh-space-5); border-top: 2px solid var(--wh-ink); }
.wh-codes code { font: 600 18px/28px var(--font-sans); font-variation-settings: "wdth" 75; letter-spacing: .1em; user-select: all; }

/* Enhancements the script turns on; without script they stay hidden. */
[data-wh-enhance][hidden] { display: none !important; }

@media (max-width: 760px) {
  .wh-auth__panel { flex: 1 1 100%; min-height: 160px; padding: var(--wh-space-5) 160px var(--wh-space-5) var(--wh-space-4); }
  .wh-auth__claim { font-size: 24px; line-height: 28px; }
  .wh-auth__main { padding: var(--wh-space-6) var(--wh-space-4); }
}

/* ---------- Session warning dialog (A11Y-05) ---------- */
.wh-dialog { width: min(440px, calc(100vw - 32px)); border: 0; border-radius: var(--wh-radius-lg); padding: var(--wh-space-5); box-shadow: var(--wh-shadow-overlay); color: var(--wh-ink); }
.wh-dialog::backdrop { background: var(--wh-scrim); }
.wh-dialog h2 { margin: 0 0 var(--wh-space-3); font: 600 20px/26px var(--font-sans); }
.wh-dialog p { margin: 0 0 var(--wh-space-3); }
.wh-dialog__countdown { font: 620 22px/28px var(--font-sans); font-variation-settings: "wdth" 75; font-variant-numeric: tabular-nums; }
.wh-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--wh-space-2); align-items: center; }
.wh-dialog form { margin: 0; }

/* Plain pages of the portal until the app frame (FE-02) exists. */
.wh-page { max-width: var(--wh-content-max); margin: 0 auto; padding: var(--wh-space-6) max(16px, 3vw) var(--wh-space-7); display: flex; flex-direction: column; gap: var(--wh-space-5); }
.wh-page h1 { margin: 0; font: 620 34px/36px var(--font-sans); font-variation-settings: "wdth" 75; }