/* The one sign-in at wanovix.com/account, in the brand that is live on wanovix.com (apps/site/src/
   site.css): the white ground, the Archivo wordmark with its orange rule, orange as a fill, a line or
   a mark and never text, graphite ink. The phone first; every target at least --tap high; text at
   least 16 px on phone and tablet. Values only from the tokens. */

.acc { min-block-size: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }

/* The header: the wordmark, and under it the orange rule that draws in once. */
.acc-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4) var(--space-3); }
/* the profile icon's module switcher, top right (packages/ui/switcher.css) */
.acc-switch { display: flex; align-items: center; }
.acc-top::after {
  content: ""; position: absolute; inset: auto var(--space-4) 0; block-size: var(--space-1);
  background: var(--accent); transform-origin: left; animation: acc-draw 900ms var(--ease-out) 120ms both;
}
@keyframes acc-draw { from { transform: scaleX(0); } }
.acc-mark {
  display: inline-flex; align-items: center; min-block-size: var(--tap);
  font-family: var(--font-display); font-stretch: var(--wordmark-stretch); font-weight: var(--wordmark-weight);
  font-size: var(--text-xl); line-height: 1; text-transform: uppercase; text-decoration: none; color: var(--text);
}

.acc-main {
  inline-size: 100%; max-inline-size: 28rem; margin-inline: auto; flex: 1;
  display: flex; flex-direction: column; gap: var(--space-5); align-content: start;
  padding: var(--space-6) var(--space-4) var(--space-7);
}
.acc-wide { max-inline-size: 72rem; }

.acc-head { display: grid; gap: var(--space-2); }
.acc-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); font-size: var(--text-2xl); line-height: var(--leading-tight); text-wrap: balance;
}
.acc-lede { color: var(--text-muted); text-wrap: pretty; }
.acc-h2 {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); font-size: var(--text-xl); line-height: var(--leading-tight);
}
.acc-crumb { color: var(--text-muted); }
.acc-crumb a, .acc-foot a, .acc-note a, .acc-links a, .acc-main > p a {
  color: var(--text); font-weight: var(--label-weight);
  text-decoration-line: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.3em;
}
.acc-crumb a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* Forms */
.acc-form { display: grid; gap: var(--space-5); }
.acc-field { display: grid; gap: var(--space-2); }
.acc-label { font-weight: var(--label-weight); }
.acc-hint { color: var(--text-muted); }
.acc-input {
  inline-size: 100%; min-block-size: calc(var(--tap) + var(--space-1)); padding: 0 var(--space-3);
  font: inherit; font-size: max(1rem, 16px); color: var(--text); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  transition: border-color var(--motion), box-shadow var(--motion);
}
.acc-input:hover { border-color: var(--text); }
.acc-input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.acc-input[aria-invalid="true"] { border-color: var(--stop); }

.acc-submit, .acc-secondary, .acc-danger {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: calc(var(--tap) + var(--space-1)); padding: 0 var(--space-5);
  border-radius: var(--radius-md); font: inherit; font-weight: var(--label-weight); text-decoration: none; cursor: pointer;
  transition: background-color var(--motion), border-color var(--motion);
}
.acc-submit { border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.acc-submit:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.acc-submit:active, .acc-secondary:active { transform: translateY(1px); }
.acc-submit[aria-disabled="true"] { background: var(--surface-2); border-color: var(--line); color: var(--text-muted); cursor: not-allowed; }
.acc-secondary { border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); }
.acc-secondary:hover { background: var(--surface); }
.acc-danger { border: 1px solid var(--stop); background: var(--stop); color: var(--on-stop); }
.acc-small { min-block-size: var(--tap); padding-inline: var(--space-4); }

.acc-alert {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--stop-soft); border-inline-start: var(--space-1) solid var(--stop);
}
.acc-note {
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
  background: var(--surface); border-inline-start: var(--space-1) solid var(--accent);
}
.acc-who strong { font-weight: var(--label-weight); overflow-wrap: anywhere; }
.acc-foot a { display: inline-flex; align-items: center; min-block-size: var(--tap); }
.acc-foot { color: var(--text-muted); padding-block-start: var(--space-4); border-block-start: var(--joint) solid var(--line); text-wrap: pretty; }

