/*
 * Reusable UI components rendered by TagHelpers/Ui*.cs.
 * Shared appearance and states belong here; pages compose them with layout CSS.
 * See docs/ui-style-guide.md for the supported component API and variants.
 */

/* Shared surface geometry; domain classes own only their content layout. */
:where(.surface) {
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  background: var(--pp-paper);
  box-shadow: none;
}

.panel,
.callout,
.empty-state {
  padding: clamp(22px, 3.3vw, 38px);
}

:where(a.surface):hover {
  border-color: var(--pp-border-strong);
}

.callout {
  border-color: var(--pp-warning-border);
  background: var(--pp-yellow-soft);
}

.btn {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  min-height: var(--pp-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-xs);
  padding: 10px 22px;
  border: 1px solid transparent;
  border-radius: var(--pp-radius-control-lg);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.btn-primary {
  --pp-button-hover-color: var(--pp-ink);
  --pp-button-hover-background: color-mix(in srgb, var(--pp-green) 84%, var(--pp-mint));
  --pp-button-hover-border: var(--pp-green-deep);
  --pp-button-hover-shadow: 0 3px 8px rgba(23, 40, 33, 0.12);
  --pp-button-active-color: var(--pp-ink);
  --pp-button-active-background: color-mix(in srgb, var(--pp-green) 92%, var(--pp-green-deep));
  --pp-button-active-border: var(--pp-green-deep);
  --pp-button-active-shadow: none;
  border-color: var(--pp-green-deep);
  color: var(--pp-ink);
  background: var(--pp-green);
  box-shadow: 0 1px 2px rgba(23, 40, 33, 0.08);
}

.btn-secondary {
  --pp-button-hover-color: var(--pp-ink);
  --pp-button-hover-background: color-mix(in srgb, var(--pp-yellow) 80%, var(--pp-paper));
  --pp-button-hover-border: var(--pp-warning-border);
  --pp-button-hover-shadow: 0 3px 8px rgba(23, 40, 33, 0.12);
  --pp-button-active-color: var(--pp-ink);
  --pp-button-active-background: color-mix(in srgb, var(--pp-yellow) 88%, var(--pp-warning-border));
  --pp-button-active-border: var(--pp-warning-border);
  --pp-button-active-shadow: none;
  border-color: var(--pp-warning-border);
  color: var(--pp-ink);
  background: var(--pp-yellow);
  box-shadow: 0 1px 2px rgba(23, 40, 33, 0.08);
}

.btn-google {
  --pp-button-hover-color: var(--pp-ink);
  --pp-button-hover-background: var(--pp-canvas);
  --pp-button-hover-border: var(--pp-border-strong);
  --pp-button-hover-shadow: 0 3px 8px rgba(23, 40, 33, 0.12);
  --pp-button-active-color: var(--pp-ink);
  --pp-button-active-background: color-mix(in srgb, var(--pp-canvas) 94%, var(--pp-ink));
  --pp-button-active-border: var(--pp-border-strong);
  --pp-button-active-shadow: none;
  border-color: var(--pp-border-strong);
  color: var(--pp-ink);
  background: var(--pp-paper);
  box-shadow: 0 1px 2px rgba(23, 40, 33, 0.08);
}

.google-mark {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

.btn-ghost {
  --pp-button-hover-color: var(--pp-ink);
  --pp-button-hover-background: var(--pp-mint-soft);
  --pp-button-hover-border: var(--pp-success-border);
  --pp-button-hover-shadow: 0 3px 8px rgba(23, 40, 33, 0.12);
  --pp-button-active-color: var(--pp-ink);
  --pp-button-active-background: color-mix(in srgb, var(--pp-mint-soft) 88%, var(--pp-green));
  --pp-button-active-border: var(--pp-green);
  --pp-button-active-shadow: none;
  border-color: var(--pp-border-strong);
  color: var(--pp-ink);
  background: var(--pp-paper);
  box-shadow: 0 1px 2px rgba(23, 40, 33, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-pending)):hover {
    transform: translateY(-1px);
  }

  .btn:is(.btn-primary, .btn-secondary, .btn-google, .btn-ghost):where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-pending)):hover {
    border-color: var(--pp-button-hover-border);
    color: var(--pp-button-hover-color);
    background-color: var(--pp-button-hover-background);
    box-shadow: var(--pp-button-hover-shadow);
  }
}

.btn:where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-pending)):active {
  transform: translateY(1px);
}

.btn:is(.btn-primary, .btn-secondary, .btn-google, .btn-ghost):where(:not(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-pending)):active {
  border-color: var(--pp-button-active-border);
  color: var(--pp-button-active-color);
  background-color: var(--pp-button-active-background);
  box-shadow: var(--pp-button-active-shadow);
}

.btn.btn-lg {
  min-height: var(--pp-control-height-lg);
  padding-inline: 28px;
  border-radius: var(--pp-radius-control-lg);
}

/* Terminal state deliberately outranks later domain variants such as a selected
   quiz choice: an unavailable control must always look unavailable. */
.btn.btn:is(:disabled, [aria-disabled="true"], [aria-busy="true"], .is-pending) {
  border-color: var(--pp-border-strong);
  color: var(--pp-muted);
  background: var(--pp-canvas);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

.btn.btn:is([aria-busy="true"], .is-pending) {
  cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active {
    transform: none;
  }
}

.status-pill,
.tag {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-pill);
  color: var(--pp-muted);
  background: var(--pp-canvas);
  font-size: var(--pp-text-xs);
  font-weight: 600;
}

