/* The Hail Pro instance (webapp/hailpro/): pages framed as Hail Pro's Supplements section. */

/* Members who may only look see supplements without the controls that change them. The
   server refuses those changes either way; this keeps them from being offered. */
body[data-hailpro-readonly] form[action="/intake"],
body[data-hailpro-readonly] form[method="post" i] button:not([type="button"]),
body[data-hailpro-readonly] form[method="post" i] input[type="submit"],
body[data-hailpro-readonly] [formmethod="post" i] {
  display: none !important;
}

.hailpro-readonly-note {
  margin: 0;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid #d8dee6;
  background: #f4f6f9;
  color: #3a4654;
  font-size: 0.875rem;
}

.hailpro-signed-out {
  max-width: 28rem;
  margin: 4rem auto;
  text-align: center;
}

.hailpro-signed-out h1 {
  font-size: 1.125rem;
}

/* Buttons keep white text, as everywhere else in Hail Pro. The dark theme's lighter accent would
   need dark ink, so accent fills here use the deeper blue that keeps white text readable. */
.hailpro-embed .btn-accent {
  background: #2563eb;
  color: #ffffff;
}

.hailpro-embed .btn-accent:hover {
  background: #1d4ed8;
}

.hailpro-embed .btn-accent:active {
  background: #1e40af;
}

@media (prefers-color-scheme: dark) {
  .hailpro-embed {
    --color-accent-text: #ffffff;
  }
}

/* Document reading on New Supplement: two radio cards in place of a native select, whose menu
   macOS opens over the field. */
.hailpro-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 0.25rem;
  padding: 0;
  border: 0;
  min-width: 0;
}

.hailpro-choice legend {
  margin-bottom: 0.5rem;
  padding: 0;
}

.hailpro-choice-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.625rem;
  align-items: start;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.hailpro-choice-option:has(input:checked) {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.hailpro-choice-option:focus-within {
  box-shadow: var(--ring);
}

.hailpro-choice-option input {
  margin: 0.2rem 0 0;
  accent-color: #2563eb;
}

.hailpro-choice-title {
  display: block;
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

.hailpro-choice-detail {
  display: block;
  color: var(--color-muted);
  font-size: var(--font-size-caption, 0.875rem);
}