/* ===== AusCarts Teen League — scoped styles (v3) ===== */

.atl-root, .atl-root * { box-sizing: border-box; }

/* Keyframes */
@keyframes atlStreak { from { transform: translateX(-45%) skewX(-18deg); } to { transform: translateX(165%) skewX(-18deg); } }
@keyframes atlPulse  { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes atlPop    { from { transform: translateY(16px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes atlSpin   { to { transform: rotate(360deg); } }
@keyframes atlEditorIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* Nav, week cards, buttons */
.atl-nav span { cursor: pointer; transition: color .15s; }
.atl-nav span:hover { color: #2D8CFF; }
.atl-weekcard { transition: transform .2s, border-color .2s; }
.atl-weekcard:hover { transform: translateY(-6px); border-color: rgba(54,224,255,.6); }
.atl-weekcard.is-active { border-color: rgba(54,224,255,.55); }
/* Neon underline on the selected round card. ::after rides the bottom edge so it
   reads as a light bar regardless of card padding. */
.atl-weekcard::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #36E0FF, #2D8CFF);
  box-shadow: 0 0 8px rgba(54,224,255,.95), 0 0 16px rgba(54,224,255,.6);
  opacity: 0;
  transform: scaleX(.4);
  transform-origin: center;
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.atl-weekcard.is-active::after { opacity: 1; transform: scaleX(1); }
.atl-weekcard:hover::after { opacity: .5; transform: scaleX(.8); }
.atl-btn { transition: filter .2s, transform .2s; }
.atl-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.atl-close { transition: background .15s; }
.atl-close:hover { background: rgba(255,255,255,.1); }

/* Podium */
.atl-podium { transition: transform .22s, box-shadow .22s; }
.atl-podium:hover { transform: translateY(-8px) scale(1.035); box-shadow: 0 22px 60px rgba(0,0,0,.55); }
.atl-podium.atl-podium--p1:hover { transform: translateY(-10px) scale(1.04); box-shadow: 0 26px 70px rgba(0,0,0,.6); }

/* Clickable names */
.atl-name { cursor: pointer; width: fit-content; transition: opacity .15s; }
.atl-name:hover { opacity: .75; }

/* Modal */
.atl-modal { animation: atlPop .22s ease-out; }

/* Staff uploader */
.atl-uploader { display: none; }
.atl-uploader.is-open { display: block; }
.atl-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #36E0FF; border-radius: 50%; animation: atlSpin .7s linear infinite; vertical-align: middle; }

/* ── Drag editor ─────────────────────────────────────────────────────── */
[data-atl-drag-editor] { animation: atlEditorIn .18s ease-out; }

.atl-editor-row {
  display: grid;
  grid-template-columns: 32px 116px 1fr 90px 130px 58px;
  gap: 16px;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(161,75,255,.15);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: grab;
  user-select: none;
  transition: border-color .15s, background .15s, opacity .15s;
  position: relative;
}
.atl-editor-row:hover { border-color: rgba(161,75,255,.4); background: rgba(255,255,255,.05); }
.atl-editor-row.atl-dragging { opacity: .35; cursor: grabbing; }
.atl-editor-row:active { cursor: grabbing; }
.atl-editor-row.atl-row-dns,
.atl-editor-row.atl-row-dnf { opacity: .78; }

/* Grid items default to min-width:auto, which lets unshrinkable content (like
   the DNS/DNF buttons below) push past its own track and visually bleed into
   the next column instead of respecting the track width. min-width: 0 on
   every direct child forces each column to actually honour its track size. */
.atl-editor-row > * { min-width: 0; }

/* DNS / DNF status toggle buttons */
.atl-status-btns { display: flex; gap: 4px; margin-top: 5px; width: 100%; overflow: hidden; }
.atl-status-btn {
  flex: 1 1 0; min-width: 0; font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 0; border-radius: 6px; cursor: pointer; line-height: 1;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.04);
  color: #6a5b8a; transition: color .12s, background .12s, border-color .12s;
  overflow: hidden; text-overflow: clip; white-space: nowrap; text-align: center;
}
.atl-status-btn:hover { color: #ECE8F5; border-color: rgba(255,255,255,.4); }
.atl-status-btn.is-active[data-status-btn="dns"] { background: #ff5470; border-color: #ff5470; color: #1a0510; }
.atl-status-btn.is-active[data-status-btn="dnf"] { background: #ffb020; border-color: #ffb020; color: #1a0f00; }

/* Drop indicators — a coloured line above or below the target row */
.atl-editor-row.atl-drag-over-before::before {
  content: '';
  display: block;
  position: absolute;
  top: -5px; left: 0; right: 0;
  height: 3px;
  background: #36E0FF;
  border-radius: 2px;
  pointer-events: none;
}
.atl-editor-row.atl-drag-over-after::after {
  content: '';
  display: block;
  position: absolute;
  bottom: -5px; left: 0; right: 0;
  height: 3px;
  background: #36E0FF;
  border-radius: 2px;
  pointer-events: none;
}

/* Inline-editable cells */
.atl-editable { cursor: text; border-radius: 4px; transition: background .12s; padding: 2px 4px; margin: -2px -4px; }
.atl-editable:hover { background: rgba(161,75,255,.18); }
.atl-editable.atl-editing { background: rgba(161,75,255,.25); outline: 1px solid rgba(161,75,255,.6); }
.atl-editable input {
  background: transparent; border: none; outline: none;
  color: #fff; font-family: inherit; font-size: inherit; font-weight: inherit;
  width: 100%; padding: 0; margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .atl-grid-6 { grid-template-columns: repeat(3, 1fr) !important; }
  .atl-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .atl-podium-grid { grid-template-columns: 1fr !important; }
  .atl-podium { margin-top: 0 !important; }
  .atl-info-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .atl-h1 { font-size: 78px !important; }
  .atl-h2 { font-size: 44px !important; white-space: normal !important; }
  .atl-editor-row { grid-template-columns: 28px 92px 1fr 70px 100px 44px !important; }
}
@media (max-width: 560px) {
  .atl-grid-6 { grid-template-columns: repeat(2, 1fr) !important; }
  .atl-h1 { font-size: 56px !important; }
  .atl-editor-row { grid-template-columns: 28px 78px 1fr 50px !important; }
  .atl-editor-row .atl-lap-col, .atl-editor-row .atl-pts-col { display: none; }
}

/* ── Select options dark background ──────────────────────────── */
.atl-root select option { background-color: #1a1030; color: #ECE8F5; }

/* ── Bracket tabs ────────────────────────────────────────────── */
.atl-tab {
  font-family: 'Saira', sans-serif; font-weight: 800; font-size: 15px;
  text-transform: uppercase; letter-spacing: .04em; cursor: pointer;
  color: #9b8fb8; background: rgba(255,255,255,.04);
  border: 1px solid rgba(161,75,255,.25); border-radius: 100px;
  padding: 10px 22px; transition: color .15s, background .15s, border-color .15s;
}
.atl-tab:hover { color: #ECE8F5; border-color: rgba(54,224,255,.5); }
.atl-tab.is-active {
  color: #061021;
  background: linear-gradient(135deg,#36E0FF,#A14BFF);
  border-color: transparent;
}
.atl-tab .atl-tab-sub {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .12em; opacity: .8; margin-left: 8px;
}

/* ── Inline position input (type-to-set ordering) ─────────────── */
.atl-pos-input {
  width: 46px; text-align: center; font-family: 'Anton', sans-serif; font-size: 20px;
  color: #fff; background: rgba(54,224,255,.08); border: 1px solid rgba(54,224,255,.35);
  border-radius: 8px; padding: 4px 0; outline: none; -moz-appearance: textfield;
}
.atl-pos-input::-webkit-outer-spin-button,
.atl-pos-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.atl-pos-input:focus { border-color: #36E0FF; background: rgba(54,224,255,.14); }


/* ── Scoring squircle chips ──────────────────────────────────── */
.atl-score-chip {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:54px;min-height:60px;background:rgba(255,255,255,.04);
  border:1px solid rgba(161,75,255,.3);border-radius:10px;
  padding:5px 4px 7px;cursor:pointer;position:relative;
  transition:border-color .15s,background .15s;
}
.atl-score-chip:hover { border-color:rgba(54,224,255,.6);background:rgba(54,224,255,.06); }
.atl-score-chip.atl-chip-editing { border-color:rgba(54,224,255,.7);background:rgba(54,224,255,.1); }
.atl-score-chip-lbl { font-family:'JetBrains Mono',monospace;font-size:9px;color:#9b8fb8;letter-spacing:.1em;line-height:1;margin-bottom:3px;pointer-events:none; }
.atl-score-chip-val { font-family:'Anton',sans-serif;font-size:19px;color:#fff;line-height:1;pointer-events:none; }
.atl-score-chip input { font-family:'Anton',sans-serif;font-size:19px;color:#fff;background:transparent;border:none;text-align:center;outline:none;width:44px;padding:0; }
.atl-score-chip-del { position:absolute;top:-7px;right:-7px;width:16px;height:16px;border-radius:50%;background:#A14BFF;color:#fff;font-size:11px;line-height:16px;text-align:center;cursor:pointer;display:none; }
.atl-score-chip:hover .atl-score-chip-del { display:block; }
.atl-score-chip-add { display:flex;align-items:center;justify-content:center;width:54px;min-height:60px;background:rgba(54,224,255,.07);border:2px dashed rgba(54,224,255,.4);border-radius:10px;cursor:pointer;transition:border-color .15s;font-family:'Anton',sans-serif;font-size:26px;color:#36E0FF;line-height:1; }
.atl-score-chip-add:hover { border-color:rgba(54,224,255,.8); }
.atl-score-chip-fallback { display:flex;flex-direction:column;align-items:center;justify-content:center;width:54px;min-height:60px;background:rgba(255,255,255,.02);border:1px solid rgba(161,75,255,.12);border-radius:10px;opacity:.4; }

/* ── Gravity Forms overrides inside .atl-root ─────────────────── */
.atl-root .gform_wrapper,.atl-root .gform_wrapper *{box-sizing:border-box!important}
.atl-root .gform_wrapper{max-width:100%!important;background:none!important;margin:0!important;padding:0!important}
.atl-root .gform_wrapper .gform_heading,.atl-root .gform_wrapper .gform_description{display:none!important}
.atl-root .gform_wrapper ul.gform_fields{list-style:none!important;padding:0!important;margin:0 0 10px!important}
.atl-root .gform_wrapper li.gfield{padding:0!important;margin:0 0 10px!important}
.atl-root .gform_wrapper .gfield_label,.atl-root .gform_wrapper .gfield_required{display:none!important}
.atl-root .gform_wrapper input[type="email"],
.atl-root .gform_wrapper input[type="text"],
.atl-root .gform_wrapper input[type="tel"] {
  background:rgba(7,6,15,.6)!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:100px!important;
  padding:18px 24px!important;
  color:#fff!important;
  font-family:'Saira',sans-serif!important;
  font-size:16px!important;
  width:100%!important;
  outline:none!important;
  box-shadow:none!important;
  height:auto!important;
}
.atl-root .gform_wrapper input[type="email"]::placeholder,
.atl-root .gform_wrapper input[type="text"]::placeholder {color:rgba(255,255,255,.45)!important}
.atl-root .gform_wrapper .gform_footer,.atl-root .gform_wrapper .gform_page_footer{padding:0!important;margin:0!important;border:none!important;background:none!important}
.atl-root .gform_wrapper .gform_footer input[type="submit"],
.atl-root .gform_wrapper input.gform_button,
.atl-root .gform_wrapper .gform_footer button,
.atl-root .gform_wrapper .gform_next_button {
  font-family:'Saira',sans-serif!important;
  font-weight:800!important;
  font-style:italic!important;
  font-size:17px!important;
  letter-spacing:.04em!important;
  color:#061021!important;
  background:linear-gradient(135deg,#36E0FF,#2D8CFF)!important;
  border:none!important;
  border-radius:100px!important;
  padding:18px 30px!important;
  cursor:pointer!important;
  text-transform:uppercase!important;
  box-shadow:0 12px 40px rgba(54,224,255,.4)!important;
  width:100%!important;
  margin-top:8px!important;
  display:block!important;
  transition:filter .2s!important;
}
.atl-root .gform_wrapper .gform_footer input[type="submit"]:hover{filter:brightness(1.08)!important}
.atl-root .gform_wrapper .gfield_validation_message,
.atl-root .gform_wrapper .validation_message {
  color:#ff9d9d!important;font-family:'JetBrains Mono',monospace!important;
  font-size:11px!important;letter-spacing:.1em!important;
  background:none!important;border:none!important;padding:4px 0!important;margin-top:6px!important;
}
.atl-root .gform_wrapper .validation_error {
  background:rgba(255,60,60,.1)!important;border:1px solid rgba(255,100,100,.3)!important;
  border-radius:8px!important;color:#ff9d9d!important;font-family:'JetBrains Mono',monospace!important;
  font-size:12px!important;padding:12px 16px!important;margin-bottom:12px!important;
}
.atl-root .gform_confirmation_message{font-family:'JetBrains Mono',monospace!important;font-size:13px!important;letter-spacing:.1em!important;color:#36E0FF!important;text-align:center!important;padding:20px 0!important}