/* Shared UI contract. Page-specific styles may extend this, but should not
   redefine the geometry of controls, cards, content columns, or focus states. */
:root {
  --ui-content-max: 1160px;
  --ui-reading-max: 760px;
  --ui-gutter: clamp(16px, 3vw, 28px);
  --ui-control-height: 46px;
  --ui-radius-sm: 8px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-space-1: 4px;
  --ui-space-2: 8px;
  --ui-space-3: 12px;
  --ui-space-4: 16px;
  --ui-space-5: 24px;
  --ui-space-6: 32px;
}

html { scroll-padding-top: var(--header-height, 72px); }
body:not(.retro-mode) { min-width: 0; overflow-x: hidden; }
body:not(.retro-mode) :is(img, video, iframe) { max-width: 100%; }
body:not(.retro-mode) :is(button, a, input, select, textarea, summary) { touch-action: manipulation; }
body:not(.retro-mode) :is(button, input, select, textarea) { font: inherit; }
body:not(.retro-mode) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Keep one readable column on large screens. */
body:not(.retro-mode) :is(.lp-section, .commands-hero-inner, .command-entry-grid, .static-content, .plan-intro) {
  width: min(100%, var(--ui-content-max));
  margin-inline: auto;
}
body:not(.retro-mode) .lp-section { padding-inline: var(--ui-gutter); }
body:not(.retro-mode) :is(.section-head, .static-content) { overflow-wrap: anywhere; }
body:not(.retro-mode) :is(.section-title, h1, h2, h3) { text-wrap: balance; }

/* One control language across public pages and dashboard. */
body:not(.retro-mode) :is(.btn-invite, .btn-dashboard, .btn-secondary,
  .personal-dictionary-form button, .lottery-draw-card button,
  .support-plan-card button, .support-manage button) {
  min-height: var(--ui-control-height);
  padding: 10px 18px;
  border-radius: 999px;
  line-height: 1.35;
  transition: background-color .16s ease, border-color .16s ease, transform .16s ease;
}
body:not(.retro-mode) :is(.btn-invite, .btn-dashboard, .btn-secondary,
  .personal-dictionary-form button, .lottery-draw-card button,
  .support-plan-card button, .support-manage button):active { transform: translateY(1px); }
body:not(.retro-mode) :is(input:not([type="checkbox"]):not([type="hidden"]), select, textarea) {
  width: 100%;
  min-height: var(--ui-control-height);
  border-radius: var(--ui-radius-sm);
}
body:not(.retro-mode) :is(input, select, textarea)::placeholder { color: var(--subtle); opacity: .9; }

/* Avoid cards becoming overly wide and make repeated panels predictable. */
body:not(.retro-mode) :is(.choice-card, .command-entry, .mode-card, .faq-item,
  .support-card, .use-case-card, .operation-card, .feature-demo,
  .special-feature-card, .hero-summary, .setting-panel, .list-panel,
  .guild-card, .support-plan-card, .personal-dictionary-panel,
  .personal-boost-panel, .lottery-draw-card) { min-width: 0; }
body:not(.retro-mode) :is(.choice-card, .command-entry, .mode-card,
  .operation-card, .special-feature-card) { border-radius: var(--ui-radius-md); }
body:not(.retro-mode) :is(.choice-card, .command-entry, .mode-card,
  .operation-card, .special-feature-card) { padding: clamp(18px, 2vw, 24px); }
body:not(.retro-mode) :is(.command-entry p, .feature-card p, .special-feature-card p,
  .operation-card p, .mode-card > p, .choice-card p) { overflow-wrap: anywhere; }

/* The landing page's two status cards no longer determine a very tall hero. */
@media (min-width: 1101px) {
  body.site-home:not(.retro-mode) .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
    gap: clamp(36px, 5vw, 64px);
    align-items: start;
  }
  body.site-home:not(.retro-mode) .bot-status-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-4);
    margin-top: var(--space-3xl, 6rem);
  }
  body.site-home:not(.retro-mode) .hero-summary { margin-top: 0; }
}

@media (max-width: 1100px) {
  body.site-home:not(.retro-mode) .hero-inner { grid-template-columns: 1fr; }
  body.site-home:not(.retro-mode) .bot-status-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ui-space-3);
  }
}

@media (max-width: 700px) {
  body:not(.retro-mode) :is(.lp-section, .commands-hero, .command-entry-grid,
    .static-content, .plan-intro) { padding-inline: 16px; }
  body.site-home:not(.retro-mode) .bot-status-cards { grid-template-columns: 1fr; }
  body:not(.retro-mode) .action-row { gap: var(--ui-space-2); }
  body:not(.retro-mode) .action-row > :is(a, button) { flex: 1 1 12rem; }
  body:not(.retro-mode) :is(.features-grid, .special-feature-grid,
    .operation-grid, .mode-grid, .choice-grid, .support-links) { gap: var(--ui-space-3); }
  body:not(.retro-mode) :is(.commands-table-wrap, .plan-table-wrap) { overflow-x: auto; }
  body:not(.retro-mode) :is(.commands-table, .plan-table) { min-width: 620px; }
}

@media (max-width: 380px) {
  body:not(.retro-mode) :is(.lp-section, .commands-hero, .command-entry-grid,
    .static-content, .plan-intro) { padding-inline: 12px; }
  body:not(.retro-mode) .action-row > :is(a, button) { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.retro-mode) *, body:not(.retro-mode) *::before,
  body:not(.retro-mode) *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}