/* App layout on top of Bootstrap 6. Spacing uses Bootstrap's scale. */
:root {
  --ios-canvas: light-dark(#f2f2f7, #000000);
  --ios-surface: light-dark(#ffffff, #1c1c1e);
  --ios-fill: light-dark(rgba(120, 120, 128, 0.16), rgba(120, 120, 128, 0.28));
  --ios-fill-pressed: light-dark(rgba(120, 120, 128, 0.28), rgba(120, 120, 128, 0.4));
  --ios-separator: light-dark(rgba(60, 60, 67, 0.18), rgba(84, 84, 88, 0.65));
  --ios-blue: light-dark(#ff4d00, #ff6a2b);
  --ios-radius: 20px;
  --bs-blue-500: var(--ios-blue);
  --bs-bg-body: var(--ios-canvas);
  --bs-card-bg: var(--ios-surface);
  --bs-card-border-width: 0;
  --bs-card-border-color: transparent;
  --bs-border-color: var(--ios-separator);
  --bs-radius-5: 12px;
  --bs-radius-7: var(--ios-radius);
  --bs-btn-border-radius: 999px;
  --bs-btn-input-border-radius: 12px;
  --bs-control-border-radius: 12px;
  --bs-btn-input-min-height: 44px;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", system-ui, sans-serif;
  --space: var(--bs-spacer-5);
  --type-title: 1.75rem;
  --type-paragraph: 1.25rem;
  --type-text: 1rem;
  --bs-heading-font-family: var(--bs-body-font-family);
  --bs-font-mono: var(--bs-body-font-family);
  --bs-font-weight-medium: 400;
  --bs-font-weight-semibold: 400;
  --bs-font-weight-bolder: 700;
  --bs-heading-font-weight: 700;
  --bs-font-size-sm: var(--type-text);
  --bs-font-size-md: var(--type-text);
  --bs-font-size-lg: var(--type-text);
  --bs-font-size-xl: var(--type-text);
  --bs-font-size-2xl: var(--type-paragraph);
  --bs-font-size-3xl: var(--type-title);
  --bs-font-size-4xl: var(--type-title);
}

#app, #app * {
  font-family: var(--bs-body-font-family);
  font-size: var(--type-text);
  font-weight: 400;
}
#app h1 {
  font-size: var(--type-title);
  font-weight: 700;
}
#app h2,
#app h3 {
  font-size: var(--type-paragraph);
  font-weight: 700;
}
#app th,
#app strong,
#app b {
  font-weight: 700;
}

#app h1 { letter-spacing: -0.022em; }
#app :where(h1, h2, h3, p, ul) { margin-block: 0; }

html,
body {
  background: var(--ios-canvas);
}
header.navbar {
  background: color-mix(in srgb, var(--ios-canvas) 72%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--ios-separator);
}
#app .nav-link { color: var(--bs-fg-body); }
#app .nav-link.active { color: var(--ios-blue); font-weight: 700; }
#app .card {
  border: 0;
  border-radius: var(--ios-radius);
  background: var(--ios-surface);
  box-shadow: none;
}
#app .btn {
  border-radius: 999px;
  min-height: 44px;
}
#app .btn-solid.theme-primary {
  background: var(--ios-blue);
  border-color: transparent;
  color: #fff;
}
#app .btn-outline.theme-secondary {
  background: var(--ios-fill);
  border-color: transparent;
  color: var(--bs-fg-body);
}
#app .btn-outline.theme-secondary:hover {
  background: var(--ios-fill-pressed);
}
#app .form-control,
#app .form-select {
  background-color: var(--ios-fill);
  border-color: transparent;
  border-radius: 12px;
  min-height: 44px;
  box-shadow: none;
}
#app select.form-control,
#app .form-select {
  background-image: var(--bs-control-select-bg);
  background-repeat: no-repeat;
  background-position: var(--bs-control-select-bg-position);
  background-size: var(--bs-control-select-bg-size);
  padding-inline-end: calc(var(--bs-control-padding-x) * 3);
}
#app .form-control:focus,
#app .form-select:focus {
  background-color: var(--ios-fill);
  border-color: var(--ios-blue);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--ios-blue) 28%, transparent);
}
#app select.form-control:focus,
#app .form-select:focus {
  background-image: var(--bs-control-select-bg);
}
#app .table-responsive {
  background: var(--ios-surface);
  border-radius: var(--bs-radius-5);
  overflow-x: auto;
  /* Let the page keep vertical scrolling when the pointer is on a wide table. */
  overscroll-behavior-x: contain;
}
#app .table-card {
  background: var(--ios-surface);
  border: 0;
  border-radius: var(--ios-radius);
}
#app .table-card.table-responsive {
  overflow-x: auto;
}
#app .card .table-responsive {
  background: transparent;
  border-radius: var(--bs-radius-5);
}

