/*
 * AllIn Japan — base styles and page components.
 * Colors and type scale follow the approved design (Anton / Inter / Noto Sans JP,
 * warm cream background, deep near-black chrome, poker-red accent).
 */

:root {
  --color-bg: oklch(0.97 0.01 60);
  --color-text: oklch(0.18 0 0);

  --color-accent: oklch(0.55 0.19 27);
  --color-accent-hover: oklch(0.42 0.19 27);

  --color-chrome: oklch(0.18 0 0);
  --color-hero-bg: oklch(0.15 0 0);
  --color-footer-bg: oklch(0.13 0 0);
  --color-footer-border: oklch(0.25 0 0);
  --color-alt-bg: oklch(0.95 0.005 90);

  --color-cream: oklch(0.97 0.01 60);
  --color-cream-bright: oklch(0.98 0.005 60);
  --color-cream-brightest: oklch(0.99 0.005 60);

  --color-border: oklch(0.9 0.005 90);
  --color-border-strong: oklch(0.85 0.005 90);

  --color-tag-bg: oklch(0.95 0.01 60);
  --color-tag-text: oklch(0.4 0.05 30);

  --gray-35: oklch(0.35 0.01 90);
  --gray-40: oklch(0.4 0.01 90);
  --gray-45: oklch(0.45 0.01 90);
  --gray-50: oklch(0.5 0.01 90);
  --gray-55: oklch(0.55 0.01 90);
  --gray-60: oklch(0.6 0.01 90);
  --gray-65: oklch(0.65 0.01 90);
  --near-black-30: oklch(0.3 0 0);

  --font-display: "Anton", sans-serif;
  --font-heading: "Noto Sans JP", "Inter", sans-serif;
  --font-body: "Inter", "Noto Sans JP", sans-serif;

  /* Photo-placeholder brand art (from the design zip's brand-placeholder.svg /
     brand-mark.svg, C2PA metadata stripped, inlined so Propshaft needn't
     resolve a url()). Wordmark for large slots, A-mark for small thumbnails. */
  --img-brand-placeholder: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20300%2090%22%20width=%22300%22%20height=%2290%22%3E%3Cg%20transform=%22translate%28150%2034%29%22%3E%3Crect%20x=%22-24%22%20y=%22-24%22%20width=%2248%22%20height=%2248%22%20rx=%2212%22%20fill=%22%23c23b2e%22%3E%3C/rect%3E%3Ctext%20x=%220%22%20y=%2212%22%20text-anchor=%22middle%22%20font-family=%22Anton,%20Impact,%20%27Arial%20Black%27,%20sans-serif%22%20font-size=%2237%22%20fill=%22%23fdf8f0%22%3EA%3C/text%3E%3C/g%3E%3Ctext%20x=%22150%22%20y=%2278%22%20text-anchor=%22middle%22%20font-family=%22Anton,%20Impact,%20%27Arial%20Black%27,%20sans-serif%22%20font-size=%2220%22%20letter-spacing=%221.5%22%20fill=%22%23fdf8f0%22%3EALLIN%20%3Ctspan%20fill=%22%23d9503f%22%3EJAPAN%3C/tspan%3E%3C/text%3E%3C/svg%3E");
  --img-brand-mark: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2060%2060%22%20width=%2260%22%20height=%2260%22%3E%3Crect%20x=%223%22%20y=%223%22%20width=%2254%22%20height=%2254%22%20rx=%2213%22%20fill=%22%23c23b2e%22%3E%3C/rect%3E%3Ctext%20x=%2230%22%20y=%2243%22%20text-anchor=%22middle%22%20font-family=%22Anton,%20Impact,%20%27Arial%20Black%27,%20sans-serif%22%20font-size=%2242%22%20fill=%22%23fdf8f0%22%3EA%3C/text%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
}

main {
  flex: 1 0 auto;
}

a {
  color: var(--color-accent);
  text-decoration: none;
}

a:hover {
  color: var(--color-accent-hover);
}

/* ============ HEADER ============ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-chrome);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--color-cream);
}

.brand-mark-small {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 18px;
  color: #fff;
}

/* Region sits as a distinct third tier next to the wordmark, divided by a
   rule — the parent brand mark stays plain/undecorated. */
.brand-region-divider {
  width: 1px;
  height: 32px;
  background: oklch(0.3 0 0);
  margin: 0 4px;
  flex-shrink: 0;
}

.brand-region {
  font-family: "Noto Serif JP", var(--font-heading), serif;
  font-weight: 700;
  font-size: 18px;
  color: var(--color-cream);
}

.brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-title {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-cream);
}

.brand-title-small {
  font-size: 16px;
}

.brand-accent {
  color: var(--color-accent);
}

.brand-subtitle {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gray-65);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 3vw, 32px);
}

.nav-toggle-check {
  display: none;
}

.nav-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid oklch(0.32 0 0);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle-bar {
  width: 18px;
  height: 2px;
  background: oklch(0.9 0.005 90);
  position: relative;
}

.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: oklch(0.9 0.005 90);
}

.nav-toggle-bar::before {
  top: -6px;
}

.nav-toggle-bar::after {
  top: 6px;
}

@media (max-width: 900px) {
  .site-nav {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-toggle-check:checked ~ .site-nav {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    background: var(--color-chrome);
    padding: 18px clamp(16px, 4vw, 40px);
    gap: 14px;
    z-index: 30;
  }
}

.nav-link {
  font-weight: 600;
  font-size: 14px;
  color: oklch(0.9 0.005 90);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.nav-link-en {
  font-size: 10px;
  font-weight: 400;
  color: var(--gray-60);
  letter-spacing: 0.04em;
}

.nav-text-link {
  font-weight: 600;
  font-size: 13px;
  color: oklch(0.9 0.005 90);
  white-space: nowrap;
}

.nav-text-link:hover {
  color: #fff;
}

.nav-text-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: oklch(0.9 0.005 90);
  white-space: nowrap;
  cursor: pointer;
}

.nav-text-btn:hover {
  color: #fff;
}

.btn {
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  padding: 10px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}
/* .btn on <button>/<input type=submit> otherwise keeps a UA frame + font;
   .btn-danger re-declares its outline below and still wins. */

.btn-accent {
  background: var(--color-accent);
  color: var(--color-cream-brightest);
}

.btn-accent:hover {
  color: var(--color-cream-brightest);
  opacity: 0.92;
}

.btn-danger {
  background: #fff;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
}

.btn-danger:hover {
  background: var(--color-accent);
  color: var(--color-cream-brightest);
}

/* ============ HERO ============ */

.hero {
  position: relative;
  background: var(--color-hero-bg);
  padding: clamp(50px, 10vw, 90px) clamp(20px, 5vw, 40px) clamp(40px, 8vw, 70px);
  overflow: hidden;
}

.hero-bg-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, oklch(0.1 0 0 / 0.75), oklch(0.1 0 0 / 0.88));
}

.hero-glow {
  position: absolute;
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.55 0.19 27 / 0.35), transparent 70%);
}

.hero-content {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-title {
  font-weight: 900;
  font-size: clamp(30px, 6vw, 52px);
  color: var(--color-cream-bright);
  line-height: 1.25;
  margin: 0;
}

.hero-subtitle {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.5vw, 20px);
  letter-spacing: 0.04em;
  color: var(--gray-65);
}

/* ============ SECTION SCAFFOLDING ============ */

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(40px, 8vw, 70px) clamp(20px, 5vw, 40px);
  width: 100%;
}

/* Full-bleed background; the horizontal inset lives on `.container` so a
   section-alt's content lines up exactly with a plain `.section` (which caps
   at 1200px and pads the same amount inside that). */
.section-alt {
  background: var(--color-alt-bg);
  padding: clamp(40px, 8vw, 70px) 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 0 clamp(20px, 5vw, 40px);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 6px;
}

.section-heading h2 {
  font-weight: 900;
  font-size: clamp(24px, 4vw, 30px);
  margin: 0;
}

.section-eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gray-50);
}

.section-rule {
  height: 3px;
  width: 56px;
  background: var(--color-accent);
  margin-bottom: 36px;
}

.section-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-45);
  max-width: 520px;
  margin: 0 0 8px;
}

.section-link {
  display: block;
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  color: var(--color-accent);
}

/* ============ LEGAL PAGES (Privacy Policy, Terms and Conditions) ============ */

.legal-page {
  max-width: 760px;
}

.legal-lang-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.legal-lang-tab {
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 7px;
}

.legal-lang-tab:hover {
  color: var(--near-black-30);
}

.legal-lang-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.legal-lang-tab.is-active:hover {
  color: #fff;
}

.legal-lead {
  font-size: 14px;
  line-height: 1.7;
  color: var(--near-black-30);
  margin: 0 0 32px;
}

.legal-section {
  margin-bottom: 32px;
}

.legal-section h2 {
  font-size: 19px;
  font-weight: 900;
  margin: 0 0 12px;
}

.legal-section h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 18px 0 8px;
}

.legal-section h3:first-child {
  margin-top: 0;
}

.legal-section p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--near-black-30);
  margin: 0 0 10px;
}

.legal-list {
  font-size: 14px;
  line-height: 1.7;
  color: var(--near-black-30);
  margin: 0 0 10px;
  padding-left: 22px;
}

.legal-list li {
  margin-bottom: 6px;
}

.legal-list .legal-list {
  margin: 6px 0 0;
}

.legal-contact-block {
  font-size: 14px;
  line-height: 1.8;
  color: var(--near-black-30);
  margin: 0;
}

.legal-section > *:last-child {
  margin-bottom: 0;
}

/* ============ CONTACT FORM ============ */

.contact-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: clamp(22px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact-label {
  font-size: 12px;
  color: var(--gray-45);
}

.contact-input,
.contact-textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: var(--font-body);
  background: #fff;
  color: var(--color-text);
  width: 100%;
}

.contact-textarea {
  resize: vertical;
  line-height: 1.6;
}

.contact-actions {
  display: flex;
  align-items: center;
}

/* ============ BAR CARDS (featured) ============ */

.bar-grid {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding-bottom: 12px;
}

.bar-grid .bar-card {
  flex: 0 0 calc((100% - 3 * 22px) / 4);
  min-width: 230px;
}

.bar-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  color: inherit;
}

.bar-card:hover {
  color: inherit;
}

.bar-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.bar-name {
  font-weight: 700;
  font-size: 16px;
}

.bar-location {
  font-size: 12px;
  color: var(--gray-50);
}

.tag-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.verification-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
}

.verification-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.verification-legend-caption {
  font-size: 12px;
  color: var(--gray-50);
}

.verification-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  align-self: flex-start;
}

.verification-badge-verified {
  background: oklch(0.96 0.04 150);
  border: 1px solid oklch(0.82 0.09 150);
  color: oklch(0.42 0.12 150);
}

.verification-badge-unverified {
  background: oklch(0.96 0.004 90);
  border: 1px solid oklch(0.86 0.005 90);
  color: oklch(0.5 0.01 90);
}

.verification-badge-pending {
  background: oklch(0.93 0.06 85);
  border: 1px solid oklch(0.8 0.1 85);
  color: oklch(0.45 0.1 85);
}

/* Also amber, but shifted toward orange (hue 60 vs pending's 85) and paired
   with the ↻ icon so it never reads as "under review" at a glance. */
.verification-badge-reverify {
  background: oklch(0.94 0.07 60);
  border: 1px solid oklch(0.81 0.12 60);
  color: oklch(0.46 0.14 60);
}

.verification-badge-lg {
  font-size: 11px;
  padding: 5px 11px;
}

.verification-badge-icon {
  font-size: 9px;
  padding: 2px 7px;
  flex-shrink: 0;
}

.verification-filter-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
  margin-top: 12px;
}

.verification-filter-legend-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}

.verification-filter-legend-caption {
  font-size: 11px;
  color: var(--gray-50);
  line-height: 1.5;
}

.verification-badge-date {
  font-weight: 500;
  opacity: 0.75;
}

.tag {
  font-size: 11px;
  font-weight: 600;
  background: var(--color-tag-bg);
  color: var(--color-tag-text);
  padding: 3px 8px;
  border-radius: 4px;
}

/* League / series / certification badges — AllIn Japan Badges.dc.html.
   Shared kind tokens: --badge-kind (mark colour) and --badge-tint (border).
   Deliberately unlike .verification-badge (green, fully rounded, ✓): 4px
   corners, neutral ink text, kind mark on the left. Not an ad — no gold,
   star or highlight, and no effect on sort order. */
.badge-kind--league {
  --badge-kind: oklch(0.5 0.17 27);
  --badge-tint: oklch(0.85 0.05 27);
}

.badge-kind--series {
  --badge-kind: oklch(0.45 0.09 255);
  --badge-tint: oklch(0.85 0.03 255);
}

.badge-kind--certification {
  --badge-kind: oklch(0.5 0.1 70);
  --badge-tint: oklch(0.86 0.04 75);
}

/* Glyph inside a mark: league ● filled circle, series ○ ring,
   certification ◆ diamond. Sized per mark below. */
.badge-glyph {
  display: block;
  box-sizing: border-box;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.badge-kind--series .badge-glyph {
  width: 9px;
  height: 9px;
  background: transparent;
  border: 2px solid #fff;
}

.badge-kind--certification .badge-glyph {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
}

.badge-logo {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}

/* 01 · Compact pill (bar cards). */
.badge-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.badge-pill {
  display: inline-flex;
  align-items: stretch;
  height: 22px;
  border: 1px solid var(--badge-tint);
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  flex-shrink: 0;
  white-space: nowrap;
}

.badge-pill-mark {
  width: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--badge-kind);
}

