/* Opt-in styles. No global button/input/nav reset and no authorization behavior. */
.ui-page {
  margin: 0;
  color: var(--ui-text);
  background: var(--ui-page);
  font: 400 16px/1.5 var(--ui-font);
  color-scheme: light;
  overflow-wrap: anywhere;
}
.ui-page *, .ui-page *::before, .ui-page *::after { box-sizing: border-box; }
.ui-page h1 { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.2; }
.ui-page h2 { font-size: 1.25rem; line-height: 1.3; }
.ui-page h3 { font-size: 1rem; }
.ui-page a { color: var(--ui-accent); text-underline-offset: .18em; }
.ui-shell { width: min(100% - 32px, 1120px); margin-inline: auto; }
.ui-stack { display: grid; gap: var(--ui-space-4); }
.ui-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--ui-space-4); }
.ui-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2); }
.ui-card { min-width: 0; padding: var(--ui-space-6); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); background: var(--ui-surface); }
.ui-card > :first-child { margin-top: 0; }
.ui-card > :last-child { margin-bottom: 0; }
.ui-muted, .ui-help { color: var(--ui-muted); }
.ui-help, .ui-field-error { margin: var(--ui-space-1) 0 0; font-size: .875rem; }
.ui-field-error { color: var(--ui-danger-text); }
.ui-context { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-4); font-size: .875rem; }
.ui-context strong { color: var(--ui-text); }
.ui-heading { scroll-margin-top: calc(var(--ui-header-height) + var(--ui-scroll-gap)); }
.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ui-space-2);
  box-sizing: border-box;
  min-height: var(--ui-touch-target);
  min-width: var(--ui-touch-target);
  padding: 10px 16px;
  border: 1px solid var(--ui-accent);
  border-radius: var(--ui-radius-small);
  background: var(--ui-accent);
  color: var(--ui-on-accent);
  font: 600 1rem/1.25 var(--ui-font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.ui-page a.ui-button { color: var(--ui-on-accent); text-decoration: none; }
.ui-button:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-accent-hover); border-color: var(--ui-accent-hover); }
.ui-button--secondary { background: var(--ui-surface); border-color: var(--ui-control-border); color: var(--ui-accent); }
.ui-page a.ui-button--secondary { color: var(--ui-accent); }
.ui-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--ui-accent-soft); color: var(--ui-accent); }
.ui-button--danger { background: var(--ui-danger-text); border-color: var(--ui-danger-text); }
.ui-button--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: #7d1d2a; border-color: #7d1d2a; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { background: var(--ui-subtle); color: var(--ui-muted); border-color: var(--ui-control-border); cursor: not-allowed; }
.ui-field { display: grid; gap: var(--ui-space-1); min-width: 0; }
.ui-field > label, .ui-label { font-weight: 600; }
.ui-input {
  width: 100%;
  min-width: 0;
  min-height: var(--ui-touch-target);
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ui-control-border);
  border-radius: var(--ui-radius-small);
  background: var(--ui-surface);
  color: var(--ui-text);
  font: 400 1rem/1.4 var(--ui-font);
}
textarea.ui-input { min-height: 112px; resize: vertical; }
.ui-input::placeholder { color: var(--ui-muted); opacity: 1; }
.ui-input[aria-invalid="true"] { border: 2px solid var(--ui-danger-text); }
.ui-input:disabled, .ui-input[readonly] { background: var(--ui-subtle); color: var(--ui-muted); }
.ui-choice { display: flex; align-items: center; gap: var(--ui-space-2); min-height: var(--ui-touch-target); cursor: pointer; }
.ui-choice input { width: 20px; height: 20px; accent-color: var(--ui-accent); flex: 0 0 auto; }
.ui-notice, .ui-state {
  padding: var(--ui-space-4);
  border: 1px solid currentColor;
  border-inline-start-width: 4px;
  border-radius: var(--ui-radius-small);
  color: var(--ui-info-text);
  background: var(--ui-info-bg);
  overflow-wrap: anywhere;
}
.ui-notice > :first-child, .ui-state > :first-child { margin-top: 0; }
.ui-notice > :last-child, .ui-state > :last-child { margin-bottom: 0; }
.ui-notice--success { color: var(--ui-success-text); background: var(--ui-success-bg); }
.ui-notice--warning { color: var(--ui-warning-text); background: var(--ui-warning-bg); }
.ui-notice--danger { color: var(--ui-danger-text); background: var(--ui-danger-bg); }
.ui-state { border-color: var(--ui-control-border); border-inline-start-width: 1px; background: var(--ui-surface); color: var(--ui-text); }
.ui-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; color: var(--ui-info-text); background: var(--ui-info-bg); font-size: .875rem; font-weight: 600; }
.ui-badge--warning { color: var(--ui-warning-text); background: var(--ui-warning-bg); }
.ui-badge--success { color: var(--ui-success-text); background: var(--ui-success-bg); }
.ui-badge--danger { color: var(--ui-danger-text); background: var(--ui-danger-bg); }
.ui-nav { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
.ui-nav a { display: flex; align-items: center; min-height: var(--ui-touch-target); padding: 8px 12px; border-radius: var(--ui-radius-small); color: var(--ui-muted); text-decoration: none; }
.ui-nav a:hover { color: var(--ui-accent); background: var(--ui-accent-soft); }
.ui-nav a[aria-current="page"] { color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 3px 0 var(--ui-accent); font-weight: 600; }
.ui-disclosure > summary { display: list-item; min-height: var(--ui-touch-target); padding: 10px 12px; cursor: pointer; font-weight: 600; }
.ui-table-wrap { max-width: 100%; overflow: auto; border: 1px solid var(--ui-line); border-radius: var(--ui-radius-small); }
.ui-table { width: 100%; border-collapse: collapse; text-align: start; background: var(--ui-surface); }
.ui-table caption { text-align: start; padding: var(--ui-space-3); font-weight: 600; }
.ui-table th, .ui-table td { padding: var(--ui-space-3); border-top: 1px solid var(--ui-line); vertical-align: top; }
.ui-table th { background: var(--ui-subtle); }
.ui-status:empty { margin: 0; }
.ui-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ui-skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; transform: translateY(-200%); padding: 12px 16px; background: var(--ui-surface); color: var(--ui-focus); border: 2px solid var(--ui-focus); border-radius: var(--ui-radius-small); }
.ui-skip-link:focus { transform: translateY(0); }
.ui-page :focus-visible, .ui-button:focus-visible, .ui-input:focus-visible, .ui-heading:focus-visible,
.ui-skip-link:focus-visible, .ui-choice input:focus-visible, .ui-nav a:focus-visible,
.ui-disclosure > summary:focus-visible, .ui-table-wrap:focus-visible {
  outline: 3px solid var(--ui-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ui-surface);
}
.ui-button[hidden], .ui-notice[hidden], .ui-state[hidden], .ui-status[hidden], .ui-nav[hidden], .ui-card[hidden] { display: none !important; }
@media (max-width: 600px) {
  .ui-shell { width: calc(100% - 24px); }
  .ui-card { padding: var(--ui-space-4); }
  .ui-actions > .ui-button { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .ui-page *, .ui-page *::before, .ui-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .ui-button, .ui-input, .ui-notice, .ui-state, .ui-badge { border: 1px solid CanvasText; }
  .ui-nav a[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}