/* Public presentation layer. Account, practice and private workspaces keep their
   existing styles. Load after legacy styles and before the page-specific layers. */
.public-page {
  --public-radius: 14px;
  --public-card-radius: 12px;
  --public-space: clamp(20px, 2.6vw, 32px);
  --muted: #b3b1ba;
  font-size: 16px;
  line-height: 1.65;
  min-width: 0;
  padding-block: clamp(28px, 4vw, 48px) 64px;
}
.public-page :where(section, article, header, aside, form, div) { min-width: 0; }
.public-page :where(h1, h2, h3, p, li, a, strong, label) { overflow-wrap: anywhere; }
.public-page h1 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; letter-spacing: .5px; }
.public-page h2 { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; letter-spacing: -.6px; }
.public-page h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.3px; }
.public-page p { font-size: 16px; line-height: 1.7; }
.public-page small { font-size: 14px; line-height: 1.55; }
.public-page .eyebrow { font-size: 12px; line-height: 1.5; letter-spacing: 1.6px; margin-bottom: 14px; }
.public-page .page-heading { align-items: flex-end; margin: 0 0 32px; gap: 24px; }
.public-page .page-heading p { font-size: 16px; max-width: 66ch; margin-top: 16px; }
.public-page .page-heading > div { min-width: 0; }
.public-page .section { margin-top: 44px; }
.public-page .section-head { gap: 20px; margin-bottom: 24px; }
.public-page .section-head > a { font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.public-page .section-title { margin: 40px 0 24px; }
.public-page .section-intro { font-size: 16px; line-height: 1.7; }
.public-page .button {
  min-height: 48px;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45;
  gap: 12px;
  white-space: normal;
  border-color: #45424a;
  background: #252429;
  transition: background-color .16s ease, border-color .16s ease;
}
.public-page .button:hover { background: #343139; border-color: #77707b; }
.public-page .button.primary { background: var(--orange); border-color: var(--orange); color: #15100d; }
.public-page .button.primary:hover { background: #ff925a; border-color: #ff925a; }
.public-page .button:disabled { transform: none; }
.public-page .button-group { gap: 12px; }
.public-page :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid #ffab7c;
  outline-offset: 4px;
}
.public-page :where(input, select, textarea):focus-visible { outline-offset: 2px; border-color: #ffab7c; }
.public-page .panel {
  padding: var(--public-space);
  border-radius: var(--public-card-radius);
  border-color: #36333b;
  background: #19191d;
}
.public-page .panel > p { font-size: 16px; }
.public-page .panel h2, .public-page .panel h3 { margin-bottom: 16px; }
.public-page .panel p + p { margin-top: 16px; }
.public-page .panel > form { margin-top: 24px; }
.public-page .split, .public-page .feature-grid { gap: 24px; }
.public-page .empty {
  padding: clamp(28px, 5vw, 56px) 24px;
  border: 1px solid #3b363e;
  border-radius: var(--public-radius);
  background: #19181c;
}
.public-page .empty-symbol { color: #ffab7c; margin-bottom: 18px; }
.public-page .empty h3 { font-size: 24px; }
.public-page .empty p { font-size: 16px; max-width: 52ch; }
.public-page .empty .button { margin-top: 24px; }
.public-page .notice { padding: 18px 20px; border-radius: 9px; font-size: 14px; line-height: 1.65; }
.public-page .connection-error { flex-wrap: wrap; }
.public-page .connection-error > span { flex: 1 1 auto; min-width: 0; }
.public-page .cards { gap: 24px; }
.public-page .event-card { border-radius: var(--public-card-radius); border-color: #37323b; }
.public-page .event-card:hover { border-color: #9b674c; }
.public-page .event-cover { height: auto; aspect-ratio: 16 / 9; }
.public-page .card-body { padding: 24px; }
.public-page .card-body h3 { font-size: 22px; line-height: 1.3; margin-bottom: 16px; }
.public-page .card-facts { font-size: 14px; gap: 6px; margin-bottom: 20px; }
.public-page .card-schedule { flex-wrap: wrap; font-size: 14px; gap: 8px 16px; }
.public-page .card-schedule strong { font-size: 14px; font-weight: 600; }
.public-page .capacity { height: 4px; margin: 12px 0 20px; }
.public-page .card-actions > .button { font-size: 14px; min-height: 48px; }
.public-page .card-body > small { font-size: 13px; margin-top: 12px; }
.public-page .save-button { min-width: 48px; width: 48px; min-height: 48px; border-radius: 8px; }
.public-page .tag { font-size: 11px; padding: 6px 8px; border-radius: 5px; line-height: 1.4; }
.public-page .entry-label { font-size: 12px; padding: 6px 8px; border-radius: 5px; }
.public-page .cover-game { font-size: 13px; left: 18px; bottom: 16px; }
.public-page .cover-top { top: 14px; left: 14px; right: 14px; flex-wrap: wrap; }
.public-page label { font-size: 14px; line-height: 1.5; gap: 9px; margin-bottom: 20px; }
.public-page :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]), select, textarea) {
  font-size: 16px;
  min-height: 48px;
  border-radius: 8px;
  border-color: #514951;
  padding: 12px 14px;
  max-width: 100%;
}
.public-page input::placeholder, .public-page textarea::placeholder { color: #a29aa7; }
.public-page :where(input, select, textarea) { scroll-margin-block: 110px; }
.public-page textarea { min-height: 128px; }
.public-page :where(input[type=checkbox], input[type=radio]) { width: 20px; height: 20px; min-height: 20px; flex: 0 0 20px; }
.public-page :where(.check, .check-field) { display: flex; flex-direction: row; align-items: center; min-height: 44px; gap: 12px; font-size: 14px; }
.public-page .form-error { font-size: 14px; line-height: 1.6; }
.public-page summary { cursor: pointer; min-height: 44px; padding-block: 10px; font-size: 14px; line-height: 1.5; }
.public-page .table-wrap { max-width: 100%; border-radius: var(--public-card-radius); margin-block: 24px; overscroll-behavior-x: contain; }
.public-page table { font-size: 15px; }
.public-page th { font-size: 12px; letter-spacing: .9px; color: #c2bac7; font-weight: 600; }
.public-page th, .public-page td { padding: 18px 20px; }
.public-page td strong { font-size: 15px; }
.public-page td > small { font-size: 13px; }
.public-page td .button { font-size: 14px; min-height: 44px; padding: 10px 14px; }
.public-page .table-wrap tbody tr:hover { background: #202025; }
.public-page .tabs { gap: 24px; }
.public-page .tabs a { font-size: 14px; min-height: 48px; display: inline-flex; align-items: center; }
.public-page .policy {
  max-width: 880px;
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--public-card-radius);
  overflow-wrap: anywhere;
}
.public-page .policy :where(p, li) { font-size: 16px; line-height: 1.8; max-width: 72ch; }
.public-page .policy h2 { font-size: 24px; line-height: 1.35; margin: 32px 0 14px; }
.public-page .policy > h2:first-child, .public-page .policy > section:first-child > h2 { margin-top: 0; }
.public-page .policy section + section { margin-top: 32px; }
.public-page .policy ul { padding-left: 24px; }
.public-page .policy li + li { margin-top: 10px; }
.public-page .policy a { color: #ffb58c; text-decoration: underline; text-underline-offset: 4px; }
.public-page .policy > a:last-child { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; }
.public-page .policy .notice { max-width: 72ch; }
.public-page .credits { margin-top: 32px; padding: 12px 20px; border: 1px solid #353139; border-radius: 10px; }
.public-page .credits p { font-size: 14px; padding-block: 7px; }
.public-page .credits a { color: #cfc6d4; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .public-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .public-page { padding-block: 28px 48px; }
  .public-page .page-heading { align-items: flex-start; flex-direction: column; gap: 20px; margin-bottom: 28px; }
  .public-page .page-heading p { margin-top: 14px; }
  .public-page .section { margin-top: 36px; }
  .public-page .split, .public-page .feature-grid { grid-template-columns: minmax(0, 1fr); }
  .public-page .panel { padding: 24px; }
  .public-page .section-head { align-items: flex-start; gap: 12px; }
  .public-page .section-head > a { flex-shrink: 0; max-width: 45%; }
  .public-page .policy { padding: 24px; }
  .public-page .policy h2 { font-size: 22px; }
}
@media (max-width: 540px) {
  .public-page .cards { grid-template-columns: minmax(0, 1fr); }
  .public-page .card-body { padding: 22px; }
  .public-page .panel { padding: 22px; }
  .public-page .policy { padding: 24px; }
  .public-page th, .public-page td { padding: 16px; }
  .public-page .page-heading > .button { width: 100%; }
  .public-page .notice { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .public-page *, .public-page *::before, .public-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}