.badge-pill-mark.is-logo {
  background: #fff;
  border-right: 1px solid var(--badge-tint);
}

.badge-pill-label {
  display: flex;
  align-items: center;
  padding: 0 7px;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: oklch(0.22 0 0);
}

.badge-pill-more {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid oklch(0.86 0.005 90);
  border-radius: 4px;
  background: oklch(0.97 0.005 60);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: oklch(0.35 0.01 90);
  flex-shrink: 0;
}

/* Desktop shows up to 4 pills, ≤640px up to 3 slots — _badge_pills renders
   both cuts and these pick one. */
@media (min-width: 641px) {
  .badge-pill-row .is-hidden-desktop {
    display: none;
  }
}

@media (max-width: 640px) {
  .badge-pill-row .is-hidden-mobile {
    display: none;
  }
}

/* 02 · Detail badge (bar detail page, "加盟・提携 / AFFILIATIONS"). */
.badge-affiliations {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.badge-affiliations-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: oklch(0.45 0.01 90);
}

.badge-detail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge-detail {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  max-width: 100%;
  padding: 6px 12px 6px 6px;
  border: 1px solid oklch(0.86 0.01 90);
  border-radius: 6px;
  background: #fff;
  color: oklch(0.2 0 0);
}

a.badge-detail:hover,
.badge-detail:hover {
  color: oklch(0.2 0 0);
  border-color: var(--badge-kind);
  background: oklch(0.985 0.006 60);
}

.badge-detail:focus-visible {
  outline: 2px solid oklch(0.18 0 0);
  outline-offset: 2px;
}

.badge-detail-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 4px;
  background: var(--badge-kind);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-detail-mark.is-logo {
  background: #fff;
  border: 1px solid var(--badge-tint);
}

.badge-detail-mark .badge-glyph {
  width: 12px;
  height: 12px;
}

.badge-kind--series .badge-detail-mark .badge-glyph {
  width: 13px;
  height: 13px;
  border-width: 2.5px;
}

.badge-kind--certification .badge-detail-mark .badge-glyph {
  width: 10px;
  height: 10px;
  border-radius: 1.5px;
}

.badge-detail-mark .badge-logo {
  width: 24px;
  height: 24px;
}

.badge-detail-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.badge-detail-name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.badge-detail-meta {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 11px;
  line-height: 1.3;
  color: oklch(0.45 0.01 90);
}

.badge-detail-domain {
  white-space: nowrap;
}

.badge-detail-arrow {
  font-size: 13px;
  color: oklch(0.45 0.01 90);
  flex-shrink: 0;
}

/* The description: a tooltip on hover / keyboard focus. */
.badge-detail-description {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 5;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 6px;
  background: oklch(0.18 0 0);
  color: oklch(0.97 0.01 60);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
}

.badge-detail:hover .badge-detail-description,
.badge-detail:focus-visible .badge-detail-description {
  display: block;
}

/* Touch widths have no hover: full-width badges, description inline. */
@media (max-width: 640px) {
  .badge-detail-list {
    flex-direction: column;
  }

  .badge-detail {
    display: flex;
    width: 100%;
    align-items: flex-start;
    padding: 8px 12px 8px 8px;
  }

  .badge-detail-text {
    flex: 1;
  }

  .badge-detail-arrow {
    padding-top: 2px;
  }

  .badge-detail-description,
  .badge-detail:hover .badge-detail-description,
  .badge-detail:focus-visible .badge-detail-description {
    display: block;
    position: static;
    width: auto;
    max-width: none;
    margin-top: 4px;
    padding: 0;
    background: none;
    color: oklch(0.35 0.01 90);
    font-weight: 400;
    line-height: 1.5;
    text-wrap: pretty;
  }
}

/* 04 · Filter rows on All Bars — a native checkbox (the filter form is a
   plain GET, no JS) inside a row styled per the design. */
.badge-filter-group {
  border-top: 1px solid oklch(0.93 0.005 90);
  padding-top: 18px;
}

.badge-filter-hint {
  font-size: 11px;
  color: oklch(0.5 0.01 90);
  margin: -6px 0 10px;
}

.badge-filter-options {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 -8px;
}

.badge-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.badge-filter-option input {
  width: 16px;
  height: 16px;
  margin: 0;
  flex-shrink: 0;
  accent-color: oklch(0.2 0 0);
}

.badge-filter-option:hover {
  background: oklch(0.965 0.008 60);
  border-color: oklch(0.9 0.005 90);
}

.badge-filter-option:has(input:checked) {
  background: oklch(0.975 0.006 60);
  border-color: oklch(0.82 0.01 90);
}

.badge-filter-option:has(input:focus-visible) {
  outline: 2px solid oklch(0.18 0 0);
  outline-offset: 1px;
}

.badge-filter-option input:focus-visible {
  outline: none;
}

.badge-filter-count {
  margin-left: auto;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: oklch(0.5 0.01 90);
}

.bar-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gray-40);
  margin-top: 4px;
}

.photo-placeholder {
  /* Design-zip treatment: the AllIn Japan wordmark over a dark diagonal
     hatch, no text — the brand art is the whole placeholder. */
  background:
    var(--img-brand-placeholder) center 13% / auto 26% no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 6px, transparent 6px 16px),
    #191919;
}

/* Small square thumbnails get the corner A-mark instead of the full
   wordmark (matches the design's 76px slots). */
.photo-placeholder.list-item-photo {
  background:
    var(--img-brand-mark) right 5px bottom 5px / 16px no-repeat,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.045) 0 6px, transparent 6px 16px),
    #191919;
}

/* ============ PHOTO LIGHTBOX (shared/_lightbox_trigger + _lightbox_dialog) ============ */

img.bar-hero-main,
img.event-detail-photo,
img.tournament-detail-photo {
  cursor: zoom-in;
}

.lightbox-dialog {
  position: relative;
  margin: auto;
  border: none;
  padding: 0;
  max-width: 92vw;
  max-height: 92vh;
  background: transparent;
}

.lightbox-dialog::backdrop {
  background: oklch(0.1 0 0 / 0.85);
}

.lightbox-image {
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: oklch(0.15 0 0 / 0.65);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  background: oklch(0.15 0 0 / 0.85);
}

/* ============ DIRECTORY / LIST ITEMS ============ */

.directory-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.directory-list,
.results-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.results-empty {
  font-size: 13px;
  color: var(--gray-50);
  background: #fff;
  border: 1px dashed var(--color-border-strong);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
}

.list-item {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: inherit;
}

.list-item:hover {
  color: inherit;
}

.list-item-photo {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

.bar-card-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.list-item-body {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-item-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px;
}

.list-item-address {
  font-size: 12px;
  color: var(--gray-50);
}

.list-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--gray-40);
}

@media (max-width: 640px) {
  .list-item {
    padding: 14px;
    gap: 12px;
  }

  .list-item-body {
    flex-basis: 100%;
    min-width: 0;
    align-items: flex-start;
  }
}

.map-placeholder {
  width: 100%;
  height: 260px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}

.user-location-dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: oklch(0.55 0.2 250);
  border: 2px solid #fff;
  box-shadow: 0 0 0 4px oklch(0.55 0.2 250 / 0.3);
}

/* ============ RULES ============ */

.rules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 22px;
}

/* A link to the card's own full page now (see PagesController's
   basic_rules/bar_etiquette/buy_in_guide/dress_code/legality) — color:
   inherit stops the global a { color: accent } from bleeding into
   .rule-title, same reasoning as the All Bars card links. */
.rule-card {
  background: var(--color-chrome);
  border-radius: 12px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.rule-card:hover {
  color: inherit;
  transform: translateY(-2px);
}

.rule-num {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  color: #fff;
  font-size: 16px;
}

.rule-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-cream-bright);
}

.rule-title-en {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  font-weight: 700;
}

.rule-desc {
  font-size: 13px;
  color: var(--gray-65);
  line-height: 1.5;
}

/* ============ EVENTS ============ */

.events-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-row {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.event-group-label {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-45);
  letter-spacing: 0.03em;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-accent);
  color: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  min-width: 56px;
}

.event-day {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1;
}

.event-month {
  font-size: 10px;
  letter-spacing: 0.05em;
}

.event-body {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.event-title {
  font-weight: 700;
  font-size: 15px;
}

.event-title-en {
  font-size: 12px;
  color: var(--gray-50);
}

.event-description {
  font-size: 12px;
  color: var(--gray-50);
  line-height: 1.5;
}

.event-tag {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .event-row {
    padding: 14px;
    gap: 12px;
  }

  .event-body {
    flex-basis: 100%;
    min-width: 0;
    align-items: flex-start;
  }
}

/* ============ EVENTS INDEX (AllIn Japan All Events.dc.html) ============ */

.event-index-header {
  background: var(--color-hero-bg);
  padding: 50px clamp(20px, 5vw, 40px);
}

.event-index-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.event-index-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
}

.event-index-title-row h1 {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 34px);
  margin: 0;
  color: var(--color-cream-bright);
}

.event-index-eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.event-index-lede {
  font-size: 13px;
  color: var(--gray-60);
  margin: 6px 0 0;
  line-height: 1.7;
}

.event-index-filterbar {
  position: sticky;
  top: 69px; /* just below the sticky .site-header */
  z-index: 15;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 22px clamp(20px, 5vw, 40px);
}

@media (max-width: 640px) {
  /* Stacked with the sticky .site-header, a sticky filter bar eats too much
     of a phone's vertical space — static lets it scroll away normally. */
  .event-index-filterbar {
    position: static;
    top: auto;
  }
}

.event-index-filterbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 26px;
}

.event-index-filter-group {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.event-index-filter-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--gray-35);
}

.event-index-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.event-index-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  color: var(--gray-50);
  border: 1.5px solid var(--color-border);
}

.event-index-chip-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.event-index-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: oklch(0.8 0.005 90);
}

.event-index-chip-count {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

.event-index-chip.is-on.event-index-chip--local {
  background: oklch(0.965 0.025 27);
  color: var(--color-accent);
  border-color: oklch(0.86 0.07 27);
}

.event-index-chip.is-on.event-index-chip--national {
  background: oklch(0.965 0.035 75);
  color: oklch(0.47 0.11 65);
  border-color: oklch(0.86 0.08 75);
}

.event-index-chip.is-on.event-index-chip--international {
  background: oklch(0.96 0.025 250);
  color: oklch(0.45 0.11 250);
  border-color: oklch(0.85 0.06 250);
}

.event-index-chip.is-on .event-index-chip-dot {
  background: currentColor;
}

.event-index-select {
  font-family: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
}

.event-index-reset {
  margin-left: auto;
  align-self: flex-end;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gray-45);
  text-decoration: underline;
  padding: 9px 0;
}

.event-index-list {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.event-index-empty {
  background: #fff;
  border: 1px dashed var(--color-border-strong);
  border-radius: 12px;
  padding: 44px;
  text-align: center;
  color: var(--gray-50);
  font-size: 14px;
  line-height: 1.8;
}

.event-index-month {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.event-index-month-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  border-bottom: 2px solid var(--color-chrome);
  padding-bottom: 8px;
}

.event-index-month-en {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.04em;
}

.event-index-month-ja {
  font-weight: 700;
  font-size: 14px;
}

.event-index-month-count {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--gray-50);
}

.event-index-row {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  border-left: 5px solid var(--gray-50);
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
}

.event-index-row:hover {
  box-shadow: 0 2px 12px oklch(0.18 0 0 / 0.08);
}

/* Wraps just the date chip + main content in a link to the event's own
   detail page — .event-index-row-side (buy-in, or the Past view's champion)
   sits outside this anchor as a sibling, since an HTML <a> can't contain a
   nested <a> (the champion's own link to results_url/external_url). Carries
   the flex/gap the whole row used to have when the row itself was the <a>. */
.event-index-row-link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 22px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.event-index-row--local {
  border-left-color: var(--color-accent);
}

.event-index-row--national {
  border-left-color: oklch(0.55 0.13 70);
}

.event-index-row--international {
  border-left-color: oklch(0.56 0.13 250);
}

.event-index-row-datechip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-hero-bg);
  color: #fff;
  border-radius: 9px;
  padding: 10px 12px;
  min-width: 92px;
  flex-shrink: 0;
}

.event-index-row-daterange {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  white-space: nowrap;
}

.event-index-row-monthyear {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gray-65);
}

.event-index-row-main {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.event-index-row-title-ja {
  font-weight: 700;
  font-size: 17px;
  line-height: 1.4;
}

.event-index-row-title-en {
  font-size: 12.5px;
  color: var(--gray-50);
  line-height: 1.5;
}

.event-index-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: var(--gray-40);
  padding-top: 2px;
}

.event-index-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  flex-shrink: 0;
  min-width: 132px;
}

.event-index-row-side-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gray-55);
}

.event-index-row-buyin {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1;
  color: var(--color-accent);
}

.event-index-row-guarantee {
  font-size: 11.5px;
  color: var(--gray-50);
}

.event-index-row-more {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  padding-top: 4px;
}

/* Past view's champion line, in place of the buy-in figure
   (.event-index-row-side is shared by both) — linked when results_url/
   external_url is usable (#champion_url), plain text otherwise. */
.event-index-row-champion {
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.2;
  color: var(--color-accent);
  text-align: right;
}

a.event-index-row-champion:hover {
  text-decoration: underline;
}

.event-index-tournaments-note {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: var(--gray-40);
  line-height: 1.7;
}

