/* ============================================================
   Support Authorization — "engineered" editorial re-skin.
   Re-skins the .support-* / .tos-* components to match the rest of
   the redesign (studio.css). Class names, IDs and the --support-*
   variable NAMES are preserved verbatim — support-app.js depends on
   them (it reads var(--support-success) etc. at runtime and toggles
   these classes). This file only changes appearance.

   Loaded AFTER support-styles.css, so equal-specificity rules win by
   order. Colours key off the studio.css --studio-* tokens, so light
   and dark ("engineered night") modes follow the rest of the site
   with almost no mode-specific rules.
   ============================================================ */

/* ---- 1. Re-point the component's own design tokens -------------
   support-styles.css themes everything through these custom
   properties; redefining them on the page flips the palette, flattens
   the corners and removes the soft shadows in one move. Resolved
   per-element, so they track dark mode automatically. ------------- */
body.site-cool {
  --support-primary: var(--studio-ink);
  --support-secondary: var(--studio-soft);
  --support-accent: var(--studio-accent);
  --support-gray: var(--studio-soft);
  --support-light: var(--studio-bg);
  --support-light-gray: var(--studio-border);
  --support-info: var(--studio-accent);
  --support-border-radius: 2px;
  --support-shadow: none;
  --support-shadow-hover: none;
  /* success / error keep their semantic hue, retuned off the indigo */
  --support-success: #3f7d5a;
  --support-error: #b3503e;
}

/* ---- 2. Section: drop the indigo gradient, left-align ----------- */
.site-cool .support-authorization {
  background: transparent;
  padding: clamp(7rem, 10vh, 9rem) 0 clamp(3rem, 8vh, 6rem);
}
.site-cool .support-auth-header {
  text-align: left;
  max-width: 46rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
}
/* let .studio-display govern the H1 (the old rule pinned size + colour) */
.site-cool .support-auth-header h1 {
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  color: var(--studio-ink);
  margin: 0 0 1rem;
}
.site-cool .support-intro {
  margin: 0;
  max-width: 60ch;
  color: var(--studio-soft);
  font-size: 1.05rem;
}

/* constrain the document column so it reads as a form, not a full-bleed slab */
.site-cool .support-terms-info,
.site-cool .support-form,
.site-cool .support-security-notice { max-width: 46rem; }

/* ---- 3. Rate / date block: a hairline "spec panel" ------------- */
.site-cool .support-terms-info {
  background: var(--studio-bg-2);
  border: 1px solid var(--studio-border);
  border-radius: 2px;
  box-shadow: none;
  padding: 0;            /* the cells carry their own padding + rules */
  margin-bottom: 1.5rem;
}
.site-cool .support-terms-info:hover { box-shadow: none; }
.site-cool .support-info-grid {
  gap: 0;
  grid-template-columns: 1fr 1fr;
  /* hairline gutter between the two readouts (and a top edge on wrap) */
  border-left: 1px solid var(--studio-border);
}
.site-cool .support-info-card {
  background: transparent;
  border-right: 1px solid var(--studio-border);
  border-radius: 0;
  gap: 0.85rem;
  padding: 1.5rem 1.5rem;
  align-items: center;
}
.site-cool .support-info-card:hover { transform: none; }
/* de-emphasise the filled circle into a quiet accent glyph */
.site-cool .support-info-icon {
  width: auto; height: auto;
  background: none;
  color: var(--studio-accent);
  font-size: 1.05rem;
  border-radius: 0;
}
.site-cool .support-info-label {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  color: var(--studio-soft);
  margin-bottom: 0.3rem;
}
/* the value reads like an instrument readout */
.site-cool .support-info-value {
  font-family: var(--din);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--studio-ink);
}
@media (max-width: 520px) {
  .site-cool .support-info-grid { grid-template-columns: 1fr; }
  .site-cool .support-info-card:last-child { border-bottom: 0; }
  .site-cool .support-info-card { border-bottom: 1px solid var(--studio-border); }
}

/* ---- 4. Form panel + fields ----------------------------------- */
.site-cool .support-form {
  background: var(--studio-bg-2);
  border: 1px solid var(--studio-border);
  border-radius: 2px;
  box-shadow: none;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.site-cool .support-label,
.site-cool .support-info-label {
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--studio-ink);
}
.site-cool .support-optional { color: var(--studio-soft); text-transform: none; letter-spacing: 0; }
.site-cool .support-field-help { color: var(--studio-soft); }

