/* ════════════════════════════════════════════════════════════════════════
   CRTV DEI — Free Website Checkup corner widget
   Site-wide lead-capture affordance. Square corners, ink/paper tokens only.
   Depends on shared.css (tokens: --ink, --paper, --paper-2, --gold, --blue,
   --dark, --rule, --font-display, --font-mono, --font-body).

   Collapsed state = the "terminal prompt" design (variant 10, chosen from
   design-explorations/checkup-display/ 2026-07-13): a dark shell strip with
   a real inline domain input, styled like a shell command. Lifted 1:1 from
   design-explorations/checkup-display/css/variant-10.css.
   ════════════════════════════════════════════════════════════════════════ */

#chk-widget {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 2000;
  font-family: var(--font-body);
}

/* ── Explainer caption ──────────────────────────────────────────────────
   A flat slip directly above the strip, same width, plain paper + 2px ink
   border. Deliberately NOT a chat bubble: square corners, no tail, no pill.
   Hides with the strip when the panel opens (root[data-open] rule below)
   and disappears together with it on the 30-day hide dismissal, since both
   live inside #chk-widget. */
#chk-widget[data-open="true"] .chk-caption { opacity: 0; pointer-events: none; }
.chk-caption {
  position: relative; /* anchors the dismiss × */
  margin: 0 0 0.5rem;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.55rem 2rem 0.55rem 0.75rem; /* right space for the × */
  width: min(340px, calc(100vw - 2rem));
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--ink);
  transition: opacity 200ms ease-out;
}

/* Dismiss × — on the paper slip so it's actually visible; inverts on hover. */
.chk-hide {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.chk-hide:hover,
.chk-hide:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.chk-caption__short { display: none; }
@media (prefers-reduced-motion: reduce) {
  .chk-caption { transition: none; }
}

/* ── Collapsed terminal strip ──────────────────────────────────────────
   A real shell prompt, not a chat bubble: dark shell, gold `$`, muted
   "checkup", live inline domain input, blinking gold block caret, mono
   note. Square corners, 2px ink border. */
/* While the panel is open the strip steps aside — one control at a time. */
#chk-widget[data-open="true"] .chk-tab { opacity: 0; pointer-events: none; }
.chk-tab {
  display: block;
  background: var(--dark);
  border: 2px solid var(--ink);
  padding: 0.85rem 1rem 0.7rem;
  width: min(340px, calc(100vw - 2rem));
  font-family: var(--font-mono);
  cursor: pointer;
  transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.chk-tab:hover,
.chk-tab:focus-visible {
  outline: none;
}
.chk-tab:focus-within {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.chk-tab__line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: nowrap;
}
.chk-tab__prompt {
  color: var(--gold);
  font-weight: 700;
}
.chk-tab__cmd {
  color: rgba(245, 241, 232, 0.65);
  font-weight: 500;
}

/* Input sits inline with the prompt; native caret hidden, block caret drawn */
.chk-tab__inputwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.chk-tab__input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--paper);
  caret-color: transparent; /* native caret off — we draw a block caret */
}
.chk-tab__input::placeholder {
  color: rgba(245, 241, 232, 0.4);
}

/* Blinking block caret — hard on/off via steps(), never a fade */
.chk-tab__caret {
  flex-shrink: 0;
  width: 0.6ch;
  height: 1.05em;
  margin-left: 0.05rem;
  background: var(--gold);
  animation: chk-blink 1s steps(1) infinite;
}
@keyframes chk-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.chk-tab__note {
  margin-top: 0.5rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: rgba(245, 241, 232, 0.5);
}


/* ── Fallback: plain <a href="/checkup"> when API_BASE_URL is undefined ──
   Same visual shell, static text instead of a live input, no caret. */