.event-index-tournaments-note > span {
  flex: 1 1 320px;
}

.event-index-tournaments-link {
  font-weight: 700;
  font-size: 13px;
  padding: 11px 18px;
  border-radius: 6px;
  border: 1.5px solid var(--color-accent);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .event-index-row {
    padding: 14px;
    gap: 12px;
  }

  .event-index-row-link {
    gap: 12px;
  }
}

@media (max-width: 720px) {
  .event-index-row-side {
    align-items: flex-start;
    min-width: 0;
  }
}

/* ============ EVENT DETAIL (AllIn Japan Event Detail.dc.html) ============ */

.event-detail-hero {
  background: var(--color-hero-bg);
  padding: 26px clamp(20px, 5vw, 40px) 40px;
}

.event-detail-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-detail-back {
  font-size: 13px;
  color: var(--gray-65);
}

/* Shared scope pill — detail-page hero + index-list rows. */
.event-scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  /* international default; overridden per modifier */
  background: oklch(0.96 0.025 250);
  color: oklch(0.45 0.11 250);
}

.event-detail-scope-badge {
  align-self: flex-start;
  margin-top: 6px;
}

/* Publication-status pill — only rendered when the event isn't `scheduled`. */
.event-status-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 5px 11px;
  border-radius: 999px;
  background: oklch(0.94 0.04 70);
  color: oklch(0.46 0.13 70);
}

.event-status-badge--cancelled {
  background: oklch(0.94 0.05 27);
  color: var(--color-accent);
}

.event-detail-status-badge {
  align-self: flex-start;
  margin-top: 6px;
}

.event-scope-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.event-scope-badge--local {
  background: oklch(0.95 0.03 27);
  color: var(--color-accent);
}

.event-scope-badge--national {
  background: oklch(0.95 0.04 70);
  color: oklch(0.48 0.12 70);
}

.event-scope-badge--international {
  background: oklch(0.96 0.025 250);
  color: oklch(0.45 0.11 250);
}

.event-detail-hero-inner h1 {
  font-weight: 900;
  font-size: clamp(26px, 4.2vw, 38px);
  line-height: 1.15;
  margin: 6px 0 0;
  color: var(--color-cream-bright);
}

.event-detail-hero-en {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 0.08em;
  color: oklch(0.68 0.17 30);
}

.event-detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 4px;
  font-size: 14px;
  color: oklch(0.78 0.01 90);
}

.event-detail-body {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 40px) 70px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.event-detail-photo {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: clamp(260px, 34vw, 420px);
  border-radius: 12px;
  object-fit: contain;
}

/* Element-qualified so this doesn't clash with .photo-placeholder's own
   background shorthand — the no-photo state reuses this class on a <div>. */
img.event-detail-photo {
  background: var(--color-alt-bg);
}

.event-detail-facts {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.event-detail-facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 15px 20px;
  border-bottom: 1px solid oklch(0.95 0.005 90);
}

.event-detail-facts-row:last-child {
  border-bottom: none;
}

.event-detail-facts-label {
  font-size: 13px;
  color: var(--gray-50);
}

.event-detail-facts-value {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 640px) {
  .event-detail-facts-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .event-detail-facts-value {
    text-align: left;
  }
}

.event-detail-schedule {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-detail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.event-detail-section-head h2 {
  font-weight: 900;
  font-size: clamp(18px, 2.4vw, 21px);
  margin: 0;
}

.event-detail-section-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

/* SCHEDULE's Timeline / List switch (AllIn Japan Event Detail.dc.html) — a
   light segmented control, unlike the dark-hero .view-tabs on the
   tournaments index. Driven by the tabs Stimulus controller. */
.schedule-view-tabs {
  margin-left: auto;
  align-self: center;
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 8px;
  background: oklch(0.93 0.008 60);
}

.schedule-view-tab {
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  min-height: 32px;
  padding: 7px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: oklch(0.45 0.01 90);
  cursor: pointer;
}

.schedule-view-tab.is-active {
  background: #fff;
  color: oklch(0.18 0 0);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.12);
}

.schedule-view-tab:focus-visible {
  outline: 2px solid oklch(0.18 0 0);
  outline-offset: 1px;
}

/* :not([hidden]) — a bare display rule would outrank the UA stylesheet's
   [hidden] { display: none } and the inactive panel would never hide. */
.schedule-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The day × hour timeline (events/_schedule_timeline). */
.schedule-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 12px;
  color: oklch(0.4 0.01 90);
}

.schedule-timeline-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.schedule-timeline-swatch {
  width: 28px;
  height: 12px;
  border-radius: 3px;
  background: oklch(0.96 0.02 40);
  border: 1px solid oklch(0.82 0.05 35);
}

.schedule-timeline-swatch.is-open {
  background: linear-gradient(90deg, oklch(0.96 0.02 40), oklch(0.96 0.02 40 / 0));
  border-style: dashed;
  border-right: none;
}

.schedule-timeline-main-tag {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 3px;
  background: oklch(0.18 0 0);
  color: #fff;
}

.schedule-timeline {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow-x: auto;
}

.schedule-timeline-grid {
  min-width: 880px;
  display: flex;
  flex-direction: column;
}

.schedule-timeline-head,
.schedule-timeline-day {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
}

.schedule-timeline-head {
  border-bottom: 1px solid oklch(0.9 0.005 90);
}

.schedule-timeline-month {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  padding: 10px 12px;
  border-right: 1px solid oklch(0.93 0.005 90);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gray-50);
}

.schedule-timeline-hours {
  position: relative;
  height: 34px;
}

.schedule-timeline-hour {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: oklch(0.3 0 0);
  white-space: nowrap;
}

.schedule-timeline-hour.is-next-day {
  color: oklch(0.5 0.01 90);
}

.schedule-timeline-day {
  background: #fff;
  border-bottom: 1px solid oklch(0.94 0.005 90);
}

.schedule-timeline-day:last-child {
  border-bottom: none;
}

.schedule-timeline-day.is-weekend {
  background: oklch(0.985 0.006 60);
}

/* Pinned while the timeline scrolls sideways on narrow screens. */
.schedule-timeline-date {
  position: sticky;
  left: 0;
  z-index: 2;
  background: #fff;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-right: 1px solid oklch(0.93 0.005 90);
}

.is-weekend .schedule-timeline-date {
  background: oklch(0.975 0.008 60);
}

.schedule-timeline-date-day {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: oklch(0.22 0 0);
}

.is-weekend .schedule-timeline-date-day {
  color: oklch(0.45 0.15 27);
}

.schedule-timeline-date-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.schedule-timeline-date-dow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gray-50);
}

.is-weekend .schedule-timeline-date-dow {
  color: oklch(0.5 0.15 27);
}

.schedule-timeline-date-count {
  font-size: 10px;
  color: var(--gray-50);
}

/* One lane = 36px; --lanes / --lane and --timeline-hours (hourly
   gridlines) are set inline from EventScheduleTimeline. */
.schedule-timeline-track {
  position: relative;
  height: calc(var(--lanes) * 36px + 10px);
  background-image: repeating-linear-gradient(90deg,
    oklch(0.93 0.005 90) 0 1px, transparent 1px calc(100% / var(--timeline-hours)));
}

.schedule-timeline-bar {
  position: absolute;
  top: calc(8px + var(--lane) * 36px);
  height: 30px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border-radius: 5px;
  border: 1px solid oklch(0.82 0.05 35);
  background: oklch(0.96 0.02 40);
  color: oklch(0.22 0 0);
  overflow: hidden;
  white-space: nowrap;
  /* A size container, so a short bar can drop whole parts (below) rather
     than clip them mid-digit — "¥10,000" cut to "¥10" read as a real
     price. The tooltip always carries the full detail. */
  container-type: inline-size;
}

.schedule-timeline-bar.is-main {
  border-color: oklch(0.55 0.19 27);
  background: oklch(0.94 0.04 30);
}

.schedule-timeline-bar.is-open {
  border-style: dashed;
  border-right-style: none;
  background: linear-gradient(90deg, oklch(0.96 0.02 40) 60%, oklch(0.96 0.02 40 / 0));
}

.schedule-timeline-bar:hover {
  color: oklch(0.22 0 0);
  border-color: oklch(0.5 0.19 27);
}

.schedule-timeline-bar:focus-visible {
  outline: 2px solid oklch(0.18 0 0);
  outline-offset: 1px;
}

.schedule-timeline-bar-range {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.schedule-timeline-bar-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 700;
}

.schedule-timeline-bar-buyin {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: oklch(0.45 0.01 90);
}

/* Short bars: the title shrinks first (ellipsis), then the buy-in goes,
   then the end time — the start time always stays. */
@container (max-width: 199px) {
  .schedule-timeline-bar-buyin {
    display: none;
  }
}

@container (max-width: 109px) {
  .schedule-timeline-bar-range-end {
    display: none;
  }
}

.schedule-timeline-note {
  margin: 0;
  font-size: 11px;
  color: var(--gray-50);
}

.event-detail-schedule-list {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.event-detail-schedule-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid oklch(0.95 0.005 90);
  /* Each row links to the tournament detail page — keep the card's text
     colour, drop the underline, add a hover tint (same idea as a.event-row). */
  color: inherit;
  text-decoration: none;
  transition: background-color 0.12s ease;
}

.event-detail-schedule-row:last-child {
  border-bottom: none;
}

a.event-detail-schedule-row:hover {
  background: var(--color-tag-bg);
}

.event-detail-schedule-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--color-tag-bg);
  border-radius: 8px;
  padding: 6px 11px;
  min-width: 56px;
  flex-shrink: 0;
}

.event-detail-schedule-day {
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1;
  color: oklch(0.45 0.15 27);
}

.event-detail-schedule-dow {
  font-size: 9px;
  color: var(--gray-50);
}

.event-detail-schedule-time {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--color-accent);
  min-width: 56px;
}

.event-detail-schedule-titles {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.event-detail-schedule-title-ja {
  font-weight: 700;
  font-size: 14px;
}

.event-detail-schedule-title-en {
  font-size: 12px;
  color: var(--gray-50);
}

.event-detail-schedule-buyin {
  font-size: 13px;
  font-weight: 700;
}

@media (max-width: 640px) {
  .event-detail-schedule-row {
    padding: 14px;
    gap: 12px;
  }

  .event-detail-schedule-titles {
    flex-basis: 100%;
    min-width: 0;
    align-items: flex-start;
  }
}

.event-detail-notes {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.event-detail-notes-label {
  font-size: 13px;
  color: var(--gray-50);
}

.event-detail-notes-text {
  font-size: 14px;
  line-height: 1.8;
  color: oklch(0.28 0.01 90);
  margin: 0;
}

.event-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.event-detail-actions .btn {
  padding: 13px 26px;
  border-radius: 7px;
  font-size: 14px;
}

/* .btn-outline is defined in the TOURNAMENT DETAIL section (shared). */

/* ============ TOURNAMENTS (public list) ============ */

.tournament-photo {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

.tournament-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--gray-40);
  margin-top: 2px;
}

/* An .event-row is also used as a plain <div> on the Events page and the
   landing preview; on the Tournaments list + landing preview it's an <a>
   linking to the detail page, so keep the text colour and add a hover cue
   (same treatment .bar-card / .list-item already get). */
.event-row {
  color: inherit;
  text-decoration: none;
}

a.event-row:hover {
  border-color: var(--color-accent);
}

/* ============ TOURNAMENT DETAIL ============ */

.tournament-detail-hero {
  background: var(--color-hero-bg);
  padding: 26px clamp(20px, 5vw, 40px) 40px;
}

.tournament-detail-hero-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tournament-detail-back {
  font-size: 13px;
  color: var(--gray-65);
}

.tournament-detail-hero-inner h1 {
  font-weight: 900;
  font-size: clamp(26px, 4.2vw, 38px);
  line-height: 1.15;
  margin: 8px 0 0;
  color: var(--color-cream-bright);
}

.tournament-detail-hero-en {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: clamp(13px, 1.8vw, 16px);
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.tournament-detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 4px;
  font-size: 14px;
  color: oklch(0.78 0.01 90);
}

.tournament-detail-hero-venue {
  color: oklch(0.78 0.01 90);
  text-decoration: underline;
}

.tournament-detail-body {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 5vw, 40px) 70px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tournament-detail-photo {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: clamp(260px, 34vw, 420px);
  object-fit: contain;
  border-radius: 12px;
}

/* Element-qualified so this doesn't clash with .photo-placeholder's own
   background shorthand — the no-photo state reuses this class on a <div>. */
img.tournament-detail-photo {
  background: var(--color-alt-bg);
}

.tournament-detail-facts {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.tournament-detail-facts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--color-alt-bg);
}

.tournament-detail-facts-row:last-child {
  border-bottom: none;
}

.tournament-detail-facts-label {
  font-size: 13px;
  color: var(--gray-50);
}