/* The security check: a fixed slot for the widget, its state in words under it. */
.acc-check { display: grid; gap: var(--space-3); }
.acc-widget {
  block-size: 65px; display: grid; place-items: center; border-radius: var(--radius-md);
  background: var(--surface); border: 1px dashed var(--line-strong);
}
.acc-turnstile { inline-size: 100%; }
.acc-tick { display: none; inline-size: var(--space-5); block-size: var(--space-5); border-radius: var(--radius-pill); background: var(--ok); position: relative; }
.acc-tick::after { content: ""; position: absolute; inset: 28% 34% 38% 30%; border: solid var(--bg); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-10%, -10%); }
.acc-check[data-state="passed"] .acc-turnstile { display: none; }
.acc-check[data-state="passed"] .acc-tick { display: block; }
.acc-check[data-state="passed"] .acc-widget { border: 1px solid var(--ok); background: var(--ok-soft); }
.acc-check[data-state="failed"] .acc-widget { border: 1px solid var(--stop); background: var(--stop-soft); }
.acc-check-text { color: var(--text-muted); }
.acc-check-text:focus { outline: none; }
.acc-retry {
  justify-self: start; min-block-size: var(--tap); padding: 0 var(--space-4); cursor: pointer; font: inherit; font-weight: var(--label-weight);
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--bg); color: var(--text);
}
.acc-check:not([data-state="failed"]) .acc-retry { display: none; }
.acc-go { margin-block-start: var(--space-2); }

/* The tiles: what this account may open. */
.acc-tiles { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); }
.acc-tile {
  position: relative; display: grid; gap: var(--space-2); align-content: start; min-block-size: 8.5rem;
  padding: var(--space-5); border: var(--joint) solid var(--line); border-radius: var(--radius-lg);
  background: var(--bg); color: var(--text); text-decoration: none; overflow: hidden;
  transition: border-color var(--motion), background-color var(--motion);
}
.acc-tile::after {
  content: ""; position: absolute; inset: auto 0 0 0; block-size: var(--space-1); background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform var(--motion);
}
.acc-tile:hover { border-color: var(--line-strong); background: var(--surface); }
.acc-tile:hover::after, .acc-tile:focus-visible::after { transform: scaleX(1); }
.acc-tile-title {
  font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking); font-size: var(--text-xl); line-height: var(--leading-tight);
}
.acc-tile-line { color: var(--text-muted); }
.acc-tile-mark { inline-size: var(--space-6); block-size: var(--space-2); border-radius: var(--radius-pill); background: var(--accent); margin-block-end: var(--space-2); }
/* Nexus Brands' own logo is white, made for a dark ground: it stands on a graphite plate. */
.acc-plate { justify-self: start; display: inline-flex; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--text); margin-block-end: var(--space-2); }
.acc-logo { display: block; block-size: 1.75rem; inline-size: auto; max-inline-size: 100%; }
.acc-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.acc-links a { display: inline-flex; align-items: center; min-block-size: var(--tap); }

/* The admin page */
.acc-add { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--joint) solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.acc-add .acc-input { background: var(--bg); }
.acc-kind { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); min-inline-size: 0; }
.acc-kind legend { margin-block-end: var(--space-2); }
.acc-choice {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; cursor: pointer;
  padding: var(--space-3); min-block-size: var(--tap); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg);
}
/* The whole card is the target: the native control lies over it, unseen, and its mark is drawn. */
.acc-choice { position: relative; grid-template-columns: 1fr; }
.acc-choice input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.acc-choice span { position: relative; padding-inline-start: calc(1.25rem + var(--space-3)); color: var(--text-muted); }
.acc-choice span::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.15em; inline-size: 1.25rem; block-size: 1.25rem;
  border: 2px solid var(--line-strong); border-radius: var(--radius-sm, 4px); background: var(--bg);
}
.acc-choice input[type="radio"] + span::before { border-radius: var(--radius-pill); }
.acc-choice input:checked + span::before { border-color: var(--accent-strong); background: radial-gradient(circle, var(--accent-strong) 0 45%, var(--bg) 50%); }
.acc-choice input[type="checkbox"]:checked + span::before { background: var(--accent-strong); box-shadow: inset 0 0 0 3px var(--bg); }
.acc-choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.acc-choice strong { display: block; font-weight: var(--label-weight); color: var(--text); }
.acc-choice:has(input:checked) { border-color: var(--text); }
.acc-empty { color: var(--text-muted); }
.acc-users { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-3); }
.acc-user { display: grid; gap: var(--space-3); padding: var(--space-5); border: var(--joint) solid var(--line); border-radius: var(--radius-lg); }
.acc-user-head { display: grid; gap: var(--space-1); }
.acc-user-name { font-weight: var(--label-weight); font-size: var(--text-lg); }
.acc-user-mail { color: var(--text-muted); overflow-wrap: anywhere; }
.acc-facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-muted); margin-block-start: var(--space-1); }
.acc-badge { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--text); font-weight: var(--label-weight); }
.acc-badge-admin { background: var(--surface-3); }
.acc-user-mods { color: var(--text-muted); }
.acc-secret { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--surface); border-inline-start: var(--space-1) solid var(--accent); overflow-wrap: anywhere; }
.acc-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: start; }
.acc-acts form { display: contents; }
.acc-remove summary { list-style: none; }
.acc-remove summary::-webkit-details-marker { display: none; }
.acc-remove[open] { flex-basis: 100%; }
.acc-remove form { display: grid; gap: var(--space-3); padding-block-start: var(--space-3); }
code { font-family: ui-monospace, Menlo, monospace; font-size: 1em; padding: 0 var(--space-1); background: var(--surface-2); border-radius: var(--radius-sm, 4px); overflow-wrap: anywhere; }

