/* ═══════════════════════════════════════════════════════════════════════════
   glass.css — Liquid Glass Component Library
   Kmisetas · Apple-inspired dark glass design system
   ═══════════════════════════════════════════════════════════════════════════

   4-layer anatomy of every glass surface:
     Layer 1 — backdrop-filter  (blur + saturation boost)
     Layer 2 — specular sheen   (--glass-gradient, top-left highlight)
     Layer 3 — tint / fog       (--glass-tint darkens behind content)
     Layer 4 — border + shadow  (edge highlight + depth shadow)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Base Glass Panel ───────────────────────────────────────────────────── */
.glass {
  /* Layer 1 – blur & color-pop */
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));

  /* Layer 2 + 3 – specular gradient over tint */
  background:
    var(--glass-gradient),
    var(--glass-tint);

  /* Layer 4a – crisp border highlight */
  border: var(--glass-border);

  /* Layer 4b – depth shadow with inner top-edge glow */
  box-shadow: var(--glass-shadow);

  /* Shape */
  border-radius: var(--radius-window);

  /* Ensure text reads cleanly */
  color: var(--text-primary);
  position: relative;
}

/* ── 2. Clear / Lighter Glass ──────────────────────────────────────────────── */
.glass-clear {
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));

  background:
    var(--glass-gradient),
    var(--glass-tint-clear);

  border: var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-window);
  color: var(--text-primary);
  position: relative;
}

/* ── 3. Inset / Sunken Field ───────────────────────────────────────────────── */
.glass-inset {
  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);

  background: rgba(0, 0, 0, 0.18);

  border: var(--glass-border-subtle);

  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.30),
    inset 0 1px 2px rgba(0, 0, 0, 0.20);

  border-radius: var(--radius-field);
  color: var(--text-primary);
}

/* ── 4. Glass Card (panel with elevated shadow) ────────────────────────────── */
.glass-card {
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));

  background:
    var(--glass-gradient),
    var(--glass-tint);

  border: var(--glass-border);
  box-shadow: var(--glass-shadow-elevated);
  border-radius: var(--radius-card);
  overflow: hidden;
  color: var(--text-primary);
  position: relative;
}

/* ── 5. Glass Button (base) ────────────────────────────────────────────────── */
.btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  /* Glass material */
  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));

  background:
    var(--glass-gradient),
    var(--glass-tint-clear);

  border: var(--glass-border);
  box-shadow: var(--glass-shadow);

  /* Shape — pill */
  border-radius: var(--radius-pill);
  min-height: var(--tap-target);
  padding: 0 20px;

  /* Type */
  font-family: var(--font-system);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;

  /* Interaction */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;

  /* Motion */
  transition:
    transform     var(--spring-duration) var(--spring),
    filter        var(--spring-duration) var(--spring),
    border-color  var(--spring-duration) var(--spring),
    box-shadow    var(--spring-duration) var(--spring);
}

.btn-glass:hover {
  filter: brightness(1.15);
  transform: scale(1.02);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: var(--glass-shadow-elevated);
}

.btn-glass:active {
  filter: brightness(0.90);
  transform: scale(0.97);
  box-shadow: var(--glass-shadow);
  transition-duration: 0.08s;
}

.btn-glass:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 3px;
}

/* ── 6. Prominent / CTA Button ─────────────────────────────────────────────── */
.btn-prominent {
  /* Inherits all btn-glass properties — add after .btn-glass in markup */
  background:
    linear-gradient(
      135deg,
      rgba(var(--accent-blue-rgb), 0.75) 0%,
      rgba(var(--accent-blue-rgb), 0.45) 100%
    );

  border: 1px solid rgba(var(--accent-blue-rgb), 0.70);

  box-shadow:
    0 8px 24px rgba(var(--accent-blue-rgb), 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.50);

  color: #ffffff;
  font-weight: 600;
}

.btn-prominent:hover {
  filter: brightness(1.12);
  box-shadow:
    0 12px 32px rgba(var(--accent-blue-rgb), 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
  border-color: rgba(var(--accent-blue-rgb), 0.90);
}

/* ── 7. Floating Navigation Capsule ────────────────────────────────────────── */
.nav-capsule {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-nav);

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  height: 52px;

  /* Glass material */
  -webkit-backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-panel)) saturate(var(--glass-saturation));

  background:
    var(--glass-gradient),
    var(--glass-tint);

  border: var(--glass-border);
  box-shadow: var(--glass-shadow-elevated);
  border-radius: var(--radius-pill);

  /* Prevent text selection on nav */
  user-select: none;
  -webkit-user-select: none;
}

/* Brand mark inside capsule */
.nav-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* Thin vertical divider */
.nav-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.20);
  flex-shrink: 0;
}