.tournament-detail-facts-value {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

@media (max-width: 640px) {
  .tournament-detail-facts-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .tournament-detail-facts-value {
    text-align: left;
  }
}

.tournament-detail-notes {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tournament-detail-notes-label {
  font-size: 13px;
  color: var(--gray-50);
}

.tournament-detail-notes-text {
  font-size: 14px;
  line-height: 1.8;
  color: oklch(0.28 0.01 90);
  margin: 0;
}

.tournament-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tournament-detail-actions .btn {
  padding: 13px 26px;
  font-size: 14px;
  border-radius: 7px;
}

/* ============ TOURNAMENT DETAIL TABS (tournaments#show) ============ */
/* 概要 / 賞金構成 / 結果 as panels of one page rather than separate pages —
   see app/javascript/controllers/tabs_controller.js. Reuses
   .tournament-detail-hero* and .tournament-detail-actions for the shell. */

.tournament-detail-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.tournament-status-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 5px;
}

.tournament-status-badge--open {
  background: var(--color-accent);
  color: #fff;
}

.tournament-status-badge--finished {
  background: oklch(0.3 0 0);
  color: oklch(0.9 0.005 90);
}

.tournament-detail-status-sub {
  font-size: 12px;
  color: var(--gray-60);
}

/* Full-bleed like .tournament-detail-hero right above it — in the view
   this is a sibling of .tournament-detail-body (which stays capped at
   900px for the panels), not a descendant of it, precisely so this dark
   background can span the full viewport width instead of just that
   column. Butts directly against the hero with no seam (no wrapping
   padding of its own), so the two read as one continuous title-header
   block rather than a second, disconnected bar. Sticky so the tabs stay
   reachable while reading a long standings table; `top: 69px` (not 0) is
   the same offset every other sticky secondary bar in the app uses (e.g.
   .event-index-filterbar) to dock just below the sticky .site-header
   (z-index 20) instead of scrolling underneath it. */
.tournament-tabs {
  position: sticky;
  top: 69px;
  z-index: 15;
  background: var(--color-hero-bg);
  border-bottom: 1px solid oklch(0.26 0 0);
}

/* Keeps the tab buttons aligned to the same 900px column as
   .tournament-detail-hero-inner / .tournament-detail-body while the
   dark background above spans the full width. */
.tournament-tabs-inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  gap: clamp(14px, 4vw, 34px);
  padding: 18px clamp(20px, 5vw, 40px) 0;
  overflow-x: auto;
}

.tournament-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  padding: 0 0 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

.tournament-tab.is-active {
  border-bottom-color: var(--color-accent);
}

.tournament-tab-ja {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-65);
}

.tournament-tab.is-active .tournament-tab-ja {
  color: var(--color-cream-bright);
}

.tournament-tab-en {
  font-size: 11px;
  color: var(--gray-55);
}

.tournament-tab-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: var(--color-accent);
  color: #fff;
}

.tournament-tab-badge--muted {
  background: oklch(0.26 0 0);
  color: oklch(0.62 0.01 90);
}

@media (max-width: 640px) {
  .tournament-tab-en {
    display: none;
  }
}

/* :not([hidden]) — the panels are toggled via the `hidden` attribute, and a
   bare `display: flex` here would outrank the UA stylesheet's
   [hidden] { display: none } (author styles always win), leaving every
   panel visible at once. Same gotcha as .admin-payout-row et al. */
.tournament-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* A finished tournament's Info panel leads with this — one click to the
   result rather than one page away. */
.tournament-result-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  border: none;
  border-radius: 12px;
  background: oklch(0.18 0 0);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.tournament-result-banner-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.tournament-result-banner-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.tournament-result-banner-line {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-cream);
}

.tournament-result-banner-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-cream);
}

/* ---- 賞金構成 / Payouts panel ---- */

.tournament-pool-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.tournament-pool-stat {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tournament-pool-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

.tournament-pool-stat-value {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 24px;
}

.tournament-pool-stat-sub {
  font-size: 11px;
  color: var(--gray-55);
}

.tournament-payout-note {
  margin: 0;
  padding: 12px 16px;
  border-radius: 8px;
  background: oklch(0.94 0.02 60);
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-40);
}

.tournament-payout-table {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.tournament-payout-row {
  display: grid;
  grid-template-columns: 90px 1fr 110px;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-alt-bg);
}

.tournament-payout-row:last-child {
  border-bottom: none;
}

.tournament-payout-row--head {
  background: var(--color-alt-bg);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray-45);
}

.tournament-payout-place {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 17px;
  color: var(--gray-55);
}

.tournament-payout-place--1 {
  color: var(--color-accent);
}

.tournament-payout-place--2 {
  color: oklch(0.45 0.05 60);
}

.tournament-payout-place--3 {
  color: oklch(0.5 0.08 60);
}

.tournament-payout-share {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.tournament-payout-bar {
  flex: 1;
  max-width: 220px;
  height: 6px;
  border-radius: 3px;
  background: var(--color-alt-bg);
  overflow: hidden;
}

.tournament-payout-bar-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--color-accent);
}

.tournament-payout-pct {
  font-size: 12px;
  color: var(--gray-50);
  font-variant-numeric: tabular-nums;
}

.tournament-payout-amount {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .tournament-payout-row {
    grid-template-columns: 64px 1fr 92px;
  }

  .tournament-payout-bar {
    display: none;
  }
}

/* ---- 結果 / Results panel ---- */

.tournament-results-empty {
  background: #fff;
  border: 1px dashed var(--color-border-strong);
  border-radius: 12px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.tournament-results-empty-kicker {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.tournament-results-empty-title {
  font-size: 16px;
  font-weight: 700;
}

.tournament-results-empty-sub {
  font-size: 13px;
  color: var(--gray-50);
}

.tournament-results-empty .btn {
  margin-top: 10px;
}

/* Winner/chip-leader spotlight — photo | info, one column below 640px. */
.tournament-winner {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  background: var(--color-hero-bg);
  border-radius: 14px;
  overflow: hidden;
}

.tournament-winner-photo {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  border-radius: 0;
}

.tournament-winner-info {
  padding: clamp(22px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.tournament-winner-kicker {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--color-accent);
}

.tournament-winner-name {
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 32px);
  line-height: 1.15;
  color: var(--color-cream-bright);
}

.tournament-winner-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 12px;
}

.tournament-winner-stat-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--gray-60);
}

.tournament-winner-stat-value {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 28px;
  color: var(--color-cream-bright);
}

@media (max-width: 640px) {
  .tournament-winner {
    grid-template-columns: 1fr;
  }

  .tournament-winner-photo {
    min-height: 240px;
  }
}

.tournament-standings-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.tournament-standings-title {
  font-weight: 700;
  font-size: 16px;
}

.tournament-standings-sub {
  font-size: 12px;
  color: var(--gray-50);
}

.tournament-standings-table {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.tournament-standings-row {
  display: grid;
  grid-template-columns: 56px 1fr 130px;
  gap: 10px;
  align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-alt-bg);
}

.tournament-standings-row:last-child {
  border-bottom: none;
}

.tournament-standings-row--head {
  background: var(--color-alt-bg);
  padding: 11px 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray-45);
}

.tournament-standings-row--podium {
  background: oklch(0.98 0.012 60);
}

.tournament-standings-place {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 19px;
  color: var(--gray-55);
}

.tournament-standings-place--1 {
  color: var(--color-accent);
}

.tournament-standings-place--2 {
  color: oklch(0.45 0.05 60);
}

.tournament-standings-place--3 {
  color: oklch(0.5 0.08 60);
}

.tournament-standings-name {
  font-size: 14px;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tournament-standings-value {
  font-size: 14px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tournament-standings-value--none {
  color: var(--gray-65);
}

@media (max-width: 640px) {
  .tournament-standings-row {
    grid-template-columns: 44px 1fr 88px;
  }
}

.tournament-recap {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: clamp(18px, 3vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tournament-recap-title {
  font-weight: 700;
  font-size: 16px;
}

.tournament-recap-text {
  font-size: 14px;
  line-height: 1.9;
  color: oklch(0.28 0.01 90);
  margin: 0;
}

.tournament-gallery-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 12px;
}

.tournament-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.tournament-gallery-photo {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
}

@media (max-width: 640px) {
  .tournament-gallery-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.btn-outline {
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--gray-35);
}

.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.page-header-link {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 13px;
}

/* ============ LANDING EVENT CALENDAR (Gantt) ============ */

.event-calendar-section {
  background: var(--color-hero-bg);
}

.event-calendar-section h2 {
  color: var(--color-cream-bright);
}

.event-calendar-section .section-eyebrow {
  color: var(--gray-60);
}

.event-calendar-lead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

.event-calendar-lead {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-65);
  max-width: 560px;
  margin: 0;
}

.event-calendar-viewall {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
  color: oklch(0.68 0.17 30);
}

.event-calendar-panel {
  background: oklch(0.19 0 0);
  border: 1px solid oklch(0.28 0 0);
  border-radius: 12px;
  padding: 18px clamp(14px, 2vw, 22px) 22px;
  overflow-x: auto;
}

.event-calendar-grid {
  min-width: 680px;
}

.event-calendar-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  border-bottom: 1px solid oklch(0.3 0 0);
  padding-bottom: 9px;
  margin-bottom: 14px;
}

.event-calendar-head-label {
  align-self: end;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gray-60);
}

.event-calendar-months {
  display: grid;
  grid-template-columns: repeat(var(--cal-cols, 4), 1fr);
}

.event-calendar-month {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 10px;
  border-left: 1px solid oklch(0.3 0 0);
}

.event-calendar-month-en {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.06em;
  color: oklch(0.92 0.005 90);
}

.event-calendar-month-ja {
  font-size: 11px;
  color: var(--gray-60);
}

.event-calendar-rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.event-calendar-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: center;
  color: inherit;
}

.event-calendar-row:hover {
  color: inherit;
}

.event-calendar-row:hover .event-calendar-bar {
  filter: brightness(1.14);
}

.event-calendar-row-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  border-left: 3px solid var(--color-accent);
  padding-left: 10px;
}

.event-calendar-row-title {
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.95 0.005 90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-calendar-row-sub {
  font-size: 10.5px;
  color: var(--gray-60);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-calendar-track {
  position: relative;
  height: 40px;
  border-radius: 6px;
  background: oklch(0.225 0 0);
}

.event-calendar-gridlines {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cal-cols, 4), 1fr);
  pointer-events: none;
}

.event-calendar-gridlines span {
  border-left: 1px solid oklch(0.28 0 0);
}

.event-calendar-bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  border-radius: 5px;
  background: var(--color-accent);
}

.event-calendar-bar-date {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 700;
  color: oklch(0.9 0.005 90);
  white-space: nowrap;
}

.event-calendar-empty {
  background: oklch(0.19 0 0);
  border: 1px solid oklch(0.28 0 0);
  border-radius: 12px;
  padding: 40px 22px;
  text-align: center;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-60);
}

/* ============ LANDING "LATEST RESULTS" ============ */
/* Dark like the event calendar above it — the champion card is a photo-led
   moment rather than another list row. One card spanning the grid's three
   rows, with up to three compact rows beside it (HomeController::
   LATEST_RESULTS_LIMIT is that 1 + 3). */

.latest-results-section {
  background: var(--color-hero-bg);
  padding: clamp(40px, 8vw, 70px) 0;
}

.latest-results-section h2 {
  color: var(--color-cream-bright);
}

.latest-results-section .section-eyebrow {
  color: var(--color-accent);
}

.latest-results-lead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.latest-results-lead {
  margin: 0;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-65);
}

.latest-results-lead span {
  color: var(--gray-55);
}

.latest-results-viewall {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-accent);
  white-space: nowrap;
}

/* Card | rows, side by side, stacking below ~720px. The rows live in their
   own flex column rather than as further grid items spanning rows beside
   the card: that way 1, 2 or 3 results lay out as sensibly as a full set of
   four, instead of leaving empty grid rows next to a full-height card. */
.latest-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  align-items: start;
}

.latest-results-rows {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.latest-result-card {
  display: flex;
  flex-direction: column;
  background: oklch(0.2 0 0);
  border: 1px solid oklch(0.28 0 0);
  border-radius: 14px;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.latest-result-card:hover {
  border-color: var(--color-accent);
}

.latest-result-card-photo {
  width: 100%;
  height: 260px;
  flex: 1 1 260px;
  object-fit: cover;
  border-radius: 0;
}

.latest-result-card-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.latest-result-card-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.latest-result-kicker {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-accent);
}

.latest-result-card-meta {
  font-size: 12px;
  color: var(--gray-60);
}

.latest-result-card-name {
  font-weight: 900;
  font-size: 24px;
  color: var(--color-cream-bright);
}

.latest-result-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13px;
  color: var(--gray-65);
}

.latest-result-card-value {
  font-weight: 700;
  color: var(--color-cream-bright);
}

.latest-result-card-cta {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-accent);
}

.latest-result-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: oklch(0.2 0 0);
  border: 1px solid oklch(0.28 0 0);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.latest-result-row:hover {
  border-color: var(--color-accent);
}

.latest-result-row-photo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 8px;
}

.latest-result-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.latest-result-row-meta {
  font-size: 11px;
  color: var(--gray-60);
}

.latest-result-row-title {
  font-weight: 700;
  font-size: 14px;
  color: oklch(0.95 0.005 90);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.latest-result-row-winner {
  font-size: 12px;
  color: var(--gray-65);
}

.latest-result-row-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-cream-bright);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Scope legend above the Gantt + the per-scope colours on each row's
   left-border and bar (local = accent, national = gold, international =
   blue — per AllIn Japan Website.dc.html). */
.event-calendar-scope-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}

.event-calendar-scope-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: oklch(0.82 0.005 90);
}

.event-calendar-scope-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--color-accent);
}

.event-calendar-scope-dot--national {
  background: oklch(0.63 0.14 70);
}

.event-calendar-scope-dot--international {
  background: oklch(0.56 0.13 250);
}

.event-calendar-row--national .event-calendar-row-label {
  border-left-color: oklch(0.63 0.14 70);
}

.event-calendar-row--national .event-calendar-bar {
  background: oklch(0.63 0.14 70);
}

