/* ==========================================================================
   Foundations: Tokens, Reset, Page Bases
   ========================================================================== */

:root {
  --primary-container: #ff5f1f;
  --surface-variant: #f9dcd4;
  --surface-tint: #ab3600;
  --surface-container: #ffe9e3;
  --surface-container-lowest: #fff;
  --on-surface: #271813;
  --on-surface-variant: #5b4138;
  --outline-variant: #e3bfb3;
  --brutal-shadow: #3a3a3a;
  --brutal-shadow-soft: rgba(58, 58, 58, 0.62);
  --window-shadow: rgba(0, 0, 0, 0.7);
  --window-shadow-soft: rgba(0, 0, 0, 0.5);
  --border-width: 4px;
  --border-width-sm: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-gutter: 16px;
  --font-body-sm: 14px;
  --font-label-mono: 12px;
  --font-headline-xl: 40px;
  --top-bar-height: 48px;
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M3 2l15 9-7 2-3 7z'/%3E%3Cpath fill='%23ff5f1f' d='M9 13l2 5-3 2z'/%3E%3C/svg%3E") 3 2, auto;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff5f1f' stroke='%23000' stroke-width='2' d='M5 2h7v7h5v6h-5v7H5v-7H0V9h5z'/%3E%3C/svg%3E") 12 12, pointer;
  --cursor-move: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M7 11V7h4v4h1V5h4v6h1V7h4v8l-3 7H9l-4-6v-5z'/%3E%3Cpath fill='%23ff5f1f' stroke='%23000' stroke-width='2' d='M8 11h13v5H8z'/%3E%3C/svg%3E") 14 14, move;
  --cursor-resize-ew: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='20' viewBox='0 0 28 20'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M2 10l6-6v4h12V4l6 6-6 6v-4H8v4z'/%3E%3C/svg%3E") 14 10, ew-resize;
  --cursor-resize-ns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='28' viewBox='0 0 20 28'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M10 2l6 6h-4v12h4l-6 6-6-6h4V8H4z'/%3E%3C/svg%3E") 10 14, ns-resize;
  --cursor-resize-nwse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M4 4h9L9 8l11 11 4-4v9h-9l4-4L8 9l-4 4z'/%3E%3C/svg%3E") 14 14, nwse-resize;
  --cursor-resize-nesw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' stroke='%23000' stroke-width='2' d='M24 4v9l-4-4L9 20l4 4H4v-9l4 4L19 8l-4-4z'/%3E%3C/svg%3E") 14 14, nesw-resize;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Space Grotesk", sans-serif;
  line-height: 1.5;
  color: var(--on-surface);
  background: var(--surface-variant);
  min-height: 100vh;
  cursor: var(--cursor-default);
}

body.login-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: 100vh;
  overflow-y: auto;
  padding: calc(var(--spacing-gutter) + 8px) calc(var(--spacing-gutter) + 8px) 72px;
}

body.login-page .window {
  max-height: calc(100vh - 144px);
  margin-top: clamp(24px, 8vh, 80px);
  margin-bottom: 72px;
}

body.main-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

body.main-page::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
  z-index: 900;
}

body.main-page.focus-mode::before {
  opacity: 1;
  pointer-events: auto;
}

/* ==========================================================================
   Page: Sign In
   ========================================================================== */

/* Login-specific styles */
.window {
  width: 100%;
  max-width: 448px;
  background-color: white;
  border: var(--border-width) solid black;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 8px 8px 0 0 #000;
}

.window-header {
  background-color: black;
  color: white;
  height: var(--top-bar-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-md);
  border-bottom: var(--border-width) solid black;
  flex-shrink: 0;
}

.header-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.header-title .material-symbols-outlined {
  font-size: 18px;
}

.header-title span:last-child {
  font-size: var(--font-label-mono);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.content-area {
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  background-image: url(https://placeholder.pics/svg/300);
  background-size: cover;
  background-position: center;
  overflow: auto;
}

.inner-content {
  background-color: rgba(255, 255, 255, 0.9);
  padding: var(--spacing-lg);
  border: var(--border-width-sm) solid black;
  backdrop-filter: blur(4px);
}

.branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xl);
}

.logo {
  background-color: black;
  color: white;
  padding: 4px 12px;
  font-size: var(--font-headline-xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  border: var(--border-width) solid black;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
}

.subtitle {
  font-size: var(--font-body-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--on-surface-variant);
  text-align: center;
  margin-top: var(--spacing-sm);
}

.form-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  width: 100%;
}

.form-container [hidden] {
  display: none !important;
}

.form-container[data-auth-form="signup"] {
  gap: var(--spacing-sm);
}

.form-container[data-auth-form="signup"] .actions {
  margin-top: var(--spacing-sm);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.input-label {
  font-size: var(--font-label-mono);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-surface);
  display: flex;
  align-items: center;
  gap: 4px;
  text-transform: uppercase;
}

.input-label .material-symbols-outlined {
  font-size: 14px;
}

.input-label small {
  margin-left: auto;
  color: var(--on-surface-variant);
  font-size: 9px;
  font-weight: 700;
}

.input-field {
  height: 48px;
  border: var(--border-width-sm) solid black;
  background-color: var(--surface-container-lowest);
  font-size: var(--font-body-sm);
  font-weight: 500;
  font-family: "Space Grotesk", sans-serif;
  padding: 0 var(--spacing-md);
  color: var(--on-surface);
  width: 100%;
  box-shadow: inset 4px 4px 0 0 rgba(0, 0, 0, 1);
  outline: none;
  transition: border-color 0.2s;
}

.input-field::placeholder {
  color: var(--outline-variant);
}

.input-field:focus {
  border-color: var(--primary-container);
}

.recover-link-container {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
}

.recover-link {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  transition: color 0.2s;
}

.recover-link:hover {
  color: var(--primary-container);
}

.remember-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: 4px;
}

.checkbox-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
}

.checkbox-input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: var(--border-width-sm) solid black;
  background-color: white;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
}

.checkbox-input:checked {
  background-color: #ff6b00;
  box-shadow: 4px 4px 0 0 #ff6b00;
}

.checkbox-icon {
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  font-size: 20px;
  pointer-events: none;
  display: none;
}

.checkbox-input:checked ~ .checkbox-icon {
  display: block;
}

.remember-label {
  font-size: var(--font-body-sm);
  font-weight: 500;
  color: var(--on-surface);
  cursor: pointer;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.btn {
  height: 48px;
  width: 100%;
  border: var(--border-width-sm) solid black;
  font-size: var(--font-label-mono);
  font-weight: 700;
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 1);
  transition: background-color 0.2s, transform 0.1s, box-shadow 0.1s;
}

.btn:active {
  transform: translate(4px, 4px);
  box-shadow: none;
}

.btn-primary {
  background-color: var(--primary-container);
  color: white;
}

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

.btn-secondary {
  background-color: white;
  color: var(--on-surface);
}

.btn-secondary:hover {
  background-color: var(--surface-container);
}

.footer {
  margin-top: auto;
  border-top: var(--border-width-sm) solid black;
  padding-top: var(--spacing-sm);
  display: flex;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 8px;
}

.version-info {
  display: flex;
  align-items: center;
  gap: 4px;
}

.version-dot {
  width: 8px;
  height: 8px;
  background-color: black;
}

.version-text {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--on-surface-variant);
  text-transform: uppercase;
}