.muted { color: var(--bs-fg-3); }
.problem { margin: 0; color: var(--bs-danger-fg); }
.kicker { color: var(--bs-fg-3); }
.hint { color: var(--bs-fg-3); }
.form-field > span:first-child { color: var(--bs-fg-2); }
.form-control.short { max-width: 24rem; }

.file-picker {
  position: relative;
  min-width: 0;
}
.file-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-picker-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-body,
.vstack { gap: var(--space); }
.card-body { padding: var(--space); }
.vstack > p { margin-block: 0; }
.hstack {
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bs-spacer-3);
}
.btn,
.btn-slot {
  width: auto;
  align-self: flex-start;
  flex: 0 0 auto;
}
.page-head { justify-content: space-between; }
.page-head > :first-child { min-width: min(100%, 16rem); flex: 1 1 16rem; }
@media (min-width: 641px) {
  .page-head > .row-actions { justify-content: flex-end; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bs-spacer-2);
  min-width: 0;
  text-decoration: none;
}
.logo { display: block; width: 7.12rem; height: 3.5rem; flex: none; object-fit: contain; }
.nav-toggle { display: none; }
.lang.form-control {
  width: auto;
  min-width: 0;
  padding-inline: 0.55rem 1.45rem;
  background-position: right 0.35rem center;
}
.signin-menu {
  display: flex;
  position: static;
  min-width: 0;
  max-height: none;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: none;
  z-index: auto;
  overflow: visible;
}

.org-head { display: flex; align-items: center; gap: var(--space); min-width: 0; }
.org-head > div { min-width: 0; }
.org-logo {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  flex: none;
  border-radius: var(--bs-radius-5);
  border: var(--bs-border-width) solid var(--bs-border-color);
  background: var(--bs-bg-1);
  padding: var(--bs-spacer-2);
}
.comp-card .org-logo,
.public-board .org-logo { width: 2.5rem; height: 2.5rem; }

.crumb {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  min-width: 0;
  margin: 0;
}
.crumb-label { flex: none; }
.crumb-event { min-width: 0; overflow-wrap: anywhere; }

.dialog {
  overflow: auto;
  border: 0;
  border-radius: var(--ios-radius);
  background: var(--ios-surface);
}
.dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.dialog > .card { border: 0; background: transparent; box-shadow: none; }
.dialog > form:not(.card-body) { padding: var(--space); }

.fault-page {
  min-height: 60vh;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.date-eu { display: grid; }
.date-eu > input[type="date"] { grid-area: 1 / 1; }
.date-eu > input[type="date"]::-webkit-datetime-edit { color: transparent; }
.date-eu > .date-eu-value {
  grid-area: 1 / 1;
  align-self: stretch;
  margin: 1px 3rem 1px 1px;
  padding: var(--bs-btn-input-padding-y) var(--bs-btn-input-padding-x);
  pointer-events: none;
  background: var(--bs-btn-input-bg);
  border-radius: var(--bs-radius-5) 0 0 var(--bs-radius-5);
  color: var(--bs-fg-body);
}
.date-eu > .date-eu-value.is-blank { color: var(--bs-fg-3); }

.day-plan { display: grid; gap: var(--space); align-items: start; }
.day-plan > .stack { align-self: start; }
@media (min-width: 720px) {
  .day-plan { grid-template-columns: 1fr 1fr; }
  .day-plan > .field { align-self: end; }
  .day-plan:has(> .stack) { column-gap: calc(var(--space) * 2); }
}

.search-row { flex-wrap: nowrap; }
.search-row .form-control { flex: 1 1 auto; width: 1%; min-width: 0; }
.rotate-row {
  display: grid;
  gap: var(--bs-spacer-3);
  padding: var(--space);
  background: var(--bs-bg-1);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-radius-5);
}
.rotate-row .form-control { width: auto; min-width: 12rem; }
.check-row {
  flex: 0 0 auto;
  align-self: flex-start;
}
.check-row label { display: inline-flex; align-items: center; gap: var(--bs-spacer-2); }

.stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space);
  align-items: start;
}
.draw-stage {
  grid-template-areas: "board side";
}
.draw-stage > .board { grid-area: board; }
.draw-stage > .side { grid-area: side; }
.draw-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--bs-spacer-3);
  width: 100%;
}
.draw-full-row {
  display: flex;
  justify-content: flex-end;
  flex: none;
}
.stage.is-round-done { grid-template-columns: minmax(0, 1fr); }
.draw-stage.is-round-done { grid-template-areas: "board"; }
.angler {
  line-height: 1.05;
  min-height: calc(var(--type-paragraph) * 1.05);
}
.draw-face > .angler + p,
.draw-face > .previous,
.board > .angler + p,
.previous {
  min-height: 1.5em;
}
.draw-face {
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
  align-self: flex-start;
}
.draw-wheel {
  --wheel-hub: 36%;
  position: relative;
  width: min(100%, 32rem);
  aspect-ratio: 1;
  align-self: flex-start;
  flex: none;
}
.draw-wheel-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 3;
  width: 0;
  height: 0;
  border-left: 0.75rem solid transparent;
  border-right: 0.75rem solid transparent;
  border-top: 1.35rem solid var(--ios-blue);
  transform: translate(-50%, 0.15rem);
}
.draw-wheel-rim {
  position: absolute;
  inset: 4.5%;
  border-radius: 50%;
  background: var(--ios-fill);
  box-shadow: inset 0 0 0 var(--bs-border-width) var(--ios-separator);
}
.draw-wheel-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
  -webkit-mask: radial-gradient(circle closest-side, transparent var(--wheel-hub), #000 calc(var(--wheel-hub) + 0.5%));
  mask: radial-gradient(circle closest-side, transparent var(--wheel-hub), #000 calc(var(--wheel-hub) + 0.5%));
}
.draw-wheel-spoke {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5.5%;
  pointer-events: none;
}
.draw-wheel-label {
  width: 2.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--bs-fg-body);
  transform-origin: center center;
}
#app .draw-wheel-label { font-weight: 700; }
.draw-wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--wheel-hub);
  height: var(--wheel-hub);
  border-radius: 50%;
  background: var(--ios-surface);
  box-shadow: 0 0 0 var(--bs-border-width) var(--ios-separator);
  transform: translate(-50%, -50%);
  text-align: center;
}
.spot-num {
  line-height: 1;
  margin: 0;
  min-height: 1em;
  font-variant-numeric: tabular-nums;
}
#app .spot-num {
  font-size: var(--type-title);
  font-weight: 700;
}
.spot-num.is-empty { color: var(--bs-fg-4); }
.spot-num.is-blank { visibility: hidden; }
.spot-num.pulse { animation: pop 0.45s ease; }
@keyframes pop { from { transform: scale(0.9); opacity: 0.45; } to { transform: scale(1); opacity: 1; } }
.sector-label { line-height: 1.2; min-height: 1.2em; }
.draw-actions {
  min-height: var(--bs-btn-input-min-height);
  flex: none;
  align-self: flex-start;
}
.chips, .spots { display: flex; flex-wrap: wrap; gap: var(--bs-spacer-2); }
.chips span, .spots span {
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-radius-pill);
  padding: var(--bs-spacer-2) var(--bs-spacer-3);
  color: var(--bs-fg-3);
}
.chips .active {
  color: var(--bs-primary-contrast);
  background: var(--bs-primary-bg);
  border-color: var(--bs-primary-bg);
}
.chips .done { color: var(--bs-fg-body); }
.sector[data-s="1"] { color: #8fd0ea; }
.sector[data-s="2"] { color: #8ddeaf; }
.sector[data-s="3"] { color: #f0cb78; }
.sector[data-s="4"] { color: #f0b09a; }
.sector[data-s="5"] { color: #9ad4cf; }
.sector[data-s="6"] { color: #d7c4f2; }
.sector[data-s="7"] { color: #f3c1d8; }
.sector[data-s="8"] { color: #d5e29a; }
.drawn { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow: auto; }
.drawn.roster { max-height: none; overflow: visible; }
.drawn li { padding: var(--bs-spacer-2) 0; border-bottom: var(--bs-border-width) solid var(--bs-border-color); }
.draw-check summary { cursor: pointer; }

#app .table {
  width: max-content;
  min-width: 100%;
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--bs-radius-5);
}
#app .table > thead > tr:first-child > :first-child {
  border-top-left-radius: var(--bs-radius-5);
}
#app .table > thead > tr:first-child > :last-child {
  border-top-right-radius: var(--bs-radius-5);
}
#app .table:not(:has(> thead)) > tbody > tr:first-child > :first-child {
  border-top-left-radius: var(--bs-radius-5);
}
#app .table:not(:has(> thead)) > tbody > tr:first-child > :last-child {
  border-top-right-radius: var(--bs-radius-5);
}
#app .table > tbody:last-child > tr:last-child > :first-child {
  border-bottom-left-radius: var(--bs-radius-5);
}
#app .table > tbody:last-child > tr:last-child > :last-child {
  border-bottom-right-radius: var(--bs-radius-5);
}
table.share-cols {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
}
table.share-cols col.col-organiser { width: auto; }
table.share-cols col.col-name {
  width: auto;
  min-width: 10rem;
}
table.share-cols col.col-num { width: 1%; }
table.share-cols col.col-event { width: auto; }
table.share-cols th,
table.share-cols td { white-space: nowrap; }
td.fit { width: 1%; }
td.fit .form-control { width: 4.5rem; max-width: none; }
input[data-kind="weight"] { appearance: textfield; }
input[data-kind="weight"]::-webkit-outer-spin-button,
input[data-kind="weight"]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.table-responsive.results-full { max-height: none; height: auto; overflow-x: auto; overflow-y: visible; }