.event-calendar-row--international .event-calendar-row-label {
  border-left-color: oklch(0.56 0.13 250);
}

.event-calendar-row--international .event-calendar-bar {
  background: oklch(0.56 0.13 250);
}

@media (max-width: 560px) {
  .event-calendar-head,
  .event-calendar-row {
    grid-template-columns: 132px 1fr;
  }
}

/* ============ FSL STANDINGS ============ */

.fsl-meta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 28px;
}

.fsl-season-label {
  font-size: 13px;
  color: var(--gray-50);
}

.fsl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.fsl-tab {
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 7px;
}

.fsl-tab:hover {
  color: var(--near-black-30);
}

.fsl-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.fsl-tab.is-active:hover {
  color: #fff;
}

.fsl-table {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.fsl-table-header,
.fsl-row {
  display: grid;
  grid-template-columns: 44px 1fr 220px 90px;
  gap: 8px;
  align-items: center;
  padding: 13px 18px;
}

.fsl-table-header {
  padding: 12px 18px;
  background: var(--color-chrome);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray-60);
}

.fsl-row {
  border-top: 1px solid oklch(0.93 0.005 90);
}

.fsl-rank {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--gray-50);
}

.fsl-rank.is-top {
  color: var(--color-accent);
}

.fsl-team {
  font-weight: 700;
  font-size: 14px;
}

.fsl-col-right {
  text-align: right;
}

.fsl-recent {
  font-size: 12px;
  color: var(--gray-40);
}

.fsl-total {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--color-accent);
}

@media (max-width: 640px) {
  /* The design zip's mobile grid assumes a 5-column player-stats layout
     (#/player/events/recent/pts); this table is team-based with a wider
     "recent 3 rounds" column instead (HomeController::FSL_STANDINGS) — same
     tightening intent (narrower fixed columns, less gap/padding), adapted
     to the columns that actually exist here. */
  .fsl-table-header,
  .fsl-row {
    grid-template-columns: 26px 1fr 100px 56px;
    gap: 6px;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ============ STEPS / HOW IT WORKS ============ */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 30px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.step-num {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--color-accent);
}

.step-title {
  font-weight: 700;
  font-size: 16px;
}

.step-title-en {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gray-50);
  font-weight: 700;
}

.step-desc {
  font-size: 13px;
  color: var(--gray-45);
  line-height: 1.5;
  max-width: 280px;
}

/* ============ BARS INDEX PAGE HEADER ============ */

.page-header {
  background: var(--color-hero-bg);
  padding: 50px clamp(20px, 5vw, 40px);
}

.page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.back-link {
  font-size: 13px;
  color: var(--gray-65);
}

.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-top: 14px;
}

.page-title-row h1 {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 34px);
  margin: 0;
  color: var(--color-cream-bright);
}

.page-eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.result-count {
  font-size: 13px;
  color: var(--gray-60);
  margin-top: 6px;
}

/* Segmented control in a dark .page-header — the tournaments index's
   Upcoming / Results switch (plain GET links, not JS; see
   tournaments/index.html.erb). */
.view-tabs {
  display: inline-flex;
  gap: 4px;
  margin-top: 20px;
  padding: 4px;
  border-radius: 9px;
  background: oklch(0.22 0 0);
}

.view-tab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 6px;
  text-decoration: none;
}

.view-tab.is-active {
  background: var(--color-accent);
}

.view-tab-ja {
  font-size: 14px;
  font-weight: 700;
  color: oklch(0.85 0.005 90);
}

.view-tab-en {
  font-size: 11px;
  color: var(--gray-60);
}

.view-tab.is-active .view-tab-ja {
  color: #fff;
}

.view-tab.is-active .view-tab-en {
  color: oklch(0.92 0.03 30);
}

/* The winner line inside a completed tournament's .event-row on the index's
   Results view — a rule-separated footer under the row's own meta. */
.event-row-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-alt-bg);
  font-size: 12px;
}

.event-row-result-label {
  font-weight: 700;
  color: var(--color-accent);
}

.event-row-result-name {
  font-weight: 700;
}

.event-row-result-value {
  color: var(--gray-45);
  font-variant-numeric: tabular-nums;
}

.event-row-result-cta {
  margin-left: auto;
  font-weight: 700;
  color: var(--color-accent);
}

/* ============ FILTERS + RESULTS LAYOUT ============ */

.bars-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.filters {
  background: #fff;
  border-radius: 12px;
  padding: 22px;
  border: 1px solid var(--color-border);
  flex: 1 1 220px;
  max-width: 280px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

@media (max-width: 640px) {
  .filters {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
    align-items: flex-start;
  }
}

.filter-group-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 10px;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gray-35);
  margin-bottom: 7px;
}

.results-column {
  flex: 3 1 500px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sort-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.sort-label {
  font-size: 12px;
  color: var(--gray-50);
}

.sort-select {
  font-family: var(--font-body);
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.page-link {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  color: var(--near-black-30);
  border: 1px solid var(--color-border);
}

.page-link.is-current {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.page-link.is-current:hover {
  color: #fff;
}

/* ============ FOOTER ============ */

.site-footer {
  background: var(--color-footer-bg);
  padding: 50px clamp(20px, 5vw, 40px) 30px;
  margin-top: auto;
}

.footer-main {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 280px;
}

.footer-tagline {
  font-size: 12px;
  color: var(--gray-55);
  line-height: 1.6;
  margin: 0;
}

.footer-cols {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .footer-cols {
    gap: 26px;
  }
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col-title {
  font-weight: 700;
  font-size: 13px;
  color: oklch(0.9 0.005 90);
}

.footer-link {
  font-size: 13px;
  color: var(--gray-60);
}

.footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--color-footer-border);
  font-size: 12px;
  color: var(--gray-45);
}

/* ============ BAR DETAIL PAGE ============ */

.bar-detail-back {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 18px clamp(20px, 5vw, 40px) 0;
}

.bar-detail-back-link {
  font-size: 13px;
}

.bar-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: 16px clamp(20px, 5vw, 40px) 0;
}

.bar-hero-grid-inner {
  max-width: 480px;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  height: clamp(260px, 34vw, 420px);
  background: var(--color-alt-bg);
}

.bar-hero-main {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Paid-tier bars can have more than one gallery photo — main + up to 2 side
   thumbnails, matching the design's 2fr/1fr collage. object-fit stays
   `contain` on the main photo (no cropping, an earlier deliberate fix);
   thumbnails use `cover` like every other small thumbnail in this app. */
.bar-hero-grid-inner--multi {
  max-width: none;
  margin: 0;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 10px;
  background: transparent;
}

.bar-hero-thumbs {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.bar-hero-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

@media (max-width: 640px) {
  .bar-hero-grid-inner {
    height: 240px;
  }

  .bar-hero-grid-inner--multi {
    grid-template-columns: 1fr;
    height: auto;
  }

  .bar-hero-grid-inner--multi .bar-hero-main {
    height: 200px;
  }

  .bar-hero-thumbs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: none;
    height: 110px;
  }
}

.bar-detail-header {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(24px, 5vw, 36px) clamp(20px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.bar-detail-info {
  flex: 2 1 420px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bar-detail-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.bar-detail-title-row h1 {
  font-weight: 900;
  font-size: clamp(26px, 4vw, 36px);
  margin: 0;
}

.bar-detail-address {
  font-size: 14px;
  color: var(--gray-45);
}

.bar-detail-description {
  font-size: 14px;
  line-height: 1.7;
  color: oklch(0.3 0.01 90);
  margin: 6px 0 0;
  max-width: 640px;
}

.bar-detail-description-en {
  font-size: 13px;
  line-height: 1.7;
  color: var(--gray-50);
  margin: 0;
  max-width: 640px;
}

.bar-detail-station {
  font-size: 14px;
  color: var(--gray-45);
}

/* SNS brand-icon links (shared/_sns_links) — bar detail, and anywhere a bar's
   sns_url is shown. Neutral until hover so it doesn't fight the accent. */
.sns-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--gray-40);
}

.sns-link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.sns-link svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Tournaments CSV bulk-import card on the owner console — its own bordered
   card (not just a rule + hint under the tournament list), matching the
   design's step guide / dropzone / rules / collapsible column reference
   treatment. */
.owner-console-csv-card {
  margin-top: 20px;
  border: 1px solid var(--color-border);
  border-radius: 11px;
  overflow: hidden;
  background: var(--color-alt-bg);
}

.owner-console-csv-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-end;
  padding: 18px clamp(14px, 2.5vw, 20px);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}

.owner-console-csv-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-console-csv-title {
  font-weight: 900;
  font-size: 15px;
}

.owner-console-csv-subtitle {
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

.owner-console-csv-template-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--gray-35);
  font-weight: 700;
  font-size: 12px;
  padding: 9px 15px;
  border-radius: 7px;
  white-space: nowrap;
}

.owner-console-csv-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2.5vw, 20px);
}

.owner-console-csv-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
}

.owner-console-csv-step {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 12px 13px;
}

.owner-console-csv-step-num {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 14px;
  color: var(--color-accent);
  line-height: 1.2;
}

.owner-console-csv-step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.owner-console-csv-step-text span:first-child {
  font-weight: 700;
  font-size: 12.5px;
}

.owner-console-csv-step-text span:last-child {
  font-size: 11.5px;
  color: var(--gray-50);
  line-height: 1.5;
}

.owner-console-csv-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owner-console-csv-dropzone {
  border: 2px dashed var(--color-border-strong);
  border-radius: 10px;
  background: #fff;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: center;
}

.owner-console-csv-dropzone:hover,
.owner-console-csv-dropzone.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-cream-brightest);
}

/* :not([hidden]) — these three (placeholder/error/preview below) swap via
   the hidden attribute (file-preview#showPreview / #showDropError /
   #clear); a bare display: flex would outrank the browser's own
   [hidden] { display: none } default (author styles always beat the UA
   stylesheet regardless of specificity), same gotcha already hit and
   fixed for .admin-payout-row / .owner-console-results-row. */
.owner-console-csv-dropzone-placeholder:not([hidden]),
.owner-console-csv-dropzone-error:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.owner-console-csv-dropzone-icon {
  font-size: 22px;
  color: var(--gray-60);
  line-height: 1;
}

.owner-console-csv-dropzone-title {
  font-weight: 700;
  font-size: 13.5px;
}

.owner-console-csv-dropzone-hint {
  font-size: 11.5px;
  color: var(--gray-50);
}

.owner-console-csv-dropzone-error {
  font-size: 12px;
  color: oklch(0.45 0.16 27);
  line-height: 1.6;
}

.owner-console-csv-dropzone-preview:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
}

.owner-console-csv-dropzone-badge {
  font-family: var(--font-display), "Inter", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-cream-bright);
  background: var(--gray-35);
  padding: 6px 8px;
  border-radius: 5px;
}

.owner-console-csv-dropzone-preview-filename {
  font-weight: 700;
  font-size: 13px;
}

.owner-console-csv-dropzone-input {
  display: none;
}

.owner-console-csv-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-console-csv-submit {
  background: var(--color-accent);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 12.5px;
  padding: 10px 18px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
}

.owner-console-csv-clear {
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--gray-35);
  font-family: inherit;
  font-weight: 600;
  font-size: 12.5px;
  padding: 10px 15px;
  border-radius: 7px;
  cursor: pointer;
}

.owner-console-csv-error {
  background: oklch(0.98 0.02 27);
  border: 1px solid oklch(0.85 0.08 27);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owner-console-csv-error-title {
  font-weight: 700;
  font-size: 13px;
  color: oklch(0.45 0.17 27);
}

.owner-console-csv-error-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.owner-console-csv-error-row {
  background: #fff;
  border: 1px solid oklch(0.92 0.02 27);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 12px;
  color: oklch(0.32 0.02 27);
  line-height: 1.5;
}

.owner-console-csv-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.owner-console-csv-rule {
  display: flex;
  gap: 9px;
  align-items: baseline;
}

.owner-console-csv-rule-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  flex-shrink: 0;
  margin-top: 6px;
}

.owner-console-csv-rule > span:last-child {
  font-size: 12px;
  color: var(--gray-45);
  line-height: 1.6;
}

.owner-console-csv-rule-en {
  color: var(--gray-55);
}

/* Collapsible column reference — pure CSS checkbox-hack, same pattern as
   shared/_header's mobile nav and the owner console's own results-panel
   toggle. */
.owner-console-csv-columns-check {
  display: none;
}

.owner-console-csv-columns-label {
  align-self: flex-start;
  background: transparent;
  border: none;
  padding: 0;
  font-weight: 700;
  font-size: 12px;
  color: oklch(0.45 0.17 27);
  cursor: pointer;
}

.owner-console-csv-columns-label-open {
  display: none;
}

.owner-console-csv-columns-check:checked ~ .owner-console-csv-columns-label .owner-console-csv-columns-label-open {
  display: inline;
}

.owner-console-csv-columns-check:checked ~ .owner-console-csv-columns-label .owner-console-csv-columns-label-closed {
  display: none;
}

.owner-console-csv-columns-table {
  display: none;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 9px;
  overflow: hidden;
}

.owner-console-csv-columns-check:checked ~ .owner-console-csv-columns-table {
  display: block;
}

.owner-console-csv-columns-row {
  display: grid;
  grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--color-alt-bg);
  align-items: baseline;
}

.owner-console-csv-columns-row:last-child {
  border-bottom: none;
}

.owner-console-csv-columns-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--gray-35);
}

