/* Cross-theme rules loaded after the active theme stylesheet. */

.hub-hero {
  border-left-color: var(--cta-border, var(--accent, var(--line)));
}

.hub-card--primary {
  border-color: var(--cta-border, var(--accent, var(--line)));
}

.hub-card--primary:hover,
.hub-card--primary:focus-visible {
  border-color: var(--accent-strong, var(--cta-border, var(--accent, var(--line))));
}

.hub-card--status {
  border-style: dashed;
  background: var(--panel-soft-bg);
}

.tool-nav__link--muted {
  color: var(--muted);
  cursor: default;
}

.maintenance-page__action {
  border-color: var(--cta-border, var(--accent, var(--line)));
  color: var(--accent-strong, var(--accent, inherit));
}

.maintenance-page__action:hover,
.maintenance-page__action:focus-visible {
  background: var(--accent-strong, var(--accent));
  color: var(--on-accent, #fff);
}

/* Step eyebrow + badge legibility (cross-theme).
   Several dark themes set near-black text on a near-black badge background
   (e.g. abzan: --abzan-charcoal #060704 on --abzan-charcoal-bg #0d1008), making
   the "Prompt output" / "Required" / step-eyebrow labels invisible on every
   workflow page. Pin them to the theme-aware --muted body-secondary token, which
   is defined to stay readable on each theme's panel/badge surface. */
.chatgpt-step-eyebrow,
.chatgpt-step-badge {
  color: var(--muted, inherit);
}

/* Why: site-common.css sets :root { color-scheme: light dark }, so browsers are
   allowed to paint native checkbox/radio chrome to match the OS theme. With
   appearance:auto, that makes unchecked controls render as OS-black boxes under
   dark mode and ignore the active DeckFlow guild theme. Custom rendering here
   keeps the empty box/radio chrome theme-controlled and OS-independent. */
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  height: 1.05rem;
  box-sizing: border-box;
  /* Reset the generic `input` padding/margin (site.css gives all inputs
     0.75rem 0.85rem padding for text fields). Native checkboxes ignored it,
     but appearance:none boxes honor it, which (with border-box) inflates the
     control past width/height and offsets the checkmark. */
  padding: 0;
  margin: 0;
  border: 2px solid var(--line, var(--muted));
  background: var(--panel);
  display: inline-block;
  vertical-align: middle;
  position: relative;
  cursor: pointer;
  flex: none;
}

input[type="checkbox"] {
  border-radius: 4px;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::before {
  content: "";
  position: absolute;
  left: 0.31rem;
  top: 0.1rem;
  width: 0.22rem;
  height: 0.46rem;
  border-right: 2px solid var(--on-accent, #fff);
  border-bottom: 2px solid var(--on-accent, #fff);
  transform: rotate(45deg);
}

/* Why: appearance:none kills the browser's native indeterminate dash, so a
   tri-state bucket checkbox (some-but-not-all children selected) rendered as a
   blank empty box. Paint the partial state as a filled box with a horizontal
   dash to distinguish it from both checked (checkmark) and unchecked (empty). */
input[type="checkbox"]:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:indeterminate::before {
  content: "";
  position: absolute;
  left: 0.22rem;
  right: 0.22rem;
  top: 50%;
  height: 2px;
  background: var(--on-accent, #fff);
  transform: translateY(-50%);
}

input[type="radio"]:checked {
  border-color: var(--accent);
}

input[type="radio"]:checked::before {
  content: "";
  position: absolute;
  inset: 0.22rem;
  border-radius: 50%;
  background: var(--accent);
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.chatgpt-question-bucket input[type="checkbox"],
.chatgpt-question-option input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
}