.btn-slot { display: inline-flex; vertical-align: middle; max-width: 100%; }
.btn-slot:has(> .btn:disabled) { cursor: not-allowed; }
.btn-slot:has(> [hidden]) { display: none; }
.action-menu { position: relative; display: inline-block; }
.action-menu > summary { list-style: none; }
.action-menu > summary::-webkit-details-marker { display: none; }
.action-menu-list {
  position: fixed;
  z-index: 6;
  display: grid;
  gap: var(--bs-spacer-2);
  min-width: 12rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow: auto;
  padding: var(--bs-spacer-2);
  background: var(--ios-surface);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-radius-5);
  box-shadow: var(--bs-box-shadow);
}
.action-menu-list .btn { width: 100%; justify-content: flex-start; }

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.captcha { min-height: 78px; }
.live-pill { display: flex; align-items: center; gap: var(--bs-spacer-2); margin: 0; max-width: 100%; color: var(--bs-green-600); }
.live-pill > span:not(.live-dot) { min-width: 0; }
.live-dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--bs-green-500);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bs-green-500) 65%, transparent);
  animation: live-pulse 1.6s ease-out infinite;
}
@keyframes live-pulse {
  70% { box-shadow: 0 0 0 0.45rem transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (width < 1024px) {
  .nav-toggle { display: inline-flex; align-self: center; }
  #site-nav { display: none; flex-basis: 100%; }
  #site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--bs-spacer-2);
    padding-bottom: var(--bs-spacer-2);
  }
  #site-nav.is-open .form-control:not(.lang),
  #site-nav.is-open .nav-link { width: 100%; }
  #site-nav.is-open .lang.form-control {
    width: auto;
    align-self: flex-start;
  }
}

@media (width >= 1024px) {
  header.navbar .container-fluid { flex-wrap: nowrap; }
  #site-nav {
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    gap: var(--bs-spacer-2);
  }
}

@media (max-width: 800px) {
  .stage { grid-template-columns: 1fr; }
  .draw-stage {
    grid-template-areas:
      "board"
      "side";
  }
  .draw-stage.is-round-done { grid-template-areas: "board"; }
  .drawn { max-height: 11rem; }
  .drawn.roster { max-height: none; }
  .keys { display: none; }
}

@media (max-width: 640px) {
  html { font-size: 75%; }
}

@media (prefers-reduced-motion: reduce) {
  .spot-num.pulse, .live-dot { animation: none; }
  .draw-wheel-disc { transition: none; }
}