.owner-console-csv-columns-note {
  font-size: 11.5px;
  color: var(--gray-50);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .owner-console-csv-columns-row {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}

/* SNS URL inputs on the admin / owner bar forms (shared/_sns_url_fields). */
.admin-sns-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-sns-field {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-sns-field .admin-input {
  flex: 1;
}

.admin-sns-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--gray-45);
}

.admin-sns-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.bar-detail-card {
  flex: 1 1 260px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
}

.bar-detail-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.bar-detail-card-label {
  color: var(--gray-50);
}

.bar-detail-card-value {
  font-weight: 700;
}

.bar-detail-owner-block {
  border-top: 1px solid var(--color-border);
  padding-top: 14px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bar-detail-owner-caption {
  font-size: 11px;
  color: var(--gray-50);
}

.bar-detail-owner-claim,
.bar-detail-owner-delist {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
  border-radius: 7px;
}

.bar-detail-owner-claim {
  border: 1px solid oklch(0.82 0.09 150);
  color: oklch(0.42 0.12 150);
  background: oklch(0.98 0.02 150);
  font-weight: 700;
}

.bar-detail-owner-delist {
  border: 1px solid oklch(0.88 0.005 90);
  color: var(--gray-45);
  font-weight: 600;
}

.subsection-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.subsection-heading h2 {
  font-weight: 900;
  font-size: clamp(20px, 3vw, 24px);
  margin: 0;
}

.subsection-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

/* Cards size to their content (the day label + an "HH:MM–HH:MM" range in
   extended notation) and wrap to the next row when they don't fit, rather
   than being forced into 7 equal columns that clip the range onto two
   lines. `flex-grow` lets a row of cards fill the width evenly. */
.schedule-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.schedule-card {
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
  min-width: max-content;
}

.schedule-day {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.schedule-game {
  font-size: 12px;
  color: var(--gray-45);
}

.schedule-time {
  font-size: 12px;
  color: var(--color-accent);
  font-weight: 700;
  white-space: nowrap;
}

.bar-detail-columns {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  padding: clamp(30px, 6vw, 50px) clamp(20px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.bar-detail-location {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Upcoming-tournaments block on the bar detail page. Rows reuse .event-row
   (border/flex/hover) with a tighter padding and a dedicated time column. */
.bar-detail-tournaments {
  padding-top: 0;
  padding-bottom: clamp(20px, 4vw, 30px);
}

.bar-detail-tournaments-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.bar-detail-tournaments-all {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.bar-detail-tournaments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-detail-tournament-row {
  padding: 14px 18px;
}

.bar-detail-tournament-time {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-accent);
  min-width: 54px;
}

/* ============ FLASH MESSAGES ============ */

.flash {
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  /* Honour newlines — the CSV import lists per-row errors one per line. */
  white-space: pre-line;
}

.flash-notice {
  background: oklch(0.93 0.05 150);
  color: oklch(0.35 0.08 150);
}

.flash-alert {
  background: oklch(0.93 0.05 27);
  color: var(--color-accent-hover);
}

/* ============ AUTH PAGES (Devise) ============ */

.auth-body {
  margin: 0;
  min-height: 100vh;
  background: oklch(0.15 0 0);
  font-family: var(--font-heading);
}

.auth-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: oklch(0.95 0.005 60);
}

.auth-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
}

.auth-card {
  width: 100%;
  max-width: 380px;
  background: oklch(0.18 0 0);
  border: 1px solid oklch(0.28 0 0);
  border-radius: 14px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.auth-card-heading {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}

.auth-card-heading h1 {
  font-weight: 900;
  font-size: 22px;
  margin: 0;
}

.auth-card-eyebrow {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-accent);
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-label {
  font-size: 12px;
  color: var(--gray-65);
}

.auth-input {
  background: oklch(0.15 0 0);
  border: 1px solid oklch(0.3 0 0);
  border-radius: 7px;
  padding: 11px 13px;
  color: white;
  font-size: 14px;
  font-family: inherit;
  width: 100%;
}

.auth-input::placeholder {
  color: var(--gray-50);
}

.auth-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.auth-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gray-65);
}

.auth-submit {
  background: var(--color-accent);
  color: white;
  font-weight: 700;
  font-size: 14px;
  padding: 12px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.auth-submit:hover {
  opacity: 0.92;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gray-45);
  font-size: 12px;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: oklch(0.28 0 0);
}

.auth-oauth-btn {
  background: transparent;
  color: oklch(0.9 0.005 90);
  font-weight: 600;
  font-size: 13px;
  padding: 11px;
  border-radius: 7px;
  border: 1px solid oklch(0.32 0 0);
  cursor: pointer;
  font-family: inherit;
  width: 100%;
}

.auth-oauth-btn:disabled {
  color: var(--gray-45);
  border-color: oklch(0.24 0 0);
  cursor: not-allowed;
}

.auth-footer-text {
  text-align: center;
  font-size: 13px;
  color: var(--gray-60);
}

.auth-footer-text a {
  font-weight: 700;
}

.auth-danger-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-50);
  cursor: pointer;
}

.auth-danger-link:hover {
  color: var(--color-accent);
}

.auth-errors {
  background: oklch(0.25 0.05 27);
  border: 1px solid oklch(0.35 0.1 27);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: oklch(0.9 0.06 27);
}

.auth-errors p {
  margin: 0 0 6px;
  font-weight: 700;
}

.auth-errors ul {
  margin: 0;
  padding-left: 18px;
}

/* ============ ADMIN ============ */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-nav-link {
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 7px;
}

.admin-nav-link:hover {
  color: var(--near-black-30);
}

.admin-nav-link.is-current {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.admin-nav-link.is-current:hover {
  color: #fff;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-bottom: 20px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 12px 16px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border);
}

.admin-table th {
  font-weight: 700;
  color: var(--gray-50);
  background: var(--color-alt-bg);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

.admin-table-actions {
  display: flex;
  gap: 14px;
}

.admin-link-danger {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-50);
  cursor: pointer;
}

.admin-link-danger:hover {
  color: var(--color-accent);
}

.admin-link-positive {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-50);
  cursor: pointer;
}

.admin-link-positive:hover {
  color: oklch(0.45 0.12 145);
}

.admin-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
}

.admin-status-badge.is-pending {
  background: oklch(0.93 0.06 85);
  color: oklch(0.45 0.1 85);
}

.admin-status-badge.is-positive {
  background: oklch(0.93 0.08 145);
  color: oklch(0.4 0.1 145);
}

.admin-status-badge.is-negative {
  background: var(--color-alt-bg);
  color: var(--gray-50);
}

.admin-field-text {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.admin-license-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.admin-license-preview-image {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.admin-license-preview-frame {
  width: 100%;
  height: 600px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.admin-image-preview {
  max-width: 320px;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* One tournament/bar gallery photo + its "削除 / Remove" link, stacked —
   shared/_tournament_result_fields' gallery_photos grid and admin/bars/edit's
   own bar-gallery display both wrap each thumbnail in this. */
.admin-gallery-photo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 168px;
}

.admin-gallery-photo .admin-image-preview {
  width: 168px;
  height: 120px;
  max-width: none;
  object-fit: cover;
}

.admin-empty {
  padding: 40px;
  text-align: center;
  color: var(--gray-50);
  font-size: 14px;
}

.admin-form {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 28px;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-form-wide {
  max-width: 760px;
}

/* One attached badge in the admin bar edit page's badges panel. */
.admin-badge-row {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-badge-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.admin-badge-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.admin-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 640px) {
  .admin-field-row {
    grid-template-columns: 1fr;
  }
}

/* Tournament payout rows (shared/_tournament_payout_fields) — a repeatable
   place_from/place_to/amount/remove row, admin + owner tournament forms.
   Also shared by shared/_tournament_result_row_fields (tournament_results
   rows on the same forms) — same class, same shape.

   :not([hidden]) rather than a bare selector — this class's own
   display: grid would otherwise outrank the browser's
   [hidden] { display: none } default at equal specificity, since this
   stylesheet loads after the UA one. Without it, nested-fields#remove
   setting a row's `hidden` attribute had no visible effect — the row was
   correctly marked _destroy: "1" and would vanish on save, but stayed
   rendered on screen until then, reading as "delete doesn't work". */
.admin-payout-row:not([hidden]) {
  display: grid;
  grid-template-columns: 1fr 1fr 1.4fr auto;
  gap: 12px;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-payout-row:last-child {
  border-bottom: none;
}

.admin-payout-remove {
  height: 38px;
}

/* places_paid, admin + owner tournament forms — de-emphasized (not hidden,
   still directly editable) once a payout breakdown exists above it, since
   #effective_places_paid ignores it in that case. */
.admin-field--deemphasized {
  opacity: 0.55;
}

@media (max-width: 640px) {
  .admin-payout-row {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.admin-help-text {
  font-size: 12px;
  color: var(--gray-50);
  margin: 0;
}

.admin-checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.admin-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
}

/* Toggle-pill checkboxes — game_types and payment_methods only (the design's
   "ゲームタグ"/"支払い方法" chips), not every other checkbox in this app,
   which stays a plain native box + .admin-checkbox-label. Pure CSS, no JS:
   the real checkbox is visually hidden (kept in the tab order and still a
   flex item for :checked ~ nothing needed — the label is its very next
   sibling), and the following <label for> is styled as the pill, switching
   look via the adjacent-sibling :checked selector. The "✓ " prefix on a
   checked pill is a ::before pseudo-element, not duplicated server-rendered
   text, so it can't drift out of sync with the checkbox's actual state. */
.admin-pill-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.admin-pill-label {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--gray-50);
  font-weight: 700;
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
}

.admin-pill-checkbox:checked + .admin-pill-label {
  background: oklch(0.95 0.03 30);
  border-color: oklch(0.82 0.09 30);
  color: oklch(0.42 0.14 27);
}

.admin-pill-checkbox:checked + .admin-pill-label::before {
  content: "✓ ";
}

.admin-pill-checkbox:focus-visible + .admin-pill-label {
  outline: 2px solid oklch(0.55 0.19 27);
  outline-offset: 2px;
}

.admin-label {
  font-size: 13px;
  font-weight: 700;
}

.admin-input,
.admin-select,
.admin-textarea {
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
  width: 100%;
}

.admin-textarea {
  resize: vertical;
  min-height: 90px;
}

.admin-form-actions {
  display: flex;
  gap: 12px;
}

/* Structured opening-hours editor (shared/_opening_hours_fields) */
.opening-hours-hint {
  margin: 4px 0 10px;
  line-height: 1.5;
}

.opening-hours-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.opening-hours-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.opening-hours-day {
  font-size: 13px;
  font-weight: 700;
  width: 72px;
  flex-shrink: 0;
}

.opening-hours-closed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 400;
  width: 130px;
  flex-shrink: 0;
}

.opening-hours-times {
  display: flex;
  align-items: center;
  gap: 8px;
}

.opening-hours-time {
  width: 84px;
  text-align: center;
}

.opening-hours-dash {
  color: var(--gray-50);
}

.admin-review-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

/* Left at the default `stretch` above (not `align-items: flex-start`) so
   .admin-field/.admin-textarea inside still fill the form's width the
   same way they do in .admin-form elsewhere — see the admin license
   preview's own align-items gotcha for why that default matters here.
   The submit button is the one direct child that should size to its own
   content instead of stretching full-width, so it opts out individually. */
.admin-review-form > .btn {
  align-self: flex-start;
}

.admin-errors {
  background: oklch(0.95 0.05 27);
  border: 1px solid oklch(0.75 0.12 27);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 13px;
  color: oklch(0.4 0.15 27);
}

.admin-errors p {
  margin: 0 0 6px;
  font-weight: 700;
}

.admin-errors ul {
  margin: 0;
  padding-left: 18px;
}

/* A light-themed content block on an admin page below the main form/table —
   currently just the event edit page's tournament-schedule section. */
.admin-card {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.admin-card-head {
  margin-bottom: 12px;
}

.admin-card-title {
  font-weight: 700;
  font-size: 14px;
}

/* admin/shared/_csv_import — template download + upload form, with an
   inline error list on failure (bars index, events index, and the
   per-event tournament-schedule import on events#edit). */
.admin-csv-import {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.admin-csv-import-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-45);
}

.admin-csv-import-hint {
  margin: 6px 0 14px;
  font-size: 13px;
  color: var(--gray-50);
}

.admin-csv-import-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.admin-csv-form {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.admin-stat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-stat-value {
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--color-accent);
  line-height: 1;
}

.admin-stat-label {
  font-size: 12px;
  color: var(--gray-50);
}

.admin-dashboard-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.admin-dashboard-col {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
}

.admin-dashboard-col-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.admin-dashboard-col-header h2 {
  font-size: 15px;
  margin: 0;
}

.admin-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-mini-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}

.admin-mini-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.admin-mini-list-meta {
  color: var(--gray-50);
  font-size: 12px;
  white-space: nowrap;
}

/* Admin analytics — reuses the dashboard stat/column/mini-list components;
   only needs a caption style and vertical rhythm between stacked rows. */
.admin-analytics-note {
  font-size: 12px;
  color: var(--gray-50);
  margin: 0 0 20px;
}

.admin-analytics-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============ OWNER REQUEST PAGE ============ */

.owner-request-venue {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  background: oklch(0.2 0 0);
  border: 1px solid oklch(0.3 0 0);
  border-radius: 8px;
  padding: 12px 16px;
  flex-wrap: wrap;
}

.owner-request-venue-label {
  font-size: 11px;
  color: var(--gray-60);
}

.owner-request-venue-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-cream-bright);
}

.owner-request-venue-address {
  font-size: 12px;
  color: var(--gray-55);
}

.owner-request-section {
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.owner-request-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.owner-request-tab {
  border: 1px solid var(--color-border-strong);
  background: #fff;
  color: var(--near-black-30);
  font-weight: 700;
  font-size: 13px;
  padding: 11px 20px;
  border-radius: 8px;
}

.owner-request-tab.is-active {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: #fff;
}

.owner-request-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: clamp(22px, 4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.owner-request-intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.owner-request-intro-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 19px;
}

.owner-request-intro-text {
  font-size: 13px;
  color: var(--gray-45);
  line-height: 1.6;
}

.owner-request-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owner-request-field-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.owner-request-label-strong {
  font-weight: 700;
  font-size: 14px;
}

.owner-request-asterisk {
  color: var(--color-accent);
  font-weight: 700;
  margin-left: 1px;
}

.owner-request-required-legend {
  font-size: 12px;
  color: var(--gray-50);
  margin-bottom: 4px;
}

.owner-request-field-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.owner-request-field-full {
  grid-column: 1 / -1;
}

.owner-request-label {
  font-size: 12px;
  color: var(--gray-45);
}

.owner-request-input,
.owner-request-select,
.owner-request-textarea {
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  padding: 11px 13px;
  font-size: 14px;
  font-family: var(--font-body);
  background: #fff;
  color: var(--color-text);
  width: 100%;
}

.owner-request-select {
  color: var(--near-black-30);
}

.owner-request-select-narrow {
  max-width: 460px;
}

.owner-request-textarea {
  resize: vertical;
  line-height: 1.6;
}

.owner-request-hint {
  font-size: 11px;
  color: var(--gray-50);
  line-height: 1.5;
}

.owner-request-upload {
  border: 2px dashed var(--color-border-strong);
  border-radius: 10px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  background: var(--color-cream-brightest);
  text-align: center;
}

.owner-request-upload-icon {
  font-size: 26px;
  color: var(--gray-60);
}

.owner-request-upload-title {
  font-weight: 700;
  font-size: 13px;
}

.owner-request-upload-help {
  font-size: 12px;
  color: var(--gray-50);
}

.owner-request-upload-input {
  display: none;
}

.owner-request-upload.is-dragover {
  border-color: var(--color-accent);
  background: var(--color-cream-brightest);
}

/* :not([hidden]) rather than a bare selector — this class's own
   display: flex would otherwise outrank the browser's
   [hidden] { display: none } default at equal specificity, since this
   stylesheet loads after the UA one. Shared by the placeholder (icon/
   title/help) and the preview (thumbnail/filename) blocks, which swap
   places via the hidden attribute — .owner-request-upload itself used to
   apply this same flex layout directly to icon/title/help before they
   were wrapped in a placeholder span, so this class carries it now. */
.owner-request-upload-placeholder:not([hidden]),
.owner-request-upload-preview:not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.owner-request-upload-preview-image {
  max-width: 100%;
  max-height: 160px;
  border-radius: 6px;
  object-fit: contain;
}

.owner-request-upload-preview-filename {
  font-size: 12px;
  font-weight: 700;
  color: var(--near-black-30);
  word-break: break-all;
}

.owner-request-upload-error {
  font-size: 12px;
  color: var(--color-accent);
  text-align: center;
  line-height: 1.5;
}

/* Shown in place of the claim form when the bar already has a pending
   ClaimRequest — reuses .owner-request-card for the white frame. */
.owner-request-review-notice {
  gap: 14px;
}

.owner-request-review-notice p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--gray-45);
}