.site-cool .support-input,
.site-cool .support-signature-input {
  background: #fff;
  border: 1px solid var(--studio-border);
  border-radius: 2px;
  color: var(--studio-ink);
}
.site-cool .support-input:hover:not(:focus) { border-color: var(--studio-soft); }
.site-cool .support-input:focus {
  border-color: var(--studio-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--studio-accent) 22%, transparent);
  outline: none;
}
.site-cool .support-signature-input {
  font-family: var(--studio-serif);
  font-style: italic;
  font-size: 1.2rem;
}
/* checkbox + ToS link: brand accent, no glow gimmick */
.site-cool .support-checkbox { accent-color: var(--studio-accent); }
.site-cool .support-checkbox-text { color: var(--studio-ink); }
.site-cool .support-link {
  color: var(--studio-accent);
  font-weight: 400;
  text-underline-offset: 3px;
}
.site-cool .support-link:hover { color: var(--studio-ink); transform: none; }
.site-cool .support-checkbox-group:first-of-type .support-link { animation: none; }

/* ---- 5. Submit button: flat ink → accent (fixes dark-mode text) - */
.site-cool .support-submit-btn,
.site-cool .tos-accept-btn {
  background: var(--studio-ink);
  color: var(--studio-bg);          /* inverts correctly in dark mode */
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--din);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
}
.site-cool .support-submit-btn:not(:disabled):hover,
.site-cool .tos-accept-btn:not(:disabled):hover {
  background: var(--studio-accent);
  color: #fff;
  transform: none;
  box-shadow: none;
}
.site-cool .support-submit-btn:disabled {
  background: var(--studio-soft);
  opacity: 0.5;
}
.site-cool .support-submit-status { color: var(--studio-soft); }

/* ---- 6. Security notice + messages ----------------------------- */
.site-cool .support-security-notice {
  background: var(--studio-bg-2);
  border: 1px solid var(--studio-border);
  border-left: 3px solid var(--studio-accent);
  border-radius: 2px;
}
.site-cool .support-security-notice i { color: var(--studio-accent); }
.site-cool .support-security-notice p { color: var(--studio-soft); }
.site-cool .support-message { box-shadow: none; border-radius: 2px; }

/* ---- 7. Terms modal ------------------------------------------- */
.site-cool .tos-modal-content {
  background: var(--studio-bg);
  border: 1px solid var(--studio-border);
  border-radius: 4px;
  box-shadow: 0 30px 80px -30px rgba(8, 10, 14, 0.6);
}
.site-cool .tos-modal-header,
.site-cool .tos-modal-footer { border-color: var(--studio-border); }
.site-cool .tos-modal-footer { background: var(--studio-bg-2); }
.site-cool .tos-modal-header h2 {
  font-family: var(--studio-serif);
  font-weight: 400;
  color: var(--studio-ink);
}
.site-cool .tos-modal-close { color: var(--studio-soft); }
.site-cool .tos-modal-close:hover { color: var(--studio-ink); }
.site-cool .tos-scroll-indicator { color: var(--studio-accent); }
.site-cool .tos-cancel-btn {
  background: transparent;
  border: 1px solid var(--studio-border);
  color: var(--studio-soft);
  border-radius: 2px;
}
.site-cool .tos-cancel-btn:hover { background: var(--studio-bg-2); color: var(--studio-ink); }
.site-cool .tos-accept-btn:not(:disabled):hover { box-shadow: none; }
.site-cool .tos-accept-btn:disabled { background: var(--studio-soft); opacity: 0.5; }
/* modal markdown headings on-brand */
.site-cool .tos-content h1,
.site-cool .tos-content h2,
.site-cool .tos-content h3 { color: var(--studio-ink); }
.site-cool .tos-content h1 { font-family: var(--studio-serif); font-weight: 400; border-bottom-color: var(--studio-border); }
.site-cool .tos-content p,
.site-cool .tos-content li { color: var(--studio-soft); }

/* ---- 8. Dark mode: only the few surfaces pinned to literal #fff - */
body.site-cool.dark-mode .support-input,
body.site-cool.dark-mode .support-signature-input {
  background: var(--studio-bg-2);
  border-color: var(--studio-border);
  color: var(--studio-ink);
}
/* the JS-injected ToS tooltip → brand surface in both modes */
.site-cool .support-tos-tooltip { background: var(--studio-ink); color: var(--studio-bg); border-radius: 3px; }
.site-cool .support-tos-tooltip::after { border-top-color: var(--studio-ink); }