@media (min-width: 768px) {
  .acc-top { padding-inline: var(--space-6); }
  .acc-top::after { inset-inline: var(--space-6); }
  .acc-mark { font-size: var(--text-2xl); }
  .acc-main { padding: var(--space-8) var(--space-6); }
  .acc-title { font-size: var(--text-3xl); }
  .acc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .acc-wide { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .acc-wide:has(.acc-add) { grid-template-columns: minmax(20rem, 2fr) minmax(0, 3fr); align-items: start; column-gap: var(--space-7); }
  .acc-wide:has(.acc-add) > :not(.acc-add):not(section) { grid-column: 1 / -1; }
  .acc-add { position: sticky; inset-block-start: var(--space-5); }
  .acc-tiles { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .acc-top::after { animation: none; }
  .acc-tile::after { transition: none; }
}

/* The sign-in's own pages on the brand motif (William, 25 October 2026; the Design Lab's sign-in page):
   Labyrinth 4's still start frame, in bone and orange, fills the screen, and every screen shows the
   same part of it whole (a square of 900 motif px around its centre, so the shapes scale with the
   screen's shorter side); the box stands on it in the middle, bone, with the name on top, and its
   button graphite, the scheme's dark. The frame is the Lab's own (apps/lab/src/frame-brand.js, start
   frame, no clearing), traced once to a vector: img/labyrinth-4-open.svg, 3600 x 3000 motif px around
   the centre. Only the look changes: the same form, the same words, the same addresses. */
.acc-motif { display: grid; place-items: center; padding: var(--space-6) var(--space-4); background: var(--bg); }
.acc-ground {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--bg) url(/account/img/labyrinth-4-open.svg) 50% 50% / calc(min(100vw, 100dvh) * 4) auto no-repeat;
}
/* The card floats well above the motif (William, 26 October 2026: "as if 3d floating higher than the
   motif"): layered soft shadows in a warm graphite, a tight one at the card and wide ones falling far onto
   the motif below it, a faint light edge along its top and a hairline round it; the card itself stays bone. */
.acc-card {
  --lift: 72 40 16;
  position: relative; z-index: 1; inline-size: min(100%, 26rem);
  border-radius: var(--radius-lg); background: var(--bg); color: var(--text);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.8),
    0 0 0 1px rgb(var(--lift) / 0.07),
    0 1px 2px rgb(var(--lift) / 0.10),
    0 4px 10px -2px rgb(var(--lift) / 0.12),
    0 18px 36px -10px rgb(var(--lift) / 0.24),
    0 44px 80px -18px rgb(var(--lift) / 0.24),
    0 90px 140px -40px rgb(var(--lift) / 0.20);
}
@media (max-width: 479.98px) {
  .acc-card {
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 0.8),
      0 0 0 1px rgb(var(--lift) / 0.07),
      0 1px 2px rgb(var(--lift) / 0.10),
      0 3px 8px -2px rgb(var(--lift) / 0.12),
      0 14px 28px -8px rgb(var(--lift) / 0.24),
      0 32px 56px -14px rgb(var(--lift) / 0.24),
      0 60px 96px -30px rgb(var(--lift) / 0.18);
  }
}
.acc-motif .acc-top { padding: var(--space-5) var(--space-6) 0; }
.acc-motif .acc-top::after { inset: auto var(--space-6) calc(var(--space-3) * -1); }
.acc-motif .acc-main { flex: none; max-inline-size: none; padding: var(--space-6); gap: var(--space-4); }
.acc-motif .acc-input { background: color-mix(in srgb, #fff 55%, var(--bg)); }
.acc-motif .acc-submit { border-color: var(--text); background: var(--text); color: var(--bg); }
.acc-motif .acc-submit:hover { border-color: color-mix(in srgb, var(--text) 85%, var(--bg)); background: color-mix(in srgb, var(--text) 85%, var(--bg)); }
.acc-motif .acc-submit[aria-disabled="true"] { background: var(--surface-2); border-color: var(--line); color: var(--text-muted); }
@media (max-width: 359.98px) {
  .acc-motif { padding-inline: var(--space-3); }
  .acc-motif .acc-top { padding-inline: var(--space-5); }
  .acc-motif .acc-main { padding: var(--space-5); }
}