/*
 * Roll Call - Application Styles
 */

/* === Reset & Base === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg: #151720;
  --color-surface: #1a1d27;
  --color-surface-raised: #1e2232;
  --color-surface-hover: #242836;
  --color-border: #2e3347;
  --color-text: #e4e4e7;
  --color-text-muted: #9ca3af;
  --color-primary: #7c3aed;
  --color-primary-rgb: 124, 58, 237;
  --color-primary-hover: #6d28d9;
  --color-accent: #a78bfa;
  --color-danger:  #ef4444;
  --color-amber:   #f59e0b;
  --color-success: #4EEAC2;
  --color-auto:    var(--color-success);
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  /* Rendered heights of the headers pinned to the top of the page, which the
     scroll offset below clears. --app-header-height is a first-paint default:
     app_header_controller sets it to the header's measured height, so large
     text or a changed header cannot leave it stale. The landing header has no
     controller, so update --landing-header-height when its padding or contents
     change; it measures 76px on desktop and less on phones. A trial account's
     header is taller on phones; ui.css overrides --app-header-height there
     (the .trial-cta rules). */
  --app-header-height: 65px;
  --landing-header-height: 76px;
  /* Phone spacing. The page gutter (.container) and a card's padding read
     these, so a phone tightens them in one place (the 480px block below), for
     a card that is already on the token: a new 24/28px card reads it rather
     than repeating 1.5rem, but the Design Lead's 2026-10-18 audit named only
     the top-level page cards and their own nested cards, and this spec did
     not convert the modal/dialog content boxes (*-dialog__content), which
     stay as they were. --card-pad-roomy is the 28px card (wizard step, tool
     card, sign-up call to action); --card-pad-nested is a card inside a
     card. */
  --space-page-x: 1.5rem;
  --card-pad: 1.5rem;
  --card-pad-roomy: 1.75rem;
  --card-pad-nested: 1rem;
}

@media (max-width: 480px) {
  :root {
    --space-page-x: 1rem;
    --card-pad: 1rem;
    --card-pad-roomy: 1rem;
    --card-pad-nested: 0.75rem;
  }
}

/* === Web Fonts (self-hosted) === */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk-400-b217bce7.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk-500-4b7aea1d.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk-600-ab3ffa9f.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/space-grotesk-700-36c6c9a5.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-400-1e94a563.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-500-5949f5fc.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-600-a957bd0d.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/inter-700-cbc762c0.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* The guides' Sourcebook look: Fraunces for display, Literata for reading.
   Latin subsets of single instances (Fraunces at 72pt optical size, fully
   soft; Literata at 18pt), 104 KB in all. SIL Open Font License 1.1: see
   fraunces-OFL.txt and literata-OFL.txt beside the files. */
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fraunces-600-0b4598e3.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fraunces-400-italic-f0e40f0f.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/literata-400-14d8f958.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/literata-600-4ca65d1f.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("/assets/literata-400-italic-27e59efe.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

/* .app-header is sticky and .landing-header fixed, so whatever the browser
   scrolls into view (a wizard step change, a focused or invalid field, a
   #fragment) would stop with its top behind the header. */
html:has(.app-header) {
  scroll-padding-top: calc(var(--app-header-height) + 1rem);
}

/* A header that has scrolled away (.app-header--static) is not in the way. */
html:has(.app-header--static) {
  scroll-padding-top: 1rem;
}

/* Being fixed rather than sticky, .landing-header is out of flow and overlays
   the top of the document, so whatever the layout draws up there has to be
   pushed clear of it or it is not read at all: that is the same swallowed
   message as a view with no flash block, in a different form. A page that
   introduces another fixed header sets this beside its own height, and
   everything drawn at the top of the document follows. */
html:has(.landing-header) {
  --fixed-header-clearance: calc(var(--landing-header-height) + 1rem);
  scroll-padding-top: var(--fixed-header-clearance);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

.dice-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  contain: strict;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.7) 85%, rgba(0,0,0,1) 100%);
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.25) 40%, rgba(0,0,0,0.4) 65%, rgba(0,0,0,0.7) 85%, rgba(0,0,0,1) 100%);
}

.dice-bg::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-size: 425px 300px;
  opacity: 0;
  transform: rotate(-12deg);
  transition: opacity 0.3s ease;
}

.dice-bg--loaded::before {
  background-image: url("/assets/dice-pattern-d08514d2.webp");
  opacity: 0.06;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* === Accessibility === */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: 1rem;
}

/* Global focus-visible ring for interactive elements */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Dialog close buttons: suppress outline (programmatic focus from showModal triggers focus-visible) */
dialog [class$="__close"]:focus,
dialog [class$="__close"]:focus-visible {
  outline: none;
}

/* Disabled buttons should never show a focus ring */
button:disabled:focus,
button:disabled:focus-visible,
.btn:disabled:focus,
.btn:disabled:focus-visible {
  outline: none;
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reset fieldset styling when used as a form group */
.form-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

/* === Layout === */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-page-x);
}

/* === Logo === */
.logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo:hover {
  text-decoration: none;
}

.logo-img {
  height: 40px;
  width: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.logo:hover .logo-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.logo-img--login {
  height: 72px;
  margin-bottom: 0.25rem;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  font-family: inherit;
  line-height: 1.4;
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.btn-primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn-outline {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-outline:hover {
  background: var(--color-surface);
  border-color: var(--color-text-muted);
}

.btn-outline-warning {
  background: transparent;
  color: var(--color-amber);
  border-color: var(--color-amber);
}

.btn-outline-warning:hover {
  background: color-mix(in srgb, var(--color-amber) 12%, transparent);
  border-color: var(--color-amber);
}

.btn-amber {
  background: var(--color-amber);
  color: #1a1a1a;
  border-color: var(--color-amber);
  font-weight: 600;
}

.btn-amber:hover {
  background: color-mix(in srgb, var(--color-amber) 85%, #000);
  border-color: color-mix(in srgb, var(--color-amber) 85%, #000);
}

.btn-lg {
  padding: 0.875rem 2rem;
  font-size: 1.125rem;
  border-radius: var(--radius-lg);
}

.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
}

.btn-xs {
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  line-height: 1.4;
}

.btn-disabled,
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-spinner {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  vertical-align: -0.1em;
  margin-right: 0.2em;
}

/* Icon-only buttons show just the spinner, so drop the label gap and let it
   sit centered in the button rather than nudged left. */
.btn-spinner--bare {
  margin-right: 0;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}