/* ==========================================================================
   CHAOS — BOOK ONE: AAA COMPONENTS & SPACIOUS CONTAINER PADDING
   Buttons, Glass Panels, Controls
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Glass Panel (Solid RGB - Generous Internal Padding)
   -------------------------------------------------------------------------- */
.glass {
  background-color: var(--color-panel-glass);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px var(--color-shadow);
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
  box-sizing: border-box;
}

.glass:hover {
  border-color: var(--color-border-bright);
}

.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px 36px; /* Generous internal padding so text NEVER touches edges */
  box-sizing: border-box;
  overflow: hidden;
  word-break: break-word;
}

.card h1, .card h2, .card h3, .card h4 {
  margin-bottom: 14px;
}

.card p {
  line-height: 1.7;
  color: var(--color-text-main);
  margin-bottom: 14px;
}

.card p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Buttons & Thriller Controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform var(--transition-fast), background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background-color: var(--color-primary-red);
  color: var(--color-text-bright);
  border-color: var(--color-primary-red-hover);
  box-shadow: 0 4px 20px var(--color-shadow);
}

.btn-primary:hover {
  background-color: var(--color-primary-red-hover);
  border-color: var(--color-accent-cyan-bright);
  box-shadow: 0 0 20px var(--color-primary-red);
}

.btn-secondary {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-bright);
  border-color: var(--color-border-cyan);
}

.btn-secondary:hover {
  background-color: var(--color-accent-cyan-dark);
  border-color: var(--color-accent-cyan-bright);
  box-shadow: 0 0 20px var(--color-accent-cyan);
}

.btn-outline {
  background-color: var(--color-bg-surface);
  color: var(--color-text-main);
  border-color: var(--color-border-subtle);
}

.btn-outline:hover {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border-bright);
  color: var(--color-text-bright);
}

.btn-lg {
  padding: 18px 36px;
  font-size: 1.1rem;
}

.btn-sm {
  padding: 10px 18px;
  font-size: 0.85rem;
}

.protocol-mode-toggle,
.rain-toggle,
.effects-toggle {
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  color: var(--color-text-bright);
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  transition: all var(--transition-fast);
}

.protocol-mode-toggle:hover,
.rain-toggle:hover,
.effects-toggle:hover {
  border-color: var(--color-accent-cyan-bright);
  color: var(--color-accent-cyan-bright);
}

.protocol-mode-toggle[aria-pressed="true"],
.rain-toggle[aria-pressed="true"],
.effects-toggle[aria-pressed="true"] {
  border-color: var(--color-border-cyan);
}

.rain-toggle:disabled {
  cursor: not-allowed;
  color: var(--color-text-dark);
  border-color: var(--color-border-subtle);
}

/* --------------------------------------------------------------------------
   5. Form Controls
   -------------------------------------------------------------------------- */
.form-input {
  width: 100%;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  color: var(--color-text-bright);
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-sizing: border-box;
  transition: border-color var(--transition-fast);
}

.form-input:focus {
  outline: none;
  border-color: var(--color-accent-cyan-bright);
}

.form-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  cursor: pointer;
  margin-top: 10px;
}

.form-checkbox-label input[type="checkbox"] {
  accent-color: var(--color-primary-red);
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.alert-box {
  padding: 16px 20px;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.alert-box.hidden { display: none; }
.alert-success { background-color: var(--color-bg-surface); border-color: var(--color-success); color: var(--color-text-bright); }
.alert-error { background-color: var(--color-bg-surface); border-color: var(--color-error); color: var(--color-text-bright); }
.alert-warning { background-color: var(--color-bg-surface); border-color: var(--color-warning); color: var(--color-text-bright); }

/* 3D Tilt Card Base */
.card, .threat-card, .cover-wrapper {
  transition: transform 0.15s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;
  transform-style: preserve-3d;
}

/* ==========================================================================
   COMING SOON — DISABLED CONTROLS
   The reader list is not open yet. Its links and form controls stay visible
   so the site reads complete, but are greyed out, removed from the tab
   order, and announced as disabled. Restore by deleting the `is-disabled`
   class from the markup and re-enabling the form in js/newsletter.js.
   ========================================================================== */

.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;      /* keep the tooltip reachable on hover */
  text-decoration: none;
  filter: grayscale(0.7);
}

/* Neutralise hover/active affordances on disabled controls. */
.is-disabled:hover,
.is-disabled:focus {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border-subtle);
  color: inherit;
}

/* Tooltip. Uses the element's own title-free data attribute so the browser's
   native tooltip does not double up with this one. */
.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-bright);
  background-color: rgb(18, 22, 34);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm, 4px);
  padding: 6px 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
  z-index: 60;
}

.has-tooltip:hover::after,
.has-tooltip:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Tooltips on the fixed header would be clipped upward; show them below. */
.site-header .has-tooltip::after,
.mobile-drawer .has-tooltip::after {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

.site-header .has-tooltip:hover::after,
.mobile-drawer .has-tooltip:hover::after {
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .has-tooltip::after { transition: none; }
}