/* Shared element defaults belong here. Keep page-specific rules elsewhere. */
:root {
  color: var(--color-text);
  background-color: var(--color-background);
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

html {
  text-decoration-skip-ink: auto;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  color: var(--color-text);
}

main {
  flex: 1 0 auto;
  width: 100%;
}

.app-shell__header,
.app-shell__main,
.app-shell__footer {
  width: 100%;
}

.app-shell__header,
.app-shell__footer {
  padding-block: var(--space-md);
}

.app-shell__main {
  padding-block: var(--space-lg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--space-sm);
  color: var(--color-text);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-7);
  letter-spacing: var(--font-letterspacing-0);
  line-height: var(--line-height-heading);
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-heading-1);
}

h2 {
  font-size: var(--font-size-heading-2);
}

h3 {
  font-size: var(--font-size-heading-3);
}

h4 {
  font-size: var(--font-size-heading-4);
}

h5 {
  font-size: var(--font-size-heading-5);
}

h6 {
  font-size: var(--font-size-heading-6);
}

p,
ul,
ol,
dl,
blockquote,
pre,
table,
figure {
  margin: 0 0 var(--space-md);
}

p,
li,
dd {
  max-width: var(--content-max-width);
}

small {
  font-size: var(--font-size-small);
}

hr {
  height: 0;
  margin-block: var(--space-xl);
  border: 0;
  border-top: var(--border-width) solid var(--color-rule);
}

a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  transition:
    color var(--motion-duration-fast) var(--motion-ease),
    text-decoration-thickness var(--motion-duration-fast) var(--motion-ease);
}

a:visited {
  color: var(--color-link-visited);
}

a:hover {
  text-decoration-thickness: 0.12em;
}

a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  text-decoration-thickness: 0.12em;
}

input,
select,
textarea,
button {
  font: inherit;
}

input,
select,
textarea {
  box-sizing: border-box;
  min-height: var(--control-min-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-soft);
  background-color: var(--color-surface);
  color: inherit;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  min-height: var(--control-min-height);
  padding: var(--control-padding-block) var(--control-padding-inline);
  border: none;
  border-radius: var(--radius-soft);
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
  cursor: pointer;
  font-weight: var(--font-weight-6);
  transition: background-color var(--motion-duration-default) var(--motion-ease);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover {
  background-color: #333333;
}

.btn-secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
  border: var(--border-width) solid var(--color-rule);
}

.btn-secondary:hover {
  background-color: color-mix(in srgb, var(--color-btn-secondary-bg) 85%, black);
}

.btn-running,
.btn-running:hover,
.btn-running:disabled {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: color-mix(in srgb, var(--color-btn-primary-bg) 88%, white);
  color: var(--color-btn-primary-text);
  cursor: not-allowed;
}

.button-spinner {
  width: 1em;
  height: 1em;
  border: 0.12em solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: button-spinner-spin 0.8s linear infinite;
}

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

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

::selection {
  background-color: color-mix(in srgb, var(--color-text) 15%, white);
}

/* Auth form layout */
body:has(.auth-form) .app-shell__header,
body:has(.auth-form) .app-shell__footer {
  padding-block: 0;
}

body:has(.auth-form) .app-shell__main {
  padding-block: 0;
}

body:has(.auth-form) .app-shell__main > .page-container {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-block-start: clamp(var(--space-xl), 8vh, var(--space-3xl));
  padding-block-end: var(--space-xl);
}

.auth-form {
  width: min(100%, 26rem);
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-3);
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.auth-form h1 {
  font-size: var(--font-size-heading-3);
  margin-block-end: var(--space-lg);
}

.auth-form .stack {
  --stack-space: var(--space-lg);
  margin-block-end: var(--space-lg);
}

.auth-form .stack > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.auth-form label {
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-6);
  color: var(--color-text-muted);
}

.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
}

.auth-form button[type="submit"],
.auth-form input[type="submit"] {
  width: 100%;
  margin-block-start: var(--space-lg);
}

.auth-form p {
  font-size: var(--font-size-small);
  color: var(--color-text-muted);
  text-align: center;
  margin-block-end: 0;
}

/* Flash messages */
.flash {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-soft);
  margin-block-end: var(--space-md);
}

.flash--alert {
  background-color: color-mix(in srgb, red 12%, white);
  color: #7a0000;
}

.flash--notice {
  background-color: color-mix(in srgb, green 12%, white);
  color: #004400;
}