/* Hallmark · shape: app screen · genre: modern-minimal · theme: G2 Graphite control room, tokens from /shared/os2-tokens.css · nav: the wordmark alone above one card (auth is the one narrow screen) · surface: three steps · axes: dark/grotesk-sans/tally · posture: restrained · contrast: pass · type: shared system (Archivo) · v2.0.0 */
/* Hallmark · answered F4 · one filled primary per screen (the submit); the workspace cards are quiet panels */
/* Chiqaq GFX OS 2.0 — the three authentication screens: sign in, set
   password, and the entry page that picks a workspace. They run on the
   shared tokens only (no admin.css, no dashboard.css): a full-height
   Graphite page, the wordmark, one card with 44px controls, inline notices
   instead of alert(), and a footer line naming the host. Phone first: the
   card is the screen at 360 to 430px and sits centred from 480px up. */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
body { margin: 0; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; font-synthesis: none; caret-color: var(--color-accent); }
::selection { background: var(--color-selection); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1.1; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--text-xl); }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
svg { display: block; }
ul { margin: 0; padding: 0; list-style: none; }

/* ── Page: wordmark, card, footer on one axis ── */
.auth { display: grid; align-content: center; justify-items: stretch; gap: var(--space-md); width: 100%; max-width: 100%; padding: var(--space-lg) var(--space-md); margin: 0 auto; }
.auth-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); min-height: var(--control-h-lg); }
.auth-wordmark { display: inline-flex; align-items: center; min-height: var(--control-h-lg); font-weight: 600; font-size: var(--text-md); letter-spacing: var(--tracking-display); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.auth-wordmark span { color: var(--color-muted); font-weight: 400; margin-left: var(--space-2xs); }
.auth-head .tally { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }
.auth-head .tally::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ok) 25%, transparent); }
body[data-phase="error"] .auth-head .tally::before { background: var(--color-bad); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-bad) 25%, transparent); }
body[data-phase="loading"] .auth-head .tally::before { background: var(--color-muted); box-shadow: none; }

.auth-card { display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.auth-card > h1 { display: flex; align-items: center; gap: var(--space-xs); }
.auth-sub { font-size: var(--text-sm); color: var(--color-muted); }
.auth-sub.is-ready { color: var(--color-ink-2); }
.auth-sub.is-bad { color: var(--color-bad); }
.auth-lede { font-size: var(--text-sm); color: var(--color-muted); }
.auth-note { font-size: var(--text-xs); color: var(--color-muted); }
.auth-note a { color: var(--color-ink-2); }

.auth-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-md); padding: var(--space-sm) var(--space-md) var(--space-md); font-size: var(--text-xs); color: var(--color-muted); }
.auth-foot .url { font-size: var(--text-xs); }

/* ── Fields ── */
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-size: var(--text-xs); font-weight: 500; color: var(--color-muted); }
.field .row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm); }
.field .row a { font-size: var(--text-xs); color: var(--color-muted); }
.in { display: block; width: 100%; min-height: var(--control-h-lg); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: max(16px, var(--text-md)); line-height: 1.3; outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
.in::placeholder { color: var(--color-muted); opacity: 0.7; }
@media (hover: hover) { .in:hover:not(:disabled) { background: var(--color-paper-2); } }
.in:focus-visible { outline-color: var(--color-focus); }
.in:disabled { opacity: 0.55; cursor: not-allowed; }
.in[aria-invalid="true"] { border-color: var(--color-bad); }
.field .help { font-size: var(--text-xs); color: var(--color-muted); min-height: 1lh; }
.field.is-bad .help { color: var(--color-bad); }
.field.is-ok .help { color: var(--color-ok); }

/* Password with its visibility toggle */
.pw { position: relative; min-width: 0; }
.pw .in { padding-right: calc(var(--control-h-lg) + var(--space-2xs)); }
.pw-toggle { position: absolute; top: 0; right: 0; display: inline-grid; place-items: center; width: var(--control-h-lg); height: var(--control-h-lg); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-muted); cursor: pointer; }
@media (hover: hover) { .pw-toggle:hover { color: var(--color-ink); } }
.pw-toggle:active { transform: translateY(1px); }
.pw-toggle:disabled { opacity: 0.55; cursor: not-allowed; }
.pw-toggle .eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .eye { display: none; }
.pw-toggle[aria-pressed="true"] .eye-off { display: block; }