.status-pill.success {
  border-color: var(--pp-success-border);
  color: var(--pp-green-deep);
  background: var(--pp-mint-soft);
}

.status-pill.warn {
  border-color: var(--pp-warning-border);
  color: var(--pp-warning-ink);
  background: var(--pp-yellow-soft);
}

.status-pill.danger {
  border-color: var(--pp-danger-border);
  color: var(--pp-danger-ink);
  background: var(--pp-danger-soft);
}

.progress-bar {
  height: var(--pp-progress-height);
  overflow: hidden;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-progress-track);
}

.progress-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: var(--pp-green);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
  transform-origin: left center;
}

[dir="rtl"] .progress-bar span {
  transform-origin: right center;
}

/* Native values and accessible names remain on <progress>. */
.progress-meter {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--pp-progress-height);
  overflow: hidden;
  border: 0;
  border-radius: var(--pp-radius-pill);
  background: var(--pp-progress-track);
  accent-color: var(--pp-green);
  appearance: none;
}

.progress-meter::-webkit-progress-bar {
  border-radius: inherit;
  background: var(--pp-progress-track);
}

.progress-meter::-webkit-progress-value {
  border-radius: inherit;
  background: var(--pp-green);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.progress-meter::-moz-progress-bar {
  border-radius: inherit;
  background: var(--pp-green);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

.field {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 7px;
  color: var(--pp-ink);
  font-size: var(--pp-text-sm);
  font-weight: 600;
}

.field input,
.field select,
.field textarea,
input[type="search"] {
  width: 100%;
  min-height: var(--pp-field-height);
  padding: 11px 14px;
  border: 1px solid var(--pp-border-strong);
  border-radius: var(--pp-radius-control);
  color: var(--pp-ink);
  background: var(--pp-paper);
  font-size: var(--pp-text-base);
  outline: none;
}

.field textarea {
  min-height: 140px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
input[type="search"]:focus {
  border-color: var(--pp-border-strong);
  box-shadow: none;
}

.field :is(input, select, textarea):disabled {
  color: var(--pp-muted);
  background: var(--pp-canvas);
  cursor: not-allowed;
}

.field :is(input, select, textarea):is([aria-invalid="true"], .input-validation-error) {
  border-color: var(--pp-danger-ink);
  box-shadow: none;
}

.field-hint {
  color: var(--pp-muted);
  font-size: var(--pp-text-sm);
  font-weight: 400;
}

/* :focus-visible keeps the common ring tied to keyboard interaction. */
:is(a[href], button, input, select, textarea, summary):focus-visible,
.field :is(input, select, textarea):focus-visible {
  outline: var(--pp-focus-width) solid var(--pp-focus-color);
  outline-offset: var(--pp-focus-offset);
}

/* Labels rendered as buttons proxy focus from their visually-hidden file input. */
.btn:has(input:focus-visible) {
  outline: var(--pp-focus-width) solid var(--pp-focus-color);
  outline-offset: var(--pp-focus-offset);
}

/* Fields use one compact, high-contrast ring instead of stacking a border,
   shadow and the global control outline. */
.field :is(input, select, textarea):focus-visible,
input[type="search"]:focus-visible {
  outline: 2px solid var(--pp-green-deep);
  outline-offset: 2px;
}

.field :is(input, select, textarea):is([aria-invalid="true"], .input-validation-error):focus-visible {
  outline-color: var(--pp-danger-ink);
}

.checkbox-row {
  display: flex;
  min-width: 0;
  min-height: var(--pp-control-height-touch);
  align-items: center;
  gap: 10px;
  color: var(--pp-muted);
  overflow-wrap: anywhere;
  cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--pp-green);
  cursor: inherit;
}

.checkbox-row:has(input[type="checkbox"]:disabled) {
  cursor: not-allowed;
}

.validation-summary,
.field-error {
  color: var(--pp-danger-ink);
  font-size: var(--pp-text-xs);
  font-weight: 700;
}

.field-error:empty {
  display: none;
}

/* Opt-in disclosure: the entire visible header is the native summary target. */
.disclosure {
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-compact);
  background: var(--pp-paper);
}

.disclosure > .disclosure-summary {
  display: flex;
  min-height: var(--pp-control-height-touch);
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-md);
  padding: var(--pp-space-md) 20px;
  color: var(--pp-ink);
  background: transparent;
  font-size: var(--pp-text-base);
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.disclosure > .disclosure-summary::-webkit-details-marker {
  display: none;
}

.disclosure > .disclosure-summary::after {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.disclosure > .disclosure-summary:hover {
  background: var(--pp-canvas);
}

.disclosure > .disclosure-summary:focus-visible {
  outline: var(--pp-focus-width) solid var(--pp-focus-color);
  outline-offset: calc(-1 * var(--pp-focus-width));
}

.disclosure[open] > .disclosure-summary {
  border-block-end: 1px solid var(--pp-border);
}

.disclosure[open] > .disclosure-summary::after {
  transform: rotate(225deg);
}

.disclosure-body {
  padding: var(--pp-space-md) 20px 20px;
}

.disclosure-compact > .disclosure-summary {
  padding: 10px var(--pp-space-md);
  font-size: var(--pp-text-sm);
}

.disclosure-compact > .disclosure-body {
  padding: var(--pp-space-sm) var(--pp-space-md) var(--pp-space-md);
}