.chk-tab--fallback {
  text-decoration: none;
}
.chk-tab--fallback .chk-tab__line {
  color: rgba(245, 241, 232, 0.65);
}
.chk-tab--fallback:hover,
.chk-tab--fallback:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ── Expanded panel ──────────────────────────────────────────────────── */
.chk-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: min(360px, calc(100vw - 2rem));
  max-height: min(640px, calc(100vh - 7rem));
  overflow-y: auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 1.5rem;
  display: none;
  transform: translateY(6px);
  opacity: 0;
  transition: transform 180ms ease-out, opacity 180ms ease-out;
}
.chk-panel[data-open="true"] {
  display: block;
  transform: translateY(0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .chk-panel { transition: none; }
  .chk-tab { transition: none; }
  .chk-tab__caret { animation: none; opacity: 1; }
}

@media (max-width: 640px) {
  .chk-tab { width: 100%; }
  .chk-tab__note { font-size: 0.6rem; letter-spacing: 0.12em; }
  .chk-caption { width: 100%; font-size: 0.72rem; }
  .chk-caption__full { display: none; }
  .chk-caption__short { display: inline; }
}

@media (max-width: 480px) {
  #chk-widget { right: 1rem; bottom: 1rem; left: 1rem; }
  .chk-panel {
    width: calc(100vw - 2rem);
    right: 0;
    left: 0;
    margin: 0 auto;
  }
}

.chk-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.chk-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.chk-panel__close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.chk-panel__close:hover,
.chk-panel__close:focus-visible {
  background: var(--ink);
  color: var(--paper);
}

.chk-panel__lede {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
  opacity: 0.85;
}

/* Compact stacked fields — tighter than the full get-started form */
.chk-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}
.chk-field__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.chk-field__label .chk-required { color: var(--blue); margin-left: 0.1rem; }

.chk-input,
.chk-textarea {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  padding: 0.6rem 0.7rem;
  outline: none;
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.chk-input::placeholder,
.chk-textarea::placeholder {
  color: var(--ink);
  opacity: 0.4;
}
.chk-input:focus,
.chk-textarea:focus {
  background: var(--paper-2);
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
}
.chk-input--error {
  border-color: #B91C1C;
  box-shadow: inset 0 0 0 1px #B91C1C;
}
.chk-textarea {
  min-height: 4.5rem;
  resize: vertical;
}

/* Collapsed-by-default frustration field, behind a mono toggle link */
.chk-optional-toggle {
  display: inline-block;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.chk-optional-toggle:hover,
.chk-optional-toggle:focus-visible { color: var(--ink); }
.chk-optional-field {
  display: none;
  margin-bottom: 0.9rem;
}
.chk-optional-field[data-open="true"] { display: block; }

.chk-submit {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1rem;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
  margin-top: 0.15rem;
}
.chk-submit:hover:not(:disabled),
.chk-submit:focus-visible:not(:disabled) {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-2px);
}
.chk-submit:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.chk-spinner {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.4rem;
  border: 2px solid var(--paper);
  border-top-color: transparent;
  border-radius: 50%;
  animation: chk-spin 700ms linear infinite;
  vertical-align: -0.1em;
}
@keyframes chk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .chk-spinner { animation: none; }
}

.chk-legal {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.65;
  margin-top: 0.75rem;
}
.chk-legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chk-message {
  margin-top: 0.75rem;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
  border: 2px solid #B91C1C;
  background: var(--paper);
  color: var(--ink);
  display: none;
}
.chk-message[data-visible="true"] { display: block; }
.chk-message a { color: var(--blue); text-decoration: underline; font-weight: 700; }

/* ── Success state ─────────────────────────────────────────────────────
   Gold block, same idiom as checkup.html's .chk-success. */
.chk-success {
  border: 2px solid var(--ink);
  background: var(--gold);
  padding: 1.25rem;
  display: none;
}
.chk-success[data-visible="true"] { display: block; }
.chk-success__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: block;
  margin-bottom: 0.6rem;
}
.chk-success__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 0.6rem;
}
.chk-success__body {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.5;
}
.chk-success__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}