/* Application styles — GlassTrace Paper-on-Desk */

/* === Paper card (replaces .glass — white card with layered shadow) === */
.glass {
  background: #ffffff;
  border: 1px solid #e5e2dd;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.01),
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.02),
    0 16px 32px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s;
}

.glass:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.02),
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 8px 16px rgba(0, 0, 0, 0.03),
    0 16px 32px rgba(0, 0, 0, 0.05);
}

/* === Dark card (replaces .glass-dark) === */
.glass-dark {
  background: #1a1a1a;
  border: 1px solid #333333;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
  color: #f5f5f5;
}

/* === Header (replaces .glass-header — white bar with bottom border) === */
.glass-header {
  position: relative;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid #e5e2dd;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* === Footer (replaces .glass-footer — off-white with top border) === */
.glass-footer {
  background: #faf9f7;
  border-top: 1px solid #e5e2dd;
}

/* === Specular Highlight (disabled for paper look) === */
.specular {
  position: relative;
  overflow: hidden;
}
.specular::before {
  display: none;
}

/* === Nested card (replaces .glass-nested) === */
.glass-nested {
  background: #faf9f7;
  border: 1px solid #e5e2dd;
  border-radius: 6px;
}

/* === Table header (replaces .glass-thead) === */
.glass-thead {
  background: #faf9f7;
  border-bottom: 1px solid #e5e2dd;
}

/* === Input (replaces .glass-input) === */
.glass-input {
  display: block;
  width: 100%;
  background: #ffffff;
  border: 1px solid #d4d1cc;
  border-radius: 6px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
}
.glass-input:focus {
  background: #ffffff;
  border-color: #0064e6;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.05),
    0 0 0 3px rgba(0, 100, 230, 0.15);
  outline: none;
}
.glass-input::placeholder {
  color: #9ca3af;
}

/* === Button (replaces .glass-btn — clean pill) === */
.glass-btn {
  background: #ffffff;
  border: 1px solid #d4d1cc;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.15s;
}
.glass-btn:hover {
  background: #faf9f7;
  border-color: #c4c1bc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* === CTA Button (replaces .btn-teal — solid blue) === */
.btn-teal {
  background: #0064e6;
  color: white;
  border: 1px solid #0064e6;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  transition: all 0.15s;
}
.btn-teal:hover {
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* === Slab (replaces glass slab — paper card) === */
.slab {
  background: #ffffff;
  border: 1px solid #e5e2dd;
  border-radius: 6px;
  padding: 24px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.04);
}

/* === Card dark === */
.card-dark {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  padding: 24px;
  color: #f5f5f5;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === Pill (replaces glass pill — clean chip) === */
.pill {
  border-radius: 4px;
  border: 1px solid #e5e2dd;
  background: #faf9f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* === Code block === */
.code {
  background: #1a1a1a;
  border: 1px solid #333333;
  border-radius: 6px;
  font-family: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.6;
  color: #f5f5f5;
}

/* === Divider === */
.divider {
  height: 1px;
  background: #e5e2dd;
}

/* === Table row hover === */
.brand-table-row:hover {
  background-color: #faf9f7;
}

/* === Card hover depth (subtle lift) === */
.brand-card {
  transition: box-shadow 0.2s ease;
}
.brand-card:hover {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 16px 32px rgba(0, 0, 0, 0.05);
}

/* === Focus ring === */
.brand-input:focus {
  border-color: #0064e6;
  box-shadow: 0 0 0 3px rgba(0, 100, 230, 0.15);
  outline: none;
}

/* === Pulse animation for status indicators === */
@keyframes gentle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.status-pulse {
  animation: gentle-pulse 2s ease-in-out infinite;
}

/* === Meta label style === */
.meta-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* === Badge base === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === Badge variants === */
.badge-coral  { background: rgba(208,58,47,0.08); color: #d03a2f; }
.badge-red    { background: rgba(208,58,47,0.08); color: #d03a2f; }
.badge-orange { background: rgba(217,119,6,0.08); color: #d97706; }
.badge-yellow { background: rgba(217,119,6,0.08); color: #b45309; }
.badge-purple { background: rgba(124,58,237,0.08); color: #7c3aed; }
.badge-lime   { background: rgba(22,163,74,0.08); color: #16a34a; }
.badge-green  { background: rgba(22,163,74,0.08); color: #16a34a; }
.badge-slate  { background: rgba(107,114,128,0.08); color: #6b7280; }
.badge-gray   { background: rgba(107,114,128,0.08); color: #4b5563; }
.badge-blue   { background: rgba(0,100,230,0.08); color: #0064e6; }
.badge-teal   { background: rgba(0,100,230,0.08); color: #0064e6; }

/* === Nav link styling === */
.nav-link-active {
  color: #1a1a1a;
  border-bottom: 2px solid #0064e6;
}
.nav-link-default {
  color: #6b6b6b;
}
.nav-link-default:hover {
  color: #1a1a1a;
}

/* === Logo spin on hover === */
.logo-spin {
  transition: transform 0.7s ease-in-out;
}
.logo-spin:hover {
  transform: rotate(360deg);
}

/* ============================================================
   View Transitions — 37signals page stacking effect
   Uses native CSS View Transitions API (Chrome 111+, Safari 18+)
   Falls back to instant page swap in unsupported browsers.
   ============================================================ */

/* Header stays stable during transitions */
.glass-header {
  view-transition-name: header;
}

/* Main content animates */
main {
  view-transition-name: main-content;
}

/* Crossfade keyframes */
@keyframes fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Header stays put — no animation */
::view-transition-old(header),
::view-transition-new(header) {
  animation: none;
}

/* Main content: simple crossfade in both directions */
::view-transition-old(main-content) {
  animation: fade-out 0.15s ease-out both;
}
::view-transition-new(main-content) {
  animation: fade-in 0.15s ease-in both;
}

/* Reduced motion: instant transitions */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation-duration: 0.01s;
  }
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
  .glass-header,
  .glass-footer,
  dialog,
  [data-controller="command-center"],
  [data-controller="flash"] {
    display: none !important;
  }

  body {
    background: white !important;
  }

  main {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .glass,
  .slab {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
  }
}

/* ============================================================
   Responsive — Paper full-width below 640px
   ============================================================ */
@media (max-width: 639px) {
  main {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .glass-header > div {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}