/*
 * 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. Nothing sets them, so update these when a
     header's padding or contents change. The landing header measures 76px on
     desktop and less on phones. */
  --app-header-height: 65px;
  --landing-header-height: 76px;
}

/* === 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;
}

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);
}

/* 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-dfbff9e2.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 1.5rem;
}

/* === 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); }
}