/* Strength: four steps, filled by data-score 0 to 4 */
.meter { margin-top: var(--space-2xs); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); }
.meter i { display: block; height: 4px; border-radius: 2px; background: var(--color-rule); transition: background-color var(--dur-short) var(--ease-out); }
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--color-bad); }
.meter[data-score="2"] i:nth-child(-n+2) { background: var(--color-person); }
.meter[data-score="3"] i:nth-child(-n+3) { background: var(--color-ok); }
.meter[data-score="4"] i { background: var(--color-ok); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: var(--control-h-lg); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-weight: 500; font-size: var(--text-md); white-space: nowrap; cursor: pointer; position: relative; text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .btn:hover:not(:disabled) { background: var(--color-paper-3); border-color: var(--color-muted); } }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
@media (hover: hover) { .btn--primary:hover:not(:disabled) { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); } }
.btn--quiet { background: transparent; border-color: transparent; color: var(--color-ink-2); }
@media (hover: hover) { .btn--quiet:hover:not(:disabled) { background: var(--color-paper-2); border-color: transparent; color: var(--color-ink); } }
.btn--block { width: 100%; }
.btn .spinner { display: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklab, currentColor 30%, transparent); border-top-color: currentColor; animation: auth-spin 0.8s linear infinite; }
.btn.is-busy { opacity: 0.85; cursor: progress; }
.btn.is-busy .spinner { display: block; }
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* ── Notices (inline, never alert()) ── */
.notice { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-3); font-size: var(--text-sm); color: var(--color-ink); min-width: 0; }
.notice > .ic { flex-shrink: 0; margin-top: var(--space-3xs); color: var(--color-muted); }
.notice > span { min-width: 0; overflow-wrap: break-word; }
.notice--bad { border-color: var(--color-bad); background: var(--color-bad-soft); }
.notice--bad > .ic { color: var(--color-bad); }
.notice--ok { border-color: var(--color-ok); }
.notice--ok > .ic { color: var(--color-ok); }
.notice--warn { border-color: var(--color-person); }
.notice--warn > .ic { color: var(--color-person); }

/* ── Status line and workspace cards (index) ── */
.status { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.status.error { color: var(--color-bad); }
.status .spinner { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px solid var(--color-rule-2); border-top-color: var(--color-muted); animation: auth-spin 0.8s linear infinite; }
.ws-list { display: grid; gap: var(--space-xs); }
.ws-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; column-gap: var(--space-sm); min-height: 56px; padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); background: var(--color-paper-3); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out); }
@media (hover: hover) { .ws-list a:hover { background: var(--color-paper); border-color: var(--color-muted); } }
.ws-list a:active { transform: translateY(1px); }
.ws-list .name { display: grid; gap: var(--space-3xs); min-width: 0; }
.ws-list .name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-list .name .url { font-size: var(--text-xs); }
.ws-list .role { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.ws-list .ic { color: var(--color-muted); transform: rotate(-90deg); }

/* ── Width: the card is the screen on a phone, centred from 480px ── */
@media (min-width: 480px) {
  .auth { max-width: 440px; padding: var(--space-xl) var(--space-lg); }
  .auth--wide { max-width: 480px; }
  .auth-card { padding: var(--space-lg); }
}
@media (min-width: 1024px) {
  .auth { gap: var(--space-lg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn .spinner, .status .spinner { animation: none; border-top-color: transparent; }
}