/* ── 8. Navigation Links ───────────────────────────────────────────────────── */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;

  font-family: var(--font-system);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;

  transition:
    background-color var(--spring-duration) var(--spring),
    color            var(--spring-duration) var(--spring),
    border-color     var(--spring-duration) var(--spring);
}

.nav-link:hover,
.nav-link.active {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--text-primary);
  border-color: rgba(255, 255, 255, 0.20);
}

.nav-link:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ── 9. Glass Toggle / Switch ──────────────────────────────────────────────── */
.glass-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 51px;
  height: 31px;
  cursor: pointer;
  flex-shrink: 0;
}

.glass-toggle input[type="checkbox"] {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.glass-toggle-track {
  width: 51px;
  height: 31px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: var(--glass-border-subtle);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition:
    background var(--spring-duration) var(--spring),
    border-color var(--spring-duration) var(--spring);
  position: relative;
}

.glass-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform var(--spring-duration) var(--spring);
}

.glass-toggle input:checked ~ .glass-toggle-track {
  background: rgba(var(--accent-blue-rgb), 0.60);
  border-color: rgba(var(--accent-blue-rgb), 0.50);
}

.glass-toggle input:checked ~ .glass-toggle-track .glass-toggle-thumb {
  transform: translateX(20px);
}

.glass-toggle input:focus-visible ~ .glass-toggle-track {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

/* ── 10. Segmented Picker ──────────────────────────────────────────────────── */
.glass-picker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--radius-pill);

  -webkit-backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));
          backdrop-filter: blur(var(--glass-blur-control)) saturate(var(--glass-saturation));

  background:
    var(--glass-gradient),
    var(--glass-tint);

  border: var(--glass-border-subtle);
  box-shadow: var(--glass-shadow);
}

.glass-picker-option {
  position: relative;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;

  font-family: var(--font-system);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;

  transition:
    background-color var(--spring-duration) var(--spring),
    color            var(--spring-duration) var(--spring),
    border-color     var(--spring-duration) var(--spring),
    box-shadow       var(--spring-duration) var(--spring);
}

.glass-picker-option:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.10);
}

.glass-picker-option.active,
.glass-picker-option[aria-selected="true"] {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.20);
  color: var(--text-primary);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.40);
}

/* ── 11. Glass Input Field ─────────────────────────────────────────────────── */
.glass-input {
  width: 100%;
  min-height: var(--tap-target);
  padding: 10px 14px;
  box-sizing: border-box;

  -webkit-backdrop-filter: blur(8px) saturate(140%);
          backdrop-filter: blur(8px) saturate(140%);

  background: rgba(0, 0, 0, 0.18);
  border: var(--glass-border-subtle);
  border-radius: var(--radius-field);

  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(0, 0, 0, 0.15);

  font-family: var(--font-system);
  font-size: var(--text-base);
  color: var(--text-primary);
  caret-color: var(--accent-blue);

  outline: none;
  transition:
    border-color var(--spring-duration) var(--spring),
    box-shadow   var(--spring-duration) var(--spring);
}

.glass-input::placeholder {
  color: var(--text-tertiary);
}

.glass-input:focus {
  border-color: rgba(var(--accent-blue-rgb), 0.60);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.20),
    0 0 0 3px rgba(var(--accent-blue-rgb), 0.18);
}

/* ── 12. Glass Select ──────────────────────────────────────────────────────── */
.glass-select {
  /* Inherits glass-input styles, add chevron */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.glass-select option {
  background: #1a1a2e;
  color: var(--text-primary);
}

/* ── 13. Badge / Tag ───────────────────────────────────────────────────────── */
.glass-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: var(--glass-border-subtle);

  font-family: var(--font-system);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);

  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.glass-badge.badge-blue    { background: rgba(var(--accent-blue-rgb), 0.20);    color: rgba(var(--accent-blue-rgb), 1); border-color: rgba(var(--accent-blue-rgb), 0.35); }
.glass-badge.badge-amber   { background: rgba(var(--accent-amber-rgb), 0.20);   color: rgba(var(--accent-amber-rgb), 1); border-color: rgba(var(--accent-amber-rgb), 0.35); }
.glass-badge.badge-magenta { background: rgba(var(--accent-magenta-rgb), 0.20); color: rgba(var(--accent-magenta-rgb), 1); border-color: rgba(var(--accent-magenta-rgb), 0.35); }
.glass-badge.badge-cyan    { background: rgba(var(--accent-cyan-rgb), 0.20);    color: rgba(var(--accent-cyan-rgb), 1); border-color: rgba(var(--accent-cyan-rgb), 0.35); }