.owner-request-errors {
  background: oklch(0.97 0.03 27);
  border: 1px solid oklch(0.85 0.08 27);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 13px;
  color: oklch(0.4 0.12 27);
}

.owner-request-errors p {
  margin: 0 0 6px;
  font-weight: 700;
}

.owner-request-errors ul {
  margin: 0;
  padding-left: 18px;
}

.owner-request-attestation {
  background: var(--color-alt-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.owner-request-checkbox-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 13px;
  line-height: 1.6;
  color: oklch(0.3 0.01 90);
  cursor: pointer;
}

.owner-request-checkbox-label input {
  margin-top: 3px;
  flex-shrink: 0;
}

.owner-request-checkbox-en {
  color: var(--gray-50);
}

.owner-request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.owner-request-submit-neutral {
  background: oklch(0.28 0 0);
  color: #fff;
}

/* ============ OWNER CONSOLE (layouts/owner) ============ */

.owner-console-body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
}

.owner-console-header {
  background: oklch(0.18 0 0);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
}

.owner-console-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.owner-console-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 25px;
  color: var(--color-bg);
  flex-shrink: 0;
}

.owner-console-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.owner-console-wordmark {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--color-bg);
}

.owner-console-wordmark span {
  color: var(--color-accent);
}

.owner-console-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gray-65);
}

.owner-console-account {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.owner-console-identity {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  text-align: right;
}

.owner-console-name {
  font-size: 13px;
  font-weight: 700;
  color: oklch(0.95 0.005 60);
}

.owner-console-role {
  font-size: 11px;
  color: var(--gray-60);
}

.owner-console-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: oklch(0.3 0 0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: oklch(0.9 0.005 90);
}

.owner-console-logout {
  background: transparent;
  border: 1px solid oklch(0.32 0 0);
  color: var(--gray-65);
  font-family: inherit;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
}

.owner-console-pagehead {
  background: oklch(0.15 0 0);
  padding: 34px clamp(20px, 5vw, 40px);
}

.owner-console-pagehead-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}

.owner-console-pagehead-titles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.owner-console-pagehead-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}

.owner-console-pagehead-row h1 {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(23px, 3.6vw, 30px);
  margin: 0;
  color: oklch(0.98 0.005 60);
}

.owner-console-pagehead-eyebrow {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--color-accent);
}

.owner-console-pagehead-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.owner-console-barname {
  font-weight: 700;
  font-size: 14px;
  color: oklch(0.95 0.005 60);
}

.owner-console-viewlink {
  font-size: 12px;
  color: oklch(0.7 0.16 27);
}

.owner-console-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
}

.owner-console-badge--verified {
  background: oklch(0.3 0.06 150);
  border-color: oklch(0.45 0.09 150);
  color: oklch(0.9 0.06 150);
}

.owner-console-badge--paid {
  background: oklch(0.3 0.1 27);
  border-color: oklch(0.5 0.15 27);
  color: oklch(0.85 0.1 27);
}

.owner-console-pagehead-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.owner-console-discard {
  align-self: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-50);
}

.owner-console-body-grid {
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
  padding: 32px clamp(20px, 5vw, 40px) 70px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: flex-start;
}

.owner-console-sidenav {
  flex: 1 1 190px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 20px;
}

.owner-console-sidenav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--near-black-30);
  background: #fff;
  border: 1px solid var(--color-border);
  text-decoration: none;
}

.owner-console-sidenav a span {
  font-size: 11px;
  color: var(--gray-55);
}

.owner-console-updated {
  margin-top: 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--gray-50);
  line-height: 1.5;
}

.owner-console-updated strong {
  font-size: 13px;
  color: var(--color-text);
}

.owner-console-cards {
  flex: 3 1 460px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.owner-console-body-grid--single .owner-console-cards {
  flex-basis: 100%;
}

/* The console's main <form> just groups cards — no box of its own, and no
   max-width, so every card's fields span the same width as the standalone
   Photos / Licence / Tournaments cards (unlike .admin-form, which caps at
   560px for the narrower admin screens). */
.owner-console-form {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.owner-console-editform {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.owner-console-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: clamp(20px, 3.5vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.owner-console-card-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-console-card-head--split {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}

.owner-console-card-title {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 17px;
}

.owner-console-card-sub {
  font-size: 12px;
  color: var(--gray-50);
  letter-spacing: 0.04em;
}

.owner-console-tier-note {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

.owner-console-tier-note--muted {
  color: var(--gray-50);
  font-weight: 600;
}

/* The upload <form> (a grid cell in the photo grid, a flex item in the
   licence panel): its <label> child is the picker trigger. NB: `display:
   contents` on a <form> drops its nested controls from the submission in
   Chromium — don't. These submit through Turbo; the controller answers with
   a turbo_stream that swaps just the card, so the page never reloads and the
   main listing form keeps its unsaved edits. */
.owner-console-inline-upload {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
}

/* Inline error at the top of a re-rendered Photo / Licence card (bad file
   type, second photo) — the turbo_stream path has no flash banner. */
.owner-console-inline-error {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: oklch(0.95 0.04 25);
  color: oklch(0.44 0.16 25);
  font-size: 0.85rem;
  font-weight: 600;
}

/* The real <input type=file> — kept in the DOM (so its files submit) but
   out of view; the visible <label for> is the click target, same as the
   owner-request licence dropzone. Picking a file auto-submits (guarded by
   this.files.length — a bare requestSubmit fired on Firefox form-state
   restore and looped empty POSTs). */
.owner-console-file-hidden {
  display: none;
}

/* Photos card — fixed-width image tiles + a matching dashed dropzone. */
.owner-console-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.owner-console-photo,
.owner-console-photo-grid .owner-console-inline-upload {
  width: 168px;
  flex: 0 0 auto;
}

.owner-console-photo {
  position: relative;
}

.owner-console-photo img {
  width: 168px;
  height: 120px;
  object-fit: cover;
  border-radius: 9px;
  display: block;
}

.owner-console-photo-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.18 0 0 / 0.72);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.owner-console-photo:hover .owner-console-photo-delete,
.owner-console-photo-delete:focus-visible {
  opacity: 1;
}

.owner-console-photo-add {
  width: 168px;
  height: 120px;
  border: 2px dashed var(--color-border-strong);
  border-radius: 9px;
  background: oklch(0.985 0.004 90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
}

.owner-console-photo-add:hover {
  border-color: var(--color-accent);
}

.owner-console-photo-add-icon {
  font-size: 20px;
  color: var(--gray-60);
}

.owner-console-photo-add-text {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-45);
}

/* Licence card — a status panel coloured by verification state, with a
   file-input "Re-submit" affordance styled as the design's outline button. */
.owner-console-licence-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  padding: 16px 18px;
}

.owner-console-licence-panel-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.owner-console-licence-panel-status {
  font-weight: 700;
  font-size: 13px;
  color: var(--gray-40);
}

.owner-console-licence-panel-detail {
  font-size: 12px;
  color: var(--gray-45);
}

.owner-console-licence-resubmit {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--gray-40);
  font-weight: 700;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}

.owner-console-licence-panel--verified {
  background: oklch(0.98 0.02 150);
  border-color: oklch(0.88 0.06 150);
}

.owner-console-licence-panel--verified .owner-console-licence-panel-status {
  color: oklch(0.38 0.11 150);
}

.owner-console-licence-panel--verified .owner-console-licence-panel-detail {
  color: oklch(0.45 0.03 150);
}

.owner-console-licence-panel--verified .owner-console-licence-resubmit {
  border-color: oklch(0.82 0.06 150);
  color: oklch(0.4 0.1 150);
}

.owner-console-licence-panel--pending {
  background: oklch(0.97 0.04 85);
  border-color: oklch(0.85 0.09 85);
}

.owner-console-licence-panel--pending .owner-console-licence-panel-status {
  color: oklch(0.45 0.12 70);
}

.owner-console-licence-panel--pending .owner-console-licence-resubmit {
  border-color: oklch(0.82 0.09 85);
  color: oklch(0.45 0.12 70);
}

.owner-console-listing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
}

.owner-console-listing-row strong {
  display: block;
  font-size: 13px;
  color: oklch(0.45 0.16 27);
}

.owner-console-listing-row span {
  font-size: 12px;
  color: var(--gray-50);
}

.owner-console-tournament-form {
  background: oklch(0.985 0.004 90);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.owner-console-tournament-form-title {
  font-weight: 900;
  font-size: 14px;
}

.owner-console-tournament-photo-field {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

/* The placeholder / thumbnail doubles as the file picker (label for the
   hidden input) — click anywhere on it to browse. */
.owner-console-tournament-photo-picker {
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 8px;
  display: block;
}

/* Swappable inner of the picker (turbo_stream target). display:contents so it
   doesn't disturb the label's layout; the error line still stacks under. */
.owner-console-tournament-photo-preview-slot {
  display: contents;
}

/* span.owner-console-tournament-photo-preview sets `display: flex`, which
   (author style) overrides the UA `[hidden] { display: none }` — so the
   local-preview onchange's `placeholder.hidden = true` wouldn't actually
   hide it without this. */
.owner-console-tournament-photo-preview-slot [data-role="placeholder"][hidden] {
  display: none;
}

.owner-console-tournament-photo-preview {
  width: 150px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
}

.owner-console-tournament-photo-error {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

span.owner-console-tournament-photo-preview {
  /* This one is a click-to-upload dropzone, not a content placeholder — it
     re-adds the label styling that .photo-placeholder no longer carries, and
     overrides the dark branded background with the light dashed look. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  border: 2px dashed var(--color-border-strong);
  background: oklch(0.985 0.004 90);
  color: var(--gray-50);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  font-weight: 700;
  transition: border-color 0.12s ease;
}

.owner-console-tournament-photo-picker:hover span.owner-console-tournament-photo-preview {
  border-color: var(--color-accent);
}

.owner-console-tournament-photo-picker-icon {
  font-size: 18px;
  color: var(--gray-60);
}

.owner-console-tournament-photo-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--gray-50);
  max-width: 280px;
}

.owner-console-tournament-photo-hint span {
  color: var(--gray-55);
}

.owner-console-tournament-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.owner-console-tournament-row {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.owner-console-tournament-time {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--color-accent);
  min-width: 52px;
}

.owner-console-tournament-body {
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.owner-console-tournament-name {
  font-weight: 700;
  font-size: 14px;
}

.owner-console-tournament-meta {
  font-size: 12px;
  color: var(--gray-50);
}

.owner-console-tournament-winner {
  font-size: 11.5px;
  font-weight: 700;
  color: oklch(0.42 0.12 150);
}

@media (max-width: 640px) {
  .owner-console-tournament-row {
    padding: 14px;
    gap: 12px;
  }

  .owner-console-tournament-body {
    flex-basis: 100%;
    min-width: 0;
    align-items: flex-start;
  }
}

.owner-console-tournament-actions {
  display: flex;
  gap: 8px;
}

.owner-console-rowbtn {
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--near-black-30);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 7px;
  cursor: pointer;
  text-decoration: none;
}

.owner-console-rowbtn--danger {
  border-color: oklch(0.88 0.06 27);
  color: oklch(0.48 0.16 27);
}

.owner-console-rowbtn--results {
  border-color: oklch(0.82 0.09 150);
  color: oklch(0.38 0.11 150);
}

/* ============ Owner console top-level tabs (店舗情報 / トーナメント) ============
   Reuses .tournament-tab/-ja/-en/-badge verbatim (same dark-bar-with-gold-
   underline component the tournament detail page's own 3 tabs use) — only
   the surrounding bar is new. Sits in the main yield region, not
   content_for(:page_banner) (see edit.html.erb's own note on why), styled
   with the same background color as .owner-console-pagehead above it so the
   two read as one continuous dark block despite not sharing a wrapper. */
.owner-console-tabs {
  background: oklch(0.15 0 0);
  border-bottom: 1px solid oklch(0.26 0 0);
}

.owner-console-tabs-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  gap: clamp(14px, 4vw, 34px);
  padding: 10px clamp(20px, 5vw, 40px) 0;
  overflow-x: auto;
}

/* ============ Tournaments tab board (filters / search / dates / bulk) ============ */
.owner-console-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.owner-console-board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.owner-console-filter-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 6px;
  background: transparent;
  color: var(--near-black-30);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.owner-console-filter-chip.is-active {
  background: oklch(0.18 0 0);
  color: #fff;
}

.owner-console-filter-chip-count {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.7;
}

.owner-console-filter-chip--sm {
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 12px;
}

.owner-console-filter-chip--sm.is-active {
  background: oklch(0.95 0.03 30);
  border-color: oklch(0.82 0.09 30);
  color: oklch(0.42 0.14 27);
}

.owner-console-filter-clear {
  font-size: 12px;
  font-weight: 700;
  color: oklch(0.45 0.17 27);
}

.owner-console-board-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.owner-console-board-search input[type="search"] {
  width: 200px;
}

.owner-console-board-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}

.owner-console-board-dates-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-45);
}

.owner-console-board-date-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.owner-console-board-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: oklch(0.97 0.035 80);
  border: 1px solid oklch(0.86 0.08 80);
  border-radius: 10px;
  padding: 13px 16px;
}

.owner-console-board-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}

.owner-console-board-banner-text span:first-child {
  font-weight: 700;
  font-size: 13px;
  color: oklch(0.4 0.09 70);
}

.owner-console-board-banner-text span:last-child {
  color: oklch(0.48 0.06 70);
}

/* Collapsible CSV import card — same checkbox-hack idiom as its own
   column-reference toggle below, applied one level up: unchecked hides the
   whole .owner-console-csv-card (sibling of the checkbox/label), checked
   (default when a failed import just left errors to show) reveals it. */
.owner-console-csv-toggle-check {
  display: none;
}

.owner-console-csv-toggle-label {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  color: var(--near-black-30);
  font-weight: 700;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
}

.owner-console-csv-toggle-label-open {
  display: none;
}

.owner-console-csv-toggle-check:checked ~ .owner-console-csv-toggle-label .owner-console-csv-toggle-label-open {
  display: inline;
}

.owner-console-csv-toggle-check:checked ~ .owner-console-csv-toggle-label .owner-console-csv-toggle-label-closed {
  display: none;
}

.owner-console-csv-toggle-check ~ .owner-console-csv-card {
  display: none;
}

.owner-console-csv-toggle-check:checked ~ .owner-console-csv-card {
  display: block;
}

.owner-console-board-bulkbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: oklch(0.985 0.003 90);
  border: 1px solid var(--color-border);
  border-radius: 9px;
  padding: 10px 14px;
}

.owner-console-board-bulkbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-45);
  margin-right: 6px;
}

.owner-console-board-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
  color: var(--gray-50);
}

.owner-console-board-empty span:first-child {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
}

.owner-console-board-table {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: clip;
}

.owner-console-board-table-head {
  display: grid;
  grid-template-columns: 28px 78px minmax(0, 1fr) 140px 170px;
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  background: var(--color-alt-bg);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray-50);
}

.owner-console-board-month {
  padding: 8px 16px;
  background: oklch(0.985 0.003 90);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

.owner-console-board-table .owner-console-tournament-row {
  border: none;
  border-bottom: 1px solid var(--color-alt-bg);
  border-radius: 0;
}

.owner-console-board-table .owner-console-tournament-row-wrap:last-child .owner-console-tournament-row {
  border-bottom: none;
}

.owner-console-tournament-select {
  width: 17px;
  height: 17px;
  accent-color: var(--color-accent);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

.owner-console-status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.owner-console-status-badge--upcoming {
  background: oklch(0.96 0.005 90);
  color: var(--gray-40);
  border-color: var(--color-border);
}

.owner-console-status-badge--action {
  background: oklch(0.96 0.05 80);
  color: oklch(0.42 0.1 70);
  border-color: oklch(0.85 0.09 80);
}

.owner-console-status-badge--completed {
  background: oklch(0.96 0.035 150);
  color: oklch(0.38 0.11 150);
  border-color: oklch(0.85 0.07 150);
}

.owner-console-board-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.owner-console-board-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--near-black-30);
  background: #fff;
}

.owner-console-board-page.is-active {
  background: oklch(0.18 0 0);
  border-color: oklch(0.18 0 0);
  color: #fff;
}

@media (max-width: 720px) {
  .owner-console-board-table-head {
    grid-template-columns: 24px 1fr;
  }

  .owner-console-board-table-head span:nth-child(4),
  .owner-console-board-table-head span:nth-child(5) {
    display: none;
  }
}

/* ============ Create/edit drawer (slide-over, CSS only) ============
   A fixed overlay + panel rather than the old inline card — opened by the
   existing ?new_tournament/?tournament_id query params (full reload, like
   every other action on this page), closed by a plain link back to the tab
   without them. No JS: visibility is simply "rendered or not", driven by
   @tournament server-side. */
.owner-console-drawer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: flex-end;
}

.owner-console-drawer-overlay {
  position: absolute;
  inset: 0;
  background: oklch(0.12 0 0 / 0.5);
}

.owner-console-drawer-panel {
  position: relative;
  width: min(620px, 100%);
  height: 100%;
  overflow-y: auto;
  background: #fff;
  box-shadow: -12px 0 40px oklch(0 0 0 / 0.25);
  display: flex;
  flex-direction: column;
  padding: 22px;
  gap: 16px;
}

.owner-console-drawer-head {
  position: sticky;
  top: -22px;
  margin: -22px -22px 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: 14px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.owner-console-drawer-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gray-50);
}

.owner-console-drawer-close {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--gray-40);
}

@media (max-width: 640px) {
  .owner-console-board-toolbar,
  .owner-console-board-dates {
    align-items: flex-start;
  }

  .owner-console-board-search input[type="search"] {
    width: 100%;
  }

  .owner-console-drawer-panel {
    width: 100%;
  }
}

/* Checkbox-hack toggle for the per-tournament results panel — same pattern
   as shared/_header's mobile nav toggle, no JS. The checkbox is a sibling of
   both the row (which holds the label acting as the "結果を記録" button) and
   the panel, so :checked ~ reveals the panel regardless of the row sitting
   between them in the DOM. */
.owner-console-tournament-row-wrap {
  display: flex;
  flex-direction: column;
}

.owner-console-results-toggle-check {
  display: none;
}

.owner-console-results-panel {
  display: none;
  background: oklch(0.985 0.02 150);
  border: 1px solid oklch(0.85 0.06 150);
  border-radius: 10px;
  padding: 18px;
  margin-top: 10px;
}

.owner-console-results-toggle-check:checked ~ .owner-console-results-panel {
  display: flex;
}

/* The panel's only child is the <form> itself, so the actual vertical
   rhythm between the title / rows / add-row button / photo fields / save-
   close actions has to live on the form, not the panel — a gap: on the
   panel alone would only wrap around that one child and do nothing. */
.owner-console-results-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.owner-console-results-title {
  font-weight: 900;
  font-size: 13px;
  color: oklch(0.35 0.1 150);
}

.owner-console-results-panel [data-nested-fields-target="rows"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* One row of the quick results panel — rank (auto-numbered, never an input)
   / player name / payout, each described by its own placeholder text only
   (no <label>), matching the design.

   :not([hidden]) — same reasoning as .admin-payout-row above: a bare
   `display: grid` here would outrank the browser's own
   [hidden] { display: none } default (author styles always win over the
   UA stylesheet), so nested-fields#remove hiding a row would have no
   visible effect even though it correctly marks _destroy: "1". */
.owner-console-results-row:not([hidden]) {
  display: grid;
  grid-template-columns: 50px 1fr 120px auto;
  gap: 10px;
  align-items: center;
}

.owner-console-results-rank {
  font-family: var(--font-display);
  font-size: 14px;
  color: oklch(0.4 0.1 150);
}

.owner-console-results-input {
  border: 1px solid oklch(0.82 0.06 150);
  border-radius: 7px;
  padding: 9px 12px;
  font-size: 13px;
  background: white;
  font-family: inherit;
}

.owner-console-results-remove {
  background: none;
  border: none;
  font-size: 16px;
  line-height: 1;
  color: var(--gray-50);
  cursor: pointer;
  padding: 4px;
}

.owner-console-results-remove:hover {
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .owner-console-results-row {
    grid-template-columns: 40px 1fr 1fr auto;
  }
}

/* Winner photo / night gallery — a two-column grid (each column stacks
   below ~230px) under a top-border separator, matching the design's
   quick-panel photo section. */
.owner-console-results-photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  border-top: 1px solid oklch(0.9 0.04 150);
  padding-top: 14px;
}

.owner-console-results-photo-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.owner-console-results-photo-col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.owner-console-results-photo-label {
  font-size: 12px;
  font-weight: 700;
  color: oklch(0.35 0.1 150);
}

.owner-console-results-paid-chip {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: oklch(0.42 0.14 27);
  background: oklch(0.95 0.03 30);
  border: 1px solid oklch(0.85 0.08 30);
  padding: 2px 7px;
  border-radius: 20px;
}

.owner-console-results-photo-hint {
  font-size: 11.5px;
  color: oklch(0.45 0.03 150);
  line-height: 1.5;
}

.owner-console-results-photo-hint span {
  color: oklch(0.52 0.02 150);
}

.owner-console-results-photo-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.owner-console-results-photo-preview {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 7px;
}

.owner-console-results-photo-input {
  font-size: 12px;
}

.owner-console-results-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.owner-console-results-save {
  background: oklch(0.42 0.12 150);
  color: white;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
}

.owner-console-results-close {
  background: white;
  color: var(--gray-40);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  padding: 9px 14px;
  border-radius: 7px;
  border: 1px solid var(--color-border);
  cursor: pointer;
}

.owner-console-picker {
  display: flex;
  flex-direction: column;
}

.owner-console-picker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}

.owner-console-picker-row:last-child {
  border-bottom: none;
}

.owner-console-picker-name {
  flex: 1 1 220px;
  font-weight: 700;
  font-size: 14px;
}

.owner-console-picker-name span {
  display: block;
  font-weight: 400;
  font-size: 12px;
  color: var(--gray-50);
}

.owner-console-picker-go {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-accent);
}

@media (max-width: 720px) {
  .owner-console-sidenav {
    position: static;
    max-width: none;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ── Bar change review ──────────────────────────────────────────────
   Owner console "your edits are awaiting review" panel + the admin
   diff table on the review page. */
.owner-console-review-notice {
  background: oklch(0.97 0.04 85);
  border: 1px solid oklch(0.85 0.09 85);
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 13px;
  color: oklch(0.4 0.1 70);
}

.owner-console-review-notice-title {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
}

.owner-console-review-notice p {
  margin: 6px 0;
}

.owner-console-review-notice ul {
  margin: 8px 0;
  padding-left: 20px;
}

.owner-console-review-notice li {
  margin: 3px 0;
}

.owner-console-review-was {
  color: var(--gray-50);
  text-decoration: line-through;
}

.owner-console-review-notice-foot {
  font-size: 12px;
  color: var(--gray-50);
}

.admin-change-diff {
  margin-top: 8px;
}

.admin-change-diff-was {
  color: var(--gray-50);
  text-decoration: line-through;
}

.admin-change-diff-now {
  font-weight: 700;
}

.admin-change-conflict {
  margin-top: 10px;
  font-size: 13px;
  color: oklch(0.45 0.16 27);
}

/* Honeypot spam trap (shared/_honeypot_field) — visually gone but still in
   the DOM and the form submission. Deliberately not display:none. */
.spam-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}