/* styles.css */

/* styles/context-help.css */
.context-help-button { display:inline-flex; align-items:center; justify-content:center; flex:0 0 32px; width:32px; height:32px; min-width:32px; min-height:32px; margin:0 6px 0 0; padding:0; border:1px solid #485357; border-radius:50%; background:#171d20; color:#d4dfe2; font:inherit; font-size:16px; font-weight:600; line-height:1; cursor:pointer; align-self:center; }
.context-help-button>span { pointer-events:none; }
.context-help-button:hover { background:#263237; border-color:#82cdd2; }
.context-help-button:focus-visible,.context-help-close:focus-visible { outline:2px solid #82cdd2; outline-offset:3px; }
.context-help-dialog { box-sizing:border-box; width:min(520px,calc(100vw - 24px)); max-height:calc(100dvh - 32px); margin:auto; padding:0; border:1px solid #485357; border-radius:16px; background:#141a1d; color:#f0f4f5; box-shadow:0 20px 80px #0009; overflow:auto; overscroll-behavior:contain; text-align:left; }
.context-help-dialog::backdrop { background:rgba(0,0,0,.65); }
.context-help-dialog>header { display:flex; align-items:center; justify-content:space-between; gap:12px; position:sticky; top:0; padding:16px 18px; background:#141a1d; border-bottom:1px solid #344044; }
.context-help-dialog h2 { margin:0; font-size:19px; line-height:1.3; }
.context-help-close { display:flex; align-items:center; justify-content:center; flex:0 0 44px; height:44px; border:1px solid #485357; border-radius:9px; background:#202a2e; color:#fff; font-size:26px; cursor:pointer; }
.context-help-body { display:grid; gap:20px; padding:20px; }
.context-help-dialog h3 { margin:0 0 7px; font-size:15px; line-height:1.4; }
.context-help-dialog p { margin:0; color:#c6d1d5; font-size:15px; line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:600px) { .context-help-dialog>header { padding:12px 14px; } .context-help-body { padding:16px; } }

.context-help-dialog ol { margin:0; padding-left:24px; color:#d5dfe2; font-size:15px; line-height:1.6; }
.context-help-dialog li+li { margin-top:12px; }
.context-help-dialog li::marker { color:#82cdd2; font-weight:700; }
.registration-workspace-head>.context-help-button { margin:0; }



/* styles/foundation.css */


/* =========================================================
   VARIABLES
========================================================= */

:root {
  --bg: #090a0b;
  --panel: #111315;
  --panel2: #17191c;
  --panel3: #1d2023;
  --border: #292d31;

  --text: #f2f2f2;
  --muted: #92979c;

  --blue: #2589d8;
  --green: #31b86b;
  --yellow: #e4c341;
  --red: #e34c4c;

  --accent: #7ee38f;
}


/* =========================================================
   BASE
========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input {
  font-family: inherit;
}

button {
  cursor: pointer;
}


/* =========================================================
   BARRE ARC
========================================================= */

.top-stripes {
  height: 5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.top-stripes div:nth-child(1) {
  background: var(--blue);
}

.top-stripes div:nth-child(2) {
  background: var(--green);
}

.top-stripes div:nth-child(3) {
  background: var(--yellow);
}

.top-stripes div:nth-child(4) {
  background: var(--red);
}


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

header {
  background: #0d0f10;
  border-bottom: 1px solid var(--border);
  padding: 18px 20px;
}

.header-inner {
  max-width: 1100px;
  margin: auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;
}

.logo {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
}

.logo span {
  color: var(--green);
}


/* =========================================================
   MAIN
========================================================= */

main {
  max-width: 1100px;
  margin: auto;
  padding: 25px 18px 50px;
}

.page-title {
  font-size: 28px;
  font-weight: 900;
  margin-bottom: 5px;
}

.page-subtitle {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 25px;
}


/* =========================================================
   BOUTONS GENERAUX
========================================================= */

.primary-button {
  border: 0;
  background: var(--green);
  color: #07100a;

  font-weight: 900;

  padding: 11px 16px;

  border-radius: 4px;
}

.primary-button:hover {
  filter: brightness(1.08);
}

.secondary-button {
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);

  font-weight: 800;

  padding: 10px 15px;

  border-radius: 4px;
}

.secondary-button:hover {
  background: var(--panel3);
}

.back-button {
  margin-bottom: 20px;
}


/* =========================================================
   CARTES EVENEMENTS
========================================================= */

.event-list {
  display: grid;
  gap: 12px;
}

.event-agenda { display: grid; gap: 30px; }
.event-period { min-width: 0; }
.event-period-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; margin: 4px 0 14px; padding-bottom: 10px; border-bottom: 1px solid #344147; color: #eef5f3; font-size: 19px; line-height: 1.4; }
.event-period-heading > span::first-letter { text-transform: uppercase; }
.event-period-heading small { color: #aababb; font-size: 13px; font-weight: 500; }

.event-card {
  position: relative;

  overflow: hidden;

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 7px;

  padding: 17px 18px 17px 23px;

  cursor: pointer;

  transition: .15s;
}

.event-card:hover {
  background: var(--panel2);

  border-color: #3a4045;

  transform: translateX(2px);
}

.event-card::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background: var(--event-accent, var(--green));
}

.event-card.event-type-special { --event-accent: #e23a3a; }
.event-card.event-type-lmu { --event-accent: #2bc56f; }
.event-card.event-type-private { --event-accent: #4c98ef; }
.event-card-body { display: block; min-width: 0; }
.event-card-title-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; min-width: 0; }
.event-card { min-height: 210px; padding-right: 350px; }
.event-card .circuit-visual { position: absolute; top: 18px; right: 20px; width: 310px; height: 174px; }
.event-card .circuit-visual img { width: 100%; height: 100%; object-fit: contain; }
.event-card-title-row .event-name { margin: 0; }
.event-card-title-row .event-info { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.event-card-status { display: grid; gap: 4px; margin-top: 15px; }
.event-card.archived { opacity: .58; filter: saturate(.55); }
.event-card.archived:hover { opacity: .82; filter: saturate(.8); }
.event-filter { display: inline-flex; gap: 5px; margin: 2px 0 16px; padding: 4px; border: 1px solid #303a3f; border-radius: 9px; background: #111719; }
.event-filter-button { min-height: 36px; padding: 7px 13px; border: 1px solid transparent; border-radius: 6px; color: #aebcbe; background: transparent; font-size: 13px; font-weight: 800; }
.event-filter-button[aria-pressed="true"] { color: #edfff3; border-color: #438768; background: #1c4032; }

.event-name {
  font-size: 17px;
  font-weight: 900;

  margin-bottom: 7px;
}

.event-info {
  color: var(--muted);
  font-size: 12px;
}

.event-countdown {
  margin-top: 10px;
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
}

.event-countdown:empty { display: none; }
.event-countdown.upcoming { color: var(--green); }
.event-countdown.soon { color: #f0a23a; }
.event-countdown.running { color: var(--red); }
.event-countdown.finished { color: var(--muted); }
.event-countdown-primary {
  margin-top: 12px;
  font-size: clamp(30px, 4.5vw, 46px);
  line-height: 1;
  font-weight: 950;
  letter-spacing: .8px;
}
.event-countdown-primary.running {
  color: var(--red);
  text-shadow: 0 0 18px rgba(227,76,76,.18);
}


/* =========================================================
   FORMULAIRE CREATION
========================================================= */

.empty {
  background: var(--panel);

  border: 1px dashed var(--border);

  padding: 30px;

  text-align: center;

  color: var(--muted);

  border-radius: 6px;
}

.form-panel {
  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 7px;

  padding: 20px;
}

.form-group {
  margin-bottom: 18px;
}

.form-label {
  display: block;

  color: var(--muted);

  font-size: 11px;
  font-weight: 900;

  text-transform: uppercase;

  margin-bottom: 8px;

  letter-spacing: .5px;
}

input {
  width: 100%;

  background: var(--panel2);

  border: 1px solid var(--border);

  color: var(--text);

  border-radius: 4px;

  padding: 11px;

  outline: none;
}

input:focus {
  border-color: var(--green);
}

.departure-fields {
  display: grid;
  gap: 10px;
}

.departure-field {
  display: grid;

  grid-template-columns: 1fr 140px 40px;

  gap: 8px;

  align-items: center;
}

.remove-departure {
  height: 38px;

  border: 1px solid var(--border);

  background: #211719;

  color: var(--red);

  border-radius: 4px;

  font-weight: 900;
}


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

.event-header {
  margin-bottom: 22px;
}
.event-heading-line { display: flex; align-items: center; justify-content: space-between; gap: 18px; }

.event-title {
  font-size: 27px;
  font-weight: 900;

  margin-bottom: 5px;
}

.event-subtitle {
  color: var(--muted);
  font-size: 12px;
}
.event-subtitle .event-type-badge { margin-right: 9px; }


/* =========================================================
   NOM PILOTE
========================================================= */

.pilot-name-panel {
  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 7px;

  padding: 15px;

  margin-bottom: 18px;
}

.pilot-name-panel input {
  max-width: 450px;
}


/* =========================================================
   DEPART
========================================================= */

.departures {
  display: grid;
  gap: 14px;
}

.departure {
  overflow: hidden;

  background: var(--panel);

  border: 1px solid var(--border);

  border-radius: 7px;

  transition: .2s;
}

.departure.finished {
  opacity: .62;

  border-color: #222528;
}

.departure.finished:hover {
  opacity: .82;
}

.departure-header {
  display: flex;

  justify-content: space-between;
  align-items: center;

  gap: 15px;

  padding: 14px 16px;

  background: var(--panel2);

  border-bottom: 1px solid var(--border);
}

.departure.finished .departure-header {
  background: #101214;

  border-bottom: 0;
}

.departure-date {
  font-size: 13px;

  font-weight: 900;

  text-transform: uppercase;
}

.departure-time {
  margin-left: 7px;

  color: var(--green);
}

.departure.finished .departure-time {
  color: var(--muted);
}

.departure-countdown {
  color: var(--muted);

  font-size: 11px;

  text-align: right;

  white-space: nowrap;
}

.departure-countdown.upcoming {
  color: var(--green);

  font-weight: 800;
}

.departure-countdown.finished {
  color: var(--muted);
}

.finished-label {
  margin-left: auto;

  margin-right: 10px;

  color: var(--muted);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;
}

.departure-toggle {
  border: 1px solid var(--border);

  background: #1c1f22;

  color: var(--muted);

  padding: 6px 9px;

  border-radius: 3px;

  font-size: 10px;

  font-weight: 900;
}

.departure-toggle:hover {
  background: #25292c;

  color: var(--text);
}


/* =========================================================
   LISTE PILOTES
========================================================= */

.pilot-section {
  padding: 12px;
}

.pilot-section-title {
  color: var(--muted);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 1px;

  margin-bottom: 7px;
}

.pilot-list {
  display: grid;

  gap: 4px;
}


/* =========================================================
   GROUPES CATEGORIES
========================================================= */

.category-group {
  margin-bottom: 10px;
}

.category-group:last-child {
  margin-bottom: 0;
}

.category-group-header {
  display: flex;

  align-items: center;

  gap: 7px;

  padding: 6px 7px;

  margin-bottom: 4px;

  background: #0e1011;

  border-left: 3px solid var(--border);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: 1px;

  color: var(--muted);
}

.category-group-header img {
  width: 25px;
  height: 17px;

  object-fit: contain;
}

.category-group-header.hyper {
  border-left-color: var(--blue);
}

.category-group-header.lmp2 {
  border-left-color: var(--green);
}

.category-group-header.lmp3 {
  border-left-color: var(--yellow);
}

.category-group-header.gt3 {
  border-left-color: var(--red);
}

.category-count {
  margin-left: auto;

  color: #656a6f;

  font-size: 8px;
}


/* =========================================================
   LIGNE PILOTE
========================================================= */

.pilot-row {
  display: grid;

  grid-template-columns:
    minmax(100px, 1fr)
    30px
    78px
    30px;

  align-items: center;

  gap: 8px;

  min-height: 34px;

  padding: 5px 7px;

  background: var(--panel2);

  border: 1px solid rgba(255,255,255,.035);

  border-radius: 4px;
}

.pilot-name {
  font-size: 12px;

  font-weight: 800;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Petit logo catégorie */

.pilot-category-logo {
  width: 30px;
  height: 25px;

  display: flex;

  align-items: center;
  justify-content: center;
}

.pilot-category-logo img {
  max-width: 30px;
  max-height: 22px;

  object-fit: contain;
}


/* =========================================================
   BARRE DISPONIBILITE PILOTE
========================================================= */

.availability-bar {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 2px;

  height: 17px;
}

.availability-segment {
  background: #292d31;

  border-radius: 2px;
}

.availability-segment.beginning.active {
  background: var(--green);
}

.availability-segment.middle.active {
  background: var(--yellow);
}

.availability-segment.end.active {
  background: var(--red);
}

.availability-whole {
  grid-column: 1 / 4;

  background: var(--green);

  border-radius: 2px;
}

.availability-unavailable {
  grid-column: 1 / 4;

  background: #35383b;

  border-radius: 2px;
}


/* =========================================================
   EDIT
========================================================= */

.edit-button {
  width: 28px;
  height: 25px;

  border: 1px solid var(--border);

  border-radius: 3px;

  background: #25282b;

  color: var(--muted);

  font-size: 11px;
}

.edit-button:hover {
  color: var(--text);

  background: #303438;
}


/* =========================================================
   FORMULAIRE INSCRIPTION
========================================================= */

.form-section {
  padding: 13px;

  border-top: 1px solid var(--border);

  background: #0f1112;
}

.form-section.editing {
  border-top-color: var(--green);
}

.form-title {
  font-size: 10px;

  font-weight: 900;

  margin-bottom: 8px;

  text-transform: uppercase;

  color: var(--muted);

  letter-spacing: .7px;
}


/* =========================================================
   NOUVELLE BARRE DE DISPONIBILITE
========================================================= */

.relay-container {
  margin-bottom: 10px;
}

.relay-bar {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 3px;

  background: #0a0c0d;

  padding: 3px;

  border: 1px solid var(--border);

  border-radius: 6px;

  height: 48px;
}

.relay-button {
  border: 0;

  background: #202427;

  color: #777d82;

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .5px;

  position: relative;

  transition: .12s;
}

.relay-button:first-child {
  border-radius: 4px 2px 2px 4px;
}

.relay-button:last-child {
  border-radius: 2px 4px 4px 2px;
}

.relay-button:hover {
  background: #292d31;

  color: white;
}

.relay-button.active.beginning {
  background: var(--green);

  color: #07100a;
}

.relay-button.active.middle {
  background: var(--yellow);

  color: #151200;
}

.relay-button.active.end {
  background: var(--red);

  color: white;
}


/* =========================================================
   OPTIONS SPECIALES
========================================================= */

.special-availability {
  display: flex;

  gap: 5px;

  margin-bottom: 12px;
}

.special-button {
  border: 1px solid var(--border);

  background: var(--panel2);

  color: var(--muted);

  border-radius: 4px;

  padding: 7px 11px;

  font-size: 9px;

  font-weight: 900;

  flex: 1;
}

.special-button:hover {
  background: var(--panel3);

  color: var(--text);
}

.special-button.active.whole {
  background: var(--green);

  border-color: var(--green);

  color: #07100a;
}

.special-button.active.unavailable {
  background: #3b3e41;

  border-color: #555a5e;

  color: white;
}


/* =========================================================
   CATEGORIES
========================================================= */

.category-area {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  padding-top: 4px;
}

.category-label {
  color: var(--muted);

  font-size: 9px;

  font-weight: 900;

  letter-spacing: .7px;

  white-space: nowrap;
}

.categories {
  display: flex;

  justify-content: flex-end;

  gap: 5px;

  flex-wrap: wrap;
}

.category-button {
  width: 82px;
  height: 40px;

  border: 1px solid var(--border);

  background: var(--panel2);

  color: var(--muted);

  border-radius: 4px;

  font-weight: 900;

  font-size: 8px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 4px;

  transition: .12s;
}

.category-button img {
  max-width: 42px;
  max-height: 23px;

  object-fit: contain;
}

.category-button:hover {
  background: var(--panel3);

  color: var(--text);
}

.category-button.active.hyper {
  background: var(--blue);

  border-color: var(--blue);

  color: #071017;
}

.category-button.active.lmp2 {
  background: var(--green);

  border-color: var(--green);

  color: #07100a;
}

.category-button.active.lmp3 {
  background: var(--yellow);

  border-color: var(--yellow);

  color: #151200;
}

.category-button.active.gt3 {
  background: var(--red);

  border-color: var(--red);

  color: white;
}


/* =========================================================
   SAUVEGARDE
========================================================= */

.save-row {
  margin-top: 12px;

  display: flex;

  justify-content: flex-end;
}

.save-button {
  border: 0;

  background: var(--accent);

  color: #07100a;

  font-size: 10px;

  font-weight: 900;

  padding: 9px 15px;

  border-radius: 4px;
}

.save-button:hover {
  filter: brightness(1.08);
}


/* =========================================================
   HISTORIQUE
========================================================= */

.finished-history {
  padding: 10px 12px;

  border-top: 1px solid var(--border);

  color: var(--muted);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .6px;
}


/* =========================================================
   LEGENDE
========================================================= */

.legend {
  padding: 10px 12px;

  border-top: 1px solid var(--border);

  color: var(--muted);

  font-size: 9px;
}

.legend span {
  margin-right: 10px;
}



/* styles/application.css */
/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

  main {
    padding: 18px 10px 40px;
  }

  .departure-header {
    align-items: flex-start;
  }

  .departure-countdown {
    font-size: 9px;
  }

  .departure-field {
    grid-template-columns:
      1fr
      105px
      38px;
  }

  .pilot-row {
    grid-template-columns:
      minmax(80px, 1fr)
      30px
      70px
      28px;
  }

  .category-area {
    align-items: flex-start;

    flex-direction: column;

    gap: 7px;
  }

  .categories {
    width: 100%;

    justify-content: flex-start;
  }

  .category-button {
    width: 75px;
  }

  .finished-label {
    display: none;
  }
}

.event-creation .form-label { font-size: 14px; }
.creation-fieldset { border: 0; padding: 0; min-width: 0; }
.creation-help { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.event-creation { display: grid; gap: 18px; padding: 0; background: transparent; border: 0; }
.creation-intro { padding: 4px 2px 2px; }
.creation-intro h2 { margin: 5px 0 7px; font-size: clamp(22px, 3vw, 30px); color: var(--text); }
.creation-intro p { margin: 0; max-width: 680px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.creation-kicker { color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: 1.4px; }
.creation-card { padding: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
.creation-card-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.creation-card-heading h2, .creation-card-heading legend { margin: 0 0 5px; color: var(--text); font-size: 17px; font-weight: 900; }
.creation-card-heading p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.creation-step { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; border: 1px solid var(--green); border-radius: 50%; color: var(--green); font-size: 11px; font-weight: 900; }
.creation-field-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(150px, .65fr); gap: 16px; }
.creation-field-grid > .form-label { margin: 0; }
.creation-field-grid input, .creation-field-grid select { display: block; margin-top: 8px; }
.creation-field-grid small { display: block; margin-top: 7px; color: var(--muted); font-size: 12px; font-weight: 400; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.creation-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
.creation-actions .creation-error { margin-right: auto; }
select { width: 100%; min-height: 46px; padding: 10px 42px 10px 13px; border: 1px solid var(--border); border-radius: 8px; background-color: var(--panel2); color: var(--text); color-scheme: dark; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 20px, calc(100% - 12px) 20px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
select:focus { border-color: var(--green); outline: none; }
.event-creation select { max-width: none; }
.event-category-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.event-category-option { display: flex; align-items: center; gap: 10px; padding: 14px; background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; font-size: 16px; }
.event-category-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }
.hyper { --category-color: #ed2420; }
.lmp2 { --category-color: #1263a5; }
.lmp3 { --category-color: #8c3980; }
.gt3 { --category-color: #20b96b; }
.gte { --category-color: #f07808; }
.event-category-option:has(input:checked) { border-color: var(--category-color); background: color-mix(in srgb, var(--category-color) 22%, var(--panel)); box-shadow: inset 0 -3px var(--category-color); }
.event-category-option input { accent-color: var(--category-color); flex-shrink: 0; }
.event-category-option .category-logo { width: 44px; height: 42px; object-fit: contain; flex-shrink: 0; }
.event-category-option { flex-wrap: wrap; }
.category-text-logo { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 2px solid currentColor; border-radius: 4px; font-size: 13px; font-weight: 900; }
.category-group-header.hyper, .category-group-header.lmp2, .category-group-header.lmp3, .category-group-header.gt3, .category-group-header.gte { border-left-color: var(--category-color); }
.category-button.active.hyper, .category-button.active.lmp2, .category-button.active.lmp3, .category-button.active.gt3, .category-button.active.gte { background: color-mix(in srgb, var(--category-color) 28%, var(--panel)); border-color: var(--category-color); color: var(--text); box-shadow: inset 0 -3px var(--category-color); }
.event-category-badges { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.event-category-badge { display: inline-flex; align-items: center; gap: 8px; min-width: 132px; padding: 7px 10px; border: 1px solid var(--category-color); border-radius: 7px; font-size: 14px; background: color-mix(in srgb, var(--category-color) 15%, var(--panel)); }
.event-category-badge img { width: 28px; height: 28px; object-fit: contain; }
.event-category-copy { display: grid; gap: 2px; min-width: 0; }
.event-category-copy strong { color: #f3f8f6; font-size: 13px; line-height: 1.15; }
.event-category-copy small { color: #b9c8c8; font-size: 11px; line-height: 1.15; }
.event-type-badge { display: inline-flex; align-items: center; padding: 5px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase; }
.event-type-badge.special { color: #ff5a5a; background: rgba(210,35,35,.16); }
.event-type-badge.lmu { color: #36d37d; background: rgba(35,170,90,.16); }
.event-type-badge.private { color: #58a8ff; background: rgba(45,120,220,.16); }
.event-type-special { --event-accent: #e23a3a; }
.event-type-lmu { --event-accent: #2bc56f; }
.event-type-private { --event-accent: #4c98ef; }
.event-type-special .event-title, .event-type-lmu .event-title, .event-type-private .event-title { border-left: 5px solid var(--event-accent); padding-left: 12px; }
.event-type-select { max-width: 360px; border-color: var(--event-accent, var(--border)); }
.creation-success { padding: 14px; border: 1px solid var(--green); border-radius: 4px; background: #14251b; color: var(--text); font-size: 16px; }

.pilot-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.add-pilot-button { font-size: 12px; padding: 7px 10px; }
.pilot-row { display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.pilot-row > .edit-button { align-self: flex-end; width: auto; min-width: 78px; height: 28px; padding: 4px 10px; }
.event-creation .event-type-select { font-size: 16px; padding: 10px 12px; }
.availability-hint { margin: -4px 0 10px; color: var(--muted); font-size: 13px; }

.phase-0 { --phase-color: hsl(145 72% 48%); }
.phase-1 { --phase-color: hsl(139 72% 48%); }
.phase-2 { --phase-color: hsl(133 72% 48%); }
.phase-3 { --phase-color: hsl(127 72% 48%); }
.phase-4 { --phase-color: hsl(121 72% 48%); }
.phase-5 { --phase-color: hsl(115 72% 48%); }
.phase-6 { --phase-color: hsl(109 72% 48%); }
.phase-7 { --phase-color: hsl(103 72% 48%); }
.phase-8 { --phase-color: hsl(97 72% 48%); }
.phase-9 { --phase-color: hsl(91 72% 48%); }
.phase-10 { --phase-color: hsl(85 72% 48%); }
.phase-11 { --phase-color: hsl(79 72% 48%); }
.phase-12 { --phase-color: hsl(73 72% 48%); }
.phase-13 { --phase-color: hsl(67 72% 48%); }
.phase-14 { --phase-color: hsl(61 72% 48%); }
.phase-15 { --phase-color: hsl(55 72% 48%); }
.phase-16 { --phase-color: hsl(49 72% 48%); }
.phase-17 { --phase-color: hsl(43 72% 48%); }
.phase-18 { --phase-color: hsl(37 72% 48%); }
.phase-19 { --phase-color: hsl(31 72% 48%); }
.phase-20 { --phase-color: hsl(25 72% 48%); }
.phase-21 { --phase-color: hsl(19 72% 48%); }
.phase-22 { --phase-color: hsl(13 72% 48%); }
.phase-23 { --phase-color: hsl(7 72% 48%); }
.duration-1 { --duration: 1; }
.duration-2 { --duration: 2; }
.duration-3 { --duration: 3; }
.duration-4 { --duration: 4; }
.duration-5 { --duration: 5; }
.duration-6 { --duration: 6; }
.duration-7 { --duration: 7; }
.duration-8 { --duration: 8; }
.duration-9 { --duration: 9; }
.duration-10 { --duration: 10; }
.duration-11 { --duration: 11; }
.duration-12 { --duration: 12; }
.duration-13 { --duration: 13; }
.duration-14 { --duration: 14; }
.duration-15 { --duration: 15; }
.duration-16 { --duration: 16; }
.duration-17 { --duration: 17; }
.duration-18 { --duration: 18; }
.duration-19 { --duration: 19; }
.duration-20 { --duration: 20; }
.duration-21 { --duration: 21; }
.duration-22 { --duration: 22; }
.duration-23 { --duration: 23; }
.duration-24 { --duration: 24; }
.event-creation input { font-size: 16px; min-width: 0; }
.event-creation .departure-field { align-items: end; }
.event-creation .remove-departure { height: 42px; }
.remove-departure:disabled { opacity: .35; cursor: default; }
.add-departure-button { margin-top: 12px; }
.hour-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: 8px; width: 100%; }
.hour-buttons .relay-button { min-height: 48px; padding: 10px 12px; font-size: 14px; border: 2px solid var(--border); background: var(--panel2); color: var(--text); }
.hour-buttons .relay-button.active { background: #1f7a4d; border-color: #38c878; color: #fff; box-shadow: 0 0 0 2px rgba(56,200,120,.2); }
.hour-buttons .relay-button:hover { border-color: var(--green); }
.event-creation #eventDuration { max-width: 180px; }
.creation-error { color: #ff9999; font-size: 16px; }
.event-creation button:focus-visible, .event-creation input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .creation-card { padding: 16px; }
  .creation-field-grid { grid-template-columns: 1fr; gap: 14px; }
  .creation-actions { justify-content: stretch; flex-direction: column-reverse; align-items: stretch; }
  .creation-actions .creation-error { margin-right: 0; }
  .event-category-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .event-creation .departure-field { grid-template-columns: minmax(0, 1fr) minmax(0, .75fr) 36px; gap: 6px; }
}

/* Shared data and account controls */
body { font-size: 16px; }
button, input, select { font: inherit; }
button:disabled { opacity: .55; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.brand-button { background: none; border: 0; color: var(--text); padding: 0; text-align: left; }
#navigation, .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar { margin: 16px 0; }
.account-name { font-size: 14px; }
.account-name small, .member-row small { display: block; color: var(--muted); font-size: 13px; }
.discord-button { background: #5865f2; color: white; padding: 10px 15px; text-decoration: none; border-radius: 4px; font-weight: 700; }
.danger-button { border: 1px solid var(--red); background: #29191b; color: #ffb4b4; padding: 10px 15px; border-radius: 4px; }
.event-card { display: block; width: 100%; text-align: left; color: var(--text); }
.event-card > .event-name, .event-card > .event-info, .event-card > .event-countdown { display: block; }
.event-info, .event-subtitle, .page-subtitle, .event-countdown, .departure-date, .form-label, .pilot-section-title, .registration-status { font-size: 14px; }
.event-creation > input { margin-bottom: 22px; }
.creation-fieldset { margin: 22px 0; }
.registration-form > input { max-width: 450px; }
.registration-choices { margin: 20px 0; }
.relay-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.registration-form .save-row { display: flex; gap: 12px; flex-wrap: wrap; }
.categories { flex-wrap: wrap; }
.pilot-row { grid-template-columns: minmax(0,1fr) 45px minmax(120px,1fr) auto; gap: 12px; }
.pilot-name { overflow-wrap: anywhere; }
.recovery-panel { padding: 18px; border: 1px solid var(--green); background: #14251b; border-radius: 6px; margin-bottom: 20px; }
.recovery-panel input { margin-top: 10px; font-size: 14px; }
.recovery-panel p { font-size: 14px; }
.recovery-panel button { margin-right: 10px; }
.member-list { display: grid; gap: 12px; }
.member-row { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; background: var(--panel); padding: 16px; border: 1px solid var(--border); border-radius: 6px; }
.member-row > div { flex: 1; min-width: 180px; }
.member-row select { padding: 10px; background: var(--panel2); border: 1px solid var(--border); color: var(--text); border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media(max-width:700px){
 .header-inner { align-items: flex-start; flex-direction: column; }

 .pilot-row { grid-template-columns: minmax(0,1fr) 35px; }
 .pilot-row .registration-status { grid-column: 1; }
 .pilot-row button { grid-column: 2; padding: 6px; font-size: 12px; }
 .departure-header { align-items: flex-start; flex-direction: column; gap: 5px; }
 .categories .category-button { min-width: 120px; }
}

/* Test version: one departure, three views, organizer-managed crews. */
.departure-workspace { background: #101416; border: 1px solid #30383b; border-radius: 16px; overflow: hidden; }
.departure-switcher { display: flex; align-items: end; gap: 16px; padding: 24px 24px 12px; background: #181e21; }
.departure-switcher > div:first-child { flex: 1; min-width: 0; }
.departure-switcher label { display: block; color: #9babae; font-size: 14px; font-weight: 700; letter-spacing: .06em; margin-bottom: 10px; }
.departure-switcher select, .crew-section select, .crew-section input { width: 100%; min-width: 0; min-height: 48px; background: #101416; color: #f4f7f6; border: 1px solid #475359; border-radius: 8px; padding: 10px; font-size: 16px; }
.departure-arrows { display: flex; gap: 8px; }
.departure-arrows button { width: 48px; min-height: 48px; font-size: 22px; }
.departure-summary { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding: 0 24px 20px; background: #181e21; color: #b6c4c5; font-size: 14px; }
.event-views { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; padding: 10px 24px; border-bottom: 1px solid #30383b; }
.view-button { min-width: 0; min-height: 48px; padding: 10px 4px; border: 1px solid transparent; border-radius: 8px; color: #bac6c8; background: transparent; font-weight: 700; font-size: 16px; }
.view-button[aria-pressed="true"] { color: #e7fff3; background: #1c4032; border-color: #438768; }
.departure-content .form-section, .departure-content .pilot-section, .crew-section { padding: 24px; }
.departure-content .pilot-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 10px; }
.departure-content .pilot-main { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; min-width: 0; }
.departure-content .pilot-row .edit-button { align-self: flex-end; min-height: 44px; padding: 10px 16px; font-size: 14px; margin: 0; }

.departure-content .special-availability { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 12px; }
.departure-content .special-button { min-height: 44px; font-size: 14px; }
.crew-heading, .crew-card-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; }
.crew-heading h2 { font-size: 24px; margin: 0 0 8px; }
.crew-heading p, .coverage-note { color: #aababb; font-size: 14px; line-height: 1.6; }
.crew-heading > div { flex: 1; min-width: 180px; }
.crew-list { display: grid; gap: 20px; margin-top: 24px; }
.crew-card { background: #181e21; border: 1px solid #344247; border-radius: 14px; padding: 22px; min-width: 0; }
.crew-card h3 { font-size: 22px; margin: 12px 0 6px; overflow-wrap: anywhere; }
.crew-car { color: #c1cfd0; font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.coverage-summary { padding: 10px 14px; border: 1px solid #415359; border-radius: 8px; color: #deebe9; font-size: 14px; line-height: 1.6; }
.crew-roster { list-style: none; padding: 0; margin: 20px 0; }
.crew-roster li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid #303b40; }
.crew-roster li > div { min-width: 0; overflow-wrap: anywhere; }
.crew-roster small { display: block; font-size: 14px; color: #aababb; margin-top: 5px; }
.crew-roster button, .crew-actions button, .crew-assignment button { min-height: 44px; }
.coverage-heading { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; color: #aababb; margin-bottom: 10px; }
.crew-coverage { display: grid; grid-template-columns: repeat(auto-fit,minmax(105px,1fr)); gap: 6px; }
.coverage-hour { border-radius: 8px; padding: 12px 6px; text-align: center; background: #222c31; border-top: 4px solid var(--phase-color); }
.coverage-hour.covered { background: var(--phase-color); color: #101416; }
.coverage-hour span, .coverage-hour small { display: block; font-size: 14px; }
.coverage-hour strong { display: block; font-size: 17px; margin: 7px 0; }
.coverage-hour.gap { color: #c1ced0; border: 1px dashed #718288; border-top: 4px solid var(--phase-color); }
.crew-assignment { margin-top: 20px; }
.crew-assignment label { display: block; font-size: 14px; margin-bottom: 8px; }
.crew-assignment > div, .crew-actions { display: flex; gap: 10px; }
.crew-actions { justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid #303b40; }
.crew-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 22px; border: 1px solid #438768; background: #162921; border-radius: 12px; margin: 20px 0; }
.crew-form h3, .crew-form p, .crew-form .toolbar { grid-column: 1/-1; margin: 0; }
.crew-form label { font-size: 14px; }
.crew-form input, .crew-form select { display: block; margin-top: 8px; }
.unassigned-list { margin-top: 22px; padding: 16px; background: #181e21; border-radius: 10px; }
.unassigned-list summary { cursor: pointer; min-height: 32px; }
.unassigned-list li { margin-top: 10px; overflow-wrap: anywhere; }
.unassigned-pilots { list-style: none; padding: 0; margin: 12px 0 0; }
.unassigned-pilots > li { padding: 12px 0; border-top: 1px solid #344247; }
.assignment-wishes { margin-top: 10px; padding: 12px; border: 1px solid #344247; border-radius: 8px; background: #101719; color: #cbd5d8; font-size: 14px; }
.pilot-wishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 20px; margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.pilot-wishes > div { min-width: 0; }
.pilot-wishes dt { color: #aabac0; font-size: 12px; }
.pilot-wishes dd { margin: 2px 0 0; color: #f1f5f6; overflow-wrap: anywhere; }
.crew-assignment select { min-width: 0; flex: 1; }
@media (max-width: 600px) { .pilot-wishes { grid-template-columns: minmax(0, 1fr); } }
@media(max-width:700px) {
  .departure-switcher { padding: 16px 12px 12px; gap: 8px; }
  .departure-arrows { flex-direction: column; gap: 4px; }
  .departure-arrows button { min-height: 44px; width: 44px; }
  .departure-summary { padding: 0 12px 16px; }
  .event-views { padding: 8px; gap: 4px; }
  .view-button { font-size: 14px; }
  .departure-content .form-section, .departure-content .pilot-section, .crew-section { padding: 14px; }

  .crew-card { padding: 14px; }
  .crew-form { grid-template-columns: minmax(0,1fr); padding: 14px; }
  .crew-assignment > div { flex-direction: column; }
  .crew-coverage { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .coverage-heading span:nth-child(2) { display: none; }
}

/* Course recap and foldable departure panels. */
.race-recap { margin: 20px 0 24px; padding: 24px; border: 1px solid #39464a; border-radius: 16px; background: linear-gradient(135deg,#172126,#101416 70%); }
.recap-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.recap-kicker { margin: 0 0 8px; color: #7ee38f; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.recap-intro h2 { margin: 0; font-size: clamp(24px,4vw,34px); }
.recap-intro p:not(.recap-kicker) { margin: 8px 0 0; color: #b6c4c5; font-size: 15px; }
.recap-countdown { min-width: 150px; padding: 12px 14px; border: 1px solid #42535a; border-radius: 10px; color: #b6c4c5; font-size: 13px; text-align: right; }
.recap-countdown strong { display: block; margin-top: 5px; color: #f2f7f6; font-size: 16px; }
.recap-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin: 22px 0; }
.recap-stats div { padding: 14px; border: 1px solid #334146; border-radius: 10px; background: rgba(7,12,14,.45); }
.recap-stats strong, .recap-stats span { display: block; }
.recap-stats strong { font-size: 22px; color: #f5fbf8; }
.recap-stats span { margin-top: 4px; color: #9eafb1; font-size: 13px; }
.recap-categories { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: #aebcbe; font-size: 14px; }
.recap-circuit { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: #b8c5c6; font-size: 14px; }
.recap-circuit strong { color: #f4f8f7; }
.circuit-visual { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: #dce8e4; font-size: 14px; font-weight: 700; }
.circuit-visual img { display: block; width: 180px; height: 90px; object-fit: contain; }
.circuit-visual.compact { gap: 7px; font-size: 12px; text-align: right; }
.circuit-visual.compact img { width: 100%; height: 100%; border-radius: 8px; }
.event-heading-line > .circuit-visual { flex: 0 0 430px; width: 430px; height: 230px; }
.event-heading-line > .circuit-visual img { width: 100%; height: 100%; }
.departure-accordion { display: grid; gap: 12px; }
.departure-fold { overflow: hidden; border: 1px solid #354247; border-radius: 14px; background: #111719; }
.departure-fold[open] { border-color: #56716d; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.departure-fold > summary { display: grid; grid-template-columns: 46px minmax(0,1fr) auto auto; align-items: center; gap: 14px; min-height: 82px; padding: 14px 18px; cursor: pointer; list-style: none; }
.departure-fold > summary::-webkit-details-marker { display: none; }
.departure-fold > summary::after { content: '+'; width: 28px; height: 28px; border: 1px solid #536166; border-radius: 50%; color: #b8c5c6; font-size: 22px; line-height: 25px; text-align: center; }
.departure-fold[open] > summary::after { content: '−'; }
.fold-index { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; background: #263439; color: #9feab0; font-size: 15px; font-weight: 800; }
.fold-date strong, .fold-date span { display: block; }
.fold-date strong { color: #f0f5f4; font-size: 17px; }
.fold-date span { margin-top: 5px; color: #9eafb1; font-size: 14px; }
.fold-meta, .fold-countdown { color: #b8c5c6; font-size: 14px; white-space: nowrap; }
.fold-countdown { min-width: 94px; text-align: right; }
.departure-fold-body { padding: 0 22px 24px; border-top: 1px solid #2f3a3e; }
.fold-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; color: #aebcbe; font-size: 14px; }
.fold-toolbar button { min-height: 40px; }
.fold-section { margin-top: 18px; padding: 18px; border: 1px solid #2d3a3e; border-radius: 12px; background: #151c1f; }
.fold-section > h2 { margin: 0 0 14px; font-size: 19px; }
.fold-section .pilot-section, .fold-section .crew-section { padding: 0; }
.fold-section .pilot-section-title { display: none; }
.fold-section .crew-heading h2 { display: none; }
.fold-section .crew-heading { margin-bottom: 6px; }
.fold-registration .registration-form { padding: 0; }
.fold-registration .form-title { margin-top: 0; }
.fold-registration .form-section > input { max-width: 100%; }
.departure-fold .empty { margin: 0; }
.event-section-tabs { display: flex; gap: 8px; margin: 20px 0 14px; padding: 6px; border: 1px solid #344348; border-radius: 12px; background: #111719; }
.event-section-tab { flex: 1; min-height: 48px; border: 1px solid transparent; border-radius: 8px; color: #adbcbe; background: transparent; font-size: 16px; font-weight: 800; }
.event-section-tab[aria-pressed="true"] { color: #e9fff0; background: #1c4032; border-color: #438768; }
.crew-page-accordion { margin-top: 18px; }
.crew-only-section { margin-top: 0; }
.crew-only-section .crew-section { padding: 0; }
.crew-only-section .crew-heading h2 { display: none; }
.crew-pilot-name { font-weight: 800; }
.crew-category-hyper .crew-pilot-name { color: #ff7979; }
.crew-category-lmp2 .crew-pilot-name { color: #80aefc; }
.crew-category-lmp3 .crew-pilot-name { color: #ffb067; }
.crew-category-gt3 .crew-pilot-name { color: #6edb9d; }
.crew-category-gte .crew-pilot-name { color: #d59afc; }
.pilot-preference { flex-basis: 100%; color: #aebcbe; font-size: 13px; }
.pilot-preference strong { color: #e9d48c; }

.crew-card .coverage-note { margin: 6px 0 0; font-size: 13px; }
.crew-card .crew-roster { margin: 14px 0 10px; }
@media(max-width:700px) {
  .race-recap { padding: 16px; }
  .recap-intro { flex-direction: column; gap: 12px; }
  .recap-countdown { width: 100%; text-align: left; }
  .recap-stats { grid-template-columns: repeat(2,minmax(0,1fr)); margin: 16px 0; }
  .departure-fold > summary { grid-template-columns: 38px minmax(0,1fr) 26px; gap: 10px; padding: 12px; }
  .fold-index { width: 34px; height: 34px; }
  .fold-date strong { font-size: 15px; }
  .fold-date span, .fold-meta, .fold-countdown { font-size: 13px; }
  .fold-meta { grid-column: 2; }
  .fold-countdown { display: none; }
  .departure-fold-body { padding: 0 10px 14px; }
  .fold-toolbar { align-items: flex-start; flex-direction: column; }
  .fold-section { padding: 12px; }
  .event-section-tabs { margin-top: 14px; }
  .event-section-tab { min-height: 44px; font-size: 14px; }
}

@media (max-width: 640px) {
  .registration-form .special-availability { margin-top: 8px; }
}

/* Crew identity colors are stable for a crew, regardless of its category. */
.crew-pilot-group { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--crew-color); border-left: 4px solid var(--crew-color); border-radius: 9px; background: color-mix(in srgb, var(--crew-color) 8%, #151c1f); }
.crew-pilot-group-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--crew-color); font-size: 14px; }
.crew-pilot-group-header span { color: #c4d0d0; font-size: 12px; text-align: right; }
.crew-pilot-group .pilot-row { margin-top: 8px; padding: 8px 0; border-top: 1px solid color-mix(in srgb, var(--crew-color) 25%, transparent); }
.crew-pilot-group .pilot-name, .crew-pilot-group .pilot-car { color: var(--crew-color); }
.crew-card.crew-palette-0, .crew-pilot-group.crew-palette-0 { --crew-color: #53d8ff; }
.crew-card.crew-palette-1, .crew-pilot-group.crew-palette-1 { --crew-color: #c58cff; }
.crew-card.crew-palette-2, .crew-pilot-group.crew-palette-2 { --crew-color: #ffae62; }
.crew-card.crew-palette-3, .crew-pilot-group.crew-palette-3 { --crew-color: #ff79aa; }
.crew-card.crew-palette-4, .crew-pilot-group.crew-palette-4 { --crew-color: #75a9ff; }
.crew-card.crew-palette-5, .crew-pilot-group.crew-palette-5 { --crew-color: #b5df62; }
.crew-card.crew-palette-6, .crew-pilot-group.crew-palette-6 { --crew-color: #ffd45e; }
.crew-card.crew-palette-7, .crew-pilot-group.crew-palette-7 { --crew-color: #66e0b1; }
.crew-card.crew-palette-8, .crew-pilot-group.crew-palette-8 { --crew-color: #ff7777; }
.crew-card.crew-palette-9, .crew-pilot-group.crew-palette-9 { --crew-color: #b99cff; }
.crew-card[class*="crew-palette-"] { border-color: color-mix(in srgb, var(--crew-color) 48%, #344247); }
.crew-card[class*="crew-palette-"] h3 { color: var(--crew-color); }
.pilot-car { color: #b9c7c8; font-size: 13px; }
.car-choice-label { display: block; margin-top: 18px; }
.assignment-effect { margin: 12px 0; padding: 10px 14px; border-left: 3px solid #64cfa0; background: #182d26; color: #dcefe5; font-size: 14px; line-height: 1.5; }
.registration-form select { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #475359; border-radius: 8px; color: #edf4f0; background: #171e21; color-scheme: dark; }
.registration-form input[readonly] { color: #b9c7c8; }
.registration-form .form-title { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.registration-form-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.crew-card[class*="crew-palette-"] .crew-pilot-name { color: var(--crew-color); }

.race-recap { padding: 16px 20px; }
.recap-intro { margin-bottom: 12px; }
.creation-fieldset > legend { padding: 0 8px; color: #edf4f0; font-weight: 700; }
.car-choice { display: block; width: 100%; max-width: 560px; min-height: 44px; margin-top: 7px; padding: 9px 12px; border: 1px solid #475359; border-radius: 8px; background: #101416; color: #f4f7f6; }
.registration-form .category-area { display: block; min-width: 0; }
.registration-form .category-area .categories { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 8px; width: 100%; }
.car-preference-panel { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.car-preference-panel legend { padding: 0; margin-bottom: 10px; }
.car-any-option, .car-preference-option { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; max-width: 100%; padding: 9px 12px; border: 1px solid #3b484d; border-radius: 8px; background: #171e21; color: #e5edeb; cursor: pointer; font-size: 14px; line-height: 1.35; }
.car-any-option { font-weight: 600; border-style: dashed; }
.car-any-option input, .car-preference-option input { flex: 0 0 17px; width: 17px; height: 17px; margin: 0; padding: 0; accent-color: #54d98a; }
.car-preference-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.car-preference-option span { min-width: 0; overflow-wrap: break-word; }
.car-any-option:has(input:checked), .car-preference-option:has(input:checked) { border-color: #54d98a; border-style: solid; background: #173c28; color: #fff; }
.car-any-option:focus-within, .car-preference-option:focus-within { outline: 2px solid #a4ebff; outline-offset: 3px; }
.car-preference-option:hover:not(:has(input:disabled)), .car-any-option:hover { border-color: #87bda1; }
.car-preference-help { margin: 12px 0 0; color: #aababb; font-size: 13px; line-height: 1.5; }
.car-preference-option:has(input:disabled) { opacity: .5; cursor: not-allowed; }
.crew-preferences { grid-column: 1/-1; padding: 12px 14px; border: 1px solid #344147; border-radius: 9px; background: #101416; color: #d9e2e0; }
.crew-preference-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px 14px; list-style: none; padding: 8px 0 0; margin: 0; }
.crew-preference-list li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #293438; padding: 5px 0; font-size: 13px; }
.crew-preference-list li span { color: #8fe2ac; text-align: right; }
@media (max-width: 760px) { .event-heading-line { align-items: flex-start; flex-direction: column; } .event-heading-line > .circuit-visual { flex-basis: auto; width: 100%; height: 190px; } .event-card { min-height: 0; padding-right: 14px; } .event-card .circuit-visual { position: static; width: 100%; height: 155px; margin: 14px 0 0; } .event-filter { display: flex; width: 100%; } .event-filter-button { flex: 1; padding-inline: 6px; } }
@media (max-width: 640px) { .crew-preference-list { grid-template-columns: 1fr; } .event-heading-line > .circuit-visual { height: 160px; } .event-card .circuit-visual { height: 135px; } }

/* Pilot availability shown while composing crews. */
.crew-preference-list { grid-template-columns: 1fr; gap: 10px; }
.crew-preference-list .crew-preference-item { display: block; padding: 10px 12px; border: 1px solid #2f3b3e; border-radius: 8px; }
.crew-preference-item > strong { display: block; margin-bottom: 7px; }
.crew-pilot-availability { margin-top: 8px; }
.crew-pilot-availability-label { display: block; margin-bottom: 5px; color: #aebcbe; font-size: 12px; font-weight: 800; }

.unassigned-pilots .pilot-wishes { margin-top: 6px; }

/* My entries pilot dashboard. */
.my-entries-heading { margin: 8px 0 22px; }
.my-entries-heading .page-title { margin-bottom: 8px; }
.my-entries-heading p { margin: 0; color: var(--muted); }
.my-entries-group { margin-top: 24px; }
.my-entries-group-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin-bottom:12px; }
.my-entries-group-heading h2 { margin:0; }
.my-entries-group-heading span { color:var(--muted); font-size:13px; font-weight:800; }
.my-entry-dashboard { display:grid; gap:18px; }
.my-entry-card { overflow:hidden; border:1px solid var(--border); border-radius:14px; background:linear-gradient(180deg,var(--panel2),var(--panel)); box-shadow:0 12px 30px rgba(0,0,0,.18); }
.my-entry-header { display:flex; align-items:stretch; justify-content:space-between; gap:18px; padding:18px; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); border-bottom:1px solid var(--border); }
.my-entry-title { min-width:0; }
.my-entry-title h2 { margin:4px 0 10px; font-size:clamp(22px,3vw,34px); }
.my-entry-kicker { display:block; color:var(--accent); font-size:11px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; }
.my-entry-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:var(--muted); }
.my-entry-header .circuit-visual { flex:0 0 220px; width:220px; height:120px; }
.my-entry-section { padding:16px 18px; border-bottom:1px solid var(--border); }
.my-entry-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
.my-entry-section h3 { margin:3px 0 0; font-size:20px; }
.my-entry-pill { display:inline-flex; align-items:center; min-height:30px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--panel3); color:var(--text); font-size:12px; font-weight:800; }
.my-entry-preferences { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.my-entry-preferences > div { padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.02); }
.my-entry-preferences span { display:block; margin-bottom:4px; color:var(--muted); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.6px; }
.my-entry-preferences strong { font-size:14px; }
.my-entry-crew { background:rgba(31,143,90,.045); }
.my-entry-waiting { background:rgba(255,170,0,.035); }
.my-entry-waiting p { margin:8px 0 0; color:var(--muted); }
.my-entry-crew-roster,.my-entry-pilot-list { display:grid; gap:8px; margin:10px 0 12px; }
.my-entry-pilot { padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:rgba(255,255,255,.018); }
.my-entry-pilot.is-me { border-color:rgba(53,185,120,.7); box-shadow:inset 3px 0 0 var(--accent); }
.my-entry-pilot-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.my-entry-pilot-head span { color:var(--muted); font-size:12px; text-align:right; }
.my-entry-actions { display:flex; justify-content:flex-end; padding:14px 18px 18px; }
.my-entry-actions .primary-button { min-width:190px; }
@media (max-width:760px) {
  .my-entry-header { flex-direction:column; }
  .my-entry-header .circuit-visual { width:100%; height:150px; flex-basis:auto; }
  .my-entry-preferences { grid-template-columns:1fr; }
  .my-entry-section-heading,.my-entry-pilot-head { align-items:flex-start; flex-direction:column; }
  .my-entry-pilot-head span { text-align:left; }
  .my-entry-actions { justify-content:stretch; }
  .my-entry-actions .primary-button { width:100%; }
}

/* My entries accordion refinement. */
.my-entry-accordion > summary { list-style:none; cursor:pointer; }
.my-entry-accordion > summary::-webkit-details-marker { display:none; }
.my-entry-accordion-body { min-width:0; }
.my-entry-summary-side { display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.my-entry-chevron { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--border); border-radius:50%; background:var(--panel3); color:var(--muted); font-size:22px; font-weight:900; transition:transform .2s ease,color .2s ease,border-color .2s ease; }
.my-entry-accordion[open] .my-entry-chevron { transform:rotate(180deg); color:var(--accent); border-color:rgba(53,185,120,.55); }
.my-entry-compact-pilots { display:flex; flex-wrap:wrap; gap:8px; }
.my-entry-compact-pilot { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.02); }
.my-entry-compact-pilot strong { font-size:13px; }
.my-entry-compact-pilot small { color:var(--muted); font-size:11px; }
.my-entry-compact-pilot.is-me { border-color:rgba(53,185,120,.65); box-shadow:inset 2px 0 0 var(--accent); }
.my-entry-pilots-summary { padding-top:14px; padding-bottom:14px; }
@media (max-width:760px) {
  .my-entry-summary-side { width:100%; }
  .my-entry-summary-side .circuit-visual { flex:1 1 auto; }
  .my-entry-chevron { flex:0 0 34px; }
  .my-entry-compact-pilot { width:100%; justify-content:space-between; border-radius:8px; }
}

.my-entry-actions-top { padding: 14px 18px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,.015); }

/* My entries: align accordion interaction with Course. */
.my-entry-header { position: relative; }
.my-entry-toggle { display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; margin-top:2px; border:1px solid var(--border); border-radius:5px; background:var(--panel3); color:var(--text); font-size:24px; font-weight:800; line-height:1; transition:transform .18s ease,border-color .18s ease,color .18s ease; }
.my-entry-accordion[open] .my-entry-toggle { transform:rotate(45deg); color:var(--accent); border-color:rgba(53,185,120,.6); }
.my-entry-chevron { display:none !important; }
.my-entry-waiting-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:14px; }
.my-entry-waiting-grid h4 { margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.my-entry-existing-crews { display:grid; gap:8px; }
.my-entry-existing-crew { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; padding:9px 11px; border:1px solid var(--border); border-radius:8px; background:rgba(255,255,255,.02); }
.my-entry-existing-crew > span { color:var(--text); font-size:12px; font-weight:800; }
.my-entry-existing-crew > small { grid-column:1/-1; color:var(--muted); }
@media (max-width:760px) {
  .my-entry-toggle { flex-basis:32px; width:32px; height:32px; }
  .my-entry-waiting-grid { grid-template-columns:1fr; }
}

/* Mes inscriptions: status-focused layout. */
.my-entry-existing-crews-wrap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.my-entry-existing-crews-wrap h4 { margin: 0 0 9px; color: var(--muted); font-size: 12px; font-weight: 900; letter-spacing: .7px; }

/* Compact event header: title + recap in one block. */
.event-header-compact { display:grid; gap:12px; padding:16px 18px; }
.event-header-compact .event-heading-line { align-items:center; gap:16px; }
.event-header-compact .event-heading-copy { min-width:0; }
.event-header-compact .event-title { margin:0; font-size:clamp(24px,3vw,34px); line-height:1.05; }
.event-header-compact .event-subtitle { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:7px 0 0; font-size:13px; }
.event-header-compact .circuit-visual img { width:120px; height:58px; }
.event-header-summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:12px; padding-top:10px; border-top:1px solid var(--border); }
.event-header-summary .event-category-badges { margin-top:0; }
.event-header-stats { display:flex; align-items:stretch; gap:6px; }
.event-header-stats > span { display:grid; min-width:64px; padding:7px 9px; border:1px solid #334146; border-radius:8px; background:rgba(7,12,14,.34); text-align:center; }
.event-header-stats strong { color:#f5fbf8; font-size:16px; line-height:1.05; }
.event-header-stats small { margin-top:2px; color:#9eafb1; font-size:10px; }
.event-header-countdown { min-width:138px; padding:7px 10px; border:1px solid #42535a; border-radius:8px; color:#aebcbe; font-size:11px; text-align:right; }
.event-header-countdown strong { display:block; margin-top:2px; color:#f2f7f6; font-size:14px; }

@media (max-width:700px) {
  .event-header-compact { gap:9px; padding:11px 12px; }
  .event-header-compact .event-heading-line { gap:8px; align-items:flex-start; }
  .event-header-compact .event-title { font-size:22px; padding-left:9px; border-left-width:3px; }
  .event-header-compact .event-subtitle { margin-top:5px; font-size:11px; }
  .event-header-compact .event-subtitle > span { display:none; }
  .event-header-compact .circuit-visual img { width:76px; height:38px; }
  .event-header-summary { grid-template-columns:1fr; gap:8px; padding-top:8px; }
  .event-header-summary .event-category-badges { gap:5px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .event-header-summary .event-category-badges::-webkit-scrollbar { display:none; }
  .event-header-summary .event-category-badge { flex:0 0 auto; min-width:0; padding:5px 7px; gap:5px; }
  .event-header-summary .event-category-badge img { width:22px; height:22px; }
  .event-header-summary .event-category-copy strong { font-size:11px; }
  .event-header-summary .event-category-copy small { font-size:9px; }
  .event-header-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .event-header-stats > span { min-width:0; padding:6px 3px; }
  .event-header-stats strong { font-size:14px; }
  .event-header-stats small { font-size:9px; }
  .event-header-countdown { min-width:0; width:100%; padding:6px 8px; font-size:10px; text-align:left; }
  .event-header-countdown strong { display:inline; margin-left:5px; font-size:11px; }
}

/* Compact read-only pilot and crew views. Keep editable time slots unchanged. */
.pilot-row,
.departure-content .pilot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 6px 10px;
  padding: 8px;
}
.pilot-row > .pilot-main { grid-column: 1; grid-row: 1; min-width: 0; }
.pilot-row > .pilot-main:only-child { grid-column: 1 / -1; }
.pilot-row > .presence-timeline { grid-column: 1 / -1; }
.pilot-row > .edit-button,
.departure-content .pilot-row > .edit-button {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-height: 30px;
  height: auto;
  padding: 5px 10px;
  margin: 0;
}
.pilot-row .pilot-main,
.departure-content .pilot-row .pilot-main { gap: 4px 10px; }
:is(.pilot-row, .crew-card) .presence-timeline { margin-top: 2px; }
:is(.pilot-row, .crew-card) .presence-scale { height: 22px; }
:is(.pilot-row, .crew-card) .presence-track > .presence-segment { height: 20px; }
:is(.pilot-row, .crew-card) .presence-edges { margin-top: 3px; }
.crew-pilot-group { margin: 8px 0; padding: 8px 10px; }
.crew-pilot-group .pilot-row { margin-top: 6px; padding: 6px; }
.crew-list { gap: 12px; margin-top: 14px; }
.crew-card { padding: 14px; }
.crew-card-header { gap: 10px; }
.crew-card h3 { margin: 6px 0 4px; }
.crew-card .coverage-summary { padding: 6px 10px; }
.crew-card .crew-roster { margin: 8px 0 6px; }
.crew-card .crew-roster li { padding: 6px 0; }
.crew-card .crew-roster small { margin-top: 3px; }
.crew-card .crew-assignment { margin-top: 12px; }
.crew-card .crew-actions { margin-top: 10px; padding-top: 10px; }
@media (max-width: 700px), (pointer: coarse) {
  .pilot-row > .edit-button,
  .departure-content .pilot-row > .edit-button { min-height: 44px; }
}



/* styles/brand-theme.css */
/* Visual identity inspired by the Endurance Manager logo.
   Presentation only: application layout and behavior stay unchanged. */
:root {
  --bg: #0a0b0c;
  --panel: #121416;
  --panel2: #181b1d;
  --panel3: #202326;
  --border: #303638;
  --text: #f0f3f2;
  --muted: #99a3a0;
  --green: #1f8f5a;
  --accent: #35b978;
}

body {
  background:
    radial-gradient(circle at 15% -10%, rgba(31,143,90,.08), transparent 32rem),
    var(--bg);
}

.top-stripes {
  height: 4px;
  grid-template-columns: 1fr 2.2fr 1fr;
  background: #0b0d0e;
}
.top-stripes div:nth-child(1) { background: #202527; }
.top-stripes div:nth-child(2) { background: linear-gradient(90deg,#18372a,#2aa36a,#18372a); }
.top-stripes div:nth-child(3) { background: #202527; }
.top-stripes div:nth-child(4) { display: none; }

header {
  background: linear-gradient(180deg,#151719 0%,#0f1112 100%);
  border-bottom-color: #29312f;
  box-shadow: 0 8px 28px rgba(0,0,0,.22);
}

.brand-button.logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.brand-mark-frame {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  overflow: hidden;
  border-radius: 50%;
  background: #111415;
}
.brand-mark {
  position: absolute;
  width: 164%;
  height: 164%;
  max-width: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}
.brand-copy {
  display: grid;
  gap: 2px;
  line-height: 1;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 1.6px;
}
.brand-copy span { color: #2aa36a; }
.brand-button.logo:hover .brand-mark { filter: brightness(1.08); }

.primary-button {
  background: linear-gradient(180deg,#2ba56b,#218654);
  color: #f5fff9;
  box-shadow: inset 0 1px rgba(255,255,255,.12);
}
.secondary-button {
  border-color: #343a3c;
  background: linear-gradient(180deg,#1a1d1f,#151719);
}
.secondary-button:hover { border-color: #46504d; }

.event-card,
.form-panel,
.departure,
.empty {
  border-color: #303638;
}

/* Event page: make the visual useful and keep the whole header dense on desktop. */
@media (min-width: 701px) {
  .event-header-compact {
    gap: 10px;
    padding: 14px 18px;
    margin-bottom: 14px;
  }

  .event-header-compact .event-heading-line {
    display: grid;
    grid-template-columns: minmax(320px,.9fr) minmax(420px,1.1fr);
    align-items: center;
    gap: 28px;
    min-height: 0;
  }

  .event-header-compact .event-heading-copy {
    align-self: center;
  }

  .event-header-compact .event-title {
    font-size: clamp(30px,3vw,42px);
    line-height: 1;
  }

  .event-header-compact .event-subtitle {
    margin-top: 8px;
    font-size: 14px;
  }

  .event-header-compact .circuit-visual {
    display: flex;
    justify-self: stretch;
    width: 100%;
    height: 245px;
    min-width: 0;
    align-items: center;
    justify-content: center;
  }

  .event-header-compact .circuit-visual img {
    width: min(100%,560px);
    height: 245px;
    max-width: 560px;
    object-fit: contain;
  }

  .event-header-summary {
    grid-template-columns: minmax(0,1fr) auto auto;
    gap: 10px;
    padding-top: 9px;
  }

  .event-header-summary .event-category-badges {
    gap: 6px;
  }

  .event-header-summary .event-category-badge {
    padding: 6px 9px;
  }

  .event-header-stats > span {
    min-width: 58px;
    padding: 6px 8px;
  }

  .event-header-countdown {
    padding: 6px 10px;
  }
}

@media (max-width: 700px) {
  header {
    padding: 8px 10px 10px;
  }

  .header-inner {
    display: grid;
    grid-template-columns: 68px minmax(0,1fr);
    align-items: start;
    gap: 8px 10px;
    width: 100%;
  }

  .brand-button.logo {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .brand-mark-frame {
    width: 68px;
    height: 68px;
    flex-basis: 68px;
  }

  .brand-copy {
    display: none;
  }

  #navigation {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    width: 100%;
    min-width: 0;
    align-items: stretch;
  }

  #navigation .account-name {
    grid-column: 1 / -1;
    order: -2;
    min-width: 0;
    padding: 1px 2px 3px;
    font-size: 12px;
    line-height: 1.15;
    white-space: normal;
  }

  #navigation .account-name small {
    display: inline;
    margin-left: 5px;
    font-size: 10px;
  }

  #navigation button,
  #navigation .discord-button {
    min-width: 0;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
    text-align: center;
  }

  /* Event header: title/circuit stay on one compact row, no large dead zone. */
  .event-header-compact {
    gap: 8px;
    padding: 10px 11px;
  }

  .event-header-compact .event-heading-line {
    display: grid;
    grid-template-columns: minmax(0,1fr) 128px;
    align-items: center;
    gap: 8px;
    min-height: 0;
  }

  .event-header-compact .event-heading-copy {
    min-width: 0;
  }

  .event-header-compact .event-title {
    margin: 0;
    font-size: clamp(21px,7vw,29px);
    line-height: 1.02;
  }

  .event-header-compact .event-subtitle {
    margin-top: 5px;
  }

  .event-header-compact .circuit-visual {
    display: flex;
    width: 128px;
    height: 72px;
    min-width: 0;
    align-items: center;
    justify-content: center;
  }

  .event-header-compact .circuit-visual img {
    width: 128px;
    height: 72px;
    max-width: none;
    object-fit: contain;
  }

  .event-header-summary {
    gap: 6px;
    padding-top: 7px;
  }

  .event-header-stats > span {
    padding: 5px 2px;
  }

  .event-header-countdown {
    padding: 5px 7px;
  }
}

@media (max-width: 460px) {
  .header-inner {
    grid-template-columns: 60px minmax(0,1fr);
    gap: 7px 8px;
  }

  .brand-mark-frame {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }

  #navigation {
    gap: 5px;
  }

  #navigation button,
  #navigation .discord-button {
    min-height: 34px;
    padding: 6px 5px;
    font-size: 11px;
  }

  #navigation .account-name {
    font-size: 11px;
  }

  #navigation .account-name small {
    font-size: 9px;
  }

  .event-header-compact .event-heading-line {
    grid-template-columns: minmax(0,1fr) 110px;
  }

  .event-header-compact .circuit-visual,
  .event-header-compact .circuit-visual img {
    width: 110px;
    height: 64px;
  }
}



/* styles/desktop-circuit.css */
/* Desktop-only event circuit sizing.
   Intentionally starts at 1000px so phone/tablet layouts remain unchanged. */
@media (min-width: 1000px) {
  .event-header-compact {
    gap: 6px;
    padding-top: 8px;
    padding-bottom: 10px;
  }

  .event-header-compact .event-heading-line {
    grid-template-columns: minmax(300px,.78fr) minmax(360px,1.22fr);
    gap: 18px;
  }

  .event-header-compact .circuit-visual {
    height: 282px;
    align-items: center;
    justify-content: center;
  }

  .event-header-compact .circuit-visual img {
    width: auto;
    height: 269px;
    max-width: 499px;
    max-height: 269px;
    object-fit: contain;
  }

  .event-header-summary {
    margin-top: -4px;
    padding-top: 7px;
  }
}



/* styles/timeline.css */
/* One full-width timeline for forms, pilots and crew coverage. */
.presence-timeline {
  container: presence / inline-size;
  width: 100%;
  min-width: 0;
  margin-top: 8px;
  color: var(--muted);
}

.duration-1 { --duration: 1; }
.duration-2 { --duration: 2; }
.duration-3 { --duration: 3; }
.duration-4 { --duration: 4; }
.duration-5 { --duration: 5; }
.duration-6 { --duration: 6; }
.duration-7 { --duration: 7; }
.duration-8 { --duration: 8; }
.duration-9 { --duration: 9; }
.duration-10 { --duration: 10; }
.duration-11 { --duration: 11; }
.duration-12 { --duration: 12; }
.duration-13 { --duration: 13; }
.duration-14 { --duration: 14; }
.duration-15 { --duration: 15; }
.duration-16 { --duration: 16; }
.duration-17 { --duration: 17; }
.duration-18 { --duration: 18; }
.duration-19 { --duration: 19; }
.duration-20 { --duration: 20; }
.duration-21 { --duration: 21; }
.duration-22 { --duration: 22; }
.duration-23 { --duration: 23; }
.duration-24 { --duration: 24; }

.presence-scale {
  display: grid;
  grid-template-columns: repeat(var(--duration), minmax(0, 1fr));
  position: relative;
  width: calc(100% - 2px);
  height: 28px;
  margin-inline: 1px;
}
.presence-boundary {
  grid-row: 1;
  position: relative;
  left: auto !important;
  min-width: 0;
}
.presence-boundary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 6px;
  background: #7b898b;
}
.presence-boundary.is-finish { position: absolute; right: 0; height: 100%; }
.presence-time {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 18px;
  font-weight: 800;
  white-space: nowrap;
  color: #c8d0ce;
}
.presence-time.ticks-4 { display: block; }
.presence-boundary:first-child .presence-time { transform: none; }
.presence-boundary.is-finish .presence-time { transform: translateX(-100%); }
.presence-track {
  display: grid;
  grid-template-columns: repeat(var(--duration), minmax(0, 1fr));
  gap: 0;
  width: 100%;
  border: 1px solid #617074;
  border-radius: 6px;
  background-color: #262e32;
  background-image: linear-gradient(to right, transparent calc(100% - 1px), #617074 calc(100% - 1px));
  background-size: calc(100% / var(--duration)) 100%;
  background-origin: padding-box;
  background-repeat: repeat-x;
}
.presence-track > .presence-segment {
  display: grid;
  place-items: center;
  min-width: 0;
  width: 100%;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #b0babc;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: none;
  text-shadow: none;
}
.presence-segment:first-child { border-radius: 5px 0 0 5px; }
.presence-track > .presence-segment:last-child { border-radius: 0 5px 5px 0; }
.presence-track > .presence-segment:only-child { border-radius: 5px; }
.presence-track > .presence-segment.is-present { background: var(--pilot-timeline-color, #8fb6c9); color: #101416; }

/* Pilot availability is communicated by colour: no check/dot markers are needed. */
.presence-timeline:not(.is-coverage) .presence-track > .presence-segment > span {
  display: none;
}

/* Consecutive selected hours read as one continuous availability range. */
.presence-timeline:not(.is-coverage) .presence-track > .presence-segment.is-present:first-child,
.presence-timeline:not(.is-coverage) .presence-track > .presence-segment:not(.is-present) + .presence-segment.is-present {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
.presence-timeline:not(.is-coverage) .presence-track > .presence-segment.is-present:not(:has(+ .presence-segment.is-present)) {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

.presence-track > button.presence-segment { cursor: pointer; touch-action: manipulation; }
.presence-track > button.presence-segment:hover { filter: brightness(1.08); }
.presence-track > button.presence-segment:focus-visible { position: relative; z-index: 1; outline: 2px solid #fff; outline-offset: 1px; }
.presence-edges { display: flex; justify-content: space-between; gap: 8px; margin-top: 5px; font-size: 10px; font-weight: 900; letter-spacing: .5px; }

/* Stable, muted pastel palette: one tone is assigned to each visible pilot. */
.pilot-timeline-tone-0 { --pilot-timeline-color: #8fb6c9; }
.pilot-timeline-tone-1 { --pilot-timeline-color: #aa9fc2; }
.pilot-timeline-tone-2 { --pilot-timeline-color: #91bca8; }
.pilot-timeline-tone-3 { --pilot-timeline-color: #c3a08d; }
.pilot-timeline-tone-4 { --pilot-timeline-color: #bd98a5; }
.pilot-timeline-tone-5 { --pilot-timeline-color: #a8b996; }
.pilot-timeline-tone-6 { --pilot-timeline-color: #8fb8b6; }
.pilot-timeline-tone-7 { --pilot-timeline-color: #99a7c7; }
.pilot-timeline-tone-8 { --pilot-timeline-color: #c5b887; }
.pilot-timeline-tone-9 { --pilot-timeline-color: #b397b4; }
.pilot-timeline-tone-10 { --pilot-timeline-color: #c1a48c; }
.pilot-timeline-tone-11 { --pilot-timeline-color: #94adc3; }

/* Organizer crew coverage: 2+ pilots = green, 1 pilot = yellow, nobody = neutral. */
.presence-timeline.is-coverage .presence-segment {
  border-right: 1px solid #617074;
}
.presence-timeline.is-coverage .presence-segment:last-child {
  border-right: 0;
}
.presence-timeline.is-coverage .presence-segment.coverage-two {
  background: #8fbea0;
  color: #142019;
}
.presence-timeline.is-coverage .presence-segment.coverage-one {
  background: #cdbc78;
  color: #211d10;
}
.presence-timeline.is-coverage .presence-segment.coverage-none {
  background: transparent;
  color: #899598;
}
.presence-timeline.is-coverage .presence-segment.coverage-none > span {
  visibility: hidden;
}

@container presence (min-width: 400px) {
  .presence-time[class] { display: none; }
  .presence-time.ticks-6 { display: block; }
}
@container presence (min-width: 640px) {
  .presence-time[class] { display: none; }
  .presence-time.ticks-10 { display: block; }
}
@container presence (min-width: 1000px) {
  .presence-time[class] { display: none; }
  .presence-time.ticks-16 { display: block; }
}
@container presence (min-width: 1500px) {
  .presence-time[class] { display: none; }
  .presence-time.ticks-24 { display: block; }
}

.presence-boundary.boundary-0 { grid-column: 1; }
.presence-boundary.boundary-1 { grid-column: 2; }
.presence-boundary.boundary-2 { grid-column: 3; }
.presence-boundary.boundary-3 { grid-column: 4; }
.presence-boundary.boundary-4 { grid-column: 5; }
.presence-boundary.boundary-5 { grid-column: 6; }
.presence-boundary.boundary-6 { grid-column: 7; }
.presence-boundary.boundary-7 { grid-column: 8; }
.presence-boundary.boundary-8 { grid-column: 9; }
.presence-boundary.boundary-9 { grid-column: 10; }
.presence-boundary.boundary-10 { grid-column: 11; }
.presence-boundary.boundary-11 { grid-column: 12; }
.presence-boundary.boundary-12 { grid-column: 13; }
.presence-boundary.boundary-13 { grid-column: 14; }
.presence-boundary.boundary-14 { grid-column: 15; }
.presence-boundary.boundary-15 { grid-column: 16; }
.presence-boundary.boundary-16 { grid-column: 17; }
.presence-boundary.boundary-17 { grid-column: 18; }
.presence-boundary.boundary-18 { grid-column: 19; }
.presence-boundary.boundary-19 { grid-column: 20; }
.presence-boundary.boundary-20 { grid-column: 21; }
.presence-boundary.boundary-21 { grid-column: 22; }
.presence-boundary.boundary-22 { grid-column: 23; }
.presence-boundary.boundary-23 { grid-column: 24; }



/* styles/registration-context.css */
/* Registration identity/context: make it unmistakable who is being edited. */
.registration-form-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end}
.registration-nav-button{min-height:38px;padding:8px 13px;font-size:12px;font-weight:850;transition:border-color .15s ease,background .15s ease,color .15s ease}
.registration-nav-button[aria-pressed="true"]{box-shadow:inset 0 1px rgba(255,255,255,.13),0 0 0 1px rgba(53,185,120,.18)}
.category-add-button{border-color:rgba(53,185,120,.55);color:#dff8e9}
.registration-context-banner{display:grid;gap:4px;margin:12px 0 16px;padding:12px 14px;border:1px solid var(--border);border-left-width:4px;border-radius:9px;background:var(--panel2)}
.registration-context-banner span{font-size:10px;font-weight:950;letter-spacing:1.1px;color:var(--muted)}
.registration-context-banner strong{font-size:17px;line-height:1.15}
.registration-context-banner.self{border-left-color:var(--green)}
.registration-context-banner.other{border-left-color:#e7a83c;background:linear-gradient(90deg,rgba(231,168,60,.10),var(--panel2) 38%)}
.registration-context-banner.other span{color:#e7b55e}
.registration-context-banner.category{border-left-color:#4aa3df;background:linear-gradient(90deg,rgba(74,163,223,.10),var(--panel2) 38%)}
.registration-context-banner.category span{color:#79bde8}
.managed-pilot-picker{display:grid;gap:7px;margin:8px 0 14px;padding:12px;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.02)}
.selected-discord-pilot{display:flex;align-items:center;gap:10px;margin:4px 0 14px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.02)}
.selected-discord-pilot span{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.7px}.selected-discord-pilot strong{font-size:15px}
@media(max-width:700px){.form-title{align-items:flex-start}.registration-form-actions{width:100%;justify-content:flex-start;margin-top:8px}.registration-nav-button{flex:1 1 auto}.registration-context-banner{margin-top:8px;padding:11px 12px}.registration-context-banner strong{font-size:15px}}
.registration-other-starts{margin:14px 0 0;padding:0;border:0;min-width:0}
.registration-other-starts legend{margin-bottom:8px}
.registration-other-starts-list{display:flex;flex-wrap:wrap;gap:8px}
.registration-other-start{position:relative;display:inline-flex;align-items:center;padding:8px 14px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap}
.registration-other-start input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.registration-other-start:has(input:checked){border-color:var(--accent);color:var(--accent);background:rgba(126,227,143,.1)}
.registration-other-start:has(input:checked) span::before{content:'✓ '}
.registration-other-start:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}



/* styles/racing-theme.css */
/* Racing visual pass (Arc Raiders inspired).
   Presentation only: no application behavior, data model or information architecture changes. */
:root {
  --bg: #07090a;
  --panel: rgba(12,16,18,.94);
  --panel2: rgba(18,25,28,.95);
  --panel3: rgba(24,34,38,.96);
  --border: #29454a;
  --text: #f3ead8;
  --muted: #91a4a7;
  --blue: #52cfd4;
  --green: #52cfd4;
  --yellow: #e6b452;
  --red: #e4483d;
  --accent: #62dce0;
  --brand-cyan: #59d3d8;
  --brand-red: #e4483d;
  --brand-gold: #e7b653;
  --brand-cream: #f1e3c4;
  --brand-ink: #090c0e;
}

html { background: #07090a; }
body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 18% 4%, rgba(84,205,211,.08), transparent 25rem),
    radial-gradient(circle at 82% 18%, rgba(228,72,61,.055), transparent 30rem),
    linear-gradient(180deg,#080a0b 0%,#090c0e 42%,#07090a 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,9,10,.58),rgba(7,9,10,.76)),
    url('/images/tech-pattern.svg');
  background-repeat: repeat, repeat;
  background-size: auto, 720px 480px;
  background-position: center, 40px 10px;
  opacity: .42;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(118deg,rgba(255,255,255,.012) 0 1px,transparent 1px 7px),
    linear-gradient(90deg,transparent 0 8%,rgba(82,207,212,.025) 8.1%,transparent 8.2% 91%,rgba(228,72,61,.02) 91.1%,transparent 91.2%);
}

.top-stripes {
  height: 5px;
  grid-template-columns: 1.35fr .72fr .72fr .55fr;
  background: #07090a;
}
.top-stripes div:nth-child(1) { display:block; background: linear-gradient(90deg,#3bbcc4,#78dce0); }
.top-stripes div:nth-child(2) { display:block; background: linear-gradient(90deg,#d9433a,#f05b42); }
.top-stripes div:nth-child(3) { display:block; background: linear-gradient(90deg,#dfa63e,#efca70); }
.top-stripes div:nth-child(4) { display:block; background: #1c2427; }

/* Banner header */
header {
  position: relative;
  min-height: clamp(230px, 24vw, 340px);
  padding: 16px 22px;
  overflow: hidden;
  background-color: #090c0e;
  background-image:
    linear-gradient(180deg,rgba(4,7,8,.04),rgba(4,7,8,.16)),
    url('/images/endurance-manager-banner.webp?v=38');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid rgba(91,210,215,.42);
  box-shadow: 0 16px 42px rgba(0,0,0,.38), inset 0 -1px rgba(231,182,83,.16);
}
header::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:2px;
  background:linear-gradient(90deg,var(--brand-cyan),var(--brand-red) 46%,var(--brand-gold) 78%,transparent);
  opacity:.9;
}
.header-inner {
  position: relative;
  max-width: 1420px;
  min-height: calc(clamp(230px, 24vw, 340px) - 32px);
  align-items: flex-start;
}
.brand-button.logo {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(52%,760px);
  height: 100%;
  padding: 0;
  opacity: 0;
  border: 0;
  background: transparent;
}
.brand-mark-frame,
.brand-copy { display:none !important; }
#navigation {
  margin-left: auto;
  padding: 8px;
  border: 1px solid rgba(92,211,216,.26);
  border-radius: 8px;
  background: rgba(7,11,13,.70);
  box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}
#navigation .account-name { color: var(--brand-cream); }
#navigation .account-name small { color: #7fd9dc; }

/* Core surfaces */
main { position: relative; }
.event-card,
.form-panel,
.form-section,
.departure,
.departure-fold,
.event-header,
.empty,
.my-entry-card,
.crew-card,
.pilot-name-panel,
.member-row,
.recovery-panel {
  background-color: rgba(12,17,19,.92);
  border-color: rgba(73,118,123,.52);
  box-shadow: 0 12px 30px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.025);
}
.event-card:hover,
.departure-fold[open],
.my-entry-card[open] {
  border-color: rgba(90,205,211,.62);
  background-color: rgba(15,22,24,.96);
}
.event-card::after,
.event-header::after,
.form-panel::after {
  pointer-events:none;
}

.page-title,
.event-title,
.form-title,
.creation-intro h2,
.creation-card h2,
.my-entry-title h2 {
  color: var(--brand-cream);
  text-shadow: 0 1px 16px rgba(232,181,82,.05);
}
.page-subtitle,
.event-subtitle,
.creation-help,
.muted { color: var(--muted); }
.creation-kicker,
.my-entry-kicker { color: var(--brand-gold); }

/* Buttons and controls */
.primary-button,
.save-button {
  border: 1px solid rgba(111,226,229,.32);
  background: linear-gradient(180deg,#62dce0 0%,#31abb4 100%);
  color: #061012;
  box-shadow: inset 0 1px rgba(255,255,255,.26),0 5px 16px rgba(42,170,179,.12);
}
.primary-button:hover,
.save-button:hover { filter: brightness(1.08) saturate(1.05); }
.secondary-button,
.edit-button,
.event-section-tab,
.event-filter-button {
  border-color: rgba(71,111,116,.72);
  background: linear-gradient(180deg,rgba(25,34,37,.96),rgba(15,21,23,.96));
  color: #dce6e3;
}
.secondary-button:hover,
.edit-button:hover,
.event-section-tab:hover,
.event-filter-button:hover { border-color: rgba(89,207,212,.62); background: #192528; }
.event-section-tab[aria-pressed="true"],
.event-filter-button[aria-pressed="true"],
.registration-nav-button[aria-pressed="true"] {
  border-color: rgba(91,213,218,.72);
  background: linear-gradient(180deg,#1f5f64,#17484d);
  color: #eaffff;
  box-shadow: inset 0 1px rgba(255,255,255,.09),0 0 0 1px rgba(91,213,218,.08);
}
.danger-button { border-color: rgba(228,72,61,.62); background: linear-gradient(180deg,#51211f,#351716); color:#ffd8d2; }

input,
select,
textarea {
  background: rgba(15,22,24,.96);
  border-color: rgba(66,103,108,.72);
  color: var(--text);
}
input:focus,
select:focus,
textarea:focus { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px rgba(89,211,216,.09); }

/* Accent treatments */
.event-period-heading,
.fold-section > h2,
.crew-heading,
.my-entries-group-heading {
  border-color: rgba(76,129,134,.42);
}
.event-period-heading::after {
  content:"";
  flex: 1 1 80px;
  height: 1px;
  background: linear-gradient(90deg,rgba(89,211,216,.45),rgba(228,72,61,.22),transparent);
}
.event-card {
  background-image: linear-gradient(118deg,rgba(89,211,216,.025),transparent 30%,rgba(228,72,61,.018));
}
.event-card::before { box-shadow: 0 0 15px rgba(89,211,216,.10); }
.event-header-compact {
  background-image: linear-gradient(120deg,rgba(89,211,216,.035),transparent 34%,rgba(231,182,83,.025));
}
.event-header-summary,
.departure-fold > summary,
.crew-card-header,
.my-entry-header {
  border-color: rgba(67,107,112,.48);
}
.category-group-header {
  background: rgba(7,11,12,.78);
  border-top: 1px solid rgba(255,255,255,.025);
  border-bottom: 1px solid rgba(255,255,255,.025);
}
.pilot-row,
.crew-roster li,
.my-entry-pilot,
.my-entry-compact-pilot {
  background-color: rgba(18,25,28,.88);
  border-color: rgba(255,255,255,.04);
}

/* Timelines keep their semantic heat progression but adopt the shell. */
.presence-track {
  border-color: #456066;
  background: #172024;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.22);
}
.presence-track > .presence-segment {
  border-right-color: #456066;
  background: #172024;
  color: #aebcbe;
}
.presence-boundary::after { background: #638087; }
.presence-time { color: #cad6d4; }
.special-availability { border-color: rgba(66,102,107,.48); }

/* Small metallic details that echo the banner. */
.event-type-badge,
.my-entry-pill,
.coverage-summary {
  box-shadow: inset 0 1px rgba(255,255,255,.06);
}
.form-label { color: #a5b5b6; }
.registration-context-banner.self { border-left-color: var(--brand-cyan); }
.registration-context-banner.other { border-left-color: var(--brand-gold); }
.registration-context-banner.category { border-left-color: var(--brand-red); }

@media (min-width: 1000px) {
  main { max-width: 1180px; }
}

/* Mobile: keep the whole 3:1 artwork visible, then place navigation below it. */
@media (max-width: 700px) {
  header {
    min-height: 0;
    padding: calc(33.3125vw + 8px) 10px 10px;
    background-size: 100% auto;
    background-position: top center;
    background-color: #080b0d;
  }
  .header-inner {
    display: block;
    min-height: 0;
    width: 100%;
  }
  .brand-button.logo { display:none; }
  #navigation {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 7px;
    background: rgba(8,12,14,.93);
  }
  #navigation .account-name { grid-column: 1 / -1; }
  main { padding-top: 18px; }
  body::before { background-size: auto, 520px 347px; opacity:.34; }
}

@media (max-width: 460px) {
  #navigation { gap: 5px; padding: 6px; }
  body::before { background-size: auto, 440px 293px; }
}

@media (prefers-reduced-motion: reduce) {
  .event-card,
  .primary-button,
  .secondary-button { transition: none !important; }
}


/* Header/navigation refinement for wide screens. */
.site-nav-shell {
  position: relative;
  z-index: 8;
  width: min(calc(100% - 44px),1180px);
  height: 0;
  margin: 0 auto;
}
.site-nav-shell #navigation {
  position: absolute;
  top: 22px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.home-create-event {
  margin: 7px 0 10px;
}
.home-create-event .primary-button {
  min-width: 168px;
}
.home-toolbar { margin-top: 10px; }

@media (min-width: 1800px) {
  header {
    background-size: cover;
    background-position: center center;
  }
}

@media (max-width: 700px) {
  .site-nav-shell {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px 0;
  }
  .site-nav-shell #navigation {
    position: static;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
  }
  .home-create-event { margin: 7px 0 10px; }
  .home-create-event .primary-button { width: 100%; min-width: 0; }
}



/* styles/banner-media.css */
/* Stable banner rendering.
   Keep the complete artwork visible as a real image. The image is capped on ultrawide
   displays so browser zoom never stretches it beyond its source resolution; only the
   blurred backdrop fills the unused sides. */

header.site-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #070a0c;
  border-bottom: 1px solid rgba(91,210,215,.42);
  box-shadow: 0 16px 42px rgba(0,0,0,.38), inset 0 -1px rgba(231,182,83,.16);
}

header.site-hero::before {
  content: "";
  position: absolute;
  inset: -26px;
  z-index: 0;
  background:
    linear-gradient(180deg,rgba(5,8,10,.16),rgba(5,8,10,.38)),
    url('/images/endurance-manager-banner.webp?v=38') center / cover no-repeat;
  filter: blur(18px) saturate(.92) brightness(.52);
  transform: scale(1.035);
  opacity: .92;
  pointer-events: none;
}

header.site-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 2px;
  background: linear-gradient(90deg,var(--brand-cyan),var(--brand-red) 46%,var(--brand-gold) 78%,transparent);
  opacity: .9;
  pointer-events: none;
}

.hero-picture {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 2048px);
  aspect-ratio: 4 / 1;
  margin: 0 auto;
  background: #080b0d;
  box-shadow: 0 0 46px rgba(0,0,0,.4);
}

.hero-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: auto;
}

header.site-hero .header-inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: min(100%, 2048px);
  max-width: none;
  min-height: 0;
  margin: 0 auto;
  pointer-events: none;
}

header.site-hero .brand-button.logo {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 35%;
  height: 100%;
  padding: 0;
  opacity: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
}

.site-nav-shell {
  position: relative;
  z-index: 8;
  width: min(calc(100% - 44px),1180px);
  height: 0;
  margin: 0 auto;
}

.site-nav-shell #navigation {
  position: absolute;
  top: 22px;
  right: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 7px;
  margin: 0;
}

@media (min-width: 2048px) {
  .hero-picture,
  header.site-hero .header-inner {
    width: 2048px;
  }
}

@media (max-width: 2047px) {
  .hero-picture,
  header.site-hero .header-inner {
    width: 100%;
  }
}

@media (max-width: 700px) {
  header.site-hero {
    min-height: 0;
    padding: 0;
    background: #080b0d;
  }

  header.site-hero::before {
    filter: blur(12px) saturate(.9) brightness(.46);
    opacity: .72;
  }

  .hero-picture {
    width: 100%;
    aspect-ratio: 4 / 1;
    box-shadow: none;
  }

  header.site-hero .header-inner {
    display: block;
    width: 100%;
    min-height: 0;
  }

  header.site-hero .brand-button.logo {
    display: block;
    width: 46%;
  }

  .site-nav-shell {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 8px 10px 0;
  }

  .site-nav-shell #navigation {
    position: static;
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
    width: 100%;
    margin: 0;
  }
}



/* styles/crew-summary.css */
.crew-summary-heading {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 9px;
}

.crew-summary-heading span {
  color: var(--muted);
  font-size: 13px;
}

.crew-summary-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.crew-summary-card {
  display: grid;
  grid-template-columns: auto minmax(130px, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel2);
}

.crew-summary-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--crew-color);
  border-radius: 7px;
  color: var(--crew-color);
}

.crew-summary-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.crew-summary-title {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
}

.crew-summary-title strong,
.crew-summary-main small,
.crew-summary-pilots {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-summary-title strong {
  min-width: 0;
}

.crew-summary-title b {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.crew-summary-main small,
.crew-summary-pilots {
  color: var(--muted);
  font-size: 12px;
}

.crew-summary-pilots {
  text-align: right;
}

@media (max-width: 800px) {
  .crew-summary-heading {
    gap: 4px;
    margin-bottom: 5px;
    font-size: 13px;
  }

  .crew-summary-heading span {
    font-size: 11px;
  }

  .crew-summary-list {
    gap: 4px;
  }

  .crew-summary-card {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 7px;
    padding: 5px 8px;
    border-radius: 7px;
  }

  .crew-summary-icon {
    width: 22px;
    height: 22px;
  }

  .crew-summary-main {
    gap: 0;
    line-height: 1.12;
  }

  .crew-summary-title strong,
  .crew-summary-title b {
    font-size: 12px;
  }

  .crew-summary-main small,
  .crew-summary-pilots {
    font-size: 10px;
  }

  .crew-summary-pilots {
    grid-column: 2;
    margin-top: -1px;
    text-align: left;
  }
}




/* styles/grindfest.css */
.grindfest-grid {display:grid;grid-template-columns:repeat(var(--streamer-columns,4),minmax(0,1fr));gap:16px;align-items:stretch}
.grindfest-column {min-width:0;border:1px solid var(--border,#39404a);border-radius:12px;padding:14px;background:var(--surface,#171c25)}
.grindfest-streamer-head {display:flex;flex-direction:column;align-items:center;gap:8px;color:inherit;text-decoration:none;margin-bottom:18px;text-align:center}
.grindfest-streamer-head small {opacity:.7}
.grindfest-logo {width:64px;height:64px;object-fit:contain;border-radius:8px}
.grindfest-column .solo-entries {display:grid;grid-template-columns:minmax(0,1fr)}
.grindfest-streamer-form {display:grid;grid-template-columns:2fr 3fr 1fr;gap:12px;border-bottom:1px solid var(--border,#39404a);padding:16px 0}
.grindfest-streamer-form input {min-width:0;width:100%}
.grindfest-choice {margin-bottom:20px}
.grindfest-choice p {font-size:.9rem;color:var(--muted,#b4bdca)}
@media(max-width:1000px) {.grindfest-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px) {.grindfest-grid,.grindfest-streamer-form {grid-template-columns:1fr}}

html[data-game] #app .race-header[class*="is-solo-"] .event-type-panel:is([data-type="Gridfest"],[data-type="Grindfest"]) span {font-size:18px;letter-spacing:.02em;white-space:nowrap}
@media(max-width:600px) {html[data-game] #app .race-header[class*="is-solo-"] .event-type-panel:is([data-type="Gridfest"],[data-type="Grindfest"]) span {font-size:12px;padding:0 4px;letter-spacing:0}}

.grindfest-rounds {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}
.grindfest-round {min-width:0;padding:14px;border:1px solid var(--border,#39404a);border-radius:12px}
.grindfest-round h3 {margin:0 0 12px;font-size:1rem}
@media(max-width:600px) {.grindfest-rounds {grid-template-columns:1fr}}
.gridfest-game-name {display:block;white-space:normal;font-size:.8rem;font-weight:400;color:var(--muted,#b4bdca);overflow-wrap:anywhere}
.gridfest-mp {margin-bottom:16px}
.gridfest-mp-head {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gridfest-mp-head h3 {margin:0}
.gridfest-mp-head .planning-quick {position:static;flex-wrap:wrap}
.gridfest-mp-count {margin:14px 0 10px;color:var(--muted,#b4bdca);font-size:.9rem}
.gridfest-mp-count:empty {display:none}
.gridfest-mp .gridfest-mp-list {display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.gridfest-mp-tag {margin-left:auto;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;background:#2a3336;color:#c7d0d4}
.gridfest-mp-tag.is-sent {background:#2f6e3f;color:#e6ffec}
.gridfest-mp-tag.is-failed,.gridfest-mp-tag.is-incomplete {background:#6e2f2f;color:#ffe6e6}
.grindfest-streamer-head .count-pill {font-size:.85rem}

/* Gridfest: a festive look of its own (streamers gathering), on its page and its card only. */
/* TDZ colours: its orange accent (Réglages → Apparence), with gold and a deep orange. */
:root {--gf-pink:#ff3d00;--gf-violet:var(--community-accent,#ff7b00);--gf-cyan:#ffc400;--gf-gold:#fff1c2;--gf-grad:linear-gradient(100deg,var(--gf-pink),var(--gf-violet) 45%,var(--gf-cyan))}
.gridfest-avatar {flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:14px;object-fit:cover;background:#10151a;box-shadow:0 0 0 2px rgba(255,255,255,.08)}
.gridfest-avatar.is-initial {background:linear-gradient(135deg,hsl(var(--hue) 85% 58%),hsl(calc(var(--hue) + 40) 85% 45%));color:#fff;font-weight:900;font-size:26px}
.gridfest-streamer-copy {display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.gridfest-streamer-copy strong {font-size:1.05rem;overflow-wrap:anywhere}
.gridfest-streamer-copy small {color:var(--muted,#b4bdca);font-size:.82rem}

.grindfest-streamer-head {flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;text-align:left;margin-bottom:14px}
.grindfest-streamer-head .gridfest-avatar {width:72px;height:72px;border-radius:18px}

.gridfest-streamers {border:0;padding:0;margin:0}
.gridfest-streamer-cards {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:8px}
.gridfest-streamer-card {position:relative;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #3a4548;border-radius:14px;background:#151b1d;cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.gridfest-streamer-card input {position:absolute;opacity:0;pointer-events:none}
.gridfest-streamer-card:hover {border-color:var(--gf-violet);transform:translateY(-1px)}
.gridfest-streamer-card:has(input:checked) {border-color:transparent;background:linear-gradient(#22170c,#22170c) padding-box,var(--gf-grad) border-box;box-shadow:0 0 18px rgba(255,123,0,.35)}
.gridfest-streamer-card:has(input:focus-visible) {outline:2px solid var(--gf-cyan);outline-offset:2px}

/* Event page */
html[data-game] #app .race-header.is-gridfest {position:relative;border:1px solid transparent;background:radial-gradient(circle at 12% 20%,rgba(255,61,0,.18),transparent 40%),radial-gradient(circle at 88% 30%,rgba(255,196,0,.16),transparent 42%),linear-gradient(#17120c,#17120c) padding-box,var(--gf-grad) border-box;box-shadow:0 0 30px rgba(255,123,0,.25)}
html[data-game] #app .race-header.is-gridfest .event-title {border-left-style:solid;border-image:linear-gradient(180deg,var(--gf-pink),var(--gf-violet),var(--gf-cyan)) 1}
html[data-game] #app .race-header.is-gridfest::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.55;background:radial-gradient(circle,var(--gf-pink) 1.5px,transparent 2px) 0 0/46px 46px,radial-gradient(circle,var(--gf-cyan) 1.5px,transparent 2px) 23px 17px/52px 52px,radial-gradient(circle,var(--gf-gold) 1.2px,transparent 1.8px) 11px 31px/61px 61px;-webkit-mask:linear-gradient(90deg,transparent 30%,#000 75%);mask:linear-gradient(90deg,transparent 30%,#000 75%)}
html[data-game] #app .race-header.is-gridfest > * {position:relative;z-index:1}
html[data-game] #app .race-header.is-gridfest .event-type-panel {border:0;background:radial-gradient(circle,rgba(255,123,0,.35),transparent 70%)}
html[data-game] #app .race-header.is-gridfest .event-type-panel span {font-size:30px}
html[data-game] #app .race-header.is-gridfest .event-type-panel span,.gridfest-wordmark {background:var(--gf-grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:900;font-style:italic;letter-spacing:.06em;filter:drop-shadow(0 0 10px rgba(255,61,0,.45))}

.solo-round-starts.is-gridfest .grindfest-column {border-color:rgba(255,123,0,.45);background:linear-gradient(180deg,rgba(255,123,0,.12),transparent 120px),var(--surface,#171c25)}
.solo-round-starts.is-gridfest .grindfest-column:nth-child(3n+2) {border-color:rgba(255,61,0,.45);background:linear-gradient(180deg,rgba(255,61,0,.12),transparent 120px),var(--surface,#171c25)}
.solo-round-starts.is-gridfest .grindfest-column:nth-child(3n) {border-color:rgba(255,196,0,.45);background:linear-gradient(180deg,rgba(255,196,0,.12),transparent 120px),var(--surface,#171c25)}

/* Card in the list */
html[data-game] #app .race-card.is-gridfest .event-name {background:var(--gf-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-game] #app .race-card.is-gridfest {border:1px solid transparent;background:radial-gradient(circle at 85% 50%,rgba(255,123,0,.22),transparent 45%),linear-gradient(#17120c,#17120c) padding-box,var(--gf-grad) border-box}
html[data-game] #app .race-card .gridfest-card-panel {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.gridfest-card-panel .gridfest-wordmark {font-size:24px}
.gridfest-avatars {display:flex;justify-content:center}
.gridfest-avatars .gridfest-avatar {width:38px;height:38px;border-radius:50%;font-size:16px;margin-left:-8px;box-shadow:0 0 0 2px #17120c}
.gridfest-avatars .gridfest-avatar:first-child {margin-left:0}
@media(max-width:600px) {
  .grindfest-streamer-head .gridfest-avatar {width:60px;height:60px}
  .gridfest-streamer-cards {grid-template-columns:1fr}
  html[data-game] #app .race-card .race-card-type-logo.gridfest-card-panel {display:flex}
  .gridfest-card-panel .gridfest-wordmark {font-size:15px}
  .gridfest-avatars .gridfest-avatar {width:28px;height:28px;font-size:12px}
}
@media(prefers-reduced-motion:no-preference) {.gridfest-wordmark,html[data-game] #app .race-header.is-gridfest .event-type-panel span {background-size:200% 100%;animation:gf-shine 6s ease-in-out infinite alternate}}
@keyframes gf-shine {to {background-position:100% 0}}

/* Official Gridfest artwork, preserving each logo's proportions. */
html[data-game] #app .race-card .gridfest-card-panel {gap:6px}
.gridfest-card-panel .gridfest-card-logo {display:block;width:100%;height:90px;object-fit:contain}
html[data-game] #app .race-header .event-type-panel .gridfest-header-logo {display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:600px) {
  .gridfest-card-panel .gridfest-card-logo {height:60px}
}




/* styles/game-hub.css */
.hub-main {
  width: min(1320px, calc(100% - 32px));
  margin: 20px auto 70px;
}

.hub-intro {
  margin: 0 auto 14px;
  text-align: center;
}

.hub-intro h1 {
  margin: 0;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
}

#hub-status {
  min-height: 0;
  margin: 0 0 10px;
  color: var(--muted);
  text-align: center;
}

#hub-status:empty { display: none; }

.game-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.game-hub-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--game-accent) 82%, var(--border));
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 180px), var(--panel);
  box-shadow: 0 18px 50px rgba(0,0,0,.22), 0 0 0 1px color-mix(in srgb, var(--game-accent) 18%, transparent);
}

.game-hub-card.game-iracing { --game-accent: #254185; }
.game-hub-card.game-lmu { --game-accent: #e30613; }

.game-hub-heading {
  padding: 22px 26px 18px;
  border-top: 4px solid var(--game-accent);
}

.game-title-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.game-badge {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--game-accent) 72%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--game-accent) 16%, var(--panel2));
  color: var(--game-accent);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.03em;
}

.hub-next-label {
  display: block;
  color: var(--game-accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
}

.game-hub-heading h2 {
  min-width: 0;
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
}

.game-hub-heading p {
  min-height: 2.8em;
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.game-hub-enter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 26px 24px;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 60%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--game-accent) 13%, var(--panel2));
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
}

.game-hub-enter:hover,
.game-hub-enter:focus-visible {
  border-color: var(--game-accent);
  background: color-mix(in srgb, var(--game-accent) 19%, var(--panel2));
}

.hub-next-race,
.hub-empty {
  border-top: 1px solid color-mix(in srgb, var(--game-accent) 36%, var(--border));
  padding: 22px 26px 26px;
}

.hub-next-race h3 {
  margin: 6px 0 10px;
  font-size: 23px;
}

.hub-race-meta {
  display: grid;
  gap: 4px;
  margin: 0 0 20px;
}

.hub-race-meta span {
  color: var(--muted);
  font-size: 14px;
}

.hub-no-crews,
.hub-empty { color: var(--muted); }

.hub-no-crews {
  margin: 8px 0 0;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 9px;
}

.hub-empty {
  display: grid;
  gap: 5px;
}

.hub-empty span { font-size: 13px; }

@media (max-width: 800px) {
  .hub-main {
    width: min(100% - 16px, 660px);
    margin: 8px auto 44px;
  }
  .hub-intro { margin-bottom: 7px; }
  .hub-intro h1 { font-size: 20px; }
  .game-hub-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .game-hub-card { border-radius: 14px; }
  .game-hub-heading {
    padding: 12px 14px 8px;
    border-top-width: 3px;
  }
  .game-title-line { gap: 9px; }
  .game-badge {
    width: 38px;
    height: 28px;
    border-radius: 7px;
    font-size: 12px;
  }
  .game-hub-heading h2 { font-size: 25px; }
  .game-hub-heading p { display: none; }
  .game-hub-enter {
    margin: 0 14px 10px;
    padding: 9px 12px;
    min-height: 38px;
    border-radius: 8px;
    font-size: 14px;
  }
  .hub-next-race,
  .hub-empty { padding: 11px 14px 13px; }
  .hub-next-label {
    font-size: 9px;
    letter-spacing: .11em;
  }
  .hub-next-race h3 {
    margin: 3px 0 5px;
    font-size: 18px;
    line-height: 1.15;
  }
  .hub-race-meta {
    gap: 1px;
    margin-bottom: 9px;
    line-height: 1.25;
  }
  .hub-race-meta strong { font-size: 13px; }
  .hub-race-meta span { font-size: 11px; }
  .hub-no-crews {
    margin-top: 4px;
    padding: 7px 8px;
    font-size: 11px;
  }
  .hub-empty {
    gap: 2px;
    font-size: 13px;
  }
  .hub-empty span { font-size: 11px; }
}

@media (max-width: 700px) {
  header.site-hero { padding: 0; }
}


/* styles/hub-account-position.css */
.hub-topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  margin: 0 0 14px;
}

.hub-topbar .account-bar {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  justify-content: flex-end;
  max-width: none;
  margin: 0;
  padding: 0;
}

.hub-topbar .hub-intro {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  text-align: center;
}

@media (max-width: 800px) {
  .hub-topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 10px;
  }

  .hub-topbar .account-bar,
  .hub-topbar .hub-intro {
    grid-column: 1;
    grid-row: auto;
  }

  .hub-topbar .account-bar {
    justify-self: end;
  }

  .hub-topbar .hub-intro {
    justify-self: center;
    text-align: center;
  }
}


/* styles/account-menu.css */
.account-bar {
  position: relative;
  z-index: 95;
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px 0;
  display: flex;
  justify-content: flex-end;
}

.account-menu-root {
  position: relative;
  min-width: 0;
}

.account-disconnected-wrap {
  display: grid;
  justify-items: end;
  gap: 4px;
  min-width: 0;
}

/* État déconnecté : Aide et connexion Discord restent sur une seule ligne. */
.account-disconnected-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.account-oauth-trust {
  margin: 0;
  max-width: 390px;
  color: #8fa2a5;
  font-size: 9.5px;
  line-height: 1.25;
  text-align: right;
  white-space: normal;
}

.account-oauth-trust a {
  color: #9edce0;
  text-decoration: none;
}

.account-oauth-trust a:hover,
.account-oauth-trust a:focus-visible {
  text-decoration: underline;
}

.account-disconnected-actions .account-help-link {
  width: auto;
  min-height: 40px;
  flex: 0 0 auto;
  padding: 7px 11px;
  border: 1px solid rgba(88,113,118,.72);
  border-radius: 11px;
  background: rgba(12,18,21,.92);
  color: #eef3f2;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.account-disconnected-actions .account-discord-login,
.account-disconnected-actions .account-discord-unavailable {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

/* Les actions de compte sont désormais regroupées dans le menu Discord commun. */
#navigation > .account-name,
#navigation > [data-action="logout"],
#navigation > [data-action="members"],
#navigation > .discord-button,
#navigation .help-nav-button {
  display: none !important;
}

#navigation > .help-sim-stack {
  display: contents !important;
}

#navigation .nav-game-switcher {
  min-width: 0;
}

.account-menu {
  position: relative;
}

.account-trigger,
.account-discord-login,
.account-discord-unavailable {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(88,113,118,.72);
  border-radius: 11px;
  background: rgba(12,18,21,.92);
  color: #f4f7f6;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.account-trigger,
.account-discord-login {
  cursor: pointer;
}

.account-trigger {
  padding: 5px 10px 5px 6px;
}

.account-discord-login,
.account-discord-unavailable {
  padding: 7px 11px;
  font-weight: 800;
  font-size: 13px;
}

.account-discord-login {
  color: #dfe6ff;
  border-color: rgba(114,137,218,.8);
  background: rgba(88,101,242,.14);
}

.account-discord-login svg,
.account-discord-unavailable svg {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.account-avatar {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  color: #fff;
  background: #5865f2;
  border: 1px solid rgba(255,255,255,.16);
}

.account-avatar img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-avatar svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  display: none;
}

.account-avatar.is-fallback svg {
  display: block;
}

.account-trigger-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
  text-align: left;
}

.account-trigger-copy strong,
.account-popover-profile strong {
  font-size: 13px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-trigger-copy small,
.account-popover-profile small {
  color: #8fcfd2;
  font-size: 10px;
  line-height: 1.15;
}

.account-chevron {
  margin-left: 3px;
  color: #9fb0b1;
  font-size: 14px;
  transition: transform .16s ease;
}

.account-menu.is-open .account-chevron {
  transform: rotate(180deg);
}

.account-popover {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: min(270px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid rgba(82,116,121,.72);
  border-radius: 12px;
  background: rgba(7,12,15,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.account-popover-profile {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 5px 6px 9px;
}

.account-popover-profile .account-avatar {
  width: 36px;
  height: 36px;
}

.account-popover-profile > span:last-child {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.account-menu-item {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #eef3f2;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: rgba(89,211,216,.09);
}

.account-menu-logout {
  color: #ff7c83;
}

.account-menu-separator {
  display: block;
  height: 1px;
  margin: 5px 4px;
  background: rgba(255,255,255,.08);
}

@media (max-width: 1280px) and (min-width: 761px) {
  .account-disconnected-actions { gap: 6px; }
  .account-disconnected-actions .account-help-link { padding-inline: 9px; font-size: 12px; }
  .account-disconnected-actions .account-discord-login,
  .account-disconnected-actions .account-discord-unavailable { padding-inline: 9px; font-size: 12px; }
  .account-oauth-trust { max-width: 340px; font-size: 9px; }
}

@media (max-width: 760px) {
  .account-bar {
    padding: 6px 8px 0;
  }

  .account-trigger {
    max-width: min(250px, calc(100vw - 16px));
  }

  .account-trigger-copy strong {
    max-width: 145px;
  }

  .account-disconnected-wrap {
    width: 100%;
    justify-items: stretch;
  }

  .account-disconnected-actions {
    width: 100%;
    justify-content: stretch;
    gap: 6px;
  }

  .account-oauth-trust {
    max-width: none;
    padding-inline: 2px;
    font-size: 8.5px;
    text-align: center;
  }

  .account-disconnected-actions .account-help-link {
    min-height: 38px;
    padding-inline: 10px;
  }

  .account-disconnected-actions .account-discord-login,
  .account-disconnected-actions .account-discord-unavailable {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 38px;
    font-size: 12px;
  }

  #navigation .nav-game-switcher {
    order: 3 !important;
    grid-column: 1 / -1;
    width: 100%;
  }
}

/* Notifications : la cloche à côté du compte (front/notifications.mjs). */
.account-bar:has(.notif-wrap) {
  align-items: center;
  gap: 6px;
}

.notif-wrap {
  position: relative;
  flex: none;
  display: flex;
  align-self: stretch;
}

.notif-bell {
  position: relative;
  width: 40px;
  height: 100%;
  min-height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(88,113,118,.72);
  border-radius: 11px;
  background: rgba(12,18,21,.92);
  color: #eef3f2;
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  cursor: pointer;
}

.notif-bell:hover,
.notif-bell:focus-visible,
.notif-wrap.is-open .notif-bell {
  border-color: rgba(95,211,220,.75);
}

.notif-bell svg {
  display: block;
  width: 20px;
  height: 20px;
}

.notif-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e5484d;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px #0b0d0f;
}

.notif-count[hidden] {
  display: none;
}

.notif-panel {
  position: absolute;
  z-index: 100;
  top: calc(100% + 7px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: min(480px, calc(100vh - 120px));
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(82,116,121,.72);
  border-radius: 12px;
  background: rgba(7,12,15,.98);
  box-shadow: 0 18px 42px rgba(0,0,0,.42);
}

.notif-head {
  padding: 6px 8px 8px;
  color: #99a3a0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.notif-item {
  display: grid;
  gap: 2px;
  padding: 8px 10px 8px 14px;
  position: relative;
  border-radius: 8px;
  color: #c7d0d4;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
}

a.notif-item:hover,
a.notif-item:focus-visible {
  background: rgba(89,211,216,.09);
}

.notif-item.is-unread {
  color: #f4f7f6;
  background: rgba(89,211,216,.05);
}

.notif-item.is-unread::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5fd3dc;
}

.notif-text strong {
  color: #fff;
}

.notif-meta {
  color: #8fcfd2;
  font-size: 11.5px;
}

.notif-time {
  color: #7f8b8d;
  font-size: 11px;
}

.notif-empty {
  margin: 0;
  padding: 6px 10px 10px;
  color: #a9b4b6;
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .notif-bell {
    width: 38px;
    min-height: 38px;
  }

  .notif-panel {
    position: fixed;
    top: var(--notif-top, 64px);
    left: 12px;
    right: 12px;
    width: auto;
    max-height: calc(100vh - var(--notif-top, 64px) - 12px);
  }
}


/* styles/desktop-nav-unified.css */
.desktop-nav-center,
.desktop-nav-right { display:none; }

@media (min-width: 761px) {
  .site-nav-shell {
    position: relative !important;
    z-index: 80 !important;
    width: min(1600px, calc(100% - 36px)) !important;
    max-width: none !important;
    min-height: 68px;
    margin: 12px auto 8px !important;
    padding: 10px 14px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(360px,420px) minmax(0,1fr) !important;
    align-items: center !important;
    column-gap: 20px !important;
    border: 1px solid rgba(70,108,113,.5) !important;
    border-radius: 14px !important;
    background: rgba(8,12,14,.94) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.2) !important;
  }

  .site-nav-shell .game-space-bar { display:none !important; }

  .desktop-home-toolbar {
    grid-column: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .desktop-home-title {
    flex: 0 0 auto;
    color: var(--text);
    font-size: 15px;
    font-weight: 950;
    letter-spacing: .045em;
    white-space: nowrap;
  }

  .desktop-home-toolbar .home-create-event,
  .desktop-home-toolbar .event-filter { margin:0 !important; }
  .desktop-home-toolbar .home-create-event { display:contents; }

  .desktop-home-toolbar .home-create-event .primary-button,
  .desktop-home-toolbar > [data-action="home"] {
    min-height: 42px;
    padding: 8px 15px;
    white-space: nowrap;
    font-size: 13px;
  }

  .desktop-home-toolbar .event-filter {
    display:flex;
    gap:5px;
    padding:4px;
    border:1px solid rgba(70,108,113,.5);
    border-radius:10px;
    background:rgba(255,255,255,.018);
  }

  .desktop-home-toolbar .event-filter-button {
    min-height:34px;
    padding:6px 11px;
    font-size:12px;
    white-space:nowrap;
  }

  .desktop-nav-center {
    grid-column: 2;
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
  }

  .desktop-nav-center .nav-game-switcher {
    display:grid;
    grid-template-columns:repeat(2,minmax(165px,1fr));
    gap:10px;
    width:100%;
    max-width:410px;
    margin:0;
    padding:0;
  }

  .desktop-nav-center .nav-game-switcher-button {
    min-width:165px;
    min-height:46px;
    padding:9px 16px;
    border-radius:10px;
    font-size:14px;
    letter-spacing:.01em;
    white-space:nowrap;
  }

  .desktop-nav-right {
    grid-column:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
    min-width:0;
  }

  .desktop-nav-right-controls {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }

  .desktop-nav-right-controls > [data-action="my-entries"] {
    min-width:170px;
    min-height:44px;
    margin:0 !important;
    padding:9px 16px !important;
    white-space:nowrap;
  }

  .desktop-nav-right .account-bar {
    flex:0 0 auto;
    max-width:none;
    margin:0;
    padding:0;
    justify-content:flex-end;
  }

  .site-nav-shell #navigation {
    display:none !important;
  }

  .site-nav-shell.is-events-home + #app > .page-title,
  .site-nav-shell.is-events-home + #app > .home-create-event,
  .site-nav-shell.is-events-home + #app > .event-filter {
    display:none !important;
  }

  .site-nav-shell.is-events-home + #app {
    margin-top:0 !important;
    padding-top:6px !important;
  }

  .site-nav-shell.is-events-home + #app > .event-agenda {
    margin-top:0 !important;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .site-nav-shell {
    grid-template-columns:minmax(0,1fr) minmax(300px,340px) minmax(0,1fr) !important;
    column-gap:12px !important;
  }

  .desktop-home-title { display:none; }
  .desktop-home-toolbar { gap:6px; }
  .desktop-home-toolbar .home-create-event .primary-button { padding-inline:10px; }
  .desktop-nav-center .nav-game-switcher { gap:6px; }
  .desktop-nav-center .nav-game-switcher-button { min-width:140px; padding-inline:10px; font-size:13px; }
  .desktop-nav-right-controls > [data-action="my-entries"] { min-width:145px; padding-inline:12px !important; }
}


/* styles/legal.css */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 7px;
  padding: 18px 16px 26px;
  font-size: .82rem;
  opacity: .72;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  opacity: 1;
  text-decoration: underline;
}


/* crew-accordion.css */
/* Compact crew presentation inside "Pilotes inscrits". */
.crew-pilot-group.crew-pilot-accordion {
  margin: 10px 0;
  padding: 0;
  overflow: hidden;
}

.crew-pilot-accordion > summary {
  list-style: none;
}

.crew-pilot-accordion > summary::-webkit-details-marker {
  display: none;
}

.crew-pilot-accordion-summary {
  display: grid;
  grid-template-columns: 40px minmax(120px, .9fr) minmax(180px, 1.5fr) minmax(150px, 1.05fr) max-content 18px;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 9px 12px;
  cursor: pointer;
  background: color-mix(in srgb, var(--crew-color) 5%, #151c1f);
  transition: background .15s ease, opacity .15s ease;
}

.crew-pilot-accordion.is-complete .crew-pilot-accordion-summary {
  background: color-mix(in srgb, #7d8589 8%, #151c1f);
}

.crew-pilot-accordion-summary:hover {
  background: color-mix(in srgb, var(--crew-color) 12%, #151c1f);
}

.crew-pilot-accordion-summary:focus-visible {
  outline: 2px solid var(--crew-color);
  outline-offset: -2px;
}

.crew-compact-category {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
}

.crew-compact-category .category-logo {
  width: auto;
  max-width: 36px;
  height: auto;
  max-height: 28px;
  object-fit: contain;
}

.crew-compact-category .category-text-logo {
  font-size: 9px;
  font-weight: 900;
}

.crew-compact-team,
.crew-compact-pilots,
.crew-compact-car {
  min-width: 0;
}

.crew-compact-team strong {
  display: block;
  overflow: hidden;
  color: var(--crew-color);
  font-size: 14px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-compact-pilots,
.crew-compact-car {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crew-compact-pilots {
  color: #eef4f4;
}

.crew-compact-car {
  color: #c4d0d0;
  text-align: right;
}

.crew-compact-status,
.crew-card-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 4px 8px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .55px;
  line-height: 1;
  white-space: nowrap;
}

.crew-compact-status.is-open,
.crew-card-status.is-open {
  color: #a9f3c2;
  border-color: #3e9b63;
  background: #173624;
}

.crew-compact-status.is-complete,
.crew-card-status.is-complete {
  color: #c1c7ca;
  border-color: #586166;
  background: #292e31;
}

.crew-compact-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--crew-color);
  font-size: 20px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .18s ease;
}

.crew-pilot-accordion[open] .crew-compact-chevron {
  transform: rotate(90deg);
}

.crew-pilot-accordion-body {
  padding: 0 12px 10px;
  border-top: 1px solid color-mix(in srgb, var(--crew-color) 22%, transparent);
}

.crew-pilot-accordion-body > .crew-pilot-group-header {
  padding-top: 10px;
}

.crew-capacity-message {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid #384246;
  border-left: 4px solid #68747a;
  border-radius: 7px;
  background: #171c1f;
  color: #c5ced1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.crew-capacity-message.is-open {
  border-left-color: #43b96e;
}

.crew-capacity-message.needs-pilots {
  border-color: #376e4b;
  border-left-color: #5fd687;
  background: #14251b;
  color: #d7f4e0;
}

.crew-capacity-message.is-complete {
  border-left-color: #7a8489;
  color: #adb5b8;
}

.crew-card-header {
  gap: 12px;
}

.crew-card-header .crew-card-status {
  margin-left: auto;
  align-self: flex-start;
}

.crew-card.is-complete {
  opacity: .82;
}

.crew-card.is-complete .crew-assignment {
  opacity: .58;
}

.crew-lock-button,
.crew-unlock-button {
  margin-right: auto;
}

@media (max-width: 900px) {
  .crew-pilot-accordion-summary {
    grid-template-columns: 40px minmax(120px, .95fr) minmax(160px, 1.25fr) max-content 18px;
  }

  .crew-compact-car {
    display: none;
  }
}

@media (max-width: 760px) {
  .crew-pilot-accordion-summary {
    grid-template-columns: 36px minmax(0, 1fr) max-content 18px;
    gap: 7px 9px;
    padding: 9px 10px;
  }

  .crew-compact-category {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 36px;
    min-width: 36px;
  }

  .crew-compact-team {
    grid-column: 2;
    grid-row: 1;
  }

  .crew-compact-status {
    grid-column: 3;
    grid-row: 1;
  }

  .crew-compact-chevron {
    grid-column: 4;
    grid-row: 1;
  }

  .crew-compact-pilots {
    grid-column: 2 / 5;
    grid-row: 2;
  }

  .crew-compact-car {
    display: block;
    grid-column: 2 / 5;
    grid-row: 3;
    text-align: left;
  }
}

@media (max-width: 520px) {
  .crew-pilot-accordion-summary {
    grid-template-columns: 34px minmax(0, 1fr) 18px;
  }

  .crew-compact-category {
    width: 34px;
    min-width: 34px;
  }

  .crew-compact-status {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: start;
  }

  .crew-compact-car {
    grid-row: 4;
  }
}


/* crew-builder.css */
.crew-section [data-action="new-crew"] { display: none !important; }

.crew-builder-open { margin-left: 2px; }

.crew-builder-panel {
  width:100%;
  min-width:0;
  margin: 18px 0 22px;
  padding: 18px;
  border: 1px solid #344147;
  border-radius: 12px;
  background: linear-gradient(180deg, #171e21, #101416);
  box-shadow: 0 14px 32px rgba(0,0,0,.22);
  overflow:hidden;
}

.crew-builder-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  min-width:0;
  margin-bottom: 16px;
}
.crew-builder-heading>div{min-width:0}
.crew-builder-heading h2 { margin: 4px 0 6px; overflow-wrap:anywhere; }
.crew-builder-heading p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.5; }

.crew-builder-form { display: grid; gap: 14px; min-width:0; }

.crew-builder-card {
  min-width:0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,.018);
  overflow:hidden;
}

.crew-builder-card-title {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width:0;
  margin-bottom: 14px;
}
.crew-builder-card-title>div{min-width:0}

.crew-builder-card-title > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
}

.crew-builder-card-title h3 { margin: 0 0 4px; }
.crew-builder-card-title p { margin: 0; color: var(--muted); font-size: 13px; overflow-wrap:anywhere; }

.crew-builder-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  min-width:0;
}

.crew-builder-fields label {
  display: grid;
  gap: 7px;
  min-width:0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.crew-builder-fields input,
.crew-builder-fields select {
  width: 100%;
  min-width: 0;
  max-width:100%;
}
.crew-builder-fields input:disabled,.crew-builder-fields select:disabled{opacity:.72;cursor:not-allowed}

.crew-builder-pilots {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  min-width:0;
}

.crew-builder-pilot {
  display: grid;
  gap: 8px;
  min-width:0;
  padding: 12px;
  border: 1px solid #344147;
  border-radius: 10px;
  background: #101416;
  cursor: pointer;
  overflow:hidden;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.crew-builder-pilot:hover { border-color: #587269; }
.crew-builder-pilot.is-selected {
  border-color: var(--green);
  background: rgba(36,132,79,.16);
  box-shadow: inset 3px 0 0 var(--green);
}
.crew-builder-pilot.is-locked{cursor:default}

.crew-builder-pilot-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width:0;
}

.crew-builder-pilot-head input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.crew-builder-pilot-head > span { display: grid; gap: 2px; min-width: 0; }
.crew-builder-pilot-head strong { color: var(--text); overflow-wrap:anywhere; }
.crew-builder-pilot-head em{width:max-content;max-width:100%;padding:2px 6px;border:1px solid #3e9b63;border-radius:999px;color:#a9f3c2;background:#173624;font-size:8px;font-style:normal;font-weight:900;letter-spacing:.45px;line-height:1.2}
.crew-builder-pilot-head small { color: var(--muted); overflow-wrap: anywhere; }
.crew-builder-pilot-wish { color: var(--muted); font-size: 12px; overflow-wrap:anywhere; }
.crew-builder-pilot-wish strong { color: #dcefe5; }
.crew-builder-pilot .presence-timeline,.crew-builder-coverage .presence-timeline{width:100%;min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}

.crew-builder-warning {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #d6a63b;
  background: rgba(214,166,59,.08);
  color: #d8c89f;
  font-size: 12px;
  line-height: 1.5;
}
.crew-builder-help{margin:10px 0 0;color:var(--muted);font-size:12px;line-height:1.45}

.crew-builder-empty { margin: 0; color: var(--muted); }

.crew-builder-coverage-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.crew-builder-coverage-heading > div { display: grid; gap: 3px; }
.crew-builder-step-label { color: var(--green); font-size: 10px; font-weight: 900; letter-spacing: 1px; }
.crew-builder-coverage-heading strong { font-size: 18px; }
.crew-builder-coverage-heading > span { color: var(--muted); font-size: 12px; font-weight: 800; }

.crew-builder-coverage-message {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.crew-builder-coverage-message.needs-pilots { color: #9ce1b4; }

.crew-builder-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  min-width:0;
}

.crew-builder-submit-note {
  margin-right: auto;
  color: var(--muted);
  font-size: 12px;
  line-height:1.4;
}

.crew-builder-error { margin: 0; }
.crew-builder-result { margin: 8px 0 14px; }

@media (max-width: 820px) {
  .crew-builder-pilots { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .crew-builder-panel { margin:12px 0 16px;padding: 12px;border-radius:10px; }
  .crew-builder-heading { flex-direction: column;gap:12px; }
  .crew-builder-heading > button { width: 100%; }
  .crew-builder-card{padding:12px}
  .crew-builder-fields { grid-template-columns: 1fr;gap:10px; }
  .crew-builder-actions { flex-direction: column; align-items: stretch; }
  .crew-builder-submit-note { margin-right: 0; }
  .crew-builder-actions .primary-button { width: 100%;min-height:44px; }
  .crew-builder-coverage-heading { align-items: flex-start; flex-direction: column; }
  .crew-builder-pilot{padding:10px}
}

@media(max-width:420px){
  .crew-builder-panel{padding:9px}
  .crew-builder-card{padding:10px}
  .crew-builder-card-title{gap:9px}
  .crew-builder-card-title>span{width:28px;height:28px;flex-basis:28px}
}


/* styles/crew-builder-registration-shortcut.css */
.crew-builder-composition-actions {
  display: flex;
  justify-content: flex-end;
  margin: -2px 0 10px;
}

.crew-builder-register-pilot {
  min-height: 38px;
  padding: 7px 11px;
}

body.registration-modal-open {
  overflow: hidden;
}

.registration-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 3vh, 28px) 12px;
  overflow-y: auto;
  background: rgba(3, 8, 11, .82);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.registration-modal-panel {
  width: min(860px, 100%);
  max-height: calc(100dvh - clamp(24px, 6vh, 56px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(93, 142, 148, .72);
  border-radius: 16px;
  background: linear-gradient(180deg, #151d20, #0c1113);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .58);
}

.registration-modal-header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(86, 117, 122, .45);
  background: rgba(12, 18, 21, .97);
}

.registration-modal-header > div {
  min-width: 0;
}

.registration-modal-header h2 {
  margin: 4px 0 5px;
  font-size: 23px;
  line-height: 1.1;
}

.registration-modal-header p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.registration-modal-close {
  flex: 0 0 auto;
  min-height: 40px;
}

.registration-modal-content {
  min-height: 0;
  padding: 16px 18px 18px;
  overflow: auto;
  overscroll-behavior: contain;
}

.registration-modal-content .registration-form {
  margin: 0;
}

.registration-modal-content .form-title {
  display: none;
}

.registration-modal-error {
  flex: 0 0 auto;
  margin: 0 18px 16px;
}

@media (max-width: 680px) {
  .crew-builder-composition-actions {
    justify-content: stretch;
  }

  .crew-builder-register-pilot {
    width: 100%;
  }

  .registration-modal-backdrop {
    padding: 8px;
  }

  .registration-modal-panel {
    width: 100%;
    max-height: calc(100dvh - 16px);
    border-radius: 13px;
  }

  .registration-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    gap: 10px;
    padding: 12px;
  }

  .registration-modal-header h2 {
    font-size: 19px;
  }

  .registration-modal-header p {
    font-size: 12px;
  }

  .registration-modal-close {
    min-height: 38px;
    padding: 6px 9px;
  }

  .registration-modal-content {
    padding: 12px;
  }

  .registration-modal-error {
    margin: 0 12px 12px;
  }
}


/* ux-refinement.css */
.ux-error-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px;background:rgba(4,8,10,.82);backdrop-filter:blur(5px)}
.ux-error-dialog{width:min(520px,100%);padding:28px;border:1px solid rgba(255,110,110,.55);border-radius:16px;background:linear-gradient(180deg,#20272a,#14191b);box-shadow:0 28px 80px rgba(0,0,0,.55);text-align:center}
.ux-error-icon{display:grid;place-items:center;width:48px;height:48px;margin:0 auto 14px;border:2px solid #ff7777;border-radius:50%;color:#ff9c9c;font-size:28px;font-weight:900}
.ux-error-dialog h2{margin:0 0 10px;font-size:24px}.ux-error-dialog p{margin:0 0 22px;color:#dce5e3;line-height:1.55}.ux-error-dialog button{min-width:180px}
.fold-registration[hidden]{display:none!important}.ux-registration-toggle{margin-left:auto}
.ux-course-overview{display:grid;gap:14px}.ux-unassigned-section{padding:14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.015)}
.ux-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.ux-section-heading h3{margin:3px 0 0;font-size:18px}.ux-count{display:grid;place-items:center;min-width:34px;height:34px;padding:0 9px;border:1px solid var(--border);border-radius:999px;background:var(--panel3);font-weight:900}
.ux-unassigned-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ux-unassigned-grid>.pilot-row{margin:0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}
.ux-crew-bucket{overflow:hidden;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.012)}.ux-crew-bucket>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;cursor:pointer;font-weight:900;list-style:none}.ux-crew-bucket>summary::-webkit-details-marker{display:none}.ux-crew-bucket>summary strong{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--panel3);border:1px solid var(--border)}
.ux-crew-bucket[open]>summary{border-bottom:1px solid var(--border)}.ux-crew-bucket-body{display:grid;gap:10px;padding:12px}.ux-crew-bucket .crew-pilot-accordion{margin:0}.ux-unavailable-bucket{opacity:.82}
.ux-original-assignment{display:none!important}.ux-crew-candidate-wrap{margin-top:14px;padding-top:14px;border-top:1px solid var(--border)}.ux-candidate-title{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.ux-candidate-title span{color:var(--muted);font-size:12px}.ux-crew-candidate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ux-crew-candidate{display:block;width:100%;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--panel2);color:var(--text);text-align:left;cursor:pointer;transition:border-color .16s ease,transform .16s ease,background .16s ease}.ux-crew-candidate:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--panel2));transform:translateY(-1px)}.ux-candidate-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}.ux-candidate-head>span{color:var(--green);font-size:12px;font-weight:900}.ux-crew-candidate>small{display:block;margin-top:3px;color:var(--muted)}.ux-crew-candidate .presence-timeline{margin-top:9px}
.crew-roster{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}.crew-roster>li{margin:0!important;border:1px solid var(--border);border-radius:9px;background:rgba(255,255,255,.018)}
[data-crew-builder-open][hidden],[data-crew-builder-panel][hidden]{display:none!important}
@media(max-width:760px){.ux-unassigned-grid,.ux-crew-candidate-grid,.crew-roster{grid-template-columns:1fr}.ux-candidate-title{align-items:flex-start;flex-direction:column}.ux-registration-toggle{width:100%;margin-left:0}.fold-toolbar{flex-wrap:wrap}}


/* Keep pilot names, preferences and controls comfortably inside each roster card. */
.crew-card .crew-roster > li { padding: 12px 14px; gap: 16px; }
.crew-card .crew-roster > li > div { flex: 1; min-width: 0; }
.crew-card .crew-roster > li > button { flex-shrink: 0; }


/* styles/crew-controls.css */
.registration-form .special-availability{grid-template-columns:1fr!important}

/* Single course page: compact crew section, visually aligned with the home cards. */
.ux-course-crews-block{display:grid;gap:7px;min-width:0}
.ux-course-crews-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;padding:0 2px 2px}
.ux-course-crews-title{display:inline-flex;align-items:center;gap:8px;color:var(--text);font-size:15px;font-weight:900}
.ux-course-crews-title strong{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border:1px solid #35545b;border-radius:999px;background:#142024;color:#dce8e5;font-size:11px}
.crew-section-create{width:auto!important;min-width:0!important;min-height:32px!important;margin:0!important;padding:6px 10px!important;border-radius:7px!important;font-size:10.5px!important;font-weight:900!important;line-height:1.1!important;white-space:nowrap!important}

/* Give each crew shell the same palette used by the historic crew cards. */
.crew-card-shell.crew-palette-0{--crew-color:#53d8ff}
.crew-card-shell.crew-palette-1{--crew-color:#c58cff}
.crew-card-shell.crew-palette-2{--crew-color:#ffae62}
.crew-card-shell.crew-palette-3{--crew-color:#ff79aa}
.crew-card-shell.crew-palette-4{--crew-color:#75a9ff}
.crew-card-shell.crew-palette-5{--crew-color:#b5df62}
.crew-card-shell.crew-palette-6{--crew-color:#ffd45e}
.crew-card-shell.crew-palette-7{--crew-color:#66e0b1}
.crew-card-shell.crew-palette-8{--crew-color:#ff7777}
.crew-card-shell.crew-palette-9{--crew-color:#b99cff}

/* Compact crew cards: keep the old colored identity while exposing pilot actions. */
.crew-card-shell{
  display:grid;
  gap:0;
  min-width:0;
  margin:9px 0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--crew-color) 72%,#3e4a4e);
  border-left-width:4px;
  border-radius:10px;
  background:color-mix(in srgb,var(--crew-color) 5%,#101617);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--crew-color) 12%,transparent), inset 0 1px color-mix(in srgb,var(--crew-color) 8%,transparent);
}
.crew-card-shell.is-complete{border-color:color-mix(in srgb,#7a8489 60%,#3e4a4e);border-left-color:var(--crew-color)}
.crew-unified-card{
  width:100%;
  min-width:0;
  margin:0!important;
  padding:0!important;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.crew-unified-card>.crew-pilot-accordion-summary{
  margin:0;
  min-width:0;
  background:color-mix(in srgb,var(--crew-color) 9%,#151c1f);
}
.crew-unified-card>.crew-pilot-accordion-summary:hover{background:color-mix(in srgb,var(--crew-color) 15%,#151c1f)}
.crew-unified-card[open]>.crew-pilot-accordion-summary{border-bottom:1px solid color-mix(in srgb,var(--crew-color) 30%,transparent)}
.crew-unified-body{
  display:grid;
  gap:10px;
  min-width:0;
  padding:10px 12px 12px!important;
  overflow:hidden;
  background:rgba(7,12,13,.35);
}
.crew-unified-body>*{min-width:0;max-width:100%}
.crew-unified-body>.presence-timeline,
.crew-member-grid .presence-timeline{
  width:100%;
  min-width:0;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
}
.crew-inline-management{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  min-width:0;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
}
.crew-inline-management.is-readonly{justify-content:flex-end}
.crew-inline-management .coverage-summary{margin-left:auto;color:var(--muted);font-size:11px;font-weight:800;white-space:nowrap}
.crew-state-control{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0}
.crew-state-label{display:inline-flex;align-items:center;gap:5px;color:#dce8e5;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.5px}
.crew-state-lock{display:inline-grid;place-items:center;width:18px;height:18px;font-size:13px;line-height:1}
.crew-state-select-wrap{position:relative;display:inline-flex;align-items:center;min-width:0}
.crew-state-select{appearance:none;-webkit-appearance:none;min-height:32px;max-width:100%;padding:5px 30px 5px 10px;border:1px solid #46565c;border-radius:7px;background:#111719;color:var(--text);font:inherit;font-size:11px;font-weight:850;cursor:pointer;outline:none}
.crew-state-select:hover,.crew-state-select:focus{border-color:var(--green)}
.crew-state-select:disabled{cursor:wait;opacity:.65}
.crew-state-chevron{position:absolute;right:10px;top:50%;transform:translateY(-52%);pointer-events:none;color:#9feab0;font-size:14px;font-weight:900}

.crew-owner-badge{
  display:inline-flex;
  width:max-content;
  margin-top:2px;
  padding:2px 5px;
  border:1px solid color-mix(in srgb,var(--crew-color) 62%,#5d6a6d);
  border-radius:999px;
  color:#dff9e7;
  background:color-mix(in srgb,var(--crew-color) 15%,rgba(17,28,22,.55));
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.45px;
  line-height:1.1;
}
.crew-member-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  min-width:0;
}
.crew-member-grid>.pilot-row{
  min-width:0;
  margin:0!important;
  padding:9px!important;
  border:1px solid var(--border);
  border-radius:8px;
  background:rgba(255,255,255,.018);
  overflow:hidden;
}
.crew-member-grid>.pilot-row .pilot-main{min-width:0}
.crew-member-grid>.pilot-row .ux-pilot-edit{display:none!important}
.crew-empty-roster{margin:0}

/* Actions stay visible, but compact like the former highlighted crew controls. */
.crew-self-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  width:100%;
  min-width:0;
  padding:7px 9px 8px;
  border-top:1px solid color-mix(in srgb,var(--crew-color) 28%,transparent);
  background:color-mix(in srgb,var(--crew-color) 6%,#0f1516);
}
.crew-self-actions>button{
  width:auto!important;
  min-width:0!important;
  min-height:31px!important;
  margin:0!important;
  padding:5px 10px!important;
  border-radius:7px!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
.crew-self-actions .crew-join-button{
  border:1px solid color-mix(in srgb,var(--crew-color) 85%,#7ef0f3)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--crew-color) 58%,#35c7ce),color-mix(in srgb,var(--crew-color) 38%,#176d73))!important;
  color:#f7ffff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.16),0 0 0 1px color-mix(in srgb,var(--crew-color) 18%,transparent)!important;
}
.crew-self-actions .crew-manage-button,
.crew-self-actions .crew-leave-button{
  border-color:color-mix(in srgb,var(--crew-color) 60%,#56676d)!important;
  background:color-mix(in srgb,var(--crew-color) 11%,#172124)!important;
  color:#eef7f5!important;
}
.crew-self-actions .crew-delete-button{
  margin-left:auto!important;
  padding-inline:9px!important;
}
.crew-action-hint{margin:0;color:var(--muted);font-size:11px;line-height:1.4}

/* Legacy management styles kept harmless for old cached markup. */
.crew-card-header>.crew-card-status[hidden],.crew-card [data-crew-lock-toggle][hidden]{display:none!important}
.crew-list{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
.crew-management-accordion{padding:0!important;overflow:hidden;opacity:1!important}
.crew-member-action{min-width:76px;flex:0 0 auto;text-align:center}
.crew-candidate-action-card{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-width:0;padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--panel2);color:var(--text);text-align:left;cursor:default;transform:none!important}
.crew-candidate-action-card:hover{border-color:var(--border)!important;background:var(--panel2)!important;transform:none!important}
.crew-candidate-info{min-width:0}.crew-add-pilot-button{min-width:76px;flex:0 0 auto;text-align:center}

@media(max-width:980px){
  .crew-member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:760px){
  .ux-course-crews-heading{padding-inline:0}
  .ux-course-crews-title{font-size:14px}
  .crew-section-create{min-height:30px!important;padding:5px 9px!important;font-size:10px!important}
  .crew-card-shell{margin:8px 0;border-left-width:4px}
  .crew-unified-body{gap:9px;padding:9px!important}
  .crew-inline-management,.crew-inline-management.is-readonly{align-items:flex-start;flex-direction:column;justify-content:flex-start}
  .crew-inline-management .coverage-summary{margin-left:0;white-space:normal}
  .crew-state-control{align-items:center;flex-direction:row;width:auto}
  .crew-state-select-wrap,.crew-state-select{width:auto}
  .crew-member-grid{grid-template-columns:1fr;gap:7px}
  .crew-self-actions{gap:5px;padding:6px 8px 7px}
  .crew-self-actions>button{min-height:30px!important;padding:5px 9px!important;font-size:10px!important}
  .crew-capacity-message{margin:0}
  .crew-candidate-action-card{grid-template-columns:1fr}
  .crew-add-pilot-button,.crew-member-action{width:100%}
}

@media(max-width:420px){
  .ux-course-crews-heading{align-items:center}
  .ux-course-crews-title{gap:6px}
  .ux-course-crews-title strong{min-width:24px;height:24px;font-size:10px}
  .crew-section-create{max-width:48%;white-space:normal!important;text-align:center}
  .crew-unified-body{padding:8px!important}
  .crew-self-actions{display:flex;flex-wrap:wrap}
  .crew-self-actions>button{flex:0 0 auto;width:auto!important}
  .crew-self-actions .crew-delete-button{margin-left:0!important}
  .crew-owner-badge{font-size:7px}
}


/* styles/desktop-polish.css */
/* Desktop polish layer. Mobile is handled separately by the dedicated mobile styles. */
@media (min-width: 761px) {
  :root {
    --desktop-control-h: 38px;
    --desktop-control-h-sm: 32px;
    --desktop-gap: 10px;
  }

  /* Global button hierarchy */
  button,
  .primary-button,
  .secondary-button,
  .danger-button,
  .edit-button,
  .event-section-tab {
    min-height: var(--desktop-control-h);
    padding: 8px 13px;
    line-height: 1.1;
  }
  .edit-button,
  .crew-member-action,
  .crew-add-pilot-button,
  .crew-actions button,
  .fold-toolbar button,
  .toolbar button:not(.primary-button):not(.danger-button) {
    min-height: var(--desktop-control-h-sm);
    padding: 6px 11px;
    font-size: 12px;
  }

  /* Page rhythm */
  main { max-width: 1420px; }
  .toolbar { gap: 8px; margin: 12px 0 16px; }
  .toolbar > button,
  .toolbar > a { width: auto; }
  .page-title { margin-bottom: 14px; }

  /* Tabs */
  .event-section-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(130px, auto));
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--panel2);
  }
  .event-section-tab {
    min-width: 140px;
    padding-inline: 18px;
  }

  /* Departure accordions */
  .departure-accordion { gap: 12px; }
  .departure-fold > summary {
    min-height: 68px;
    padding: 12px 16px;
  }
  .departure-fold-body { padding: 0 16px 16px; }
  .fold-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
  }
  .fold-toolbar button { width: auto; }
  .fold-section {
    padding: 16px;
    border-radius: 10px;
  }
  .fold-section > h2 { margin-bottom: 12px; }

  /* Registration */
  .registration-form { max-width: 1120px; }
  .registration-form .form-title {
    align-items: center;
    gap: 12px;
  }
  .registration-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .registration-form-actions button { width: auto; }
  .registration-form input,
  .registration-form select { min-height: 40px; }
  .special-availability { max-width: 260px; }
  .save-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }
  .save-row button { width: auto; }

  /* Course pilot cards */
  .ux-course-overview { gap: 12px; }
  .ux-unassigned-section { padding: 12px; }
  .ux-unassigned-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .ux-unassigned-grid > .pilot-row { padding: 10px 12px; }
  .pilot-row { gap: 6px; }
  .pilot-main { gap: 7px 10px; }
  .pilot-row > .edit-button {
    width: auto;
    min-width: 76px;
    align-self: flex-end;
  }

  /* Compact crews share one consistent height in Course and Équipages. */
  .crew-pilot-accordion-summary,
  .crew-management-summary {
    min-height: 50px;
    padding: 8px 11px;
    gap: 10px;
  }
  .crew-compact-team strong { font-size: 13.5px; }
  .crew-compact-pilots,
  .crew-compact-car { font-size: 11.5px; }
  .crew-compact-status {
    min-height: 23px;
    padding: 3px 7px;
    font-size: 8.5px;
  }
  .crew-pilot-accordion-body,
  .crew-management-accordion-body { padding: 10px 12px 12px; }

  /* Organizer crew controls */
  .crew-management-accordion-body > .crew-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }
  .crew-management-accordion-body > .crew-card-header > div {
    flex: 1;
  }
  .crew-state-control {
    flex-wrap: nowrap;
    margin: 0;
  }
  .crew-state-select { min-height: 34px; }
  .coverage-summary {
    white-space: nowrap;
    font-size: 11px;
  }
  .crew-roster {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 7px !important;
  }
  .crew-card .crew-roster > li {
    min-height: 54px;
    padding: 9px 11px;
    gap: 10px;
  }
  .crew-card .crew-roster > li > button {
    width: auto;
    min-width: 72px;
  }
  .crew-candidate-action-card {
    min-height: 58px;
    padding: 10px 11px;
  }
  .crew-add-pilot-button,
  .crew-member-action { min-width: 76px; }
  .crew-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px !important;
  }
  .crew-actions button { width: auto; }

  /* Timelines stay readable without becoming visually dominant. */
  .presence-timeline { margin-top: 7px; }
  .presence-track > .presence-segment { height: 34px; }
  .presence-scale { height: 23px; }

  /* Forms and creation pages */
  .creation-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
  .creation-actions button { width: auto; }
  .event-category-option { min-height: 50px; }
  .member-row { align-items: center; }
}

@media (min-width: 1180px) {
  .ux-unassigned-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .crew-roster { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}


/* styles/event-shell-alignment.css */
/* Desktop event shell alignment.
   The desktop page is 1420px wide with 18px inner padding on each side,
   so its visible content column is 1384px. Keep the floating navigation
   and the event content on that exact same axis. */
@media (min-width: 761px) {
  .site-nav-shell {
    width: min(calc(100% - 36px), 1384px);
    max-width: 1384px;
    margin-inline: auto;
  }

  .event-header-compact .event-heading-line > .circuit-visual {
    justify-self: stretch;
    justify-content: flex-end;
  }

  .event-header-compact .event-heading-line > .circuit-visual img {
    margin-left: auto;
    margin-right: 0;
  }

  /* Keep all three departure actions on one desktop row.
     The :has() fallback also covers a browser still running the previous JS module. */
  .departure-fold > summary > .ux-summary-registration-actions.is-three-actions,
  .departure-fold > summary > .ux-summary-registration-actions:has(> .ux-summary-create-crew) {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: clamp(420px, 34vw, 520px) !important;
    min-width: 420px !important;
    max-width: 520px !important;
    flex-wrap: nowrap !important;
  }

  .departure-fold > summary > .ux-summary-registration-actions.is-three-actions > button,
  .departure-fold > summary > .ux-summary-registration-actions:has(> .ux-summary-create-crew) > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: normal !important;
  }
}

.event-actions-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.event-toolbar-main {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.departure-participation-section {
  display: grid;
  gap: 12px;
  padding-top: 2px;
}

/* All actions for a departure live in one place, immediately before crews. */
.departure-action-panel {
  display: grid;
  gap: 8px;
  margin: 0 0 4px;
}

.departure-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.departure-primary-actions > button,
.departure-primary-actions > .crew-builder-open {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin: 0 !important;
  font-weight: 900;
}

.departure-primary-actions > :only-child {
  grid-column: 1 / -1;
}

.departure-secondary-actions {
  display: flex;
  justify-content: flex-end;
}

.departure-secondary-actions > button {
  min-height: 36px;
  margin: 0 !important;
  padding: 7px 12px;
  font-size: 12px;
}

.departure-create-crew {
  margin: 0 !important;
}

@media (max-width: 600px) {
  .event-actions-toolbar,
  .event-toolbar-main {
    width: 100%;
  }

  .event-toolbar-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-toolbar-main > button {
    width: 100%;
    min-width: 0;
    margin-left: 0;
  }

  .departure-action-panel {
    gap: 7px;
  }

  .departure-primary-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .departure-primary-actions > button,
  .departure-primary-actions > .crew-builder-open {
    min-height: 44px;
    padding: 9px 8px;
    font-size: 12px;
    line-height: 1.15;
  }

  .departure-secondary-actions {
    justify-content: stretch;
  }

  .departure-secondary-actions > button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .departure-primary-actions {
    grid-template-columns: 1fr;
  }
}


/* styles/mobile.css */
/* Mobile UI layer. Loaded last so phone layout can evolve independently from desktop. */
@media (max-width: 760px) {
  :root { --mobile-pad: 12px; --mobile-radius: 12px; --mobile-touch: 44px; }
  html { overflow-x: hidden; scroll-padding-top: 76px; }
  body { overflow-x: hidden; font-size: 15px; }
  button, input, select, textarea { min-width: 0; }
  button { min-height: var(--mobile-touch); }

  /* Header + navigation */
  .site-hero { min-height: 0 !important; padding: 0 !important; border-bottom: 0; background-size: 100% auto !important; background-position: top center !important; }
  .site-hero .header-inner { display: none; }
  .site-nav-shell { position: sticky !important; top: 0; z-index: 80; width: 100% !important; height: auto !important; padding: 7px 8px !important; background: rgba(7,11,13,.96); border-bottom: 1px solid rgba(89,211,216,.24); box-shadow: 0 8px 24px rgba(0,0,0,.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .site-nav-shell #navigation { position: static !important; display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px !important; width: 100%; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  #navigation > button, #navigation > a { width: 100%; min-height: 42px; padding: 8px 10px; text-align: center; }
  #navigation .account-name { grid-column: 1 / -1; order: -1; padding: 1px 4px 3px; font-size: 12px; line-height: 1.25; }
  #navigation .account-name small { display: inline; margin-left: 5px; font-size: 11px; }

  /* Global mobile rhythm */
  main { width: 100%; max-width: none !important; padding: 14px var(--mobile-pad) 34px !important; }
  .page-title { margin: 6px 0 12px; font-size: 23px; line-height: 1.08; letter-spacing: -.3px; }
  .page-subtitle, .creation-help { line-height: 1.45; }
  .toolbar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px !important; margin: 10px 0 14px !important; }
  .toolbar > * { min-width: 0; }
  .toolbar > button, .toolbar > a { width: 100%; }
  .back-button { width: auto !important; min-height: 40px; margin-bottom: 4px; padding: 7px 11px; }
  .home-create-event .primary-button { min-height: 46px; }

  /* Home event cards */
  .event-agenda { gap: 14px; }
  .event-period-heading { margin: 15px 0 8px; font-size: 15px; }
  .event-card { padding: 13px !important; border-radius: var(--mobile-radius) !important; }
  .event-card-body { display: grid !important; gap: 9px; }
  .event-card-title-row { display: grid !important; gap: 6px; }
  .event-name { font-size: 18px !important; line-height: 1.16; }
  .event-info { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12px !important; }
  .event-card .circuit-visual { position: absolute; right: 9px; top: 9px; width: 52px; opacity: .52; }
  .event-card .event-category-badges { gap: 5px; margin-top: 0; padding-right: 0; }
  .event-card .event-category-badge { min-width: 0; padding: 5px 7px; font-size: 11px; }
  .event-card .event-category-badge img { width: 22px; height: 22px; }
  .event-card-status { display: grid !important; gap: 3px; }
  .event-countdown { font-size: 12px !important; line-height: 1.4; }

  /* Event header */
  .event-header { padding: 13px !important; border-radius: var(--mobile-radius) !important; }
  .event-heading-line { display: grid !important; grid-template-columns: minmax(0,1fr) 68px; align-items: start; gap: 8px; }
  .event-heading-copy { min-width: 0; }
  .event-title { margin: 0; padding-left: 9px !important; font-size: 21px !important; line-height: 1.12; overflow-wrap: anywhere; }
  .event-heading-line > .circuit-visual { width: 68px; justify-self: end; opacity: .78; }
  .event-header-summary { display: grid !important; gap: 10px; margin-top: 11px; }
  .event-header-summary .event-category-badges { gap: 5px; margin-top: 0; }
  .event-header-summary .event-category-badge { min-width: 0; padding: 5px 7px; }
  .event-header-stats { display: grid !important; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 5px !important; }
  .event-header-stats > span { min-width: 0; padding: 7px 4px !important; text-align: center; }
  .event-header-stats strong { display: block; font-size: 15px; }
  .event-header-stats small { font-size: 9px !important; }
  .event-header-countdown { justify-self: stretch; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.025); text-align: center; font-size: 12px; }

  /* Course / crews tabs */
  .event-section-tabs { position: sticky; top: 64px; z-index: 30; display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0 11px; padding: 5px; border: 1px solid rgba(70,108,113,.52); border-radius: 11px; background: rgba(8,12,14,.94); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
  .event-section-tab { width: 100%; min-height: 40px; padding: 7px 8px; }

  /* Departure accordions */
  .departure-accordion { gap: 9px !important; }
  .departure-fold { border-radius: var(--mobile-radius) !important; overflow: clip; }
  .departure-fold > summary { display: grid !important; grid-template-columns: 34px minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 3px 9px !important; min-height: 66px; padding: 10px !important; }
  .departure-fold > summary .fold-index { grid-column: 1; grid-row: 1 / 3; align-self: stretch; display: grid; place-items: center; min-width: 34px; padding: 0; border-radius: 8px; font-size: 13px; }
  .departure-fold > summary .fold-date { grid-column: 2; grid-row: 1; min-width: 0; }
  .departure-fold > summary .fold-date strong { display: block; font-size: 14px; line-height: 1.2; }
  .departure-fold > summary .fold-date span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
  .departure-fold > summary .fold-meta { grid-column: 2; grid-row: 2; font-size: 11px; color: #c0cccb; }
  .departure-fold > summary .fold-countdown { grid-column: 3; grid-row: 1 / 3; max-width: 92px; text-align: right; font-size: 10px; line-height: 1.25; }
  .departure-fold-body { padding: 0 9px 10px !important; }
  .fold-toolbar { display: grid !important; grid-template-columns: 1fr; gap: 7px; padding: 9px 1px !important; font-size: 12px; }
  .fold-toolbar button { width: 100%; }
  .fold-section { padding: 10px !important; border-radius: 10px !important; }
  .fold-section > h2 { margin-bottom: 9px; font-size: 16px; }

  /* Registration */
  .registration-form { padding: 0 !important; }
  .registration-form .form-title { display: grid !important; gap: 8px; font-size: 16px; }
  .registration-form-actions { display: grid !important; grid-template-columns: 1fr; gap: 6px; width: 100%; }
  .registration-form-actions button { width: 100%; }
  .registration-context-banner { padding: 9px 10px !important; }
  .registration-form input, .registration-form select { width: 100%; min-height: 46px; font-size: 16px; }
  .registration-choices { margin-top: 12px; }
  .category-area { display: grid !important; gap: 8px !important; }
  .categories { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px !important; width: 100%; }
  .category-button { width: 100% !important; min-height: 48px; }
  .car-preference-grid { grid-template-columns: 1fr !important; }
  .special-availability { display: grid !important; grid-template-columns: 1fr !important; }
  .save-row { display: grid !important; grid-template-columns: 1fr; gap: 7px; }
  .save-row button { width: 100%; }

  /* Timelines: preserve touch target instead of squeezing 8–24 hours into phone width. */
  .presence-timeline { overflow-x: auto; overflow-y: hidden; margin-top: 8px; padding-bottom: 3px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  .presence-timeline > .presence-scale,
  .presence-timeline > .presence-track,
  .presence-timeline > .presence-edges { width: max(100%, calc(var(--duration) * 38px)); min-width: max(100%, calc(var(--duration) * 38px)); }
  .presence-track > .presence-segment { height: 38px; font-size: 11px; }
  .presence-track > button.presence-segment { min-height: 38px; }
  .presence-scale { height: 25px; }
  .presence-time { font-size: 10px; }
  .presence-edges { font-size: 9px; }

  /* Pilot lists */
  .category-group-header { padding: 8px 9px !important; }
  .pilot-row { padding: 10px !important; gap: 8px !important; border-radius: 9px; }
  .pilot-main { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px !important; align-items: center; }
  .pilot-name { grid-column: 1; font-size: 14px; }
  .pilot-category-logo { grid-column: 2; grid-row: 1; }
  .pilot-car, .registration-status, .pilot-preference { grid-column: 1 / -1; font-size: 11px !important; }
  .pilot-row > .edit-button { width: 100% !important; min-height: 38px !important; }
  .ux-unassigned-section { padding: 9px !important; }
  .ux-section-heading { margin-bottom: 8px; }
  .ux-section-heading h3 { font-size: 16px !important; }
  .ux-unassigned-grid { gap: 7px !important; }

  /* Compact crew accordions: same structure in Course and Équipages. */
  .crew-pilot-accordion-summary,
  .crew-management-summary { min-height: 64px !important; padding: 9px !important; gap: 4px 8px !important; }
  .crew-pilot-accordion-summary { grid-template-columns: 34px minmax(0,1fr) 18px !important; }
  .crew-compact-category { width: 34px !important; min-width: 34px !important; }
  .crew-compact-team strong, .crew-management-team strong { font-size: 13px !important; }
  .crew-compact-pilots, .crew-compact-car, .crew-management-pilots, .crew-management-car { font-size: 10.5px !important; line-height: 1.25; }
  .crew-compact-status, .crew-card-status, .crew-management-status { min-height: 22px !important; padding: 3px 6px !important; font-size: 8px !important; }
  .crew-pilot-accordion-body,
  .crew-management-body { padding: 7px !important; }
  .ux-crew-bucket > summary { min-height: 46px; padding: 10px 11px !important; }
  .ux-crew-bucket-body { padding: 7px !important; gap: 7px !important; }

  /* Organizer crew controls */
  .crew-card { border-radius: 10px !important; }
  .crew-card-header { display: grid !important; grid-template-columns: 1fr; gap: 7px !important; padding: 10px !important; }
  .crew-card-header > div { min-width: 0; }
  .coverage-summary { justify-self: start; font-size: 10px; }
  .crew-state-control { display: grid !important; grid-template-columns: 1fr; gap: 6px !important; }
  .crew-state-select-wrap, .crew-state-select { width: 100%; }
  .crew-roster { gap: 6px !important; }
  .crew-card .crew-roster > li { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; padding: 10px !important; }
  .crew-card .crew-roster > li > button { width: 100%; min-height: 38px; }
  .crew-candidate-action-card { grid-template-columns: 1fr !important; gap: 8px !important; padding: 10px !important; }
  .crew-add-pilot-button { width: 100% !important; min-height: 40px; }
  .crew-actions { display: grid !important; grid-template-columns: 1fr; gap: 7px; }
  .crew-actions button { width: 100%; }
  .unassigned-list > summary { padding: 10px !important; font-size: 12px; }
  .unassigned-pilots { padding: 7px !important; }

  /* Event creation / member management */
  .creation-card { padding: 13px !important; border-radius: var(--mobile-radius) !important; }
  .creation-card-heading { gap: 9px !important; margin-bottom: 13px !important; }
  .creation-step { flex-basis: 28px !important; height: 28px !important; }
  .creation-field-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  .event-category-options { grid-template-columns: 1fr !important; }
  .event-category-option { min-height: 48px; padding: 10px !important; }
  .event-creation .departure-field { grid-template-columns: minmax(0,1fr) 92px 38px !important; gap: 6px !important; }
  .creation-actions { display: grid !important; grid-template-columns: 1fr; }
  .creation-actions button { width: 100%; }
  .member-row { display: grid !important; grid-template-columns: 1fr; gap: 8px !important; }
  .member-row button { width: 100%; }

  /* Avoid tiny text/actions on very narrow phones. */
  @media (max-width: 390px) {
    :root { --mobile-pad: 9px; }
    .event-header-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .categories { grid-template-columns: 1fr; }
    .toolbar { grid-template-columns: 1fr; }
    .departure-fold > summary { grid-template-columns: 31px minmax(0,1fr) auto; gap: 3px 7px !important; }
    .departure-fold > summary .fold-countdown { max-width: 72px; }
  }
}


/* styles/mobile-density.css */
/* Second mobile pass based on real phone captures. Desktop remains untouched. */
@media (max-width: 760px) {
  /* Course: the compact summary already contains team/car/status. Do not repeat them when opened. */
  .crew-pilot-accordion-body > .crew-pilot-group-header {
    display: none !important;
  }
  .crew-pilot-accordion-body > .crew-capacity-message.is-complete {
    display: none !important;
  }
  .crew-pilot-accordion-body {
    padding-top: 8px !important;
  }

  /* Unassigned pilots: keep the edit action useful without making it dominate the card. */
  .ux-unassigned-grid > .pilot-row,
  .crew-pilot-accordion-body > .pilot-row {
    position: relative;
  }
  .pilot-row > .edit-button {
    width: auto !important;
    min-width: 78px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 5px 10px !important;
    font-size: 12px !important;
    align-self: flex-end;
  }

  /* Management accordion: summary is the identity, body is only for actions/details. */
  .crew-management-accordion-body > .crew-card-header {
    padding: 9px 10px !important;
    border-bottom: 1px solid rgba(70,108,113,.38);
  }
  .crew-management-accordion-body > .crew-card-header > div > .event-category-badge,
  .crew-management-accordion-body > .crew-card-header > div > h3,
  .crew-management-accordion-body > .crew-card-header > div > .crew-car {
    display: none !important;
  }
  .crew-management-accordion-body > .crew-card-header > div {
    width: 100%;
  }
  .crew-management-accordion-body .coverage-summary {
    margin: 0 !important;
    padding: 5px 8px !important;
    font-size: 10px !important;
  }

  /* Open/complete selector becomes a compact toolbar instead of a full-width form block. */
  .crew-management-accordion-body .crew-state-control {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    margin: 0 !important;
  }
  .crew-management-accordion-body .crew-state-label {
    flex: 0 0 auto;
    font-size: 10px !important;
  }
  .crew-management-accordion-body .crew-state-select-wrap {
    width: auto !important;
    min-width: 138px;
    margin-left: auto;
  }
  .crew-management-accordion-body .crew-state-select {
    width: auto !important;
    min-width: 138px;
    min-height: 38px !important;
    padding: 6px 30px 6px 10px !important;
    font-size: 12px !important;
  }

  /* Roster: one compact row per pilot with a small destructive action at the right. */
  .crew-management-accordion-body .crew-roster {
    gap: 5px !important;
    padding: 7px 0 !important;
  }
  .crew-management-accordion-body .crew-roster > li {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 58px;
    padding: 8px 9px !important;
  }
  .crew-management-accordion-body .crew-roster > li > div {
    min-width: 0;
  }
  .crew-management-accordion-body .crew-roster .crew-pilot-name {
    display: block;
    overflow: hidden;
    font-size: 13px !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crew-management-accordion-body .crew-roster small {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    font-size: 10.5px !important;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .crew-management-accordion-body .crew-roster > li > .crew-member-action {
    width: auto !important;
    min-width: 70px !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  /* Keep the crew body dense: timelines and candidates remain readable but don't add large blank zones. */
  .crew-management-accordion-body .presence-timeline {
    margin-top: 5px !important;
  }
  .crew-management-accordion-body .crew-candidate-action-card {
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 9px !important;
  }
  .crew-management-accordion-body .crew-add-pilot-button {
    width: auto !important;
    min-width: 70px !important;
    min-height: 34px !important;
    padding: 5px 9px !important;
    font-size: 11px !important;
  }

  /* Slightly tighter compact crew cards visible before expansion. */
  .crew-pilot-accordion-summary,
  .crew-management-summary {
    min-height: 58px !important;
    padding: 8px 9px !important;
  }
  .crew-compact-team strong {
    font-size: 13px !important;
  }
  .crew-compact-pilots,
  .crew-compact-car {
    font-size: 10px !important;
  }
}

@media (max-width: 390px) {
  .crew-management-accordion-body .crew-state-label > span:last-child {
    display: none;
  }
  .crew-management-accordion-body .crew-state-select-wrap,
  .crew-management-accordion-body .crew-state-select {
    min-width: 126px;
  }
  .crew-management-accordion-body .crew-roster > li > .crew-member-action,
  .crew-management-accordion-body .crew-add-pilot-button {
    min-width: 64px !important;
  }
}


/* styles/mobile-polish-v3.css */
/* Third mobile polish based on real iPhone captures. Desktop remains untouched. */
@media (max-width:760px) {
  .fold-section:has(> .pilot-section) { padding:8px 0 10px!important; border:0!important; background:transparent!important; box-shadow:none!important; }
  .fold-section:has(> .pilot-section)>h2 { margin:0 4px 10px!important; padding:0!important; border:0!important; font-size:18px!important; }
  .ux-course-overview { gap:12px!important; }
  .ux-unassigned-section { padding:0!important; border:0!important; background:transparent!important; }
  .ux-section-heading { padding:0 4px; }
  .ux-crew-bucket { border-radius:10px!important; }
  .ux-crew-bucket-body { background:transparent!important; }

  .ux-unassigned-grid>.pilot-row,.crew-pilot-accordion-body>.pilot-row { padding:8px 9px!important; gap:5px!important; }
  .pilot-main { gap:3px 7px!important; }
  .pilot-name { font-size:13px!important; line-height:1.2; }
  .pilot-car,.registration-status,.pilot-preference { font-size:10.5px!important; line-height:1.25; }
  .pilot-row>.edit-button { min-width:72px!important; min-height:32px!important; height:32px!important; padding:4px 8px!important; font-size:11px!important; }
  .ux-unassigned-grid .presence-timeline,.crew-pilot-accordion-body .presence-timeline { margin-top:3px!important; }
  .ux-unassigned-grid .presence-scale,.crew-pilot-accordion-body .presence-scale { height:21px!important; }
  .ux-unassigned-grid .presence-track>.presence-segment,.crew-pilot-accordion-body .presence-track>.presence-segment { height:30px!important; min-height:30px!important; }
  .ux-unassigned-grid .presence-edges,.crew-pilot-accordion-body .presence-edges { margin-top:3px!important; }

  .crew-pilot-accordion-summary,.crew-management-summary { grid-template-columns:34px minmax(0,1fr) auto 18px!important; grid-template-rows:auto auto auto!important; min-height:0!important; padding:8px 9px!important; gap:3px 7px!important; }
  .crew-compact-category { grid-column:1!important; grid-row:1/4!important; align-self:center; }
  .crew-compact-team { grid-column:2/4!important; grid-row:1!important; }
  .crew-compact-pilots { grid-column:2/5!important; grid-row:2!important; }
  .crew-compact-status { grid-column:2!important; grid-row:3!important; justify-self:start!important; }
  .crew-compact-car { display:block!important; grid-column:3/5!important; grid-row:3!important; justify-self:end; max-width:150px; overflow:hidden; text-align:right!important; text-overflow:ellipsis; white-space:nowrap; }
  .crew-compact-chevron { grid-column:4!important; grid-row:1!important; }
  .crew-compact-team strong { font-size:12.5px!important; }
  .crew-compact-pilots,.crew-compact-car { font-size:9.5px!important; }
  .crew-compact-status { min-height:20px!important; padding:3px 6px!important; font-size:7.5px!important; }

  .crew-management-accordion-body { padding:5px 7px 8px!important; }
  .crew-management-accordion-body>.crew-card-header { display:flex!important; align-items:center!important; padding:6px 1px 7px!important; border-bottom:1px solid rgba(70,108,113,.32)!important; background:transparent!important; }
  .crew-management-accordion-body>.crew-card-header>div { width:100%!important; }
  .crew-management-accordion-body .coverage-summary { display:none!important; }
  .crew-management-accordion-body .crew-state-control { justify-content:flex-start!important; gap:7px!important; }
  .crew-management-accordion-body .crew-state-label>span:last-child { display:none!important; }
  .crew-management-accordion-body .crew-state-lock { width:28px!important; height:32px!important; font-size:14px!important; }
  .crew-management-accordion-body .crew-state-select-wrap,.crew-management-accordion-body .crew-state-select { min-width:124px!important; }
  .crew-management-accordion-body .crew-state-select { min-height:34px!important; padding:5px 28px 5px 9px!important; font-size:11.5px!important; }

  .crew-management-accordion-body .crew-roster { gap:4px!important; padding:6px 0!important; }
  .crew-management-accordion-body .crew-roster>li { min-height:48px!important; padding:6px 8px!important; gap:7px!important; border-radius:8px!important; }
  .crew-management-accordion-body .crew-roster .crew-pilot-name { font-size:12.5px!important; }
  .crew-management-accordion-body .crew-roster small { font-size:9.5px!important; }
  .crew-management-accordion-body .crew-roster>li>.crew-member-action { min-width:62px!important; min-height:32px!important; padding:4px 7px!important; font-size:10.5px!important; }

  .crew-management-accordion-body .presence-scale { height:21px!important; }
  .crew-management-accordion-body .presence-track>.presence-segment { height:30px!important; min-height:30px!important; font-size:10px!important; }
  .crew-management-accordion-body .presence-edges { margin-top:3px!important; }

  /* Candidate cards: real mobile layout instead of a desktop card squeezed into one column. */
  .crew-management-accordion-body .crew-candidate-action-card {
    position:relative;
    display:block!important;
    min-height:0!important;
    padding:9px!important;
  }
  .crew-management-accordion-body .crew-candidate-info {
    min-width:0;
    padding-right:82px;
  }
  .crew-management-accordion-body .crew-candidate-info .ux-candidate-head {
    display:block!important;
    margin:0 0 3px!important;
  }
  .crew-management-accordion-body .crew-candidate-info .ux-candidate-head strong {
    display:block;
    overflow:hidden;
    font-size:13px!important;
    line-height:1.2;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .crew-management-accordion-body .crew-candidate-info>small {
    display:block!important;
    margin:2px 0 0!important;
    color:var(--muted);
    font-size:10px!important;
    line-height:1.3;
  }
  .crew-management-accordion-body .crew-candidate-info .presence-timeline {
    margin-top:6px!important;
    padding-right:0;
  }
  .crew-management-accordion-body .crew-add-pilot-button {
    position:absolute;
    top:9px;
    right:9px;
    width:auto!important;
    min-width:70px!important;
    min-height:34px!important;
    padding:5px 9px!important;
    font-size:11px!important;
  }
  .crew-management-accordion-body .ux-candidate-title {
    display:block!important;
    margin:8px 0 6px!important;
  }
  .crew-management-accordion-body .ux-candidate-title strong {
    display:block;
    font-size:14px!important;
  }
  .crew-management-accordion-body .ux-candidate-title span {
    display:block;
    margin-top:2px;
    font-size:10px!important;
  }
  .crew-management-accordion-body .ux-crew-candidate-grid { gap:6px!important; }

  /* Delete is a secondary destructive action, not a full-width footer. */
  .crew-management-accordion-body .crew-actions {
    display:flex!important;
    justify-content:flex-end!important;
    gap:6px!important;
    margin-top:7px!important;
    padding-top:7px!important;
    border-top:1px solid rgba(70,108,113,.32);
  }
  .crew-management-accordion-body .crew-actions .danger-button {
    width:auto!important;
    min-width:104px!important;
    min-height:36px!important;
    padding:6px 10px!important;
    font-size:11px!important;
  }

  .ux-registration-toggle { min-height:44px!important; padding-block:8px!important; font-size:13px!important; }
}
@media (max-width:390px) {
  .crew-compact-car { max-width:125px; }
  .crew-management-accordion-body .crew-roster>li>.crew-member-action { min-width:58px!important; }
  .crew-management-accordion-body .crew-candidate-info { padding-right:76px; }
  .crew-management-accordion-body .crew-add-pilot-button { min-width:64px!important; }
}


/* styles/mobile-bugfixes.css */
/* Targeted mobile fixes for event circuit visuals and crew candidate timelines. */
@media (max-width:760px) {
  /* Event cards: make the circuit map clearly visible without overlapping category badges. */
  .event-card { position:relative; }
  .event-card .event-card-title-row { padding-right:96px; }
  .event-card .circuit-visual {
    right:12px!important;
    top:12px!important;
    width:82px!important;
    max-width:82px!important;
    opacity:.9!important;
    z-index:2;
  }
  .event-card .circuit-visual img { width:100%; height:auto; display:block; }

  /* Candidate cards: reserve room for Ajouter only around text, never around the timeline. */
  .crew-management-accordion-body .crew-candidate-info { padding-right:0!important; }
  .crew-management-accordion-body .crew-candidate-info .ux-candidate-head,
  .crew-management-accordion-body .crew-candidate-info > small { padding-right:82px; }
  .crew-management-accordion-body .crew-candidate-info .presence-timeline {
    width:100%!important;
    max-width:none!important;
    padding-right:0!important;
    overflow-x:auto!important;
  }
  .crew-management-accordion-body .crew-candidate-info .presence-timeline > .presence-scale,
  .crew-management-accordion-body .crew-candidate-info .presence-timeline > .presence-track,
  .crew-management-accordion-body .crew-candidate-info .presence-timeline > .presence-edges {
    width:max(100%,calc(var(--duration) * 38px))!important;
    min-width:max(100%,calc(var(--duration) * 38px))!important;
  }
}

@media (max-width:390px) {
  .event-card .event-card-title-row { padding-right:88px; }
  .event-card .circuit-visual { width:74px!important; max-width:74px!important; }
  .crew-management-accordion-body .crew-candidate-info .ux-candidate-head,
  .crew-management-accordion-body .crew-candidate-info > small { padding-right:76px; }
}


/* styles/pilot-dashboard.css */
/* Pilot dashboard: Course-like hierarchy focused on the driver's own entry. */
.my-entries-heading {
  margin: 6px 0 18px;
}

.my-entries-heading .page-title {
  margin: 3px 0 6px;
}

.my-entries-group {
  margin-top: 20px;
}

.my-entries-group-heading {
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(74,119,124,.38);
}

.my-entries-group-heading h2 {
  font-size: 18px;
}

.my-entry-dashboard {
  gap: 12px;
}

.my-entry-card {
  border-radius: 12px;
  border-color: rgba(73,118,123,.58);
  background: rgba(12,17,19,.95);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}

.my-entry-header {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) minmax(170px,230px);
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 11px 14px;
  border-bottom: 0;
  background: linear-gradient(180deg,rgba(25,34,37,.96),rgba(15,21,23,.96));
}

.my-entry-accordion[open] > .my-entry-header {
  border-bottom: 1px solid rgba(73,118,123,.5);
  background: linear-gradient(180deg,rgba(29,42,45,.98),rgba(17,25,27,.98));
}

.my-entry-toggle {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  margin: 0;
  border-radius: 9px;
  border-color: rgba(82,207,212,.4);
  background: #243337;
  color: #dce9e8;
  font-size: 0;
  transform: none !important;
}

.my-entry-toggle::before {
  content: '+';
  font-size: 22px;
  line-height: 1;
}

.my-entry-accordion[open] .my-entry-toggle::before {
  content: '−';
}

.my-entry-title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.my-entry-title h2 {
  margin: 0;
  font-size: 18px;
  line-height: 1.15;
}

.my-entry-title .my-entry-kicker {
  color: #a8b9bb;
  font-size: 11px;
  letter-spacing: .75px;
}

.my-entry-meta {
  gap: 5px 7px;
  margin-top: 2px;
  font-size: 12px;
}

.my-entry-meta .event-type-badge {
  padding: 3px 7px;
  font-size: 9px;
}

.my-entry-meta .event-category-badge {
  min-width: 0;
  padding: 3px 7px;
  gap: 5px;
}

.my-entry-meta .event-category-badge img {
  width: 22px;
  height: 22px;
}

.my-entry-summary-side {
  width: 100%;
  justify-content: flex-end;
}

.my-entry-summary-side .circuit-visual {
  width: 100%;
  height: 70px;
  justify-content: flex-end;
}

.my-entry-summary-side .circuit-visual img {
  width: min(100%,210px);
  height: 70px;
  margin-left: auto;
  object-fit: contain;
}

.my-entry-accordion-body {
  display: grid;
  gap: 10px;
  padding: 10px 14px 14px;
  background: rgba(8,12,14,.45);
}

.my-entry-actions-top {
  justify-content: flex-end;
  padding: 0;
  border: 0;
  background: transparent;
}

.my-entry-actions-top .primary-button {
  min-width: 0;
}

.my-entry-section {
  padding: 14px;
  border: 1px solid rgba(73,118,123,.5);
  border-radius: 10px;
  background: rgba(18,25,28,.88);
}

.my-entry-section-heading {
  align-items: center;
  margin-bottom: 10px;
}

.my-entry-section h3 {
  margin: 2px 0 0;
  font-size: 17px;
}

.my-entry-section .my-entry-kicker {
  font-size: 10px;
  letter-spacing: 1px;
}

.my-entry-pill {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11px;
}

/* The driver's own information stays dominant; team-mates become compact context. */
.my-entry-crew-roster {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin: 8px 0 10px;
}

.my-entry-pilot {
  min-width: 0;
  padding: 9px 10px;
  border-radius: 8px;
}

.my-entry-pilot.is-me {
  order: -1;
  grid-column: 1 / -1;
  border-color: rgba(82,207,212,.68);
  background: rgba(82,207,212,.055);
  box-shadow: inset 3px 0 0 var(--brand-cyan, var(--accent));
}

.my-entry-pilot:not(.is-me) .crew-pilot-availability {
  display: none;
}

.my-entry-pilot:not(.is-me) {
  opacity: .84;
}

.my-entry-pilot-head {
  margin-bottom: 4px;
}

.my-entry-pilot-head strong {
  font-size: 13px;
}

.my-entry-pilot-head span {
  font-size: 11px;
}

.my-entry-preferences {
  gap: 8px;
  margin: 8px 0 10px;
}

.my-entry-preferences > div {
  padding: 9px 10px;
  border-radius: 8px;
}

.my-entry-preferences strong {
  font-size: 13px;
}

.my-entry-crew {
  border-left: 3px solid rgba(82,207,212,.68);
  background: rgba(82,207,212,.035);
}

.my-entry-waiting {
  border-left: 3px solid rgba(231,182,83,.7);
  background: rgba(231,182,83,.03);
}

.my-entry-pilots-summary {
  background: rgba(255,255,255,.012);
}

.my-entry-compact-pilots {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}

.my-entry-compact-pilot {
  display: grid;
  align-items: start;
  gap: 2px;
  width: auto;
  min-height: 0;
  padding: 8px 9px;
  border-radius: 8px;
}

.my-entry-compact-pilot strong {
  font-size: 12px;
}

.my-entry-compact-pilot small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.my-entry-existing-crews-wrap {
  margin-top: 12px;
  padding-top: 10px;
}

.my-entry-existing-crews {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}

.my-entry-existing-crew {
  padding: 8px 9px;
}

.my-entry-section .coverage-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.my-entry-section .presence-timeline {
  margin-top: 7px;
}

.my-entry-section .presence-scale {
  height: 22px;
}

.my-entry-section .presence-track > .presence-segment {
  height: 24px;
}

@media (max-width: 760px) {
  .my-entries-heading {
    margin-bottom: 14px;
  }

  .my-entries-group {
    margin-top: 16px;
  }

  .my-entries-group-heading h2 {
    font-size: 16px;
  }

  .my-entry-header {
    grid-template-columns: 34px minmax(0,1fr) 92px;
    align-items: center;
    gap: 8px;
    min-height: 68px;
    padding: 9px 10px;
  }

  .my-entry-toggle {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .my-entry-title h2 {
    font-size: 16px;
  }

  .my-entry-title .my-entry-kicker {
    font-size: 9px;
  }

  .my-entry-meta {
    gap: 4px 5px;
    font-size: 10px;
  }

  .my-entry-meta .event-type-badge {
    display: none;
  }

  .my-entry-meta .event-category-badge {
    padding: 2px 5px;
    font-size: 10px;
  }

  .my-entry-meta .event-category-badge img {
    width: 18px;
    height: 18px;
  }

  .my-entry-summary-side {
    width: 92px;
  }

  .my-entry-summary-side .circuit-visual,
  .my-entry-summary-side .circuit-visual img {
    width: 92px;
    height: 52px;
  }

  .my-entry-accordion-body {
    gap: 8px;
    padding: 8px 9px 10px;
  }

  .my-entry-actions-top .primary-button {
    width: 100%;
  }

  .my-entry-section {
    padding: 10px;
  }

  .my-entry-section-heading {
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
  }

  .my-entry-section h3 {
    font-size: 15px;
  }

  .my-entry-crew-roster,
  .my-entry-compact-pilots,
  .my-entry-existing-crews {
    grid-template-columns: 1fr;
  }

  .my-entry-pilot.is-me {
    grid-column: auto;
  }

  .my-entry-preferences {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .my-entry-header {
    grid-template-columns: 32px minmax(0,1fr) 72px;
  }

  .my-entry-summary-side {
    width: 72px;
  }

  .my-entry-summary-side .circuit-visual,
  .my-entry-summary-side .circuit-visual img {
    width: 72px;
    height: 44px;
  }

  .my-entry-meta > span:not(.event-category-badge) {
    display: none;
  }
}


/* styles/my-entries-native.css */
/* Mes inscriptions : styles complets de la vue native. */
.ux-managed-entry-name {
  display: block;
  margin-bottom: 2px;
  color: #f4ead9;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.15;
}

.ux-my-entry-departure {
  display: block;
  color: #9beeb4;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}

.ux-my-entry-date {
  display: block;
  color: #c3cdcf;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
}

.ux-my-entry-content-accordion {
  overflow: hidden;
  border: 1px solid rgba(73,118,123,.5);
  border-radius: 10px;
  background: rgba(18,25,28,.88);
}

.ux-my-entry-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto 24px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}

.ux-my-entry-accordion-summary::-webkit-details-marker {
  display: none;
}

.ux-my-entry-accordion-summary > span:first-child {
  color: #f1e9da;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
}

.ux-my-entry-accordion-summary > strong {
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid rgba(73,118,123,.65);
  border-radius: 999px;
  background: rgba(255,255,255,.025);
  color: #f1e9da;
  font-size: 13px;
  font-weight: 900;
}

.ux-my-entry-chevron {
  display: grid;
  place-items: center;
  color: #8ea0a3;
  font-size: 25px;
  line-height: 1;
  transition: transform .15s ease;
}

.ux-my-entry-content-accordion[open] > .ux-my-entry-accordion-summary {
  border-bottom: 1px solid rgba(73,118,123,.4);
}

.ux-my-entry-content-accordion[open] > .ux-my-entry-accordion-summary .ux-my-entry-chevron {
  transform: rotate(90deg);
}

.ux-my-entry-content-body {
  padding: 12px 14px 14px;
}

.ux-my-own-crew {
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--category-color, #52cfd4) 55%, rgba(73,118,123,.55));
  border-left: 4px solid var(--category-color, #52cfd4);
  border-radius: 10px;
  background: color-mix(in srgb, var(--category-color, #52cfd4) 5%, rgba(13,19,21,.96));
}

.ux-my-own-crew-head,
.ux-my-own-crew-identity,
.ux-my-other-crews-heading,
.ux-my-other-crew-main {
  display: flex;
  align-items: center;
}

.ux-my-own-crew-head {
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.ux-my-own-crew-identity {
  min-width: 0;
  gap: 10px;
}

.ux-my-own-crew-identity > .category-logo,
.ux-my-other-crew-main > .category-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}

.ux-my-own-crew-identity > div,
.ux-my-other-crew-main > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.ux-my-own-crew-identity strong {
  color: #f4ead9;
  font-size: 18px;
  font-weight: 900;
}

.ux-my-own-crew-identity span,
.ux-my-other-crew-main span {
  min-width: 0;
  color: #aebbbc;
  overflow-wrap: anywhere;
}

.ux-my-crew-state {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid rgba(141,157,160,.5);
  border-radius: 999px;
  color: #bfc9ca;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
}

.ux-my-pilot-grid {
  display: grid;
  gap: 10px;
  width: 100%;
}

.ux-my-pilot-grid-1 { grid-template-columns: minmax(0,1fr); }
.ux-my-pilot-grid-2 { grid-template-columns: repeat(2,minmax(0,1fr)); }
.ux-my-pilot-grid-3 { grid-template-columns: repeat(3,minmax(0,1fr)); }

.ux-my-entry-pilot-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 7px !important;
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(73,118,123,.55) !important;
  border-radius: 10px;
  background: rgba(12,18,20,.82);
}

.ux-my-entry-pilot-card.is-own-pilot {
  border-color: rgba(82,207,212,.8) !important;
  background: rgba(82,207,212,.07);
  box-shadow: inset 3px 0 0 var(--brand-cyan, #52cfd4);
}

.ux-my-entry-pilot-card .pilot-main {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.ux-my-entry-pilot-card .pilot-name {
  color: #f4ead9;
  font-weight: 900;
}

.ux-my-entry-pilot-card .pilot-category-logo .category-logo,
.ux-my-entry-pilot-card .pilot-category-logo > img,
.ux-my-entry-pilot-card .category-logo {
  width: 31px;
  height: 31px;
  object-fit: contain;
}

.ux-my-entry-pilot-card .pilot-car {
  min-width: 0;
  color: #b7c3c4;
  overflow-wrap: anywhere;
}

.ux-my-entry-pilot-card .presence-timeline {
  width: 100%;
  margin-top: auto;
  padding-top: 5px;
}

.ux-my-awaiting-crew {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(231,182,83,.48);
  border-left: 4px solid rgba(231,182,83,.8);
  border-radius: 10px;
  background: rgba(231,182,83,.035);
}

.ux-my-awaiting-copy {
  display: grid;
  gap: 2px;
}

.ux-my-awaiting-copy strong {
  color: #f0d89b;
  font-size: 15px;
}

.ux-my-awaiting-copy span {
  color: #aeb9ba;
  font-size: 12px;
}

.ux-my-other-crews {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(73,118,123,.34);
}

.ux-my-other-crews-heading {
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.ux-my-other-crews-heading strong {
  color: #bdc8c9;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.ux-my-other-crews-heading span {
  color: #8fa0a2;
  font-size: 11px;
  font-weight: 800;
}

.ux-my-other-crews-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}

.ux-my-other-crew {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid rgba(73,118,123,.38);
  border-left: 3px solid var(--category-color, rgba(82,207,212,.55));
  border-radius: 8px;
  background: rgba(255,255,255,.012);
  opacity: .82;
}

.ux-my-other-crew-main {
  gap: 8px;
  min-width: 0;
}

.ux-my-other-crew-main > .category-logo {
  width: 25px;
  height: 25px;
}

.ux-my-other-crew-main strong {
  color: #d9e0df;
  font-size: 12px;
  font-weight: 900;
}

.ux-my-other-crew-main span,
.ux-my-other-crew small {
  color: #8f9d9f;
  font-size: 10px;
  line-height: 1.25;
}

.ux-my-other-crew small {
  overflow-wrap: anywhere;
}

.native-my-entries-heading {
  margin-bottom: 18px;
}

.native-my-entries-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.native-my-entries-group {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.native-my-entries-group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.native-my-entries-group-heading h2 {
  margin: 0;
  color: #f1e9da;
  font-size: 20px;
}

.native-my-entries-group-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.native-my-entry-list {
  display: grid;
  gap: 12px;
}

.native-my-entry-card {
  overflow: hidden;
  border: 1px solid rgba(73,118,123,.52);
  border-radius: 12px;
  background: rgba(12,18,20,.9);
}

.native-my-entry-header {
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 96px;
  padding: 14px 16px;
  list-style: none;
  cursor: pointer;
}

.native-my-entry-header::-webkit-details-marker { display: none; }

.native-my-entry-toggle {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(126,153,158,.55);
  border-radius: 999px;
  color: #c7d0d1;
  font-size: 24px;
  line-height: 1;
}

.native-my-entry-card[open] > .native-my-entry-header .native-my-entry-toggle::before { content: '−'; }
.native-my-entry-card[open] > .native-my-entry-header .native-my-entry-toggle { font-size: 0; }
.native-my-entry-card[open] > .native-my-entry-header .native-my-entry-toggle::before { font-size: 24px; }

.native-my-entry-title {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.native-my-entry-title h2 {
  margin: 0;
  color: #f4ead9;
  font-size: 21px;
  line-height: 1.1;
}

.native-my-entry-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 5px;
  color: #9eacad;
  font-size: 12px;
}

.native-my-entry-open-event {
  align-self: center;
  width: auto;
  min-width: 166px;
  padding-inline: 14px;
  white-space: nowrap;
}

.native-my-entry-body {
  display: grid;
  gap: 10px;
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(73,118,123,.34);
}

.native-my-entries-loading {
  padding: 26px;
  color: var(--muted);
}

/* Le thème global stylise toutes les balises header comme la bannière du site. */
.ux-my-own-crew > .ux-my-own-crew-head {
  min-height: 0;
  padding: 0;
  overflow: visible;
  background-color: transparent;
  background-image: none;
  background-position: initial;
  background-size: auto;
  border-bottom: 0;
  box-shadow: none;
}

.ux-my-own-crew > .ux-my-own-crew-head::after {
  content: none;
}

@media (max-width: 1100px) {
  .ux-my-pilot-grid-3,
  .ux-my-other-crews-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px) {
  .ux-managed-entry-name { font-size: 15px; }
  .ux-my-entry-departure { font-size: 14px; }
  .ux-my-entry-date { font-size: 11px; }

  .ux-my-entry-accordion-summary {
    min-height: 48px;
    padding: 8px 10px;
  }

  .ux-my-entry-accordion-summary > span:first-child { font-size: 17px; }
  .ux-my-entry-content-body { padding: 9px; }

  .ux-my-own-crew-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .ux-my-pilot-grid-2,
  .ux-my-pilot-grid-3,
  .ux-my-other-crews-grid {
    grid-template-columns: minmax(0,1fr);
  }

  .ux-my-own-crew-identity strong { font-size: 16px; }

  .native-my-entry-header {
    grid-template-columns: 32px minmax(0,1fr);
    gap: 9px;
    min-height: 82px;
    padding: 11px;
  }

  .native-my-entry-toggle {
    width: 30px;
    height: 30px;
    font-size: 21px;
  }

  .native-my-entry-title h2 { font-size: 18px; }
  .native-my-entry-meta { font-size: 11px; }

  .native-my-entry-open-event {
    grid-column: 2;
    justify-self: start;
    min-width: 0;
    width: auto;
    margin-top: 4px;
  }

  .native-my-entry-body { padding: 9px; }
}


/* styles/my-entries-accordions.css */
/* Mes inscriptions : Mon équipage reste prioritaire, les deux sections secondaires sont plus compactes. */
.ux-my-entry-content-accordion.is-compact {
  border-radius: 8px;
  background: rgba(15,22,24,.78);
}

.ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary {
  min-height: 38px;
  padding: 5px 11px;
  grid-template-columns: minmax(0,1fr) auto 20px;
  gap: 8px;
}

.ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary > span:first-child {
  font-size: 14px;
  letter-spacing: .1px;
}

.ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary > strong {
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  font-size: 11px;
}

.ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary .ux-my-entry-chevron {
  font-size: 20px;
}

.ux-my-entry-content-accordion.is-compact > .ux-my-entry-content-body {
  padding: 10px 12px 12px;
}

@media (max-width: 760px) {
  .ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary {
    min-height: 36px;
    padding: 5px 9px;
  }

  .ux-my-entry-content-accordion.is-compact > .ux-my-entry-accordion-summary > span:first-child {
    font-size: 13px;
  }

  .ux-my-entry-content-accordion.is-compact > .ux-my-entry-content-body {
    padding: 8px 9px 9px;
  }
}


/* styles/pilot-emphasis.css */
.pilot-section .pilot-row.ux-current-pilot {
  background: linear-gradient(90deg, rgba(240, 170, 105, .14), rgba(240, 170, 105, .035));
  border-color: rgba(240, 170, 105, .48);
  border-radius: 10px;
  box-shadow: inset 3px 0 0 rgba(240, 170, 105, .78);
}

.pilot-section .pilot-row .edit-button.ux-pilot-edit {
  border-color: rgba(236, 188, 144, .58);
  background: rgba(236, 188, 144, .16);
  color: #f1d4b9;
}

.pilot-section .pilot-row .edit-button.ux-pilot-edit:hover,
.pilot-section .pilot-row .edit-button.ux-pilot-edit:focus-visible {
  border-color: rgba(236, 188, 144, .8);
  background: rgba(236, 188, 144, .24);
  color: #ffe7d1;
}

/* Course: les pilotes d’un équipage utilisent les mêmes cartes lisibles que les inscrits. */
.crew-pilot-accordion-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.crew-pilot-accordion-body[data-pilot-columns="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crew-pilot-accordion-body[data-pilot-columns="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crew-pilot-accordion-body > .crew-capacity-message,
.crew-pilot-accordion-body > .empty {
  grid-column: 1 / -1;
}

.crew-pilot-accordion-body > .pilot-row {
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid color-mix(in srgb, var(--crew-color) 30%, var(--border)) !important;
  border-radius: 10px;
  background: var(--panel2);
}

.crew-pilot-accordion-body > .pilot-row .presence-timeline {
  width: 100%;
}

/* Course: le contrôle d'inscription reste accessible même quand le départ est fermé. */
.departure-fold[id^="departure-"] > .departure-fold-body > .fold-toolbar {
  display: none !important;
}

.departure-fold[id^="departure-"] > summary {
  grid-template-columns: 46px minmax(0, 1fr) auto minmax(155px, max-content) 32px;
  grid-template-rows: auto auto;
}

.departure-fold[id^="departure-"] > summary > .fold-index {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.departure-fold[id^="departure-"] > summary > .fold-date {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.departure-fold[id^="departure-"] > summary > .fold-meta {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.departure-fold[id^="departure-"] > summary > .fold-countdown {
  grid-column: 4;
  grid-row: 1;
  justify-self: end;
}

.departure-fold[id^="departure-"] > summary > .ux-summary-registration-toggle {
  grid-column: 4;
  grid-row: 2;
  justify-self: end;
  min-height: 32px;
  margin-top: 5px;
  padding: 5px 11px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1;
}

.departure-fold[id^="departure-"] > summary::after {
  grid-column: 5;
  grid-row: 1 / span 2;
  align-self: center;
}

/* Équipages: pas de titre redondant sous le créneau. */
.crew-only-section > h2 {
  display: none !important;
}

/* Stabilise le survol des accordéons d'équipage. */
.crew-pilot-accordion-summary {
  transition: none !important;
}

.crew-pilot-accordion-summary:hover {
  background: color-mix(in srgb, var(--crew-color) 12%, #151c1f) !important;
}

@media (max-width: 900px) {
  .crew-pilot-accordion-body[data-pilot-columns="3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .crew-pilot-accordion-body,
  .crew-pilot-accordion-body[data-pilot-columns="2"],
  .crew-pilot-accordion-body[data-pilot-columns="3"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .departure-fold[id^="departure-"] > summary {
    grid-template-columns: 38px minmax(0, 1fr) 26px;
    grid-template-rows: auto auto auto auto;
    gap: 7px 10px;
  }

  .departure-fold[id^="departure-"] > summary > .fold-index {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .departure-fold[id^="departure-"] > summary > .fold-date {
    grid-column: 2;
    grid-row: 1;
  }

  .departure-fold[id^="departure-"] > summary > .fold-meta {
    grid-column: 2;
    grid-row: 2;
  }

  .departure-fold[id^="departure-"] > summary > .fold-countdown {
    display: block;
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    min-width: 0;
    text-align: left;
  }

  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-toggle {
    grid-column: 2;
    grid-row: 4;
    justify-self: start;
    margin-top: 2px;
  }

  .departure-fold[id^="departure-"] > summary::after {
    grid-column: 3;
    grid-row: 1 / span 4;
  }
}


/* styles/registration-sharing.css */
.registration-workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.registration-workspace-head h2{margin:0}
.registration-workspace-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.registration-workspace-actions .category-add-button,.registration-close-button{flex:0 0 auto;margin:0!important}
.registration-origin-info{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border:1px solid #566267;border-radius:50%;color:#aebabe;font-size:10px;font-weight:900;line-height:1;cursor:help;vertical-align:middle;opacity:.72}
.registration-origin-info:hover,.registration-origin-info:focus{opacity:1;border-color:var(--green);color:#dfffe7}
.pilot-name .registration-origin-info{margin-left:3px}

/* Les cartes pilotes utilisent un nom et un logo visuellement équilibrés. */
.pilot-main>.pilot-name{font-size:15.5px;font-weight:900;line-height:1.1}
.pilot-main .pilot-category-logo{display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;min-width:32px;min-height:24px}
.pilot-main .pilot-category-logo .category-logo{display:block;width:auto;max-width:30px;height:auto;max-height:24px;object-fit:contain}
.pilot-main .pilot-category-logo .category-text-logo{max-width:32px;padding:2px;font-size:7.5px;line-height:1;text-align:center}
.pilot-main .pilot-car{min-width:0;overflow-wrap:anywhere}

/* Réserve une vraie colonne aux deux actions du départ. Ce sélecteur est volontairement
   plus précis que l'ancien layout pour ne pas dépendre d'un bouton unique. */
@media(min-width:901px){
  .departure-fold[id^="departure-"]>summary{grid-template-columns:34px minmax(220px,1fr) max-content minmax(250px,292px)!important}
}

/* Les deux actions d'inscription restent côte à côte dans le résumé du départ. */
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions{
  grid-column:4;
  grid-row:1 / span 2;
  align-self:center;
  justify-self:end;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  width:292px;
  max-width:100%;
  min-width:0;
  margin:0;
}
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle,
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other{
  width:100%;
  max-width:100%;
  min-width:0!important;
  min-height:36px;
  margin:0!important;
  padding:7px 9px;
  border-radius:5px;
  font-size:10.5px;
  line-height:1.15;
  white-space:normal;
  text-align:center;
}
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle{
  border:1px solid #71e0e5;
  background:linear-gradient(180deg,#68dce1,#3bbbc2);
  color:#061416;
}
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other{
  border:1px solid #4fb7bd;
  background:linear-gradient(180deg,#2c666a,#214f53);
  color:#e8fbfb;
}
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle:hover,
.departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other:hover{filter:brightness(1.08)}

.registration-identity-grid{display:grid;gap:14px;margin:8px 0 14px;align-items:end}
.registration-identity-field{display:grid;gap:7px;min-width:0;margin:0}
.registration-identity-field>.form-label{margin:0;align-self:end}
.registration-identity-field input,.registration-identity-field select{width:100%;min-width:0;margin:0}
.registration-identity-readonly strong{display:flex;align-items:center;min-height:42px;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:rgba(255,255,255,.025);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Desktop : Pilote / Pseudo / Pilote souhaité restent sur une seule ligne. */
@media(min-width:901px){
  .registration-identity-grid.is-other{grid-template-columns:repeat(3,minmax(0,1fr))}
  .registration-identity-grid.is-self{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}

@media(max-width:1100px) and (min-width:901px){
  .departure-fold[id^="departure-"]>summary{grid-template-columns:34px minmax(190px,1fr) max-content minmax(230px,250px)!important}
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions{width:250px;gap:5px}
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle,
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other{font-size:9.5px;padding-inline:6px}
}

@media(max-width:900px){
  .registration-workspace-head{align-items:flex-start}
  .registration-identity-grid,.registration-identity-grid.is-other,.registration-identity-grid.is-self{grid-template-columns:1fr}
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions{
    grid-column:2 / -1;
    grid-row:3;
    justify-self:stretch;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    margin-top:5px;
  }
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle,
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other{
    min-height:34px;
    font-size:10.5px;
  }
}

@media(max-width:380px){
  .registration-workspace-head{flex-direction:column}
  .registration-workspace-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .registration-workspace-actions .category-add-button,.registration-close-button{width:100%}
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-toggle,
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions .ux-summary-registration-other{font-size:9.5px;padding-inline:5px}
}

/* Coéquipiers souhaités (pastilles) et commentaire, au récapitulatif de l'inscription. */
.registration-stepper .registration-identity-field{margin-top:14px}
.preferred-pilot-chips{display:flex;flex-wrap:wrap;gap:6px}
.preferred-pilot-chips:empty{display:none}
.preferred-pilot-entry{display:flex;align-items:center;gap:8px;min-width:0}
.preferred-pilot-entry input{flex:1;min-width:0}
.preferred-pilot-entry button{flex:none;min-height:40px;padding:6px 12px}
.preferred-pilot-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid rgba(82,211,216,.45);border-radius:999px;background:rgba(82,211,216,.1);font-size:13px;font-weight:700}
.preferred-pilot-chip button{display:grid;place-items:center;width:22px;height:22px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font-size:16px;line-height:1;cursor:pointer}
.preferred-pilot-chip button:hover{background:rgba(255,255,255,.12)}
.registration-comment textarea{width:100%;min-width:0;margin:0;padding:11px;border:1px solid var(--border);border-radius:4px;outline:none;resize:vertical;font:inherit}
.pilot-comment{font-style:italic}


/* styles/layout-polish.css */
/* Course : sous "Pilotes inscrits", afficher directement les cartes. */
.ux-unassigned-section {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.ux-unassigned-section > .ux-section-heading {
  display: none !important;
}

/* Le seul compte à rebours conservé est celui de l'en-tête de l'événement. */
.departure-fold > summary > .fold-countdown,
.race-recap .recap-countdown,
.event-card .event-countdown:not(.running),
.my-entry-meta > span:last-child {
  display: none !important;
}

.event-heading-copy > .event-header-countdown {
  display: block !important;
  width: fit-content;
  margin-top: 8px;
  color: #b8c6c7;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
}

.event-heading-copy > .event-header-countdown strong {
  color: #9beeb4;
  font-size: 14px;
  font-weight: 900;
}

/* Départs : même en-tête compact dans Course et Équipages. */
.departure-fold > summary {
  grid-template-columns: 34px minmax(220px, 1fr) max-content 170px !important;
  grid-template-rows: auto auto !important;
  min-height: 70px !important;
  padding: 10px 14px !important;
  column-gap: 14px !important;
  row-gap: 3px !important;
}

.crew-page-accordion .departure-fold > summary {
  grid-template-columns: 34px minmax(220px, 1fr) max-content !important;
}

.departure-fold > summary > .fold-index {
  display: none !important;
}

.departure-fold > summary::after {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  justify-self: start !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  line-height: 27px !important;
}

.departure-fold > summary > .fold-date {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  min-width: 0;
}

.departure-fold > summary > .fold-date .ux-departure-title {
  display: block;
  margin: 0;
  color: #9beeb4;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .1px;
}

.departure-fold > summary > .fold-date .ux-departure-date {
  display: block;
  margin-top: 5px;
  color: #c3cdcf;
  font-size: 15px;
  font-weight: 650;
  line-height: 1.2;
}

.departure-fold > summary > .fold-meta {
  grid-column: 3 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: end !important;
  font-size: 13px !important;
}

.departure-fold[id^="departure-"] > summary > .ux-summary-registration-toggle {
  grid-column: 4 !important;
  grid-row: 1 / span 2 !important;
  width: 160px !important;
  max-width: 100%;
  min-width: 0 !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 5px 10px !important;
  justify-self: end !important;
  align-self: center !important;
  font-size: 12px !important;
  white-space: nowrap;
}

/* Mon inscription : même largeur que les autres blocs du départ. */
.departure-fold .fold-registration,
.departure-fold .fold-registration .registration-form,
.departure-fold .fold-registration .form-section {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.departure-fold .fold-registration .registration-form {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Accordéons de contenu : Pilotes inscrits / Équipages / Pilotes restants. */
.ux-course-pilots-accordion,
.ux-course-crews-accordion,
.ux-remaining-pilots-section {
  overflow: hidden;
}

.ux-course-split-section > .pilot-section {
  margin: 0;
}

.ux-course-split-overview {
  display: grid;
  gap: 12px;
}

.ux-course-split-overview > .ux-course-pilots-accordion,
.ux-course-split-overview > .ux-course-crews-accordion {
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel2);
}

.ux-course-split-overview > details[open] {
  padding-bottom: 14px;
}

.ux-content-accordion-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0;
  cursor: pointer;
  list-style: none;
}

.ux-course-split-overview > details > .ux-content-accordion-summary {
  min-height: 52px;
}

.ux-content-accordion-summary::-webkit-details-marker {
  display: none;
}

.ux-content-accordion-title {
  min-width: 0;
  color: #f1e9da;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.2;
}

.ux-content-accordion-count {
  display: grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel3);
  color: #f1e9da;
  font-size: 14px;
  font-weight: 900;
}

.ux-content-accordion-chevron {
  display: grid;
  place-items: center;
  color: #8ea0a3;
  font-size: 25px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .15s ease;
}

.ux-course-pilots-accordion[open] > .ux-content-accordion-summary .ux-content-accordion-chevron,
.ux-course-crews-accordion[open] > .ux-content-accordion-summary .ux-content-accordion-chevron,
.ux-remaining-pilots-section[open] > .ux-content-accordion-summary .ux-content-accordion-chevron {
  transform: rotate(90deg);
}

.ux-course-pilots-body,
.ux-course-crews-body,
.ux-remaining-pilots-section > .ux-remaining-pilot-grid {
  margin-top: 8px;
}

.ux-course-crews-body {
  display: grid;
  gap: 10px;
}

/* Équipages : pilotes restants en cartes, tout en bas. */
.ux-legacy-unassigned-hidden {
  display: none !important;
}

.ux-remaining-pilots-section {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ux-remaining-pilot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.ux-remaining-pilot-card {
  min-width: 0;
  height: 100%;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  background: var(--panel2);
}

.ux-remaining-pilot-card .presence-timeline {
  width: 100%;
}

@media (max-width: 1100px) {
  .departure-fold > summary {
    grid-template-columns: 34px minmax(190px, 1fr) max-content 155px !important;
  }

  .crew-page-accordion .departure-fold > summary {
    grid-template-columns: 34px minmax(190px, 1fr) max-content !important;
  }

  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-toggle {
    width: 155px !important;
  }

  .ux-remaining-pilot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .departure-fold > summary,
  .crew-page-accordion .departure-fold > summary {
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    gap: 5px 10px !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
  }

  .departure-fold > summary::after {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 25px !important;
  }

  .departure-fold > summary > .fold-date {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: start !important;
  }

  .departure-fold > summary > .fold-date .ux-departure-title {
    font-size: 17px;
  }

  .departure-fold > summary > .fold-date .ux-departure-date {
    font-size: 14px;
  }

  .departure-fold > summary > .fold-meta {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    font-size: 12px !important;
  }

  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-toggle {
    grid-column: 2 !important;
    grid-row: 3 !important;
    width: auto !important;
    min-width: 140px !important;
    justify-self: start !important;
  }

  .event-heading-copy > .event-header-countdown {
    margin-top: 6px;
    font-size: 12px;
  }

  .event-heading-copy > .event-header-countdown strong {
    font-size: 13px;
  }

  .ux-content-accordion-title {
    font-size: 18px;
  }

  .ux-content-accordion-count {
    min-width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .ux-course-split-overview > .ux-course-pilots-accordion,
  .ux-course-split-overview > .ux-course-crews-accordion {
    padding-inline: 11px;
  }

  .ux-remaining-pilot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* styles/home-event-card.css */
/* Layout des cartes d'événements sur les accueils LMU et iRacing. */
.event-card.event-card-harmonized .event-compact-date {
  color: #aebbbc;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

/* Les catégories et leurs inscrits restent disponibles dans le détail de l'événement.
   Sur la carte d'accueil, les compteurs pilotes/équipages suffisent et évitent une ligne redondante. */
.event-card.event-card-harmonized .event-category-badges {
  display: none !important;
}

.event-card.event-card-harmonized .event-info {
  flex-direction: column;
  gap: 5px;
}

.event-card.event-card-harmonized .event-pilot-count {
  display: block;
  color: #b6c3c5;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-align: left;
}

.event-card.event-card-harmonized .event-home-crews {
  display: block;
  min-width: 0;
  text-align: left;
}

@media (min-width: 761px) {
  .event-card.event-card-harmonized {
    min-height: 178px !important;
    padding: 17px 292px 17px 24px !important;
  }

  .event-card.event-card-harmonized .event-card-body {
    display: grid !important;
    grid-template-rows: auto auto auto auto;
    align-content: start;
    min-height: 142px;
  }

  .event-card.event-card-harmonized .event-card-title-row {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap;
    gap: 7px 10px;
    min-width: 0;
  }

  .event-card.event-card-harmonized .event-name {
    margin: 0 !important;
    color: #f4ead9;
    font-size: 18px;
    font-weight: 900;
    line-height: 1.15;
  }

  .event-card.event-card-harmonized .event-info {
    display: flex !important;
    align-items: flex-start;
    margin-top: 7px;
  }

  .event-card.event-card-harmonized .event-home-crews {
    margin-top: 12px;
  }

  .event-card.event-card-harmonized .circuit-visual {
    position: absolute !important;
    top: 50% !important;
    right: 16px !important;
    width: 258px !important;
    height: 146px !important;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .event-card.event-card-harmonized .circuit-visual img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain;
  }

  .event-card.event-card-harmonized .event-card-status {
    margin-top: 8px;
  }
}

@media (max-width: 760px) {
  .event-card.event-card-harmonized .event-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 96px !important;
    grid-template-areas:
      "title map"
      "info map"
      "crews crews"
      "status status" !important;
    column-gap: 8px;
    row-gap: 7px;
    align-items: start;
    width: 100%;
    min-width: 0;
  }

  .event-card.event-card-harmonized .event-card-title-row {
    grid-area: title;
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap;
    gap: 4px 8px;
    min-width: 0;
    padding-right: 0 !important;
  }

  .event-card.event-card-harmonized .event-name {
    margin: 0 !important;
    line-height: 1.12;
  }

  .event-card.event-card-harmonized .event-compact-date {
    font-size: 11px;
  }

  .event-card.event-card-harmonized .event-info {
    grid-area: info;
    display: flex !important;
    align-items: flex-start;
    margin: 0;
    min-width: 0;
  }

  .event-card.event-card-harmonized .event-home-crews {
    grid-area: crews;
    width: 100%;
    min-width: 0;
    margin: 2px 0 0;
  }

  .event-card.event-card-harmonized .event-card-status {
    grid-area: status;
    width: 100%;
    min-width: 0;
    margin-top: 0;
  }

  .event-card.event-card-harmonized .crew-summary-list,
  .event-card.event-card-harmonized .crew-summary-card {
    width: 100%;
    min-width: 0;
  }
}


/* styles/game-context.css */
.game-space-bar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 20px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.game-space-bar strong {
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}

html[data-game="iracing"] .game-space-bar strong {
  color: var(--blue);
}

.help-sim-stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.help-sim-stack > .help-nav-button {
  width: 100%;
}

.nav-game-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.nav-game-switcher-button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid currentColor;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: -.02em;
  text-decoration: none;
  box-shadow: 0 5px 16px rgba(0,0,0,.18);
  transition: transform .16s ease, filter .16s ease, background .16s ease, box-shadow .16s ease;
}

.nav-game-switcher-button:hover,
.nav-game-switcher-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.12);
}

.nav-game-switcher-lmu {
  color: #ff5660;
  background: rgba(227,6,19,.16);
  border-color: rgba(255,86,96,.82);
}

.nav-game-switcher-iracing {
  color: #6ca0ff;
  background: rgba(37,65,133,.24);
  border-color: rgba(108,160,255,.82);
}

html[data-game="lmu"] .nav-game-switcher-lmu {
  color: #fff;
  background: #d90b18;
  border-color: #ff6068;
  box-shadow: 0 0 0 2px rgba(227,6,19,.18), 0 7px 20px rgba(227,6,19,.28);
}

html[data-game="iracing"] .nav-game-switcher-iracing {
  color: #fff;
  background: #2a4f9f;
  border-color: #70a2ff;
  box-shadow: 0 0 0 2px rgba(58,99,190,.2), 0 7px 20px rgba(37,65,133,.28);
}

.circuit-visual:has(img[src$="/track-placeholder.svg"]) {
  display: none;
}

@media (max-width: 760px) {
  .game-space-bar {
    padding: 7px 12px 0;
  }

  .game-space-bar strong {
    font-size: 11px;
  }

  #navigation > .help-sim-stack {
    display: contents;
  }

  .help-sim-stack > .help-nav-button {
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
  }

  #navigation > [data-action="logout"] {
    order: 5;
  }

  .nav-game-switcher {
    order: 6;
    width: 100%;
    align-self: stretch;
  }

  .nav-game-switcher-button {
    min-height: 42px;
    padding: 5px 6px;
    border-radius: 7px;
    font-size: 11px;
  }
}


/* styles/circuit-sources.css */
/* Système de rendu des cartes de circuits.
   Les sources et presets sont centralisés dans /shared/circuit-maps.mjs.
   Sources et licences : /circuit-credits.html. */

.circuit-visual {
  position: relative;
  overflow: hidden !important;
  contain: paint;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
}

.circuit-visual img[data-circuit] {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto;
  object-fit: contain;
  object-position: center;
  transform: translate(var(--circuit-x, 0),var(--circuit-y, 0)) scale(var(--circuit-scale, .9));
  transform-origin: center;
  filter: grayscale(1) invert(1) brightness(1.12) contrast(1.14);
  pointer-events: none;
}

/* Les cartes d'événements gèrent leur propre grille dans home-event-card.css.
   Ici on ne définit que la fenêtre du circuit. */
@media (max-width: 760px) {
  .event-card.event-card-harmonized .circuit-visual {
    grid-area: map;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 96px !important;
    height: 82px !important;
    min-width: 96px !important;
    max-width: 96px !important;
    flex: 0 0 96px !important;
    align-self: start;
    justify-self: end;
    transform: none !important;
    z-index: 0;
  }

  .event-card.event-card-harmonized .circuit-visual img[data-circuit] {
    transform: translate(var(--circuit-mobile-x, 0),var(--circuit-mobile-y, 0)) scale(var(--circuit-mobile-scale, 1.02)) !important;
  }
}

/* Accueil desktop : on conserve la réserve d'espace existante à droite,
   mais l'image reste strictement peinte à l'intérieur de sa fenêtre. */
@media (min-width: 761px) {
  .event-card.event-card-harmonized .circuit-visual {
    position: absolute !important;
    top: 50% !important;
    right: 18px !important;
    width: 248px !important;
    height: 136px !important;
    transform: translateY(-50%) !important;
  }
}

/* Vue détaillée : même principe, avec une fenêtre dédiée qui empêche
   tout SVG de sortir du header quelle que soit sa viewBox. */
.event-heading-line > .circuit-visual {
  overflow: hidden !important;
}

@media (min-width: 1000px) {
  .event-heading-line > .circuit-visual {
    width: 430px !important;
    height: 230px !important;
  }
}


/* styles/mobile-timeline-compact.css */
@media (max-width: 760px) {
  /* Final mobile timeline sizing. This file is intentionally loaded last in game.html. */
  .ux-unassigned-grid > .pilot-row,
  .crew-pilot-accordion-body > .pilot-row {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    gap: 3px !important;
  }

  /* Keep pilot actions and category marks secondary to the availability itself. */
  .pilot-row > .edit-button,
  .pilot-row > .edit-button.ux-pilot-edit {
    width: auto !important;
    min-width: 62px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 5px !important;
  }

  .pilot-category-logo {
    align-self: center !important;
  }

  .pilot-category-logo .category-logo {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }

  .ux-unassigned-grid .presence-timeline,
  .crew-pilot-accordion-body .presence-timeline,
  .crew-management-accordion-body .presence-timeline,
  :is(.pilot-row, .crew-card) .presence-timeline {
    margin-top: 0 !important;
  }

  .ux-unassigned-grid .presence-scale,
  .crew-pilot-accordion-body .presence-scale,
  .crew-management-accordion-body .presence-scale,
  :is(.pilot-row, .crew-card) .presence-scale {
    height: 15px !important;
  }

  .presence-time {
    top: 0 !important;
    font-size: 9px !important;
    line-height: 10px !important;
  }

  .presence-boundary::after {
    height: 3px !important;
  }

  .presence-track {
    border-radius: 4px !important;
  }

  .ux-unassigned-grid .presence-track > .presence-segment,
  .crew-pilot-accordion-body .presence-track > .presence-segment,
  .crew-management-accordion-body .presence-track > .presence-segment,
  :is(.pilot-row, .crew-card) .presence-track > .presence-segment {
    height: 16px !important;
    min-height: 16px !important;
    font-size: 9px !important;
  }

  .ux-unassigned-grid .presence-edges,
  .crew-pilot-accordion-body .presence-edges,
  .crew-management-accordion-body .presence-edges,
  :is(.pilot-row, .crew-card) .presence-edges {
    margin-top: 1px !important;
    font-size: 8px !important;
    line-height: 1 !important;
    letter-spacing: .15px !important;
  }
}


/* styles/mobile-final.css */
/* Mobile final pass: phone-specific layout only. Desktop stays untouched. */
@media (max-width: 760px) {
  :root { --mobile-final-gap: 8px; }

  /* Top navigation: denser and visually balanced. */
  .site-nav-shell { padding: 6px 8px !important; }
  .game-space-bar { min-height: 22px !important; padding: 0 2px 4px !important; text-align: center; }
  .game-space-bar strong { font-size: 10px !important; letter-spacing: .12em; }
  .site-nav-shell #navigation { gap: 5px !important; }
  #navigation > button, #navigation > a { min-height: 38px !important; padding: 6px 8px !important; font-size: 12px !important; }
  .site-nav-shell .account-bar { width: 100% !important; margin: 5px 0 0 !important; padding: 0 !important; justify-content: stretch !important; }
  .site-nav-shell .account-menu-root { width: 100% !important; }
  .site-nav-shell .account-menu-trigger { width: 100% !important; min-height: 42px !important; padding: 6px 9px !important; }

  /* Event organizer actions: true 2x2 compact grid instead of one huge CTA row. */
  .event-actions-toolbar { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px !important; width: 100% !important; }
  .event-actions-toolbar > .event-toolbar-main { display: contents !important; }
  .event-actions-toolbar button,
  .event-actions-toolbar > .crew-builder-open { width: 100% !important; min-width: 0 !important; min-height: 42px !important; margin: 0 !important; padding: 7px 8px !important; font-size: 12px !important; line-height: 1.15 !important; }

  /* Departure header + registration actions: keep both controls compact on one row. */
  .departure-fold[id^="departure-"] > summary { grid-template-columns: 34px minmax(0,1fr) !important; grid-template-rows: auto auto auto !important; }
  .departure-fold[id^="departure-"] > summary .fold-index { grid-column: 1 !important; grid-row: 1 / 3 !important; }
  .departure-fold[id^="departure-"] > summary .fold-date { grid-column: 2 !important; grid-row: 1 !important; }
  .departure-fold[id^="departure-"] > summary .fold-meta { grid-column: 2 !important; grid-row: 2 !important; }
  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-actions { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; margin-top: 6px !important; gap: 6px !important; }
  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-actions button { min-height: 38px !important; padding: 6px 7px !important; font-size: 10.5px !important; }

  /* Course accordions: less vertical chrome on a phone. */
  .ux-content-accordion-summary { min-height: 46px !important; padding: 8px 10px !important; }
  .ux-content-accordion-title { font-size: 15px !important; }
  .ux-content-accordion-count { min-width: 30px !important; height: 30px !important; font-size: 11px !important; }

  /* Two pilot cards per row in organizer candidate lists. */
  .ux-crew-candidate-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; }
  .crew-candidate-action-card { display: grid !important; grid-template-columns: minmax(0,1fr) !important; align-content: start !important; gap: 6px !important; min-width: 0 !important; padding: 8px !important; border-radius: 9px !important; }
  .crew-candidate-info { min-width: 0 !important; }
  .ux-candidate-head { display: block !important; min-width: 0 !important; }
  .ux-candidate-head strong { display: block; min-width: 0; font-size: 13px !important; line-height: 1.15 !important; overflow-wrap: anywhere; }
  .crew-candidate-info > small { display: block; margin-top: 2px; font-size: 9.5px !important; line-height: 1.25 !important; overflow-wrap: anywhere; }
  .crew-candidate-action-card .presence-timeline { margin-top: 5px !important; overflow: hidden !important; }
  .crew-candidate-action-card .presence-scale { height: 20px !important; }
  .crew-candidate-action-card .presence-time { font-size: 8px !important; }
  .crew-candidate-action-card .presence-track > .presence-segment { height: 27px !important; min-height: 27px !important; font-size: 9px !important; }
  .crew-candidate-action-card .presence-edges { font-size: 8px !important; }
  .crew-candidate-action-card .crew-add-pilot-button { width: 100% !important; min-height: 34px !important; padding: 5px 6px !important; font-size: 12px !important; }

  /* Pilot cards: keep two columns but let every useful field breathe and wrap. */
  .ux-remaining-pilot-grid,
  .ux-unassigned-grid { display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 8px !important; align-items: stretch; }

  .ux-remaining-pilot-card,
  .ux-unassigned-grid > .pilot-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 0 !important;
    height: 100%;
    padding: 9px !important;
    gap: 7px !important;
  }

  .ux-remaining-pilot-card .pilot-main,
  .ux-unassigned-grid > .pilot-row .pilot-main {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 34px !important;
    grid-auto-rows: auto;
    align-items: start !important;
    gap: 5px 7px !important;
    width: 100%;
    min-width: 0;
  }

  .ux-remaining-pilot-card .pilot-name,
  .ux-unassigned-grid > .pilot-row .pilot-name {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-width: 0;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  .ux-remaining-pilot-card .pilot-category-logo,
  .ux-unassigned-grid > .pilot-row .pilot-category-logo {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end;
    width: 34px !important;
    max-width: 34px !important;
  }

  .ux-remaining-pilot-card .pilot-category-logo img,
  .ux-unassigned-grid > .pilot-row .pilot-category-logo img {
    width: 34px !important;
    max-width: 34px !important;
    height: auto !important;
  }

  .ux-remaining-pilot-card .pilot-car,
  .ux-unassigned-grid > .pilot-row .pilot-car,
  .ux-remaining-pilot-card .registration-status,
  .ux-unassigned-grid > .pilot-row .registration-status,
  .ux-remaining-pilot-card .pilot-preference,
  .ux-unassigned-grid > .pilot-row .pilot-preference {
    grid-column: 1 / -1 !important;
    min-width: 0;
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 10.5px !important;
    line-height: 1.28 !important;
  }

  .ux-remaining-pilot-card .presence-timeline,
  .ux-unassigned-grid > .pilot-row .presence-timeline {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: auto !important;
    overflow-x: auto !important;
  }

  .ux-remaining-pilot-card > .edit-button,
  .ux-unassigned-grid > .pilot-row > .edit-button {
    position: static !important;
    order: 3;
    align-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 5px 7px !important;
    font-size: 11px !important;
  }

  /* Members page: remove duplicated mobile heading chrome and densify cards. */
  .members-topbar-inner { width: calc(100% - 20px) !important; grid-template-columns: 1fr !important; gap: 7px !important; padding: 8px 0 !important; }
  .members-context { display: none !important; }
  .members-topbar .account-bar { grid-column: 1 !important; grid-row: 1 !important; width: 100% !important; justify-content: stretch !important; }
  .members-topbar .account-menu-root,
  .members-topbar .account-menu-trigger { width: 100% !important; }
  .members-nav { grid-column: 1 !important; grid-row: 2 !important; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px !important; width: 100%; }
  .members-nav a { min-height: 38px !important; padding: 6px 5px !important; font-size: 10.5px !important; line-height: 1.1 !important; text-align: center; }
  .members-main { width: calc(100% - 20px) !important; margin: 12px auto 36px !important; }
  .members-panel { padding: 10px !important; border-radius: 12px !important; }
  .members-heading { display: grid !important; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px !important; margin-bottom: 11px !important; }
  .members-heading > div { min-width: 0; }
  .members-kicker { font-size: 9px !important; }
  .members-heading h1 { margin: 2px 0 3px !important; font-size: 23px !important; line-height: 1 !important; }
  .members-heading p { font-size: 11px !important; line-height: 1.3 !important; }
  .members-count { align-self: start; justify-self: end !important; padding: 5px 8px !important; font-size: 10px !important; }
  .members-list { gap: 7px !important; }
  .members-row { grid-template-columns: minmax(0,1fr) auto !important; gap: 6px 8px !important; padding: 9px !important; border-radius: 9px !important; }
  .members-identity strong { font-size: 14px !important; line-height: 1.15 !important; }
  .members-identity small { font-size: 9.5px !important; line-height: 1.2 !important; overflow-wrap: anywhere; }
  .members-role-select { grid-column: 1 !important; min-width: 0; }
  .members-role-select select { min-height: 38px !important; padding-block: 6px !important; font-size: 12px !important; }
  .members-row button { grid-column: 2 !important; grid-row: 2 !important; min-height: 38px !important; width: auto !important; padding: 6px 10px !important; font-size: 11px !important; }
  .members-role { grid-column: 1 / -1 !important; font-size: 13px !important; }

  /* Mes inscriptions: secondary accordions remain compact after the broader mobile pass. */
  .ux-my-entry-content-accordion.is-secondary > .ux-my-entry-accordion-summary { min-height: 38px !important; padding: 6px 9px !important; }
  .ux-my-entry-content-accordion.is-secondary > .ux-my-entry-accordion-summary > span:first-child { font-size: 14px !important; }
  .ux-my-entry-content-accordion.is-secondary > .ux-my-entry-accordion-summary > strong { min-width: 26px !important; height: 26px !important; font-size: 10px !important; }
}

/* Only exceptionally narrow screens fall back to one card per row. */
@media (max-width: 320px) {
  .ux-crew-candidate-grid,
  .ux-remaining-pilot-grid,
  .ux-unassigned-grid { grid-template-columns: 1fr !important; }
}


/* styles/account-mobile-fix.css */
@media (max-width: 760px) {
  .site-nav-shell .account-bar {
    width: auto !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    justify-content: flex-start !important;
  }

  .site-nav-shell .account-menu-root,
  .site-nav-shell .account-menu {
    width: auto !important;
    max-width: calc(100vw - 24px);
  }

  .site-nav-shell .account-trigger {
    width: auto !important;
    min-width: 0 !important;
    max-width: 235px !important;
    min-height: 38px !important;
    padding: 4px 8px 4px 5px !important;
    gap: 7px !important;
  }

  .site-nav-shell .account-popover {
    left: 0 !important;
    right: auto !important;
    width: min(270px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }

  .site-nav-shell .account-avatar {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  .site-nav-shell .account-trigger-copy strong {
    max-width: 155px !important;
    font-size: 12px !important;
  }

  .site-nav-shell .account-trigger-copy small {
    font-size: 9px !important;
  }

  .site-nav-shell .account-chevron {
    margin-left: 1px !important;
    font-size: 12px !important;
  }
}


/* styles/event-polish.css */
/* Final event-page polish. Loaded last on game pages so the event view keeps a
   consistent visual hierarchy with the compact cards used on the home page. */

/* Departure header actions: important, but not oversized. */
.ux-summary-registration-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  min-width:0;
  margin-left:auto;
}
.ux-summary-registration-actions>button{
  width:auto!important;
  min-width:0!important;
  min-height:36px!important;
  margin:0!important;
  padding:7px 12px!important;
  border-radius:8px!important;
  font-size:11.5px!important;
  font-weight:900!important;
  line-height:1.15!important;
  white-space:nowrap;
}
.ux-summary-registration-actions .ux-summary-registration-toggle{
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 3px 10px rgba(42,170,179,.10)!important;
}
.ux-summary-registration-actions .ux-summary-registration-other,
.ux-summary-registration-actions .ux-summary-create-crew{
  color:#d7e2e1!important;
}
.ux-summary-registration-actions .ux-summary-create-crew{
  border-color:rgba(80,128,133,.78)!important;
}

/* The participation area should read as a continuation of the departure card. */
.departure-participation-section{
  margin:0!important;
  padding:13px 15px 15px!important;
  border-top:1px solid rgba(76,119,124,.34);
}
.departure-participation-section .ux-course-overview{gap:11px}

/* Compact heading, same rhythm as the home event cards. */
.ux-course-crews-heading{
  min-height:34px;
  padding:0 1px 3px!important;
}
.ux-course-crews-title{
  gap:7px!important;
  color:#f1e7d5!important;
  font-size:15px!important;
  line-height:1.15;
}
.ux-course-crews-title strong{
  min-width:25px!important;
  height:25px!important;
  padding:0 7px!important;
  border-color:#35545b!important;
  background:#142024!important;
  color:#dce8e5!important;
  font-size:10.5px!important;
}
.crew-section-create{
  min-height:31px!important;
  padding:5px 10px!important;
  border-color:rgba(80,128,133,.72)!important;
  background:linear-gradient(180deg,rgba(24,34,37,.96),rgba(14,20,22,.96))!important;
  color:#dce6e3!important;
  font-size:10.5px!important;
}
.crew-section-create:hover{border-color:rgba(89,207,212,.72)!important}

/* Crew identity is primarily its color: visible frame, quiet interior. */
.crew-card-shell{
  margin:7px 0!important;
  border-width:1px!important;
  border-left-width:5px!important;
  border-color:color-mix(in srgb,var(--crew-color) 60%,#334348)!important;
  border-left-color:var(--crew-color)!important;
  border-radius:9px!important;
  background:color-mix(in srgb,var(--crew-color) 4%,#101617)!important;
  box-shadow:0 5px 14px rgba(0,0,0,.10),inset 0 1px color-mix(in srgb,var(--crew-color) 7%,transparent)!important;
}
.crew-card-shell.is-complete{
  border-color:color-mix(in srgb,#7a8489 55%,#334348)!important;
  border-left-color:var(--crew-color)!important;
}
.crew-unified-card>.crew-pilot-accordion-summary{
  min-height:50px!important;
  padding:8px 10px!important;
  background:color-mix(in srgb,var(--crew-color) 7%,#151c1f)!important;
}
.crew-unified-card>.crew-pilot-accordion-summary:hover{
  background:color-mix(in srgb,var(--crew-color) 11%,#151c1f)!important;
}
.crew-compact-team strong{
  color:var(--crew-color)!important;
  font-size:14px!important;
}
.crew-compact-pilots,
.crew-compact-car{
  font-size:11.5px!important;
}
.crew-compact-status{
  min-height:23px!important;
  padding:3px 7px!important;
  font-size:8.5px!important;
}
.crew-owner-badge{margin-top:2px!important}

/* The actions belong to the colored crew card, not to a separate big button zone. */
.crew-self-actions{
  gap:6px!important;
  padding:6px 8px 7px!important;
  border-top:1px solid color-mix(in srgb,var(--crew-color) 24%,transparent)!important;
  background:color-mix(in srgb,var(--crew-color) 5%,#0f1516)!important;
}
.crew-self-actions>button{
  min-height:30px!important;
  padding:5px 10px!important;
  border-radius:7px!important;
  font-size:10.5px!important;
  line-height:1!important;
}
.crew-self-actions .crew-join-button{
  border:1px solid color-mix(in srgb,var(--crew-color) 88%,#8df5f7)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--crew-color) 68%,#35c7ce),color-mix(in srgb,var(--crew-color) 46%,#176d73))!important;
  color:#071012!important;
  text-shadow:0 1px rgba(255,255,255,.16);
  box-shadow:inset 0 1px rgba(255,255,255,.22),0 2px 8px color-mix(in srgb,var(--crew-color) 16%,transparent)!important;
}
.crew-self-actions .crew-join-button:hover{filter:brightness(1.08)}
.crew-self-actions .crew-manage-button,
.crew-self-actions .crew-leave-button{
  border-color:color-mix(in srgb,var(--crew-color) 46%,#59686c)!important;
  background:color-mix(in srgb,var(--crew-color) 8%,#172124)!important;
  color:#e6efed!important;
}
.crew-self-actions .crew-delete-button{
  margin-left:auto!important;
  padding-inline:9px!important;
}

/* Details stay informative when opened, but secondary to the compact summary. */
.crew-unified-body{
  gap:9px!important;
  padding:9px 10px 10px!important;
}
.crew-inline-management{padding-bottom:7px!important}
.crew-inline-management .coverage-summary{font-size:10.5px!important}
.crew-capacity-message{
  padding:8px 10px!important;
  font-size:11px!important;
  line-height:1.35!important;
}

/* "Pilotes sans équipage" is a secondary accordion. */
.ux-course-pilots-accordion{
  margin-top:3px!important;
  overflow:hidden;
  border:1px solid rgba(65,100,105,.72)!important;
  border-radius:9px!important;
  background:rgba(17,24,26,.86)!important;
}
.ux-course-pilots-accordion>.ux-content-accordion-summary{
  min-height:48px;
  padding:10px 13px!important;
}
.ux-course-pilots-accordion .ux-content-accordion-title{
  font-size:13.5px!important;
  font-weight:900!important;
}
.ux-course-pilots-accordion .ux-content-accordion-count{
  min-width:28px!important;
  height:28px!important;
  font-size:10.5px!important;
}
.ux-course-pilots-body{padding:9px!important}
.ux-unassigned-section{
  padding:9px!important;
  border-radius:9px!important;
}
.ux-unassigned-grid{gap:8px!important}
.ux-unassigned-grid>.pilot-row{
  padding:9px!important;
  border-radius:8px!important;
}

@media (max-width:760px){
  .departure-fold>summary{
    row-gap:5px!important;
  }
  .ux-summary-registration-actions{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px!important;
    width:100%;
    margin:4px 0 0!important;
  }
  .ux-summary-registration-actions>button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    padding:6px 4px!important;
    font-size:10px!important;
    line-height:1.1!important;
    white-space:normal!important;
  }
  .departure-participation-section{
    padding:11px 12px 13px!important;
  }
  .ux-course-crews-heading{min-height:32px}
  .ux-course-crews-title{font-size:14px!important}
  .crew-section-create{
    min-height:30px!important;
    padding:5px 9px!important;
    font-size:10px!important;
  }

  /* Mobile crew summary: three concise information rows. */
  .crew-unified-card>.crew-pilot-accordion-summary{
    grid-template-columns:36px minmax(0,1fr) auto 16px!important;
    grid-template-rows:auto auto auto!important;
    gap:4px 8px!important;
    min-height:0!important;
    padding:9px 9px!important;
  }
  .crew-compact-category{
    grid-column:1!important;
    grid-row:1 / 4!important;
    align-self:center;
    width:36px!important;
    min-width:36px!important;
  }
  .crew-compact-team{grid-column:2 / 4!important;grid-row:1!important}
  .crew-compact-chevron{grid-column:4!important;grid-row:1!important;align-self:center}
  .crew-compact-pilots{
    grid-column:2 / 5!important;
    grid-row:2!important;
    color:#dce5e3!important;
  }
  .crew-compact-status{
    grid-column:2!important;
    grid-row:3!important;
    justify-self:start!important;
  }
  .crew-compact-car{
    display:block!important;
    grid-column:3 / 5!important;
    grid-row:3!important;
    align-self:center;
    text-align:right!important;
    color:#bfcaca!important;
  }
  .crew-self-actions{gap:5px!important;padding:6px 7px!important}
  .crew-self-actions>button{
    min-height:30px!important;
    padding:5px 9px!important;
    font-size:10px!important;
  }
  .crew-self-actions .crew-delete-button{margin-left:auto!important}
  .crew-unified-body{padding:8px!important}
  .crew-member-grid{gap:7px!important}
}

@media (max-width:380px){
  .ux-summary-registration-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px!important}
  .ux-summary-registration-actions>button{padding-inline:3px!important;font-size:9.5px!important}
  .crew-self-actions .crew-delete-button{margin-left:0!important}
}

/* Desktop departure summary: reserve separate columns for metadata and the three actions.
   This overrides the older compact 170px action slot from layout-polish.css. */
@media (min-width:761px){
  .departure-fold[id^="departure-"]>summary{
    grid-template-columns:34px minmax(220px,1fr) max-content minmax(420px,520px)!important;
  }
  .departure-fold[id^="departure-"]>summary>.fold-meta{
    grid-column:3!important;
    grid-row:1 / span 2!important;
    justify-self:end!important;
    padding-right:4px;
    white-space:nowrap;
  }
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions{
    grid-column:4!important;
    grid-row:1 / span 2!important;
    justify-self:end!important;
    width:100%!important;
    min-width:0!important;
    max-width:520px!important;
    margin:0!important;
  }
}

@media (min-width:761px) and (max-width:1100px){
  .departure-fold[id^="departure-"]>summary{
    grid-template-columns:34px minmax(170px,1fr) max-content minmax(360px,440px)!important;
  }
  .departure-fold[id^="departure-"]>summary>.ux-summary-registration-actions{
    max-width:440px!important;
  }
}


/* styles/crew-open-compact.css */
/* Compact opened crew view. Loaded after event-polish.css. */
.crew-unified-card[open] .crew-unified-body{
  gap:6px!important;
  padding:7px 9px 8px!important;
}

.crew-unified-card[open] .crew-inline-management,
.crew-unified-card[open] .crew-inline-management.is-readonly{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-direction:row!important;
  flex-wrap:wrap!important;
  gap:5px 9px!important;
  min-height:29px!important;
  padding:0 0 3px!important;
  border-bottom:0!important;
}

.crew-unified-card[open] .crew-state-control{
  display:inline-flex!important;
  align-items:center!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  width:auto!important;
  margin:0!important;
}

.crew-unified-card[open] .crew-state-lock{
  width:16px!important;
  height:16px!important;
  font-size:12px!important;
  line-height:1!important;
}

.crew-unified-card[open] .crew-state-select-wrap{
  display:inline-flex!important;
  width:auto!important;
  min-width:0!important;
}

.crew-unified-card[open] .crew-state-select{
  width:auto!important;
  min-width:82px!important;
  min-height:28px!important;
  padding:4px 25px 4px 9px!important;
  border-radius:7px!important;
  font-size:10.5px!important;
  font-weight:900!important;
  line-height:1!important;
}

.crew-unified-card[open] .crew-state-chevron{
  right:8px!important;
  font-size:12px!important;
}

.crew-unified-card[open] .crew-state-readonly{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 9px;
  border:1px solid #4b6569;
  border-radius:999px;
  background:#172124;
  color:#dce8e5;
  font-size:10.5px;
  font-weight:900;
}
.crew-unified-card[open] .crew-state-readonly.is-open{
  border-color:#2aa960;
  background:rgba(27,112,65,.18);
  color:#9cedb9;
}
.crew-unified-card[open] .crew-state-readonly.is-complete{
  border-color:#718086;
  color:#cbd5d5;
}

.crew-unified-card[open] .coverage-summary{
  display:inline-flex!important;
  align-items:center!important;
  width:auto!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#aebcbd!important;
  font-size:10.5px!important;
  font-weight:850!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}

/* The coverage number already tells the story; no extra sentence is needed. */
.crew-unified-card[open] .crew-capacity-message{display:none!important}

.crew-unified-card[open] .crew-member-grid{
  gap:6px!important;
  margin-top:0!important;
}
.crew-unified-card[open] .crew-member-grid>.pilot-row{
  padding:7px 8px!important;
  border-radius:8px!important;
}
.crew-unified-card[open] .crew-member-grid>.pilot-row .crew-pilot-availability{
  margin-top:5px!important;
}
.crew-unified-card[open]>.crew-pilot-accordion-summary{
  border-bottom-color:color-mix(in srgb,var(--crew-color) 22%,transparent)!important;
}

@media(max-width:760px){
  .crew-unified-card[open] .crew-unified-body{
    gap:5px!important;
    padding:6px 8px 7px!important;
  }
  .crew-unified-card[open] .crew-inline-management,
  .crew-unified-card[open] .crew-inline-management.is-readonly{
    gap:5px 8px!important;
    min-height:28px!important;
    padding-bottom:2px!important;
  }
  .crew-unified-card[open] .crew-state-select{
    min-width:78px!important;
    min-height:27px!important;
    font-size:10px!important;
  }
  .crew-unified-card[open] .coverage-summary{
    font-size:10px!important;
  }
  .crew-unified-card[open] .crew-member-grid>.pilot-row{
    padding:6px 7px!important;
  }
}


/* styles/past-departures.css */
/* Historique secondaire des départs déjà lancés dans un événement. */
.past-departures-fold {
  margin-top: 4px;
  border-top: 1px solid #354245;
}

.past-departures-fold > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 6px 8px;
  color: #aab8b9;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .2px;
}

.past-departures-fold > summary::-webkit-details-marker { display: none; }
.past-departures-fold > summary::before {
  content: '›';
  display: inline-block;
  color: #869698;
  font-size: 19px;
  line-height: 1;
  transform-origin: center;
  transition: transform .15s ease;
}
.past-departures-fold[open] > summary::before { transform: rotate(90deg); }
.past-departures-fold > summary small {
  color: #839193;
  font-size: 11.5px;
  font-weight: 800;
}

.past-departures-list {
  display: grid;
  gap: 10px;
  padding-top: 7px;
}

.departure-fold.is-past {
  border-color: #303b3f;
  background: #101618;
}
.departure-fold.is-past > summary { opacity: .92; }

@media (max-width: 700px) {
  .past-departures-fold > summary {
    min-height: 42px;
    padding: 9px 4px 7px;
    font-size: 14px;
  }
  .past-departures-fold > summary small { font-size: 11px; }
  .past-departures-list { gap: 8px; padding-top: 5px; }
}


/* styles/mobile-density-v2.css */
/* Mobile density pass based on real phone captures. Keep desktop unchanged. */
@media (max-width: 760px) {
  /* Shared simulator header: keep every control readable while removing dead vertical space. */
  .site-nav-shell {
    padding: 4px 8px 5px !important;
  }

  .game-space-bar {
    min-height: 30px !important;
    padding: 0 0 3px !important;
  }

  .game-space-bar > .language-toggle {
    width: 32px !important;
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 7px !important;
    font-size: 16px !important;
  }

  .game-space-bar strong {
    font-size: 9.5px !important;
    letter-spacing: .11em !important;
  }

  .site-nav-shell #navigation,
  .nav-game-switcher {
    gap: 4px !important;
  }

  #navigation > button,
  #navigation > a,
  .nav-game-switcher-button {
    min-height: 34px !important;
    padding: 5px 7px !important;
    font-size: 11.5px !important;
    line-height: 1.1 !important;
  }

  .nav-game-switcher-button {
    padding-inline: 5px !important;
    font-size: 10.5px !important;
  }

  .site-nav-shell .account-bar {
    margin: 3px 0 0 !important;
  }

  /* Connected Discord account aligns to exactly one navigation column. */
  .site-nav-shell .account-bar:has(.account-menu) {
    width: calc((100% - 4px) / 2) !important;
    max-width: none !important;
  }

  .site-nav-shell .account-bar:has(.account-menu) .account-menu-root,
  .site-nav-shell .account-bar:has(.account-menu) .account-menu,
  .site-nav-shell .account-bar:has(.account-menu) .account-trigger {
    width: 100% !important;
    max-width: none !important;
  }

  .site-nav-shell .account-trigger {
    min-height: 34px !important;
    padding: 3px 7px 3px 4px !important;
    gap: 6px !important;
  }

  .site-nav-shell .account-avatar {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  .site-nav-shell .account-trigger-copy strong {
    font-size: 11.5px !important;
    line-height: 1.05 !important;
  }

  .site-nav-shell .account-trigger-copy small {
    font-size: 8.5px !important;
    line-height: 1.05 !important;
  }

  /* General page rhythm. */
  main {
    padding-top: 8px !important;
    padding-bottom: 28px !important;
  }

  .page-title {
    margin: 2px 0 8px !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
  }

  .toolbar {
    margin: 7px 0 10px !important;
    gap: 5px !important;
  }

  .home-create-event {
    margin-bottom: 8px !important;
  }

  .home-create-event .primary-button {
    min-height: 40px !important;
    padding: 7px 10px !important;
  }

  .event-filter {
    gap: 4px !important;
    margin: 7px 0 10px !important;
    padding: 4px !important;
  }

  .event-filter-button {
    min-height: 38px !important;
    padding: 6px 8px !important;
  }

  .event-agenda {
    gap: 10px !important;
  }

  .event-period-heading {
    margin: 10px 0 6px !important;
  }

  .event-period-heading > span {
    font-size: 15px !important;
  }

  .event-period-heading > small {
    font-size: 11px !important;
  }

  /* Event cards: preserve information hierarchy but reduce surrounding chrome. */
  .event-card {
    padding: 10px !important;
  }

  .event-card.event-card-harmonized .event-card-body {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    column-gap: 7px !important;
    row-gap: 5px !important;
  }

  .event-card.event-card-harmonized .event-card-title-row {
    gap: 3px 6px !important;
  }

  .event-card.event-card-harmonized .event-name {
    font-size: 17px !important;
  }

  .event-card.event-card-harmonized .event-compact-date {
    font-size: 10.5px !important;
  }

  .event-card.event-card-harmonized .event-info {
    gap: 4px !important;
  }

  .event-card.event-card-harmonized .event-pilot-count {
    font-size: 11px !important;
  }

  .event-type-badge {
    padding: 4px 8px !important;
    font-size: 11px !important;
  }

  .event-card.event-card-harmonized .event-home-crews {
    margin-top: 0 !important;
  }

  .crew-summary-heading {
    margin-bottom: 5px !important;
  }

  .crew-summary-list {
    gap: 5px !important;
  }

  .crew-summary-card {
    padding: 7px 8px !important;
  }

  /* Event detail / My entries / creation pages use the same tighter vertical rhythm. */
  .event-header {
    padding: 10px !important;
  }

  .event-header-summary {
    gap: 7px !important;
    margin-top: 8px !important;
  }

  .event-actions-toolbar {
    gap: 5px !important;
    margin-block: 7px !important;
  }

  .departure-accordion {
    gap: 7px !important;
  }

  .departure-fold[id^="departure-"] > summary {
    min-height: 58px !important;
    padding: 8px !important;
  }

  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    margin-top: 4px !important;
  }

  .departure-fold[id^="departure-"] > summary > .ux-summary-registration-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-inline: 3px !important;
    font-size: 10px !important;
  }

  .ux-content-accordion-summary {
    min-height: 42px !important;
    padding: 7px 9px !important;
  }

  .creation-card {
    padding: 11px !important;
  }

  .creation-card-heading {
    margin-bottom: 10px !important;
  }

  .event-creation {
    gap: 12px !important;
  }

  /* Main landing page: same compactness as simulator spaces. */
  .hub-main {
    width: calc(100% - 20px) !important;
    margin: 10px auto 36px !important;
    padding: 0 !important;
  }

  .hub-topbar {
    gap: 5px !important;
    margin-bottom: 7px !important;
  }

  .hub-topbar > .language-toggle {
    width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    font-size: 17px !important;
  }

  .hub-intro h1 {
    font-size: 20px !important;
  }

  .game-hub-grid {
    gap: 10px !important;
  }

  .game-hub-heading {
    padding: 14px 15px 11px !important;
  }

  .game-hub-heading h2 {
    font-size: 25px !important;
  }

  .game-hub-heading p {
    min-height: 0 !important;
    margin-top: 6px !important;
    font-size: 12px !important;
  }

  .game-hub-enter {
    margin: 0 15px 14px !important;
    padding: 10px 11px !important;
  }

  .hub-next-race,
  .hub-empty {
    padding: 14px 15px 16px !important;
  }

  /* Member management: keep the existing compact layout, shave only redundant gaps. */
  .members-topbar-inner {
    gap: 5px !important;
    padding: 6px 0 !important;
  }

  .members-main {
    margin-top: 9px !important;
  }

  .members-panel {
    padding: 9px !important;
  }

  .members-heading {
    margin-bottom: 9px !important;
  }

  /* Footer and long-information pages. */
  .site-footer {
    padding-top: 14px !important;
    padding-bottom: 18px !important;
  }
}


/* styles/members-page.css */
.members-topbar{border-bottom:1px solid rgba(72,116,121,.45);background:rgba(5,10,12,.82)}
.members-topbar-inner{width:min(1320px,calc(100% - 32px));margin:0 auto;padding:10px 0;display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center}
.members-context{display:grid;gap:2px;min-width:0}.members-context strong{color:var(--accent);font-size:15px;letter-spacing:.08em}.members-context span{color:var(--muted);font-size:12px}
.members-nav{display:flex;gap:7px;align-items:center}.members-nav a{min-height:40px;padding:8px 14px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:rgba(12,18,21,.9);color:var(--text);font-weight:900;text-decoration:none}.members-nav .members-lmu{color:#ff6670;border-color:rgba(255,86,96,.72);background:rgba(227,6,19,.13)}.members-nav .members-iracing{color:#7aa7ff;border-color:rgba(108,160,255,.72);background:rgba(37,65,133,.2)}
.members-topbar .account-bar{max-width:none;margin:0;padding:0;justify-content:flex-end}
.members-main{width:min(1100px,calc(100% - 32px));margin:28px auto 60px}.members-panel{padding:22px;border:1px solid var(--border);border-radius:16px;background:var(--panel);box-shadow:0 18px 44px rgba(0,0,0,.2)}
.members-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.members-heading h1{margin:3px 0 7px;font-size:clamp(28px,4vw,42px)}.members-heading p{margin:0;color:var(--muted)}.members-kicker{color:var(--accent);font-size:11px;font-weight:900;letter-spacing:.14em}.members-count{flex:0 0 auto;padding:7px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;font-weight:800}
.members-list{display:grid;gap:8px}.members-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,220px) auto;gap:10px;align-items:center;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel2)}.members-identity{display:grid;gap:2px;min-width:0}.members-identity strong{overflow:hidden;text-overflow:ellipsis}.members-identity small{color:var(--muted);font-size:11px}.members-role-select select{width:100%}.members-role{justify-self:start}.members-role-admin{color:var(--accent);font-weight:900}.members-status{min-height:1.3em;margin:12px 0 0;color:var(--accent)}.members-error{text-align:center}.members-error h1{margin-top:0}
@media(max-width:760px){.members-topbar-inner{width:calc(100% - 16px);grid-template-columns:1fr auto;gap:8px}.members-context{grid-column:1}.members-nav{grid-column:1/-1;grid-row:2}.members-nav a{flex:1;min-height:38px;padding:7px 9px;font-size:12px}.members-topbar .account-bar{grid-column:2;grid-row:1}.members-main{width:calc(100% - 16px);margin:14px auto 40px}.members-panel{padding:12px}.members-heading{display:grid;gap:8px}.members-count{justify-self:start}.members-row{grid-template-columns:1fr auto}.members-role-select{grid-column:1}.members-row button{grid-column:2;grid-row:2}.members-role{grid-column:1/-1}}


/* styles/admin.css */
/* Administration of a community (front/members-page.mjs): a rail of sections on the left, chips on a phone. */
.members-main:has(.admin-shell) { width: min(1180px, calc(100% - 32px)); }
.admin-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); border: 1px solid var(--border, #292d31); border-radius: 16px; overflow: hidden; background: var(--panel, #111315); min-height: 560px; }
.admin-rail { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: var(--bg, #0a0b0c); border-right: 1px solid var(--border, #292d31); }
.admin-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 16px; min-width: 0; }
.admin-brand img, .admin-brand > span { width: 36px; height: 36px; flex: none; border-radius: 10px; object-fit: cover; display: grid; place-items: center; background: var(--community-accent, #52d3d8); color: #062a2c; font-weight: 900; font-size: 13px; }
.admin-brand div { min-width: 0; }
.admin-brand strong { display: block; font-size: 14px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-brand small { color: #99a3a0; font-size: 12px; }
.admin-nav { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: #99a3a0; font: inherit; font-size: 14.5px; font-weight: 700; text-align: left; cursor: pointer; }
.admin-nav svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-nav:hover { color: #f4f6f5; background: var(--panel, #111315); }
.admin-nav:focus-visible { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 1px; }
.admin-nav[aria-selected="true"] { color: #f4f6f5; background: var(--panel2, #16191c); box-shadow: inset 3px 0 0 var(--community-accent, #52d3d8); }
.admin-nav.is-platform { margin-top: auto; }
.admin-count { margin-left: auto; padding: 1px 8px; border-radius: 999px; background: #f3b33d; color: #241800; font-size: 11.5px; }
.admin-main { min-width: 0; padding: 24px; }
.admin-panel { display: grid; gap: 18px; align-content: start; min-width: 0; }
.admin-panel[hidden] { display: none; }
.admin-head h2 { margin: 0; font-size: 24px; color: #f4f6f5; }
.admin-head p { margin: 4px 0 0; color: #99a3a0; font-size: 14px; }
.admin-head-row { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.admin-stack { display: grid; gap: 14px; min-width: 0; align-content: start; }
.admin-stack[hidden] { display: none; }
.admin-muted { color: #99a3a0; font-size: 13px; }

/* Overview */
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.admin-tile { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--border, #292d31); border-radius: 12px; background: var(--panel2, #16191c); }
.admin-tile-label { color: #99a3a0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.admin-tile-value { font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; color: #f4f6f5; }
.admin-tile-value.is-small { font-size: 22px; }
.admin-tile-sub { color: #99a3a0; font-size: 13px; }
.admin-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 2px; }
.admin-dot.is-ok { background: #35c26b; } .admin-dot.is-bad { background: #e0534f; }
.admin-columns { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.admin-card { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--border, #292d31); border-radius: 14px; background: var(--panel2, #16191c); min-width: 0; }
.admin-card h2, .admin-card h3 { margin: 0; font-size: 17px; color: #f4f6f5; }
.admin-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.admin-progress { height: 8px; border-radius: 999px; background: #2b3034; overflow: hidden; }
.admin-progress i { display: block; height: 100%; background: var(--community-accent, #52d3d8); }
.admin-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.admin-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14.5px; }
.admin-step-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border: 2px solid #2b3034; border-radius: 50%; color: #99a3a0; font-size: 12px; font-weight: 800; }
.admin-steps .is-done .admin-step-check { border-color: #35c26b; background: #35c26b; color: #04210f; }
.admin-steps .is-done .admin-step-title { color: #99a3a0; }
.admin-step-title { flex: 1 1 200px; min-width: 0; }
.admin-step-action { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.admin-step-action .primary-button, .admin-step-action .secondary-button { min-height: 34px; padding: 0 12px; font-size: 13px; }
.admin-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-inline-form input { min-width: 0; flex: 1 1 200px; }
.admin-later summary { cursor: pointer; color: #99a3a0; font-size: 13.5px; }
.admin-announce { display: grid; gap: 10px; margin-top: 10px; }
.admin-later[open] .admin-announce { margin-top: 10px; }
.admin-alerts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.admin-alerts li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border-radius: 10px; background: var(--panel, #111315); border-left: 3px solid #35c26b; font-size: 14px; }
.admin-alerts li > span { flex: 1 1 200px; min-width: 0; }
.admin-alerts li.is-warn { border-left-color: #f3b33d; }
.admin-alerts li.is-bad { border-left-color: #e0534f; }

/* Members and roles */
.admin-seg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: var(--bg, #0a0b0c); }
.admin-seg button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 7px; background: none; color: #99a3a0; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.admin-seg button span { margin-left: 4px; font-weight: 600; }
.admin-seg button[aria-pressed="true"] { background: var(--panel2, #16191c); color: #f4f6f5; }
.admin-seg button:focus-visible { outline: 2px solid var(--community-accent, #52d3d8); }
.admin-matrix-wrap { overflow-x: auto; border: 1px solid var(--border, #292d31); border-radius: 12px; }
.admin-matrix { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 13.5px; }
.admin-matrix th, .admin-matrix td { padding: 10px 12px; border-bottom: 1px solid var(--border, #292d31); text-align: center; vertical-align: middle; }
.admin-matrix thead th { color: #99a3a0; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--panel2, #16191c); cursor: help; }
.admin-matrix tbody th { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--panel2, #16191c); font-weight: 400; min-width: 150px; }
.admin-matrix thead th:first-child { position: sticky; left: 0; z-index: 2; text-align: left; cursor: default; }
.admin-matrix tbody th small { display: block; color: #99a3a0; font-size: 11.5px; }
.admin-matrix tbody th .settings-status { display: block; font-size: 11.5px; color: #99a3a0; }
.admin-matrix tbody tr:last-child > * { border-bottom: 0; }
.admin-tick { position: relative; display: inline-grid; cursor: pointer; }
.admin-tick input { position: absolute; opacity: 0; pointer-events: none; }
.admin-tick span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #3a4146; border-radius: 7px; color: #062a2c; font-size: 14px; font-weight: 900; }
.admin-tick input:checked + span { border-color: var(--community-accent, #52d3d8); background: var(--community-accent, #52d3d8); }
.admin-tick input:checked + span::after { content: "✓"; }
.admin-tick input:disabled + span { opacity: .55; }
.admin-tick input:focus-visible + span { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 2px; }

/* Modules */
.admin-modules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
.admin-module { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border, #292d31); border-radius: 14px; background: var(--panel2, #16191c); min-width: 0; }
.admin-module.is-open { grid-column: 1 / -1; border-color: var(--community-accent, #52d3d8); }
.admin-module p { margin: 0; color: #99a3a0; font-size: 13.5px; }
.admin-module-top { display: flex; align-items: center; gap: 10px; }
.admin-module-top strong { font-size: 15.5px; line-height: 1.25; color: #f4f6f5; }
.admin-module-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: var(--panel, #111315); color: var(--community-accent, #52d3d8); }
.admin-module-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.admin-module-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-module-settings { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border, #292d31); }
.admin-module-settings[hidden] { display: none; }
.admin-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: #99a3a0; }
.admin-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #4a5156; }
.admin-state.is-ok { color: #8ff0b6; } .admin-state.is-ok::before { background: #35c26b; }
.admin-state.is-warn { color: #f3b33d; } .admin-state.is-warn::before { background: #f3b33d; }
.admin-switch { position: relative; margin-left: auto; flex: none; cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch i { display: block; position: relative; width: 44px; height: 24px; border-radius: 999px; background: #2b3034; transition: background .15s; }
.admin-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f4f6f5; transition: transform .15s; }
.admin-switch input:checked + i { background: var(--community-accent, #52d3d8); }
.admin-switch input:checked + i::after { transform: translateX(20px); }
.admin-switch input:disabled + i { opacity: .45; cursor: not-allowed; }
.admin-switch input:focus-visible + i { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 2px; }

/* Appearance */
.admin-look { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; align-items: start; }
.admin-preview-wrap { display: grid; gap: 8px; position: sticky; top: 16px; min-width: 0; }
.admin-preview-label { margin: 0; color: #99a3a0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-preview { overflow: hidden; border: 1px solid var(--border, #292d31); border-radius: 14px; background: var(--bg, #0a0b0c); }
.admin-preview-banner { position: relative; aspect-ratio: 4 / 1; max-width: 100%; }
.admin-preview-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.admin-preview-nav { display: flex; align-items: center; gap: 10px; padding: 10px 12px; overflow: hidden; border-bottom: 1px solid var(--border, #292d31); color: #99a3a0; font-size: 11px; font-weight: 800; white-space: nowrap; }
.admin-preview-nav .is-active { color: #f4f6f5; box-shadow: inset 0 -2px 0 var(--preview-accent); padding-bottom: 6px; }
.admin-preview-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 5px; border: 1px solid var(--preview-accent); border-radius: 6px; color: var(--preview-accent); font-size: 10px; text-transform: uppercase; }
img.admin-preview-badge { width: 22px; min-width: 0; padding: 0; border: 0; border-radius: 50%; object-fit: cover; }
.admin-preview-body { display: grid; gap: 10px; padding: 14px; }
.admin-preview-race { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--preview-accent); border-radius: 10px; background: var(--panel, #111315); font-size: 13.5px; }
.admin-preview-race small { display: block; color: #99a3a0; }
.admin-preview-button { margin-left: auto; padding: 6px 12px; border-radius: 8px; background: var(--preview-accent); color: #062a2c; font-weight: 800; white-space: nowrap; }

@media (max-width: 860px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-rail { flex-direction: row; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid var(--border, #292d31); }
  .admin-brand { display: none; }
  .admin-nav { width: auto; flex: none; }
  .admin-nav[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--community-accent, #52d3d8); }
  .admin-nav.is-platform { margin-top: 0; }
  .admin-main { padding: 16px; }
  .admin-columns, .admin-look { grid-template-columns: minmax(0, 1fr); }
  .admin-preview-wrap { position: static; }
}
@media (prefers-reduced-motion: reduce) { .admin-switch i, .admin-switch i::after { transition: none; } }
.admin-shell a.primary-button { display: inline-flex; align-items: center; text-decoration: none; }

/* « Discord »: the questions on one page (one per screen on a phone), the server sketch and the messages below. */
.discord-form fieldset{border:0;margin:0;padding:8px 0 0;min-width:0}
.discord-form legend{font-size:1.05rem;font-weight:700;margin-bottom:12px;color:#f4f6f5}
.discord-form .recap-cards{margin:0}
.discord-row{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:center;padding:8px 0}
.discord-row span,.discord-check span{display:grid;gap:2px}
.discord-row strong,.discord-check strong{color:#f4f6f5;font-size:14.5px}
.discord-row small,.discord-check small{color:#99a3a0;font-weight:400;font-size:13px}
.discord-form .discord-check{display:flex!important;align-items:flex-start;gap:10px;padding:8px 0}
.discord-form .discord-check input{flex:0 0 auto;width:20px!important;min-height:0!important;height:20px;margin:2px 0 0;accent-color:var(--community-accent,#52d3d8)}
.discord-sketch{padding:12px 14px;border-radius:10px;background:#2b2d31;color:#dbdee1;font-size:13.5px}
.discord-sketch ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:3px}
.discord-sketch .is-category{margin-top:6px;color:#b5bac1;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.discord-sketch .is-text,.discord-sketch .is-voice{padding-left:10px;overflow-wrap:anywhere}
.discord-sketch small{color:#949ba4}
.discord-sketch .is-top{margin-top:6px;padding-left:0}
.discord-form .settings-status{white-space:normal;overflow-wrap:anywhere}
.discord-form .setup-actions{flex-wrap:wrap}
.discord-state{margin:0}
.discord-form [data-discord-questions]{display:grid;gap:14px}
.discord-form .discord-q + .discord-q{border-top:1px solid #2c3533;padding-top:14px}
.discord-pills{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 6px}
.discord-form .discord-pill{display:inline-flex!important;align-items:center;gap:8px;padding:7px 12px;border:1px solid #3a4441;border-radius:999px;cursor:pointer;color:#dfe5e3;font-size:14px}
.discord-form .discord-pill:has(input:checked){border-color:var(--community-accent,#52d3d8);background:color-mix(in srgb,var(--community-accent,#52d3d8) 16%,transparent);color:#f4f6f5;font-weight:600}
.discord-form .discord-pill input{width:16px!important;height:16px;min-height:0!important;margin:0;accent-color:var(--community-accent,#52d3d8)}
.discord-end{display:grid;gap:12px;margin-top:16px}
.discord-sketch .is-bot{background:#3a3d44;border-radius:4px;color:#f2f3f5}
.discord-sketch .is-category.is-bot{padding:2px 6px}
.discord-steps{display:none}
@media(max-width:600px){
  .discord-form .discord-q:not(.is-current),.discord-form .discord-end:not(.is-current){display:none}
  .discord-form .discord-q + .discord-q{border-top:0;padding-top:0}
  .discord-end{margin-top:0}
  .discord-steps{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid #2c3533;padding-top:12px;margin-top:12px}
  .discord-steps span{color:#99a3a0;font-variant-numeric:tabular-nums}
  .discord-steps button:disabled{visibility:hidden}
  .discord-steps button[hidden]{display:none}
}
.recap-live-preview{display:grid;gap:16px;min-width:0}
.recap-live-preview:empty{display:none}
.recap-live-preview .recap-preview{width:100%;max-width:100%;margin:0;box-sizing:border-box}
.recap-live-preview .recap-preview-embed{white-space:pre-wrap;overflow-wrap:anywhere}
.recap-live-preview figcaption{overflow-wrap:anywhere}
@media(max-width:600px){.discord-form .recap-cards,.discord-row{grid-template-columns:1fr}.discord-form .setup-actions button{flex:1 1 140px}}
.recap-live-preview a{color:#9fe8ec;text-decoration:underline}


/* styles/community-request.css */
/* « Demander un espace » (demande-communaute.html) and the requests of « Administration → Plateforme ». */
#request-app { display: grid; gap: 16px; }
.request-intro h1 { margin: 0 0 10px; font-size: 22px; }
.request-intro p { margin: 0 0 8px; color: #c7d0d4; line-height: 1.6; }
.request-form select, .request-form textarea, .request-form input[type="url"] { width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border, #292d31); border-radius: 9px; background: rgba(0,0,0,.25); color: inherit; font: inherit; font-size: 14px; }
.request-form textarea { resize: vertical; line-height: 1.5; }
.request-wide, .request-games { grid-column: 1 / -1; }
.request-games { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 10px 12px; border: 1px solid var(--border, #292d31); border-radius: 9px; }
.request-games legend { padding: 0 6px; font-size: 13px; font-weight: 700; color: #c7d0d4; }
.request-games label { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600 !important; white-space: nowrap; }
.request-games input[type="radio"] { flex: none; width: 18px !important; height: 18px; min-height: 0 !important; margin: 0; padding: 0; }
.request-history { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.request-history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: var(--panel2, #16191c); }
.request-history li span { grid-column: 1; color: #99a3a0; font-size: 13px; }
.request-history li em, .request-card .request-status { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 800; }
.request-pending { background: rgba(243,179,61,.14); color: #f3b33d; }
.request-done { background: rgba(127,224,168,.12); color: #7fe0a8; }
.request-rejected { background: rgba(255,120,120,.12); color: #ff9a9a; }
.request-list { display: grid; gap: 10px; }
.request-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border, #292d31); border-radius: 12px; background: var(--panel2, #16191c); font-size: 13.5px; color: #c7d0d4; }
.request-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.request-card header strong { font-size: 15px; color: #f4f6f5; }
.request-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.request-card dt { color: #99a3a0; }
.request-card dd { margin: 0; overflow-wrap: anywhere; }
.request-card blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border, #292d31); white-space: pre-wrap; overflow-wrap: anywhere; }
.request-card .settings-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .request-card dl { grid-template-columns: minmax(0, 1fr); } .request-card dt { margin-top: 4px; } }
.showcase-banner a + a { margin-left: 0; }


/* styles/diagnostics.css */
.diagnostics-list{display:grid;gap:14px}.diagnostic-card{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:16px;align-items:start;padding:18px;border:1px solid rgba(95,210,220,.28);border-radius:18px;background:rgba(10,18,22,.78)}.diagnostic-meta{min-width:0}.diagnostic-meta strong{display:block;font-size:1rem;line-height:1.2}.diagnostic-meta small{display:block;margin-top:6px;line-height:1.35;overflow-wrap:anywhere}.diagnostic-body{min-width:0}.diagnostic-message{display:block;margin-bottom:6px;font-size:1rem;line-height:1.35;overflow-wrap:anywhere}.diagnostic-detail,.diagnostic-context,.diagnostic-agent{display:block;line-height:1.45;overflow-wrap:anywhere}.diagnostic-context{margin-top:8px;opacity:.78}.diagnostic-agent{margin-top:4px;opacity:.62;font-size:.86rem}@media(max-width:760px){.diagnostic-card{grid-template-columns:1fr;padding:15px;gap:10px}.diagnostic-meta{padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}.diagnostic-message{font-size:.98rem}.diagnostic-agent{font-size:.8rem}}

/* help.css */
.help-nav-button {
  margin-left: 2px;
}

.help-nav-button[aria-current="page"] {
  border-color: var(--green);
  color: var(--green);
}

.help-page {
  max-width: 980px;
  margin: 0 auto;
}

.help-hero {
  /* A global "header" rule sized for the site banner must not stretch this box. */
  min-height: 0 !important;
  margin: 0 0 22px;
  padding: 26px 28px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(49,184,107,.10), transparent 45%),
    var(--panel);
}

.help-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}

.help-hero h1 {
  margin: 0;
  font-size: clamp(26px, 4vw, 38px);
  line-height: 1.05;
}

.help-hero p {
  max-width: 720px;
  margin: 10px 0 16px;
  color: var(--muted);
  line-height: 1.55;
}

.help-account-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel2);
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.help-list {
  display: grid;
  gap: 10px;
}

.help-item {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--panel);
}

.help-item[open] {
  border-color: #3b474c;
  background: var(--panel2);
}

.help-item summary {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  min-height: 60px;
  padding: 0 16px 0 12px;
  list-style: none;
  cursor: pointer;
  font-weight: 900;
}

.help-item summary::-webkit-details-marker {
  display: none;
}

.help-item summary:hover {
  background: rgba(255,255,255,.025);
}

.help-index {
  color: var(--green);
  font-size: 12px;
  letter-spacing: .08em;
}

.help-chevron {
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  text-align: center;
  transition: transform .16s ease;
}

.help-item[open] .help-chevron {
  transform: rotate(180deg);
}

.help-item-body {
  padding: 0 18px 20px 56px;
  color: #d9dddf;
  line-height: 1.6;
}

.help-item-body p {
  margin: 0 0 12px;
}

.help-item-body p:last-child {
  margin-bottom: 0;
}

.help-item-body ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.help-item-body li + li {
  margin-top: 5px;
}

.help-tip,
.help-callout {
  margin-top: 14px;
  padding: 13px 15px;
  border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
  background: rgba(49,184,107,.08);
}

.help-callout strong {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
}

.help-callout p {
  margin: 0;
}

.help-demo-hours {
  display: grid;
  grid-template-columns: repeat(8, minmax(34px, 1fr));
  gap: 6px;
  max-width: 560px;
  margin-top: 16px;
}

.help-demo-hours span {
  display: grid;
  min-height: 38px;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--panel);
  color: var(--muted);
  font-weight: 900;
}

.help-demo-hours .is-on {
  border-color: rgba(49,184,107,.55);
  background: rgba(49,184,107,.14);
  color: #d9ffe4;
}

.help-status-grid,
.help-rights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0 16px;
}

.help-status-grid > div,
.help-rights > div {
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--panel);
}

.help-status-grid strong,
.help-rights strong {
  display: block;
  margin-bottom: 5px;
}

.help-status-grid small {
  display: block;
  color: var(--muted);
  line-height: 1.45;
}

.help-lock {
  float: right;
  margin-left: 10px;
  font-size: 18px;
}

.help-screenshot,
.help-screenshot-grid {
  margin: 18px 0 2px;
}

.help-screenshot-grid {
  display: grid;
  gap: 14px;
}

.help-screenshot {
  overflow: hidden;
  border: 1px solid #394147;
  border-radius: 10px;
  background: #0d1012;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

.help-screenshot-grid .help-screenshot {
  margin: 0;
}

/* Screenshots keep their real size (never stretched): narrow ones stay sharp. */
.help-screenshot { width: fit-content; max-width: 100%; }
.help-screenshot img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  object-position: top center;
  background: #0d1012;
}

.help-screenshot figcaption {
  margin: 0;
  padding: 11px 14px;
  border-top: 1px solid #293035;
  background: #15191b;
  color: #cbd3d6;
  font-size: 12px;
  line-height: 1.45;
}

.help-screenshot figcaption::before {
  content: '↳';
  margin-right: 8px;
  color: var(--green);
  font-size: 16px;
  font-weight: 900;
}

@media (max-width: 700px) {
  .help-nav-button {
    margin-left: 0;
  }

  .help-hero {
    padding: 20px 18px;
  }

  .help-item summary {
    grid-template-columns: 38px minmax(0, 1fr) 22px;
    min-height: 56px;
    padding-right: 12px;
    font-size: 14px;
  }

  .help-item-body {
    padding: 0 14px 17px;
    font-size: 14px;
  }

  .help-status-grid,
  .help-rights {
    grid-template-columns: 1fr;
  }

  .help-demo-hours {
    grid-template-columns: repeat(4, 1fr);
  }

  .help-screenshot,
  .help-screenshot-grid {
    margin-top: 14px;
  }

  .help-screenshot {
    border-radius: 8px;
  }

  .help-screenshot figcaption {
    padding: 10px 11px;
    font-size: 11px;
  }
}


/* styles/combos.css */
/* Fiches combo (fiches-combo.html, front/combos-page.mjs): a timing-screen sheet per car and track. Conditions are
   framed blocks; each pilot has his colour, the white « Équipage » row is the mean of the pilots shown. */
.combos-page {
  --cb-dry: #35b978;
  --cb-damp: #d9a640;
  --cb-rain: #4ea8e6;
  --cb-up: #e4a341;
  --cb-down: #5fb7e8;
  --cb-line: var(--border, #292d31);
  --cb-panel: var(--panel, #111315);
  --cb-panel2: var(--panel2, #17191c);
  max-width: 1360px;
  margin: 0 auto;
  padding: 20px 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}
.combos-page [hidden] { display: none !important; }
.combos-page td, .combos-page .cb-big, .combos-page output { font-variant-numeric: tabular-nums; }
.combos-page h1, .combos-page h2 { margin: 0; letter-spacing: .01em; text-wrap: balance; }
.combos-page h1 { font-size: 28px; line-height: 1.15; }
.combos-page h2 { font-size: 20px; }
.cb-crumb { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.cb-topline { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 16px; padding-bottom: 14px; border-bottom: 1px solid var(--cb-line); }
.cb-topline h1 { margin: 2px 0 6px; }
.cb-topline .cb-actions select { width: auto; max-width: 340px; font-size: 14px; padding: 6px 8px; }

/* Header: the combo looked at is a button that opens the list of circuits and cars. */
.cb-hero { display: grid; gap: 10px; }
.cb-hero-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.cb-hero-top .cb-crumb { font-size: 12px; }
.cb-tools { display: flex; gap: 6px; flex: none; }
.cb-tools .cb-btn { padding: 6px 11px; font-size: 13px; }
.cb-picker { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 12px; }
.cb-picker[open] { border-color: rgba(255,255,255,.22); }
.cb-picker > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.cb-picker > summary::-webkit-details-marker { display: none; }
.cb-picker > summary:hover { background: rgba(255,255,255,.03); border-radius: 12px; }
.cb-picker-what { display: grid; gap: 2px; min-width: 0; }
.cb-picker-track { font-size: 26px; font-weight: 800; line-height: 1.15; text-wrap: balance; }
.cb-picker-car { color: var(--muted); font-size: 15px; font-weight: 600; }
.cb-picker-change { display: grid; justify-items: end; gap: 4px; flex: none; color: var(--muted); font-size: 12px; }
.cb-picker-change b { color: var(--text); font-size: 14px; border: 1px solid var(--cb-line); border-radius: 999px; padding: 6px 12px; background: var(--cb-panel2); white-space: nowrap; }
.cb-picker-change b::after { content: " ▾"; color: var(--muted); }
.cb-picker[open] .cb-picker-change b::after { content: " ▴"; }
.cb-picker-body { border-top: 1px solid var(--cb-line); padding: 6px 16px 14px; }
.cb-picker-body ul { list-style: none; margin: 0; padding: 0; display: grid; }
.cb-picker-body li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 8px 16px; align-items: start; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.cb-pick-track { font-weight: 700; font-size: 15px; padding-top: 8px; }
.cb-pick-cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.cb-pick { display: grid; gap: 2px; text-align: left; background: var(--cb-panel2); color: var(--text); border: 1px solid var(--cb-line); border-radius: 8px; padding: 8px 12px; font: inherit; cursor: pointer; }
.cb-pick:hover { border-color: var(--muted); }
.cb-pick b { font-size: 14px; }
.cb-pick span { color: var(--muted); font-size: 12px; }
.cb-pick[aria-pressed="true"] { border-color: var(--cb-dry); box-shadow: inset 0 0 0 1px var(--cb-dry); }
.cb-picker-body .cb-src { margin: 10px 0 0; }
.cb-hero .cb-sample { margin: 0; }
@media (max-width: 620px) {
  .cb-picker > summary { padding: 10px 12px; }
  .cb-picker-track { font-size: 21px; }
  .cb-picker-car { font-size: 14px; }
  .cb-picker-change { font-size: 0; gap: 0; }
  .cb-picker-change b { font-size: 13px; padding: 6px 10px; }
  .cb-picker-body { padding: 4px 12px 12px; }
  .cb-picker-body li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cb-pick-track { padding-top: 0; }
}

/* Layout: filters and pilots on the side, the sheet in the middle, team settings and SimHub at the foot. */
.cb-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.cb-main { display: grid; gap: 18px; min-width: 0; }
.cb-side { position: sticky; top: 12px; background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 10px; }
.cb-side > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 15px; }
.cb-side > summary::-webkit-details-marker { display: none; }
.cb-side > summary span { color: var(--muted); font-weight: 400; font-size: 12px; }
.cb-side-body { border-top: 1px solid var(--cb-line); padding: 12px 14px 14px; display: grid; gap: 16px; }
.cb-side-group { display: grid; gap: 6px; }
.cb-side-label, .cb-filters label, .cb-range > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.cb-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; align-items: start; padding-top: 6px; border-top: 1px solid var(--cb-line); }
.cb-card { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 10px; padding: 14px 16px; }
@media (max-width: 999px) {
  .cb-layout { grid-template-columns: minmax(0, 1fr); }
  .cb-side { position: static; }
}
.cb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cb-btn { background: var(--cb-panel2); color: var(--text); border: 1px solid var(--cb-line); border-radius: 6px; padding: 7px 12px; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; }
.cb-btn:hover { border-color: var(--muted); }
.cb-btn.is-main { background: var(--cb-dry); border-color: var(--cb-dry); color: #071009; }
.cb-btn.is-quiet { background: none; }
.cb-btn:disabled { opacity: .6; cursor: default; }
.combos-page :focus-visible { outline: 2px solid var(--cb-dry); outline-offset: 2px; }
.combos-page select, .combos-page input[type="number"], .combos-page input[type="text"], .combos-page input[type="date"], .combos-page textarea {
  background: var(--cb-panel2); color: var(--text); border: 1px solid var(--cb-line); border-radius: 6px; padding: 6px 8px; font-size: 14px; font-family: inherit; width: 100%;
}
.combos-page textarea { min-height: 70px; resize: vertical; }
.cb-message { border: 1px solid var(--cb-line); border-radius: 8px; padding: 10px 12px; background: var(--cb-panel); }
.cb-message.is-error { border-color: var(--red, #e34c4c); }

/* Linking SimHub */
.cb-link { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 10px; }
.cb-link > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 16px; }
.cb-link > summary::-webkit-details-marker { display: none; }
.cb-link > summary b { font-size: 16px; }
.cb-link > summary span { color: var(--muted); font-size: 14px; }
.cb-link-body { border-top: 1px solid var(--cb-line); padding: 14px 16px; display: grid; gap: 12px; }
.cb-steps { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--muted); }
.cb-steps b { color: var(--text); }
.cb-code { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-code input { flex: 1 1 320px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.cb-ok { color: var(--cb-dry); }
.cb-state { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.cb-state.is-on { background: var(--cb-dry); }

/* Filters and pilots */
.cb-filters { display: grid; gap: 10px; }
.cb-filters label { display: grid; gap: 4px; }
.cb-sample { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--muted); font-size: 13px; }
.cb-sample b { color: var(--text); font-weight: 600; }
.cb-drivers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cb-side .cb-drivers { display: grid; justify-items: start; }
.cb-drivers > span { font-size: 13px; color: var(--muted); margin-right: 4px; }
.cb-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--cb-panel2); border: 1px solid var(--cb-line); border-radius: 999px; padding: 4px 12px 4px 9px; color: var(--text); font-weight: 600; font-size: 13px; font-family: inherit; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-chip i, .cb-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--dc); flex: none; }
.cb-chip[aria-pressed="false"] { color: var(--muted); }
.cb-chip[aria-pressed="false"] i { background: transparent; box-shadow: inset 0 0 0 2px var(--dc); }
.cb-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.combos-page .cb-swatch { flex: 0 0 20px; width: 20px; height: 20px; min-width: 0; min-height: 0; border-radius: 50%; border: 2px solid transparent; background: var(--dc); cursor: pointer; padding: 0; }
.combos-page .cb-swatch[aria-pressed="true"] { border-color: var(--text); }

/* Conditions */
.cb-condbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.cb-conds { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-moments { display: inline-flex; border: 1px solid var(--cb-line); border-radius: 8px; overflow: hidden; background: var(--cb-panel); }
.cb-moments button { background: none; border: 0; border-left: 1px solid var(--cb-line); color: var(--muted); padding: 7px 12px; font-weight: 600; font-size: 13px; line-height: 1.2; font-family: inherit; cursor: pointer; }
.cb-moments button:first-child { border-left: 0; }
.cb-moments button[aria-pressed="true"] { background: var(--cb-panel2); color: var(--text); box-shadow: inset 0 -2px 0 var(--text); }
.cb-moments small { font-weight: 400; color: var(--muted); }
.cb-range { display: grid; gap: 4px; }
.cb-range > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.combos-page .cb-range input { width: 100%; min-width: 0; }
/* Two dates side by side need two filter cells. */
.cb-filterbox .cb-dates { grid-column: span 2; }
@media (max-width: 340px) { .cb-filterbox .cb-dates { grid-column: auto; } .cb-dates > div { grid-template-columns: 1fr; } }
.cb-cond { --c: var(--cb-dry); display: inline-flex; align-items: baseline; gap: 8px; background: var(--cb-panel); color: var(--muted); border: 1px solid var(--cb-line); border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 13px; font-family: inherit; }
.cb-cond b { font-size: 15px; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.cb-cond[aria-pressed="true"] { border-color: var(--c); box-shadow: inset 0 -3px 0 var(--c); background: var(--cb-panel2); }
.cb-cond[aria-pressed="true"] b { color: var(--c); }
.cb-cond.damp, .cb-frame.damp { --c: var(--cb-damp); }
.cb-cond.rain, .cb-frame.rain { --c: var(--cb-rain); }
.cb-frame { --c: var(--cb-dry); border: 2px solid var(--c); border-radius: 10px; padding: 34px 16px 16px; position: relative; display: grid; gap: 24px; min-width: 0; }
.cb-tag { position: absolute; top: -13px; left: 14px; background: var(--c); color: #071009; font-weight: 700; font-size: 15px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 4px; }
.cb-meta { position: absolute; top: 8px; right: 14px; color: var(--muted); font-size: 13px; }
.combos-page section { display: grid; gap: 12px; min-width: 0; align-content: start; }
.cb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cb-src { font-size: 12px; color: var(--muted); }
.cb-empty { color: var(--muted); }

/* Tables */
/* Every table fits its frame: units sit in the headers, headers wrap, long names end with an ellipsis. No scrollbar. */
.cb-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.cb-wrap { overflow: hidden; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-panel); }
.cb-narrow { max-width: 760px; }
.combos-page table { border-collapse: collapse; width: 100%; font-size: 14px; }
.combos-page th, .combos-page td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid rgba(255,255,255,.05); }
.combos-page thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.combos-page th:first-child, .combos-page td:first-child { text-align: left; }
.combos-page thead th { font-weight: 500; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; background: var(--cb-panel2); border-bottom: 1px solid var(--cb-line); padding-top: 8px; padding-bottom: 8px; }
.combos-page tbody tr:last-child td { border-bottom: 0; }
td.cb-name { color: var(--dc); font-weight: 600; box-shadow: inset 3px 0 0 var(--dc); max-width: 11em; overflow: hidden; text-overflow: ellipsis; }
tr.cb-crew td { font-weight: 700; background: rgba(255,255,255,.035); border-bottom: 1px solid var(--cb-line); }
/* Lines easy to follow: a faint band every other row, the row under the pointer lit. */
.combos-page tbody tr:not(.cb-crew):nth-child(even) td { background: rgba(255,255,255,.018); }
.combos-page tbody tr:hover td { background: rgba(255,255,255,.05); }
/* The best pilot of a column, violet as on a timing screen. */
.combos-page td.cb-best, .combos-page tbody tr:nth-child(even) td.cb-best { color: #e9d5ff; font-weight: 700; background: rgba(168,85,247,.22); box-shadow: inset 0 0 0 1px rgba(192,132,252,.35); }
.combos-page td.cb-best .cb-sub { color: #d8b4fe; }
.combos-page .cb-sub.cb-best-sub { color: #c084fc; font-weight: 700; }
.cb-best-key { color: #c084fc; font-weight: 700; }
.cb-sub { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.cb-delta { display: block; font-size: 12px; }
.cb-delta.up { color: var(--cb-up); }
.cb-delta.down { color: var(--cb-down); }
.cb-delta.same { color: var(--muted); }
.cb-dots { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-short { display: none; }

/* Tyres */
.cb-compounds { display: flex; flex-wrap: wrap; gap: 6px; }
.cb-pill { background: var(--cb-panel); color: var(--muted); border: 1px solid var(--cb-line); border-radius: 999px; padding: 5px 14px; font-weight: 600; font-size: 14px; font-family: inherit; cursor: pointer; }
.cb-pill[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.cb-pill small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.cb-stint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.combos-page .cb-stint input { width: 72px; }
/* The four tyres as on the car: fronts above, rears below. */
.cb-tyres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 859px) { .cb-tyres { grid-template-columns: minmax(0, 1fr); } }
.cb-tyre { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 6px; padding: 8px 4px 4px; display: grid; gap: 2px; min-width: 0; overflow: hidden; }
.cb-tyre-name { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
.combos-page .cb-mini { font-size: 13px; }
.combos-page .cb-mini th, .combos-page .cb-mini td { padding: 4px 8px; border: 0; }
.cb-mini td.cb-name { max-width: 9em; }
.combos-page .cb-mini thead th { background: none; font-size: 11px; }
.cb-mini td.cb-name { box-shadow: none; }
.cb-mini td.cb-name .cb-dot { margin-right: 6px; vertical-align: -1px; }
.cb-mini tr.cb-crew td { background: none; border-bottom: 1px solid var(--cb-line); }

/* Pit stop simulator, notes, periods */
.cb-fold { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 10px; }
.cb-fold > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; }
.cb-fold > summary::-webkit-details-marker { display: none; }
.cb-fold > summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--muted); }
.cb-fold[open] > summary::after { content: "−"; }
.cb-fold > summary span { color: var(--muted); font-size: 14px; margin-left: auto; }
.cb-fold-body { border-top: 1px solid var(--cb-line); padding: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.cb-form { display: grid; gap: 16px; align-content: start; }
.cb-ctrl { display: grid; gap: 6px; }
.cb-ctrl label { font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; }
.cb-ctrl output { color: var(--text); font-weight: 600; }
.combos-page input[type="range"] { width: 100%; accent-color: var(--cb-dry); }
.combos-page fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.combos-page legend { font-size: 13px; color: var(--muted); margin-bottom: 6px; width: 100%; }
.cb-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--cb-panel2); border: 1px solid var(--cb-line); border-radius: 6px; padding: 6px 10px; font-size: 14px; cursor: pointer; }
.cb-toggle small { color: var(--muted); }
.combos-page .cb-toggle { white-space: nowrap; }
.combos-page .cb-toggle input { width: auto; min-width: 0; min-height: 0; margin: 0; flex: none; }
.cb-result { display: grid; align-content: start; }
.cb-result div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--cb-line); font-size: 14px; }
.cb-result div span:first-child { color: var(--muted); }
.cb-result .cb-total { border-bottom: 0; padding-top: 12px; }
.cb-result .cb-total b { font-size: 32px; line-height: 1; }
.cb-result p { color: var(--muted); font-size: 12px; margin: 6px 0 0; }
.cb-notes { display: grid; gap: 8px; max-width: 760px; }
.cb-note { background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 8px; padding: 10px 12px; }
.cb-note p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cb-note-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.cb-note-meta button { background: none; border: 0; color: var(--muted); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }
.cb-periods { display: grid; gap: 6px; align-content: start; }
.cb-period { display: flex; justify-content: space-between; gap: 8px; align-items: center; font-size: 14px; border-bottom: 1px solid var(--cb-line); padding: 6px 0; }
.cb-period small { color: var(--muted); }
.cb-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.cb-check { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }

@media (max-width: 620px) {
  .combos-page h1 { font-size: 23px; }
  .combos-page { padding-inline: 12px; }
  .cb-frame { padding: 34px 8px 12px; }
  .combos-page table { font-size: 13px; }
  .combos-page th, .combos-page td { padding: 6px 5px; }
  .combos-page thead th { font-size: 10px; letter-spacing: .02em; }
  .combos-page .cb-mini { font-size: 12px; }
  .combos-page .cb-mini th, .combos-page .cb-mini td { padding: 3px 3px; }
  td.cb-name { max-width: 6.5em; }
  .cb-mini td.cb-name { max-width: 5.5em; }
  .cb-word { display: none; }
  .cb-short { display: inline; }
  .combos-page td.cb-best { box-shadow: none; }
  .cb-tyres { grid-template-columns: minmax(0, 1fr); }
  .cb-meta { position: static; }
}

/* Tabs: the team's sheet and « Mon analyse ». */
.cb-tabs { display: flex; gap: 4px; margin-top: -8px; border-bottom: 1px solid var(--cb-line); }
.cb-tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); padding: 8px 14px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; margin-bottom: -1px; }
.cb-tabs button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--text); }

/* « Mon analyse » (front/combos-analysis.mjs) */
.an-choices { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.an-choices label { display: grid; gap: 4px; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; flex: 1 1 280px; max-width: 460px; }
.an-choices select { font-size: 14px; padding: 6px 8px; text-transform: none; letter-spacing: 0; }
.an-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }
.an-body.is-loading { opacity: .55; }
.an-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 10px; }
.an-side { border: 1px solid var(--cb-line); border-left: 4px solid var(--dc); border-radius: 8px; background: var(--cb-panel); padding: 10px 12px; display: grid; gap: 8px; min-width: 0; }
.an-side-name { font-weight: 600; color: var(--dc); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px 12px; }
.an-figures span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.an-figures b { font-variant-numeric: tabular-nums; font-size: 15px; }
.an-metrics, .an-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.an-metrics button, .an-picks button { background: var(--cb-panel); color: var(--muted); border: 1px solid var(--cb-line); border-radius: 999px; padding: 5px 12px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.an-metrics button[aria-pressed="true"], .an-picks button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.an-picks button { border-radius: 6px; padding: 3px 10px; font-size: 12px; }
.an-lap { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.an-map-box { border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-panel); padding: 10px; display: grid; gap: 8px; min-width: 0; }
.an-map { width: 100%; height: auto; max-height: 560px; touch-action: none; }
.an-map polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.an-map .an-shadow { stroke: rgba(0,0,0,.55); stroke-width: 22; }
.an-map .an-lines polyline { stroke-width: 11; }
.an-map .an-line { fill: #f0f3f2; }
.an-zone circle { fill: var(--cb-panel2); stroke: var(--muted); stroke-width: 2; }
.an-zone text { fill: var(--text); font-size: 16px; font-weight: 700; text-anchor: middle; }
.an-zone text.is-small { font-size: 12px; }
.an-zone.is-slow circle { stroke: #ef4444; }
.an-zone.is-fast circle { stroke: #22c55e; }
.an-cursor { fill: none; stroke: #fff; stroke-width: 4; }
.an-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.an-legend i { display: inline-block; width: 14px; height: 6px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.an-legend .an-ramp { width: 140px; height: 8px; margin: 0; }
.an-readout { margin: 0; font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; min-height: 2.6em; }
.an-readout b { color: var(--text); }
.an-readout span[style] { color: var(--dc); }
.an-readout i, th.an-who i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); margin-right: 5px; }
th.an-who { color: var(--dc) !important; }
.an-zones td.an-slow { color: #ef6b6b; }
.an-zones td.an-fast { color: #4ade80; }
.an-charts { display: grid; gap: 10px; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-panel); padding: 10px 12px; }
.an-chart { display: grid; gap: 2px; }
.an-chart-head { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.an-chart-head b { color: var(--text); font-weight: 600; }
.an-chart svg { width: 100%; height: auto; display: block; touch-action: none; }
.an-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.an-chart .an-tick { stroke: var(--cb-line); vector-effect: non-scaling-stroke; }
.an-chart .an-zero { stroke: var(--muted); stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.an-chart .an-cursor-line { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.an-axis { position: relative; height: 14px; font-size: 11px; color: var(--muted); }
.an-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.an-wheels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 8px; }
.an-wheels small { color: var(--muted); font-size: 11px; }
.an-wheels tr.an-sub th { font-size: 10px; padding-top: 0; }
@media (max-width: 999px) {
  .an-lap { grid-template-columns: minmax(0, 1fr); }
}
.combos-page .an-zones th, .combos-page .an-zones td { padding: 4px 8px; font-size: 13px; }
.an-size { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.combos-page .an-size select { width: auto; font-size: 13px; padding: 3px 6px; }
.an-laps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.an-laps tr.an-out td { color: var(--muted); }
.combos-page .an-laps .cb-btn.an-ignore { padding: 2px 8px; min-height: 0; font-size: 12px; line-height: 1.3; }
.combos-page .an-laps td { padding-top: 5px; padding-bottom: 5px; }
.an-laps > summary { cursor: pointer; font-weight: 600; display: flex; justify-content: space-between; gap: 10px; }
.an-laps > summary span { color: var(--muted); font-weight: 400; font-size: 13px; }
.an-laps .cb-src { margin: 0; }

/* The sheet over the whole width: pilots and folded filters above it, energy and pace side by side when there is room. */
.members-main.combos-page { width: min(1360px, calc(100% - 32px)); }
.cb-toolbar { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.cb-toolbar .cb-drivers { flex: 1 1 auto; padding-top: 3px; }
.cb-filterbox { flex: 0 1 auto; margin-left: auto; }
.cb-filterbox[open] { flex: 1 1 100%; background: var(--cb-panel); border: 1px solid var(--cb-line); border-radius: 10px; }
.cb-filterbox > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 8px; padding: 7px 12px; border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-panel); font-weight: 600; font-size: 14px; }
.cb-filterbox[open] > summary { border: 0; background: none; display: flex; padding: 10px 14px 0; }
.cb-filterbox > summary::-webkit-details-marker { display: none; }
.cb-filterbox > summary::after { content: '▾'; color: var(--muted); font-size: 12px; }
.cb-filterbox[open] > summary::after { content: '▴'; margin-left: auto; }
.cb-filterbox > summary span { color: var(--muted); font-weight: 400; font-size: 12px; }
.cb-filterbox-body { padding: 10px 14px 14px; display: grid; gap: 12px; }
.cb-filterbox .cb-filters { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); align-items: end; }
.combos-page .cb-filterbox select, .combos-page .cb-filterbox input { height: 38px; min-height: 0; }
.cb-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 24px 28px; align-items: start; }
.cb-rule { margin: -12px 0 0; }
.cb-names { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.cb-names span { color: var(--dc); font-weight: 600; font-size: 13px; }
.combos-page .cb-stints th:last-child, .combos-page .cb-stints td:last-child { text-align: left; }
/* « Mon analyse »: who it is compared with, face to face, portion by portion. */
.an-compare { display: grid; gap: 6px; flex: 1 1 100%; }
.an-compare > span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.an-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.an-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cb-panel); color: var(--muted); border: 1px solid var(--cb-line); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.an-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--dc); }
.an-chip b { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.an-chip[aria-pressed="true"] { color: var(--text); border-color: var(--dc, var(--text)); box-shadow: inset 0 0 0 1px var(--dc, var(--text)); }
.combos-page .an-compare select { max-width: 460px; font-size: 13px; padding: 5px 8px; }
.an-h2h { display: grid; gap: 8px; max-width: 860px; }
.combos-page .an-h2h table { width: 100%; }
.combos-page .an-h2h th, .combos-page .an-h2h td { padding: 5px 10px; font-size: 14px; }
.combos-page .an-h2h td:not(:first-child), .combos-page .an-h2h th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.an-h2h tr.an-key td { font-weight: 700; font-size: 15px; }
.an-h2h td.an-slow { color: #ef6b6b; }
.an-h2h td.an-fast { color: #4ade80; }
.an-when { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.an-when i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dc); margin-right: 5px; }
.an-gaps { border: 1px solid var(--cb-line); border-radius: 8px; background: var(--cb-panel); padding: 10px; display: grid; gap: 8px; min-width: 0; }
.an-gaps-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.an-sorts { display: flex; gap: 4px; }
.an-sorts button { background: none; color: var(--muted); border: 1px solid var(--cb-line); border-radius: 6px; padding: 3px 9px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.an-sorts button[aria-pressed="true"] { color: var(--text); border-color: var(--text); }
.an-gap-legend { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.an-gaps-list { display: flex; flex-direction: column; gap: 2px; max-height: 470px; overflow-y: auto; overscroll-behavior: contain; }
.an-gap { flex: none; display: grid; grid-template-columns: 2.2em 6.6em minmax(40px, 1fr) 4.6em 5.4em; align-items: center; gap: 8px; min-height: 0; line-height: 1.3; background: none; border: 1px solid transparent; border-radius: 6px; padding: 3px 6px; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; font-variant-numeric: tabular-nums; }
.an-gap:hover { background: var(--cb-panel2); }
.an-gap.is-picked { border-color: var(--text); background: var(--cb-panel2); }
.an-gap-n { font-weight: 700; }
.an-gap-at, .an-gap small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.an-gap b { text-align: right; font-weight: 600; white-space: nowrap; }
.an-gap small { text-align: right; }
.an-gap b.an-slow, .an-gap-legend .an-slow, .an-gaps-foot .an-slow { color: #ef6b6b; }
.an-gap b.an-fast, .an-gap-legend .an-fast, .an-gaps-foot .an-fast { color: #4ade80; }
.an-bar { position: relative; height: 10px; border-radius: 3px; background: linear-gradient(90deg, transparent calc(50% - 1px), var(--cb-line) calc(50% - 1px), var(--cb-line) calc(50% + 1px), transparent calc(50% + 1px)); }
.an-bar i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.an-bar i.is-slow { background: #ef4444; }
.an-bar i.is-fast { background: #22c55e; }
.an-gap:not(:has(.an-bar)):not(.is-head) { grid-template-columns: 2.2em 6.6em 1fr 5.4em; }
.an-gaps:not(:has(.an-bar)) .an-gap.is-head { grid-template-columns: 2.2em 6.6em 1fr 5.4em; }
.an-gap.is-head { cursor: default; position: sticky; top: 0; background: var(--cb-panel); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.an-gap.is-head:hover { background: var(--cb-panel); }
.an-gap.is-head span:nth-last-child(-n+2) { text-align: right; }
.an-h2h small { color: var(--muted); font-size: 11px; }
.an-gaps-foot { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--cb-line); padding: 6px 6px 0; font-size: 13px; color: var(--muted); }
.an-gaps-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.an-gaps .cb-src { margin: 0; }
.an-zone { cursor: pointer; }
.an-zone.is-picked circle { fill: var(--text); stroke: var(--text); }
.an-zone.is-picked text { fill: var(--cb-panel); }
.an-zoom { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 600; }
.combos-page .an-zoom .cb-btn { padding: 3px 10px; min-height: 0; font-size: 12px; }
.an-axis.is-metres span:first-child { transform: none; }
.an-axis.is-metres span:last-child { transform: translateX(-100%); }
@media (max-width: 620px) {
  .an-metrics { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .an-metrics button { flex: none; }
  .an-gap, .an-gap.is-head { grid-template-columns: 1.8em minmax(30px, 1fr) 4.4em 4.8em; gap: 6px; }
  .an-gap .an-gap-at { display: none; }
  .an-gap:not(:has(.an-bar)):not(.is-head), .an-gaps:not(:has(.an-bar)) .an-gap.is-head { grid-template-columns: 1.8em 1fr 4.8em; }
  .an-h2h.cb-card { padding: 10px; }
  .an-gaps-list { max-height: 360px; }
  .combos-page .an-h2h th, .combos-page .an-h2h td { padding: 5px 6px; font-size: 13px; }
}


/* styles/live.css */
/* Mur des stands (mur-des-stands.html, front/live-page.mjs): the team's cars live, for the teammates watching.
   On a wide screen everything at once (standings and map on top, our car and the race below); narrower, one tab at a
   time. Tables fit the width at 390 px: columns drop, never a horizontal scrollbar. */
.live-page {
  --lw-line: var(--border, #292d31);
  --lw-panel: var(--panel, #111315);
  --lw-panel2: var(--panel2, #17191c);
  --lw-live: #35b978; --lw-warn: #d9a640; --lw-best: #b98cff; --lw-up: #e4a341; --lw-down: #5fb7e8;
  --lw-hyper: #e4002b; --lw-lmp2: #2a7de1; --lw-gt3: #f28c00; --lw-other: #9aa3a7;
  margin: 0 auto;
  padding: 16px 16px 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}
.members-main.live-page { width: calc(100% - 32px); max-width: none; margin-top: 10px; }
/* The banner as a thin band: the wall takes the screen. */
body.live-body header.site-hero .hero-picture { aspect-ratio: auto; height: 54px; }
body.live-body header.site-hero .hero-banner { object-fit: cover; object-position: 72% 55%; }
body.live-body .site-nav-shell { width: calc(100% - 32px); max-width: none; }
body.live-body .site-nav-shell #navigation { top: 9px; }
@media (max-width: 700px) { body.live-body header.site-hero .hero-picture { height: 40px; } }
.live-page [hidden] { display: none !important; }
.live-page td, .lw-num { font-variant-numeric: tabular-nums; }
.live-page button { font: inherit; color: inherit; }
.live-page button:focus-visible { outline: 2px solid var(--lw-live); outline-offset: 2px; }
.lw-flag { margin: 0; font-size: 13px; color: var(--muted); }
.lw-flag b { color: var(--text); font-weight: 600; }

.lw-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px 20px; padding-bottom: 12px; border-bottom: 1px solid var(--lw-line); }
.lw-crumb { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .09em; }
.live-page h1 { margin: 2px 0 0; font-size: 28px; line-height: 1.15; }
.lw-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: end; }
.lw-fact { display: grid; }
.lw-fact span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.lw-fact b { font-size: 28px; font-weight: 700; line-height: 1.15; }
.lw-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--muted); }
.lw-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.lw-dot.on { background: var(--lw-live); animation: lw-pulse 2s infinite; }
.lw-dot.late { background: var(--lw-warn); }
@keyframes lw-pulse { 0% { box-shadow: 0 0 0 0 rgba(53,185,120,.55); } 70% { box-shadow: 0 0 0 7px rgba(53,185,120,0); } 100% { box-shadow: 0 0 0 0 rgba(53,185,120,0); } }
@media (prefers-reduced-motion: reduce) { .lw-dot.on { animation: none; } }

.lw-cars { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-car { display: inline-flex; align-items: center; gap: 8px; background: var(--lw-panel); border: 1px solid var(--lw-line); border-radius: 99px; padding: 5px 12px 5px 6px; cursor: pointer; max-width: 100%; }
.lw-car[aria-pressed="true"] { border-color: var(--muted); background: var(--lw-panel2); }
.lw-car i { width: 18px; height: 18px; border-radius: 50%; flex: none; }
.lw-car b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-car span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.lw-pill { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .07em; padding: 1px 7px; border-radius: 99px; border: 1px solid currentColor; white-space: nowrap; }
.lw-pill.track { color: var(--lw-live); } .lw-pill.pits { color: var(--lw-warn); } .lw-pill.off { color: var(--muted); }

.lw-tabs { display: none; gap: 4px; border-bottom: 1px solid var(--lw-line); position: sticky; top: 0; background: var(--bg, #0a0b0c); z-index: 5; padding-top: 4px; }
.lw-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; font-weight: 700; font-size: 14px; color: var(--muted); cursor: pointer; }
.lw-tabs button[aria-pressed="true"] { color: var(--text); border-bottom-color: var(--text); }

/* Wide screens: two columns that each stack their panels (standings then car | map then race), so the right column
   never waits for the end of the standings. */
.lw-wall { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.lw-col { display: grid; gap: 14px; min-width: 0; align-content: start; }
.lw-panel { background: var(--lw-panel); border: 1px solid var(--lw-line); border-radius: 10px; padding: 14px 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.lw-panel > h2 { margin: 0; font-size: 22px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lw-panel > h2 small { font-size: 13px; font-weight: 500; color: var(--muted); }
.lw-sub { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--lw-line); min-width: 0; }
.lw-sub.first { border-top: 0; padding-top: 0; }
.lw-sub h3 { margin: 0; font-weight: 600; font-size: 13.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .09em; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 8px; }
.lw-sub h3 span { text-transform: none; letter-spacing: 0; font-weight: 500; }
.lw-carbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px 24px; align-items: start; }
.lw-stack { display: grid; gap: 12px; min-width: 0; }
.lw-empty { color: var(--muted); }
/* Mid-size screens: the standings take the whole width, the rest below. */
@media (min-width: 1180px) and (max-width: 1499px) {
  .lw-col { display: contents; }
  .lw-wall { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "car car" "map race"; }
  .lw-wall.practice { grid-template-areas: "board board" "car car" "map map"; }
  #lw-board { grid-area: board; } #lw-map { grid-area: map; } #lw-carpanel { grid-area: car; } #lw-race { grid-area: race; }
}
@media (max-width: 1179px) {
  .lw-tabs { display: flex; }
  .lw-col { display: contents; }
  .lw-wall, .lw-wall.practice { grid-template-columns: minmax(0, 1fr); }
  .lw-panel:not(.on) { display: none; }
}

/* Standings */
.lw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lw-chips button { background: var(--lw-panel2); border: 1px solid var(--lw-line); border-radius: 99px; padding: 4px 12px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.lw-chips button[aria-pressed="true"] { color: var(--text); border-color: var(--muted); }
/* One tower per class (WEC TV timing tower): place, number in the class colour, driver and car, last and best lap,
   gap to the car ahead (big) and to the class leader (small). A tap opens the car's details under its line. */
.lw-towers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 12px; align-items: start; }
.lw-tower { background: var(--bg, #0a0b0c); border: 1px solid var(--lw-line); border-radius: 8px; overflow: hidden; min-width: 0; }
.lw-tower h3 { margin: 0; background: var(--cls); color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 6px 10px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lw-tower h3 small { font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .9; }
.lw-trow { display: grid; grid-template-columns: 38px 36px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 6px 10px 6px 0; border-top: 1px solid var(--lw-line); cursor: pointer; font-variant-numeric: tabular-nums; }
.lw-trow:first-of-type { border-top: 0; }
.lw-trow:nth-of-type(even) { background: var(--lw-panel); }
.lw-trow:hover { background: var(--lw-panel2); }
.lw-trow.us { background: var(--lw-panel2); box-shadow: inset 3px 0 0 var(--us); }
.lw-trow.us .t-who b, .lw-trow.mate .t-who b { color: var(--us); }
.lw-trow small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.15; }
.t-pos { font-size: 23px; font-weight: 700; text-align: center; line-height: 1; }
.t-pos small { font-size: 11px; margin-top: 2px; }
.t-num { font-size: 14px; font-weight: 700; text-align: center; border: 1.5px solid var(--cls); border-radius: 4px; padding: 1px 0; }
.t-who { min-width: 0; }
.t-who b { display: block; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-who .lw-pill { font-size: 10px; vertical-align: 2px; }
.t-times { text-align: right; font-size: 16px; line-height: 1.15; min-width: 70px; }
.t-muted { color: var(--muted); font-size: 13px; }
.t-gap { text-align: right; min-width: 62px; line-height: 1.1; }
.t-gap b { font-size: 21px; font-weight: 700; }
.t-more { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 2px; font-size: 13.5px; }
.t-more div { display: flex; gap: 5px; align-items: baseline; }
.t-more dt { color: var(--muted); }
.t-more dd { margin: 0; font-weight: 600; }
/* The whole table when the standings panel is wide (computer), the towers otherwise. */
#lw-board { container-type: inline-size; }
.lw-wide { display: none; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 16px; }
@container (min-width: 760px) { .lw-towers { display: none; } .lw-wide { display: table; } }
@container (max-width: 1099px) { .lw-wide .w-lg { display: none; } }
@container (max-width: 899px) { .lw-wide .w-md { display: none; } }
.lw-wide thead th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; text-align: right; padding: 0 8px 6px; white-space: nowrap; }
.lw-wide th.t-pos, .lw-wide th.t-numh, .lw-wide th.t-who { text-align: left; }
.lw-wide td { padding: 6px 8px; text-align: right; white-space: nowrap; border-top: 1px solid var(--lw-line); }
.lw-wide tbody tr:nth-child(odd) td { background: var(--lw-panel2); }
.lw-wide tr.t-cls th { text-align: left; background: var(--cls); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 5px 10px; }
.lw-wide tr.t-cls th small { display: inline; color: inherit; opacity: .9; margin-left: 8px; font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.lw-wide tbody + tbody tr.t-cls th { border-top: 12px solid var(--lw-panel); }
.lw-wide td.t-pos { text-align: center; width: 44px; box-shadow: inset 3px 0 0 var(--cls); }
.lw-wide td:nth-child(2) { width: 46px; text-align: left; }
.lw-wide .t-num { display: inline-block; min-width: 34px; }
.lw-wide td.t-who { text-align: left; width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lw-wide td.t-who b, .lw-wide td.t-who small { overflow: hidden; text-overflow: ellipsis; }
.lw-wide tr.us td { background: #221c2e; }
.lw-wide tr.us td.t-pos { box-shadow: inset 3px 0 0 var(--us); }
.lw-wide tr.us .t-who b, .lw-wide tr.mate .t-who b { color: var(--us); }
.lw-wide small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; line-height: 1.15; }
.lw-wide td.t-g b { font-size: 19px; }
.lw-wide td.t-g:not(:has(b)) { color: var(--muted); }
.lw-wide td.t-s { font-size: 14.5px; }
@media (max-width: 520px) { .t-times { display: none; } .lw-trow { grid-template-columns: 34px 34px minmax(0, 1fr) auto; } .lw-panel { padding: 12px 10px; } }

/* Our car */
.lw-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lw-who { font-size: 26px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.lw-who i { width: 12px; height: 12px; border-radius: 3px; }
.lw-meta { color: var(--muted); font-size: 16px; }
.lw-age { margin-left: auto; color: var(--muted); font-size: 12px; }
.lw-big { font-size: 62px; font-weight: 700; line-height: 1; }
.lw-big small { font-size: 26px; color: var(--muted); font-weight: 600; margin-left: 2px; }
.lw-meter { height: 10px; border-radius: 6px; background: var(--lw-panel2); border: 1px solid var(--lw-line); overflow: hidden; position: relative; }
.lw-meter i { position: absolute; inset: 0 auto 0 0; background: var(--lw-live); transition: width .6s; }
.lw-meter.grey i { background: var(--muted); }
.lw-row2 { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: center; }
.lw-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px 14px; margin: 0; }
.lw-kv div { display: grid; gap: 1px; }
.lw-kv dt { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.lw-kv dd { margin: 0; font-size: 25px; font-weight: 600; }
.lw-kv dd em { font-style: normal; font-size: 15px; font-weight: 600; margin-left: 4px; }
.live-page .up { color: var(--lw-up); } .live-page .down { color: var(--lw-down); } .live-page .same { color: var(--muted); }
.lw-target { font-size: 15px; color: var(--muted); }
.lw-target b { color: var(--text); font-weight: 600; }
.lw-lap { font-size: 50px; font-weight: 700; line-height: 1; }
.lw-sectors, .lw-drive, .lw-stops { width: 100%; border-collapse: collapse; font-size: 17px; }
.lw-sectors th, .lw-drive th, .lw-stops th { font-weight: 600; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; text-align: right; padding: 0 0 6px; }
.lw-sectors td, .lw-drive td, .lw-stops td { text-align: right; padding: 5px 0; border-top: 1px solid var(--lw-line); }
.lw-sectors td { font-weight: 600; }
.lw-sectors th:first-child, .lw-sectors td:first-child { text-align: left; }
.lw-sectors td:first-child { color: var(--muted); font-weight: 500; }
.lw-tyres { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; position: relative; }
.lw-tyres::before { content: ""; position: absolute; left: 50%; top: 8px; bottom: 8px; border-left: 1px dashed var(--lw-line); }
.lw-tyre { background: var(--lw-panel2); border: 1px solid var(--lw-line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 6px; min-width: 0; }
.lw-tyre .t { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.lw-tyre-main { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 40px; font-weight: 700; line-height: 1; }
.lw-tyre-main small { font-size: 18px; color: var(--muted); font-weight: 600; }
.lw-tyre dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 8px; }
.lw-tyre dt { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.lw-tyre dd { margin: 0; font-weight: 600; font-size: 18px; }
.lw-wear { height: 4px; border-radius: 3px; background: var(--bg, #0a0b0c); overflow: hidden; }
.lw-wear i { display: block; height: 100%; background: var(--text); opacity: .75; }
.lw-cond { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lw-cond div { display: grid; gap: 1px; }
.lw-cond dt { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.lw-cond dd { margin: 0; font-size: 24px; font-weight: 600; }
.lw-stint { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 16px; color: var(--muted); }
.lw-stint b { color: var(--text); font-size: 22px; margin-right: 4px; }
@media (max-width: 520px) { .lw-cond { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lw-big { font-size: 48px; } .lw-lap { font-size: 40px; } .lw-tyre-main { font-size: 26px; } .lw-tyre-main small { font-size: 13px; } .lw-tyre dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lw-tyre dd { font-size: 16px; } .lw-kv dd { font-size: 21px; } .lw-age { margin-left: 0; width: 100%; } .lw-tyres { gap: 8px 12px; } .lw-tyre { padding: 8px; } .lw-tyre dt { font-size: 10px; letter-spacing: .02em; } .lw-tyre dd { font-size: 15px; white-space: nowrap; } }

/* Map */
.lw-mapbox { width: 100%; display: block; max-height: 78vh; }
.lw-mapbox .road { fill: none; stroke: #3a4045; stroke-width: 22; stroke-linecap: round; stroke-linejoin: round; }
.lw-mapbox .edge { fill: none; stroke: var(--lw-panel2); stroke-width: 12; stroke-linejoin: round; }
/* Each car: its place in the dot. Ours ringed and on top. */
.lw-mapbox circle { stroke: var(--bg, #0a0b0c); stroke-width: 2.5; }
.lw-mapbox text { font-size: 19px; font-weight: 800; fill: #0a0b0c; text-anchor: middle; font-variant-numeric: tabular-nums; pointer-events: none; }
.lw-mapbox .us circle { stroke: var(--text); stroke-width: 4; }
.lw-mapbox .us text { font-size: 23px; }
.lw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--muted); }
.lw-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lw-legend i { width: 9px; height: 9px; border-radius: 50%; }

/* Race */
.lw-clock { font-size: 54px; font-weight: 700; line-height: 1; }
.lw-rel { display: grid; gap: 3px; }
.lw-rel div { display: grid; grid-template-columns: 96px 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 6px; background: var(--lw-panel2); font-size: 16px; }
.lw-rel div i { width: 10px; height: 10px; border-radius: 50%; }
.lw-rel div span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-rel div small { color: var(--muted); font-size: 13px; }
.lw-rel div b { font-weight: 700; text-align: right; }
.lw-rel .me { background: none; border: 1px dashed var(--text); font-weight: 700; }
.lw-drive th:first-child, .lw-drive td:first-child { text-align: left; width: 42%; padding-right: 12px; }
.lw-bar { position: relative; height: 6px; border-radius: 4px; background: var(--lw-panel2); margin-top: 4px; }
.lw-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.lw-bar s { position: absolute; top: -3px; bottom: -3px; border-left: 1.5px solid var(--muted); }
.lw-ok { color: var(--lw-live); }
.lw-stops { font-size: 16px; }
.lw-stops th:first-child, .lw-stops td:first-child { text-align: left; }
.lw-stops .lw-pin { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.lw-stops td small { display: block; font-size: 12.5px; color: var(--muted); }
.lw-stops tr.now td { font-weight: 600; }
.lw-stops th + th, .lw-stops td + td { padding-left: 8px; }
.lw-stops td:first-child { overflow-wrap: anywhere; }


/* styles/pit-wall.css */
/* Mur des stands (mur.html, front/pit-wall.mjs): full screen, PitData's organisation and look in five tabs. Dark
   framed cards with a title bar, bright colours for what counts, Chakra Petch for the words and JetBrains Mono for the
   figures. Fits 360 px: columns drop, never a horizontal page scroll (wide tables scroll inside their card).
   Scoped to .pw-body: app.css holds every page. */
@font-face { font-family: "Chakra Petch"; font-weight: 400; font-display: swap; src: url("/images/fonts/chakra-petch-400.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 600; font-display: swap; src: url("/images/fonts/chakra-petch-600.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-weight: 700; font-display: swap; src: url("/images/fonts/chakra-petch-700.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400 700; font-display: swap; src: url("/images/fonts/jetbrains-mono.woff2") format("woff2"); }

.pw-body {
  --pw-bg: #0a0c10; --pw-card: #131722; --pw-accent: #1e2436; --pw-inset: #0d1017; --pw-line: #262e45; --pw-grid: #1c2233;
  --pw-text: #f0f3fa; --pw-text2: #9aa5c4; --pw-muted: #6e7a99;
  --pw-red: #ff3366; --pw-green: #00e676; --pw-blue: #00b0ff; --pw-yellow: #ffea00; --pw-purple: #d500f9; --pw-cyan: #00e5ff; --pw-orange: #ff9100;
  --pw-hyper: #ff3366; --pw-lmp2: #2f8cff; --pw-gt3: #ffab00; --pw-other: #9aa5c4;
  --pw-mono: "JetBrains Mono", ui-monospace, monospace;
  margin: 0;
  min-height: 100vh;
  background: var(--pw-bg);
  color: var(--pw-text);
  font-family: "Chakra Petch", system-ui, sans-serif;
}
.pw-body .pw-app { max-width: 1880px; margin: 0 auto; padding: 12px max(20px, env(safe-area-inset-right)) 24px max(20px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 12px; }
.pw-body button { font: inherit; color: inherit; cursor: pointer; }
.pw-body button:focus-visible, .pw-body a:focus-visible { outline: 2px solid var(--pw-cyan); outline-offset: 2px; }
.pw-body .pw-loading, .pw-body .pw-note { color: var(--pw-muted); font-size: 13px; margin: 12px 0 0; }
.pw-body small { color: var(--pw-muted); font-weight: 400; }

/* Colours of figures */
.pw-body .pw-red { color: var(--pw-red); }
.pw-body .pw-green { color: var(--pw-green); }
.pw-body .pw-blue { color: var(--pw-blue); }
.pw-body .pw-yellow { color: var(--pw-yellow); }
.pw-body .pw-purple { color: var(--pw-purple); }
.pw-body .pw-cyan { color: var(--pw-cyan); }
.pw-body .pw-orange { color: var(--pw-orange); }
.pw-body .pw-dim { color: var(--pw-muted); }

/* Cards: a frame, a title bar */
.pw-body .pw-card { background: var(--pw-card); border: 1px solid var(--pw-line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.pw-body .pw-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--pw-line); }
.pw-body .pw-card-head h2 { margin: 0 auto 0 0; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-text); }
.pw-body .pw-card-head h2 small { font-family: var(--pw-mono); font-size: 12px; letter-spacing: 0; text-transform: none; margin-left: 8px; }
.pw-body .pw-card h3 { margin: 18px 0 10px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-grid { display: grid; gap: 12px; }
.pw-body .pw-row2, .pw-body .pw-row3 { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pw-body .pw-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Boxes: a label, a figure */
.pw-body .pw-box { background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; padding: 8px 10px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.pw-body .pw-box > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-box > b { font-family: var(--pw-mono); font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-body .pw-box > small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-body .pw-box.good { border-color: rgba(0,230,118,.35); background: rgba(0,230,118,.06); }
.pw-body .pw-box.good > b, .pw-body .pw-box.good > small { color: var(--pw-green); }
.pw-body .pw-box.purple { border-color: rgba(213,0,249,.4); background: rgba(213,0,249,.07); }
.pw-body .pw-box.purple > b, .pw-body .pw-box.purple > small { color: var(--pw-purple); }
.pw-body .pw-box.bad { border-color: rgba(255,51,102,.4); background: rgba(255,51,102,.07); }
.pw-body .pw-box.bad > b, .pw-body .pw-box.bad > small { color: var(--pw-red); }
.pw-body .pw-box.warn { border-color: rgba(255,234,0,.35); background: rgba(255,234,0,.05); }
.pw-body .pw-box.warn > b { color: var(--pw-yellow); }

/* Chips: small framed labels */
.pw-body .pw-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 4px; border: 1px solid var(--pw-line); background: var(--pw-accent); font-family: var(--pw-mono); font-size: 12px; font-weight: 600; color: var(--pw-text2); white-space: nowrap; }
.pw-body .pw-chip.good { color: var(--pw-green); border-color: rgba(0,230,118,.45); background: rgba(0,230,118,.08); }
.pw-body .pw-chip.warn { color: var(--pw-yellow); border-color: rgba(255,234,0,.45); background: rgba(255,234,0,.08); }
.pw-body .pw-chip.bad { color: var(--pw-red); border-color: rgba(255,51,102,.45); background: rgba(255,51,102,.08); }
.pw-body .pw-chip.stop { color: var(--pw-orange); border-color: rgba(255,145,0,.5); background: rgba(255,145,0,.08); margin-left: 8px; }
.pw-body .pw-chip.compound { color: var(--pw-yellow); border-color: rgba(255,234,0,.5); background: rgba(255,234,0,.1); }
.pw-body .pw-chip.line { --tone: var(--pw-text2); color: var(--tone); border-color: color-mix(in srgb, var(--tone) 55%, transparent); background: color-mix(in srgb, var(--tone) 8%, transparent); }
.pw-body .line.cyan { --tone: var(--pw-cyan); } .pw-body .line.green { --tone: var(--pw-green); } .pw-body .line.red { --tone: var(--pw-red); }
.pw-body .line.yellow { --tone: var(--pw-yellow); } .pw-body .line.purple { --tone: var(--pw-purple); }

/* Top bar */
.pw-body .pw-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 8px 16px; }
.pw-body .pw-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.pw-body .pw-brand img { width: 26px; height: 26px; border-radius: 6px; }
.pw-body .pw-brand b { font-size: 19px; font-weight: 700; letter-spacing: .04em; background: linear-gradient(90deg, var(--pw-cyan), var(--pw-green)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pw-body .pw-session { display: flex; align-items: center; gap: 10px; background: var(--pw-accent); border: 1px solid var(--pw-line); border-radius: 6px; padding: 4px 12px; }
.pw-body .pw-session span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-session b { font-family: var(--pw-mono); font-size: 16px; color: var(--pw-cyan); letter-spacing: .04em; }
.pw-body .pw-status { display: flex; align-items: center; gap: 12px; }
.pw-body .pw-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; font-size: 13px; font-weight: 600; border: 1px solid; white-space: nowrap; }
.pw-body .pw-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pw-body .pw-pill.on { color: var(--pw-green); border-color: rgba(0,230,118,.45); background: rgba(0,230,118,.1); }
.pw-body .pw-pill.on i { box-shadow: 0 0 8px var(--pw-green); }
.pw-body .pw-pill.off { color: var(--pw-red); border-color: rgba(255,51,102,.45); background: rgba(255,51,102,.1); }
.pw-body .pw-pill.late { color: var(--pw-yellow); border-color: rgba(255,234,0,.45); background: rgba(255,234,0,.08); }
.pw-body .pw-hz { font-family: var(--pw-mono); font-size: 13px; color: var(--pw-text2); white-space: nowrap; }
.pw-body .pw-icon { background: var(--pw-accent); border: 1px solid var(--pw-line); border-radius: 6px; width: 32px; height: 32px; font-size: 17px; line-height: 1; }

/* Driver card */
.pw-body .pw-driver { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 8px 16px; }
.pw-body .pw-carnum { font-family: var(--pw-mono); font-size: 22px; font-weight: 700; color: var(--pw-yellow); background: var(--pw-accent); border: 1px solid var(--pw-line); border-radius: 6px; padding: 3px 10px; }
.pw-body .pw-who { display: grid; min-width: 0; flex: 1 1 200px; }
.pw-body .pw-who b { font-size: 18px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-body .pw-who span { font-size: 13px; color: var(--pw-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pw-body .pw-facts { display: flex; gap: 24px; }
.pw-body .pw-facts div { display: grid; }
.pw-body .pw-facts span { font-size: 11px; font-weight: 600; color: var(--pw-text2); text-transform: uppercase; letter-spacing: .06em; }
.pw-body .pw-facts b { font-family: var(--pw-mono); font-size: 18px; white-space: nowrap; }
.pw-body .pw-track { font-size: 15px; font-weight: 700; color: var(--pw-cyan); background: var(--pw-accent); border: 1px solid var(--pw-line); border-radius: 6px; padding: 5px 12px; white-space: nowrap; }

/* Cars of the team */
.pw-body .pw-cars { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-body .pw-cars button { display: inline-flex; align-items: center; gap: 8px; background: var(--pw-card); border: 1px solid var(--pw-line); border-radius: 6px; padding: 7px 14px 7px 10px; font-size: 14px; font-weight: 600; }
.pw-body .pw-cars button[aria-pressed="true"] { border-color: var(--pw-cyan); box-shadow: 0 0 12px rgba(0,229,255,.2); }
.pw-body .pw-cars i { width: 10px; height: 10px; border-radius: 50%; }

/* Tabs */
.pw-body .pw-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; }
.pw-body .pw-tabs button { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; background: none; border: 1px solid transparent; border-radius: 6px; padding: 6px; font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-tabs button:hover { color: var(--pw-text); background: var(--pw-accent); }
.pw-body .pw-tabs button[aria-selected="true"] { color: var(--pw-cyan); border-color: var(--pw-cyan); background: rgba(0,229,255,.08); box-shadow: 0 0 16px rgba(0,229,255,.15); }
.pw-body .pw-tab-icon { font-size: 17px; }
.pw-body .pw-tabs kbd { font-family: var(--pw-mono); font-size: 12px; font-weight: 400; color: var(--pw-muted); border: 1px solid var(--pw-line); border-radius: 3px; padding: 1px 6px; background: var(--pw-inset); }
.pw-body .pw-tabs button[aria-selected="true"] kbd { color: var(--pw-cyan); border-color: rgba(0,229,255,.4); }
.pw-body .pw-short { display: none; }

/* Board: view switch, class filters, the table as framed rows */
.pw-body .pw-seg { display: flex; gap: 2px; padding: 3px; background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; }
.pw-body .pw-seg button { background: none; border: 0; border-radius: 4px; padding: 5px 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--pw-text2); white-space: nowrap; }
.pw-body .pw-seg button[aria-pressed="true"] { background: var(--pw-cyan); color: #04121a; }
.pw-body .pw-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pw-body .pw-filters button { --cls: var(--pw-cyan); background: var(--pw-accent); border: 1px solid var(--pw-line); border-radius: 4px; padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--pw-text2); }
.pw-body .pw-filters button[aria-pressed="true"] { color: var(--cls); border-color: var(--cls); background: color-mix(in srgb, var(--cls) 10%, transparent); }
.pw-body .pw-table { overflow-x: auto; }
.pw-body .pw-table table { width: 100%; border-collapse: separate; border-spacing: 0 3px; font-size: 14px; }
.pw-body .pw-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--pw-text2); padding: 4px 10px 6px; white-space: nowrap; }
.pw-body .pw-table td { padding: 7px 10px; background: var(--pw-inset); vertical-align: middle; white-space: nowrap; }
.pw-body .pw-table td:first-child { border-radius: 4px 0 0 4px; }
.pw-body .pw-table td:last-child { border-radius: 0 4px 4px 0; }
.pw-body .pw-table tr.us td { background: rgba(0,229,255,.09); }
.pw-body .pw-table tr.us td:first-child { box-shadow: inset 3px 0 0 var(--pw-cyan); }
.pw-body .pw-table tr.us .pw-name b, .pw-body .pw-table tr.us .pw-team { color: var(--pw-text); }
.pw-body .pw-table tr.down td { color: var(--pw-blue); }
.pw-body .pw-table tr.up td { color: var(--pw-orange); }
.pw-body .pw-n { text-align: right; font-family: var(--pw-mono); }
.pw-body .pw-table th.pw-n { text-align: right; font-family: inherit; }
.pw-body .pw-pos { font-family: var(--pw-mono); font-weight: 700; width: 1%; }
.pw-body .pw-num { font-family: var(--pw-mono); font-weight: 700; color: var(--pw-yellow); width: 1%; }
.pw-body .pw-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pw-body .pw-name b { font-weight: 700; }
.pw-body .pw-team { font-family: var(--pw-mono); font-size: 14px; color: var(--pw-text2); }
.pw-body .pw-big { font-weight: 700; }
.pw-body .pw-stand { text-align: right; }
.pw-body .pw-stand > b { font-family: var(--pw-mono); }
.pw-body .pw-cls { display: inline-block; padding: 3px 8px; border-radius: 3px; font-family: var(--pw-mono); font-size: 12px; font-weight: 700; color: var(--cls); border: 1px solid color-mix(in srgb, var(--cls) 60%, transparent); background: color-mix(in srgb, var(--cls) 12%, transparent); }
.pw-body .pw-compound { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--tone, var(--pw-text2)); color: var(--tone, var(--pw-text2)); background: #0a0c10; font-family: var(--pw-mono); font-size: 12px; font-weight: 700; }
.pw-body .pw-compound.S { --tone: var(--pw-red); } .pw-body .pw-compound.M { --tone: var(--pw-yellow); } .pw-body .pw-compound.H { --tone: var(--pw-text); } .pw-body .pw-compound.W { --tone: var(--pw-blue); }
.pw-body .pw-tank { display: inline-flex; align-items: center; gap: 8px; }
.pw-body .pw-tank b { color: var(--bar); min-width: 38px; }
.pw-body .pw-tank i { width: 40px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--bar) var(--tank), var(--pw-accent) var(--tank)); }

/* Chrono */
.pw-body .pw-chrono-grid { grid-template-columns: 1.35fr 1fr 1fr; }
.pw-body .pw-session-pill { display: inline-flex; gap: 10px; align-items: baseline; padding: 6px 14px; border: 1px solid rgba(0,229,255,.4); background: rgba(0,229,255,.06); border-radius: 4px; font-size: 14px; text-transform: uppercase; margin-bottom: 14px; }
.pw-body .pw-session-pill b { font-family: var(--pw-mono); }
.pw-body .pw-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin-bottom: 12px; }
.pw-body .pw-hero .pw-box { padding: 10px 14px; }
.pw-body .pw-hero .pw-lapno > b { font-size: 36px; color: var(--pw-cyan); }
.pw-body .pw-hero .pw-live > b { font-size: 42px; letter-spacing: .02em; }
.pw-body .pw-sector { display: grid; grid-template-columns: 44px repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 9px 12px; margin-bottom: 6px; background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; }
.pw-body .pw-sector b { font-family: var(--pw-mono); font-size: 16px; text-align: right; }
.pw-body .pw-sector-head { background: none; border: 0; padding: 0 12px; margin: 0 0 6px; }
.pw-body .pw-sector-head span { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--pw-text2); text-align: right; }
.pw-body .pw-sector-foot { background: none; border-style: dashed; }
.pw-body .pw-sec { font-family: var(--pw-mono); font-size: 13px; font-weight: 700; text-align: center; padding: 3px 0; border-radius: 3px; background: var(--pw-accent); color: var(--pw-text2); }

/* Vehicle */
.pw-body .pw-car-top { grid-template-columns: minmax(0, 1fr) 300px; }
.pw-body .pw-car-bottom { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.pw-body .pw-cockpit { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px; gap: 18px; align-items: center; }
.pw-body .pw-gauges { display: flex; gap: 12px; }
.pw-body .pw-gauge { display: grid; justify-items: center; gap: 6px; width: 96px; padding: 10px; background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; }
.pw-body .pw-gauge span { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-gauge i { width: 12px; height: 70px; border-radius: 7px; background: linear-gradient(0deg, var(--pw-green), var(--pw-cyan)) bottom / 100% var(--level) no-repeat, var(--pw-accent); }
.pw-body .pw-gauge b { font-family: var(--pw-mono); font-size: 17px; color: var(--pw-green); }
.pw-body .pw-speedo { display: flex; align-items: center; justify-content: center; gap: 28px; }
.pw-body .pw-speedo > div { display: grid; }
.pw-body .pw-gear { font-family: var(--pw-mono); font-size: 72px; line-height: 1; color: var(--pw-cyan); text-shadow: 0 0 22px rgba(0,229,255,.35); }
.pw-body .pw-speed { font-family: var(--pw-mono); font-size: 54px; line-height: 1; }
.pw-body .pw-speedo span { font-size: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-pitstate { display: grid; gap: 8px; }
.pw-body .pw-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--pw-line); }
.pw-body .pw-set { --tone: var(--pw-text2); display: grid; justify-items: center; gap: 2px; padding: 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--tone) 45%, transparent); background: color-mix(in srgb, var(--tone) 9%, transparent); }
.pw-body .pw-set span { font-size: 13px; font-weight: 700; text-transform: uppercase; color: var(--tone); }
.pw-body .pw-set b { font-family: var(--pw-mono); font-size: 21px; color: var(--tone); }
.pw-body .pw-set.red { --tone: var(--pw-red); } .pw-body .pw-set.blue { --tone: var(--pw-blue); } .pw-body .pw-set.yellow { --tone: var(--pw-yellow); }
.pw-body .pw-damage { display: grid; gap: 14px; justify-items: center; padding: 18px 0; }
.pw-body .pw-damage b { font-family: var(--pw-mono); font-size: 44px; color: var(--bar); }
.pw-body .pw-damage-sum { display: grid; gap: 14px; justify-items: center; width: 100%; }
.pw-body .pw-damage.with-car { grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 10px 0; }
.pw-body .pw-damage.with-car b { font-size: 36px; }
.pw-body .pw-car-dents { width: 128px; height: auto; }
.pw-body .pw-car-dents path, .pw-body .pw-car-dents rect { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pw-body .pw-car-dents .pw-dent-zone { stroke-width: 6; }
.pw-body .pw-car-dents .pw-dent-arms path, .pw-body .pw-car-dents .pw-dent-pillar { stroke: var(--pw-muted); stroke-width: 2.5; }
.pw-body .pw-car-dents .pw-dent-arms path { stroke: var(--pw-text2); stroke-width: 2.5; }
.pw-body .pw-car-dents .pw-dent-wheel { fill: var(--pw-accent); stroke: var(--pw-muted); stroke-width: 2; }
.pw-body .pw-car-dents .pw-dent-cockpit { stroke: var(--pw-line); stroke-width: 3; }
.pw-body .pw-car-dents .pw-dent-wing { stroke: var(--pw-text2); stroke-width: 4; }
.pw-body .pw-car-dents .pw-dent-wing.off { stroke: var(--pw-red); stroke-dasharray: 6 5; }
.pw-body .pw-wing { display: grid; justify-items: center; gap: 2px; }
.pw-body .pw-wing span { font-size: 12px; color: var(--pw-muted); text-transform: uppercase; }
.pw-body .pw-damage .pw-wing b { font-size: 18px; font-family: inherit; }
.pw-body .pw-wing.good b { color: var(--pw-green); }
.pw-body .pw-wing.bad b { color: var(--pw-red); }
.pw-body .pw-damage i { width: 100%; height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--bar) var(--level), var(--pw-accent) var(--level)); }
.pw-body .pw-tank-card { background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; padding: 12px; display: grid; gap: 8px; align-content: start; }
.pw-body .pw-tank-card .pw-tank-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pw-body .pw-tank-card .pw-tank-head span { font-size: 15px; font-weight: 700; text-transform: uppercase; }
.pw-body .pw-tank-card .pw-tank-head b { font-family: var(--pw-mono); font-size: 22px; }
.pw-body .pw-tank-card.fuel .pw-tank-head b { color: var(--pw-yellow); }
.pw-body .pw-tank-card.ve .pw-tank-head b { color: var(--pw-cyan); }
.pw-body .pw-level { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--fill) var(--level), var(--pw-accent) var(--level)); }
.pw-body .fuel .pw-level { --fill: linear-gradient(90deg, var(--pw-orange), var(--pw-yellow)); background: var(--fill) left / var(--level) 100% no-repeat, var(--pw-accent); }
.pw-body .ve .pw-level { --fill: linear-gradient(90deg, var(--pw-blue), var(--pw-cyan)); background: var(--fill) left / var(--level) 100% no-repeat, var(--pw-accent); }
.pw-body .pw-tank-card .pw-box { background: var(--pw-card); }
.pw-body .pw-tank-card .pw-box > b { font-size: 18px; }
.pw-body .pw-tanks { align-items: start; }
.pw-body .pw-tanks.single { grid-template-columns: 1fr; }
.pw-body .pw-tanks.single .pw-tank-card .pw-row2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pw-body .pw-wheels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pw-body .pw-wheel { display: grid; gap: 8px; padding: 10px 12px; border-radius: 6px; border: 1px solid rgba(0,230,118,.3); background: var(--pw-inset); }
.pw-body .pw-wheel .pw-wheel-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pw-body .pw-wheel .pw-wheel-head > b { font-size: 16px; }
.pw-body .pw-wheel .pw-wheel-head > .pw-chip { margin-left: auto; }
.pw-body .pw-wheel .pw-wheel-head.right { flex-direction: row-reverse; }
.pw-body .pw-wheel .pw-wheel-head.right > .pw-chip { margin-left: 0; margin-right: auto; }
.pw-body .pw-wheel .pw-wheel-head > span { margin-left: auto; font-size: 13px; color: var(--pw-text2); }
.pw-body .pw-wheel .pw-wheel-head > span b { font-family: var(--pw-mono); font-size: 16px; }
.pw-body .pw-wheel-body { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0; }
.pw-body .pw-wheel-body.right { flex-direction: row-reverse; }
.pw-body .pw-tyre { display: grid; place-content: center; justify-items: center; width: 88px; height: 92px; border-radius: 12px; border: 3px solid #2b3245; background: linear-gradient(180deg, color-mix(in srgb, var(--temp) 85%, #000), color-mix(in srgb, var(--temp) 45%, #000)); box-shadow: 0 0 18px color-mix(in srgb, var(--temp) 30%, transparent); }
.pw-body .pw-tyre b { font-family: var(--pw-mono); font-size: 18px; color: #fff; text-shadow: 0 1px 3px #000; }
.pw-body .pw-tyre small { color: rgba(255,255,255,.75); font-weight: 600; }
.pw-body .pw-tread { display: flex; gap: 3px; margin-top: 4px; }
.pw-body .pw-tread i { font-style: normal; font-family: var(--pw-mono); font-size: 11px; color: #fff; padding: 1px 3px; border-radius: 4px; background: color-mix(in srgb, var(--temp) 70%, #000); }
.pw-body .pw-brake { display: grid; justify-items: center; gap: 6px; }
.pw-body .pw-brake i { width: 10px; height: 54px; border-radius: 6px; background: linear-gradient(180deg, var(--temp), color-mix(in srgb, var(--temp) 40%, #000)); box-shadow: 0 0 10px color-mix(in srgb, var(--temp) 40%, transparent); }
.pw-body .pw-brake b { font-family: var(--pw-mono); font-size: 18px; }
.pw-body .pw-wear { display: grid; justify-items: center; gap: 6px; }
.pw-body .pw-wear i { position: relative; width: 14px; height: 70px; border-radius: 7px; background: #1b2131; overflow: hidden; }
.pw-body .pw-wear i::after { content: ''; position: absolute; inset: auto 0 0; height: var(--wear); background: var(--bar); box-shadow: 0 0 10px color-mix(in srgb, var(--bar) 50%, transparent); }
.pw-body .pw-wear b { font-family: var(--pw-mono); font-size: 15px; color: var(--bar); }
.pw-body .pw-wheel .pw-box { background: var(--pw-card); padding: 8px; }
.pw-body .pw-wheel .pw-box > span { font-size: 11px; }
.pw-body .pw-wheel .pw-box > b { font-size: 15px; }

/* Telemetry */
.pw-body .pw-tele-live { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 14px; }
.pw-body .pw-panel { background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; padding: 12px; }
.pw-body .pw-pedals { display: flex; justify-content: center; gap: 40px; }
.pw-body .pw-pedal { display: grid; justify-items: center; gap: 6px; }
.pw-body .pw-pedal i { width: 22px; height: 80px; border-radius: 4px; border: 1px solid var(--pw-line); background: linear-gradient(0deg, var(--bar) var(--level), var(--pw-accent) var(--level)); }
.pw-body .pw-pedal.gas { --bar: var(--pw-green); }
.pw-body .pw-pedal.brake { --bar: var(--pw-red); }
.pw-body .pw-pedal b { font-family: var(--pw-mono); }
.pw-body .pw-pedal span { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-wheelbar { display: grid; align-content: center; gap: 16px; }
.pw-body .pw-wheelbar > span { display: flex; justify-content: space-between; font-family: var(--pw-mono); font-size: 14px; text-transform: uppercase; color: var(--pw-text2); }
.pw-body .pw-wheelbar > span b { color: var(--pw-yellow); }
.pw-body .pw-steer { position: relative; height: 14px; border-radius: 7px; background: var(--pw-accent); border: 1px solid var(--pw-line); }
.pw-body .pw-steer::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 2px; background: var(--pw-text2); }
.pw-body .pw-steer i { position: absolute; top: -2px; width: 16px; height: 16px; margin-left: -8px; border-radius: 3px; background: var(--pw-yellow); box-shadow: 0 0 10px rgba(255,234,0,.5); }
.pw-body .pw-speedo.small .pw-gear { font-size: 64px; }
.pw-body .pw-speedo.small .pw-speed { font-size: 48px; }
.pw-body .pw-acq { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px; padding: 8px 16px; }
.pw-body .pw-acq small { font-family: var(--pw-mono); }
.pw-body .pw-curve .pw-card-head { border: 0; padding: 0; margin-bottom: 12px; }
.pw-body .pw-curve-now { margin-left: auto; font-family: var(--pw-mono); font-size: 14px; color: var(--pw-text2); text-transform: uppercase; }
.pw-body .pw-curve canvas { display: block; width: 100%; height: 130px; background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; }
.pw-body .pw-panel-wrap { display: flex; flex-direction: column; gap: 12px; }
.pw-body .pw-graph { margin: 0 0 16px; }
.pw-body .pw-graph figcaption { margin-bottom: 8px; }
.pw-body .pw-graph svg { display: block; width: 100%; height: 140px; background: var(--pw-inset); border: 1px solid var(--pw-line); border-radius: 6px; }
.pw-body .pw-graph rect { fill: var(--pw-cyan); opacity: .8; }
.pw-body .pw-graph.yellow rect { fill: var(--pw-yellow); }
.pw-body .pw-graph rect.low { fill: var(--pw-purple); opacity: 1; }
.pw-body .pw-graph rect.pit { fill: var(--pw-muted); opacity: .4; }

/* Map */
.pw-body .pw-map-box { background: radial-gradient(ellipse at center, #111726, #090c14); border: 1px solid var(--pw-line); border-radius: 6px; padding: 10px; }
.pw-body .pw-map { display: block; width: 100%; height: var(--fit, calc(100vh - 290px)); min-height: 240px; }
.pw-body .pw-map .road { fill: none; stroke: #2a3348; stroke-width: 16; stroke-linejoin: round; stroke-linecap: round; }
.pw-body .pw-map .line { fill: none; stroke: #4a5675; stroke-width: 2; stroke-dasharray: 6 6; }
.pw-body .pw-map circle { stroke: #0a0c10; stroke-width: 3; }
.pw-body .pw-map text { font-family: var(--pw-mono); font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; pointer-events: none; }
.pw-body .pw-map .us circle { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 8px var(--pw-cyan)); }
.pw-body .pw-map .us text { fill: #04121a; font-size: 13px; }
.pw-body .pw-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-left: auto; font-size: 13px; font-weight: 600; color: var(--pw-text2); }
.pw-body .pw-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.pw-body .pw-legend i.us { background: var(--pw-cyan); box-shadow: 0 0 6px var(--pw-cyan); }
.pw-body .pw-map-card .pw-card-head h2 { margin-right: 4px; }

/* Nobody on track, errors */
.pw-body .pw-empty { max-width: 620px; margin: 8vh auto 0; text-align: center; }
.pw-body .pw-empty h1 { font-size: 24px; }
.pw-body .pw-empty p { color: var(--pw-text2); line-height: 1.5; }
.pw-body .pw-button { display: inline-block; margin-top: 10px; padding: 10px 16px; border-radius: 6px; background: var(--pw-cyan); color: #04121a; font-weight: 700; text-decoration: none; }

@media (max-width: 1300px) {
  .pw-body .pw-chrono-grid { grid-template-columns: 1fr 1fr; }
  .pw-body .pw-chrono-grid > :first-child { grid-column: 1 / -1; }
  .pw-body .pw-car-bottom { grid-template-columns: 1fr; }
  .pw-body .pw-cockpit { grid-template-columns: auto minmax(0, 1fr); }
  .pw-body .pw-pitstate { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .pw-body .pw-tabs button { flex-direction: column; gap: 4px; font-size: 14px; }
}
@media (max-width: 900px) {
  .pw-body .pw-opt2 { display: none; }
  .pw-body .pw-app { padding: 12px max(16px, env(safe-area-inset-right)) 30px max(16px, env(safe-area-inset-left)); gap: 12px; }
  .pw-body .pw-chrono-grid, .pw-body .pw-car-top, .pw-body .pw-tele-live { grid-template-columns: 1fr; }
  .pw-body .pw-tabs kbd { display: none; }
}
@media (max-width: 640px) {
  .pw-body .pw-long { display: none; }
  .pw-body .pw-short { display: inline; }
  .pw-body .pw-opt { display: none; }
  .pw-body .pw-card { padding: 14px; }
  .pw-body .pw-top { padding: 10px 14px; }
  .pw-body .pw-brand b { font-size: 18px; }
  .pw-body .pw-session { order: 3; width: 100%; justify-content: space-between; }
  .pw-body .pw-icon, .pw-body .pw-hz { display: none; }
  .pw-body .pw-driver { gap: 10px 14px; padding: 12px 14px; }
  .pw-body .pw-carnum { font-size: 22px; padding: 4px 10px; }
  .pw-body .pw-who b { font-size: 18px; }
  .pw-body .pw-facts { width: 100%; justify-content: space-between; }
  .pw-body .pw-facts b { font-size: 18px; }
  .pw-body .pw-track { font-size: 14px; padding: 6px 12px; }
  .pw-body .pw-tabs { gap: 2px; padding: 4px; }
  .pw-body .pw-tabs button { min-height: 54px; padding: 6px 2px; font-size: 11px; letter-spacing: 0; }
  .pw-body .pw-tab-icon { font-size: 18px; }
  .pw-body .pw-seg { width: 100%; }
  .pw-body .pw-seg button { flex: 1; padding: 7px 4px; font-size: 12px; }
  .pw-body .pw-table table { font-size: 13px; }
  .pw-body .pw-table td { padding: 9px 6px; }
  .pw-body .pw-table th { padding: 4px 6px 6px; font-size: 11px; }
  .pw-body .pw-name { max-width: 110px; }
  .pw-body .pw-chip.stop { display: none; }
  .pw-body .pw-row3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pw-body .pw-wheel .pw-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-body .pw-hero { grid-template-columns: 1fr; }
  .pw-body .pw-hero .pw-lapno > b { font-size: 32px; }
  .pw-body .pw-hero .pw-live > b { font-size: 40px; }
  .pw-body .pw-sector { grid-template-columns: 34px repeat(4, minmax(0, 1fr)); gap: 4px; padding: 10px 8px; }
  .pw-body .pw-sector b { font-size: 13px; }
  .pw-body .pw-sector-head span { font-size: 10px; }
  .pw-body .pw-cockpit { grid-template-columns: 1fr; justify-items: center; }
  .pw-body .pw-gear { font-size: 72px; }
  .pw-body .pw-speed { font-size: 54px; }
  .pw-body .pw-pitstate { width: 100%; }
  .pw-body .pw-settings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pw-body .pw-set b { font-size: 20px; }
  .pw-body .pw-row2.pw-tanks, .pw-body .pw-wheels { grid-template-columns: 1fr; }
  .pw-body .pw-box > b { font-size: 18px; }
  .pw-body .pw-curve-now { margin-left: 0; width: 100%; }
}


/* styles/ux-refresh.css */
/*
 * Navigation et lisibilité des pages simulateur (LMU / iRacing).
 * Chargée en dernier : elle remplace la barre reconstruite en JavaScript
 * (ancien desktop-home-toolbar.mjs) par une seule structure, identique sur
 * ordinateur et mobile, disposée en CSS grid.
 */

/* ---------- Barre de navigation ---------- */
.site-nav-shell {
  display: grid !important;
  grid-template-columns: auto auto auto 1fr auto !important;
  grid-template-areas: "lang switch sections community account" !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin: 10px 18px 6px !important;
  padding: 8px 12px !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

.site-nav-shell > .game-space-bar {
  grid-area: lang;
  display: flex !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
.site-nav-shell .game-space-bar > #game-context-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.site-nav-shell > #navigation {
  display: contents !important;
}
.site-nav-shell > .account-bar {
  grid-area: account;
  justify-self: end;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

/* Sélecteur de simulateur : un seul contrôle segmenté, juste après l'onglet Endurance. */
.site-nav-shell #navigation .nav-game-switcher {
  display: inline-flex !important;
  gap: 0 !important;
  padding: 3px !important;
  margin: 0 !important;
  width: auto !important;
  align-self: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  background: rgba(0, 0, 0, .25);
}
.site-nav-shell #navigation .nav-game-switcher[hidden] { display: none !important; }
/* Pages fixes (aide, administration…) : le sélecteur reste devant les onglets. */
.site-nav-shell #navigation > .nav-game-switcher { grid-area: switch; }
.site-nav-shell #navigation .nav-game-switcher-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 36px !important;
  height: auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 0 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 7px !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #c7d0d4 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  white-space: nowrap;
}
.site-nav-shell #navigation .nav-game-switcher-button[aria-current="page"] {
  color: #fff !important;
  background: var(--game-accent, #d8322c) !important;
}
html[data-game="iracing"] { --game-accent: #2f6fd6; }
html[data-game="lmu"] { --game-accent: #d8322c; }
/* Pages communes (accueil, membres, aide) : chaque simulateur garde sa couleur au survol. */
.site-nav-shell .nav-game-switcher-lmu:hover { color: #fff !important; background: rgba(216, 50, 44, .35) !important; }
.site-nav-shell .nav-game-switcher-iracing:hover { color: #fff !important; background: rgba(47, 111, 214, .35) !important; }
.site-nav-shell #navigation .nav-section-button { display: inline-flex; align-items: center; text-decoration: none; }
.site-nav-shell #navigation .nav-section-button[hidden] { display: none; }
.site-nav-shell .nav-short { display: none; }

/* Onglets Événements / Mes inscriptions. */
.site-nav-shell #navigation > .nav-sections {
  grid-area: sections;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.site-nav-shell #navigation .nav-section-button {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #c7d0d4;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.site-nav-shell #navigation .nav-section-button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.site-nav-shell #navigation .nav-section-button[aria-current="page"] {
  color: #fff;
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .09);
}

/* Compte : la phrase de confiance et « Aide » restent sur l'accueil et dans le pied de page. */
html[data-game] .site-nav-shell .account-oauth-trust,
html[data-game] .site-nav-shell .account-help-link { display: none !important; }
.site-nav-shell .account-disconnected-wrap,
.site-nav-shell .account-disconnected-actions { margin: 0 !important; gap: 0 !important; }
.site-nav-shell .account-discord-login { min-height: 36px !important; padding: 0 14px !important; }
.account-discord-login .login-short { display: none; }
/* Le bouton de compte garde sa largeur naturelle (les anciennes règles mobiles le mettaient à 100 %
   d'une colonne qui se réduisait, ce qui coupait l'avatar). */
.site-nav-shell .account-bar,
.site-nav-shell .account-menu-root,
.site-nav-shell .account-menu,
.site-nav-shell .account-trigger { width: auto !important; max-width: none !important; min-width: max-content !important; }
.site-nav-shell .account-bar:has(.account-menu) .account-menu-root,
.site-nav-shell .account-bar:has(.account-menu) .account-menu { width: auto !important; }
.site-nav-shell .account-trigger { flex: none !important; }
/* Le compte est à droite de la barre : son menu s'ouvre vers la gauche. */
.site-nav-shell .account-popover {
  left: auto !important;
  right: 0 !important;
  max-width: calc(100vw - 20px) !important;
}

/* ---------- En-tête de la liste des événements ---------- */
html[data-game] .page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 12px;
}
html[data-game] .page-head > .page-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
html[data-game] .page-head .event-filter { margin: 0 !important; }
html[data-game] .page-head .home-create-event { margin: 0 0 0 auto !important; }

/* ---------- Cartes de course ---------- */


.event-schedule-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border: 1px dashed rgba(243, 179, 61, .75);
  border-radius: 999px;
  color: #f3b33d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Formulaire d'événement : case « Horaires à confirmer ». */
.event-schedule-option {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}
.event-schedule-option input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.event-schedule-option span { display: grid; gap: 2px; }
.event-schedule-option small { opacity: .75; font-weight: 400; }

/* ---------- Écrans intermédiaires ---------- */
@media (max-width: 1100px) {
  .site-nav-shell .nav-full { display: none; }
  .site-nav-shell .nav-short { display: inline; }
  .site-nav-shell .account-discord-login .login-long { display: none; }
  .site-nav-shell .account-discord-login .login-short { display: inline; }
}

/* ---------- Tablette et mobile : deux lignes ---------- */
@media (max-width: 900px) {
  .site-nav-shell {
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "lang switch account"
      "sections sections sections"
      "community community community" !important;
    margin: 8px 10px 4px !important;
    padding: 8px !important;
  }
  .site-nav-shell #navigation > .nav-sections { flex-wrap: wrap; }
  /* Mobile : le choix du simulateur passe sur sa propre ligne, sous les onglets. */
  .site-nav-shell #navigation > .nav-game-switcher { justify-self: stretch; }
  .site-nav-shell #navigation .nav-sections .nav-game-switcher { order: 10; flex: 1 0 100%; }
  .site-nav-shell #navigation .nav-game-switcher-button { flex: 1; padding: 0 10px !important; }
  .site-nav-shell #navigation > .nav-sections > .nav-section-button { flex: 1; }
}
@media (max-width: 760px) {
  .site-nav-shell .account-trigger-copy,
  .site-nav-shell .account-chevron { display: none !important; }
  html[data-game] #app { padding-left: 10px !important; padding-right: 10px !important; }
  html[data-game] .page-head .event-filter { flex: 1; }
}

/* Formulaire d'inscription : le titre précis remplace « Inscriptions » dans l'en-tête ; pas de doublon. */
.fold-registration .registration-form > .form-title { display: none; }

/* ---------- Inscription en étapes : panneau par-dessus la course ---------- */
body:has(.fold-registration:not([hidden])) { overflow: hidden; }
.departure-fold .fold-registration:not([hidden]) {
  position: fixed !important;
  inset: 0;
  z-index: 1200;
  margin: 0 !important;
  padding: 24px !important;
  width: auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 8, 10, .72);
  border: 0 !important;
}
.registration-sheet {
  width: 100%;
  max-width: 620px;
  max-height: min(88vh, 860px);
  overflow-y: auto;
  overscroll-behavior: contain;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 0;
  border: 1px solid var(--border, #292d31);
  border-radius: 16px;
  background: var(--panel, #111315);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.registration-sheet .registration-workspace-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}
.registration-workspace-title { flex: 1; min-width: 0; }
.registration-workspace-title h2 { margin: 0; outline: none; }
.registration-workspace-title p { margin: 4px 0 0; color: var(--muted, #92979c); font-size: 14px; }
.registration-stepper { display: flex; flex-direction: column; gap: 12px; }
.registration-progress { display: flex; gap: 4px; }
.registration-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--panel3, #1d2023); }
.registration-progress span.done { background: #52d3d8; }
.registration-step-label { margin: -4px 0 0; color: var(--muted, #92979c); font-size: 13px; font-weight: 700; }
.registration-step[hidden] { display: none !important; }
.registration-step { display: flex; flex-direction: column; gap: 12px; }
.registration-step-help { margin: 0; color: var(--muted, #92979c); font-size: 13px; }

/* Étape 1 : grandes cartes de catégorie avec leur logo. */
.registration-category-list { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px !important; }
.registration-category-list .category-button {
  display: flex !important;
  align-items: center;
  gap: 12px;
  width: 100% !important;
  min-height: 60px;
  padding: 10px 14px !important;
  justify-content: flex-start !important;
  text-align: left;
}
.registration-category-copy { display: flex; flex-direction: column; gap: 2px; }
.registration-category-copy small { font-weight: 500; opacity: .75; }

/* Étape 4 : récapitulatif, chaque ligne ramène à son étape. */
.registration-summary { display: flex; flex-direction: column; border: 1px solid var(--border, #292d31); border-radius: 12px; overflow: hidden; }
.registration-summary-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px 14px;
  border: 0;
  border-bottom: 1px solid var(--border, #292d31);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.registration-summary-row:last-child { border-bottom: 0; }
.registration-summary-row:hover { background: rgba(255, 255, 255, .04); }
.registration-summary-row.is-static { cursor: default; }
.registration-summary-row.is-static:hover { background: transparent; }
.registration-summary-row > span { color: var(--muted, #92979c); font-size: 13px; }
.registration-summary-row > strong { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.registration-summary-row > strong .category-logo { width: 28px; height: auto; }
.registration-summary-row > em { font-style: normal; font-size: 13px; font-weight: 700; color: #52d3d8; }
.registration-danger-zone { display: flex; justify-content: flex-start; }

.registration-step-nav {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin: 4px -20px 0;
  padding: 12px 20px 16px;
  border-top: 1px solid var(--border, #292d31);
  background: var(--panel, #111315);
}
.registration-step-nav .registration-next { flex: 1; min-height: 48px; margin: 0 !important; width: auto !important; }
.registration-step-nav .registration-back { min-height: 48px; }

/* Lisibilité des fenêtres par étapes (inscription, autre pilote) : d'anciennes règles réduisaient
   certains textes à 8-10 px (boutons de catégorie, « Toute la course », Départ / Arrivée). */
.registration-sheet { max-width: 680px; }
.registration-sheet .registration-step-label { font-size: 14px; }
.registration-sheet .form-label { font-size: 15px !important; }
.registration-sheet .registration-step-help,
.registration-sheet .availability-hint,
.registration-sheet .car-preference-help { font-size: 14px !important; }
.registration-sheet .registration-category-list .category-button { font-size: 16px !important; font-weight: 800 !important; min-height: 64px; }
.registration-sheet .registration-category-list .category-button strong { font-size: 16px !important; }
.registration-sheet .registration-category-list .category-button small { font-size: 13px !important; }
.registration-sheet .registration-category-list .category-logo { width: 40px !important; height: auto !important; flex: none; }
.registration-sheet .car-preference-panel label,
.registration-sheet .car-preference-panel label span { font-size: 15px !important; }
.registration-sheet .presence-time { font-size: 13px !important; }
.registration-sheet .presence-edges span { font-size: 12px !important; }
.registration-sheet .special-button { min-height: 44px !important; font-size: 14px !important; letter-spacing: .04em; }
.registration-sheet .registration-summary-row > span,
.registration-sheet .registration-summary-row > em { font-size: 14px; }

@media (max-width: 760px) {
  .departure-fold .fold-registration:not([hidden]) { align-items: flex-end; padding: 0 !important; }
  .registration-sheet { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 14px 14px 0; }
  .registration-step-nav { margin: 4px -14px 0; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); }
  .registration-sheet .registration-workspace-head { flex-wrap: nowrap; }
  .registration-workspace-title h2 { font-size: 22px; }
  .registration-workspace-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .registration-workspace-actions .secondary-button { min-height: 40px !important; width: auto !important; padding: 0 12px !important; white-space: nowrap; }
}

/* ---------- Liste des courses : situation du pilote et remplissage ---------- */
.event-situation {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  max-width: 100%;
  line-height: 1.35;
  border: 1px solid rgba(49, 184, 107, .7);
  background: rgba(49, 184, 107, .14);
  color: #8ff0b6;
}
.event-situation.is-registered { border-color: rgba(82, 211, 216, .6); background: rgba(82, 211, 216, .1); color: #9eeef2; }
html[data-game] .event-card .event-category-badges { display: flex !important; flex-wrap: wrap; gap: 6px; }

/* ---------- Page de course plus aérée : tailles de texte lisibles, espaces réguliers ---------- */
html[data-game] #app .departure-accordion { display: flex; flex-direction: column; gap: 14px !important; }
html[data-game] #app .departure-fold > summary { padding: 14px 18px !important; gap: 14px !important; }
html[data-game] #app .departure-fold .ux-summary-registration-actions > button { font-size: 13px !important; min-height: 40px !important; }
html[data-game] #app .departure-fold .fold-meta { font-size: 14px !important; }
html[data-game] #app .departure-fold-body { padding: 4px 18px 20px !important; }
html[data-game] #app .departure-participation-section { padding: 16px 18px 18px !important; }
html[data-game] #app .departure-participation-section > * + * { margin-top: 14px; }

/* Cartes d'équipage. */
html[data-game] #app .crew-unified-card { margin-bottom: 10px !important; }
html[data-game] #app .crew-unified-card > summary { padding: 12px 14px !important; gap: 12px !important; min-height: 56px; }
html[data-game] #app .crew-unified-card strong { font-size: 16px !important; }
html[data-game] #app .crew-compact-pilots,
html[data-game] #app .crew-compact-car { font-size: 13.5px !important; }
html[data-game] #app .crew-owner-badge,
html[data-game] #app .crew-compact-status { font-size: 11px !important; padding: 3px 8px !important; }
html[data-game] #app .coverage-summary { font-size: 12.5px !important; }
html[data-game] #app .crew-unified-card button,
html[data-game] #app .crew-unified-card select { font-size: 13px !important; min-height: 36px !important; }
html[data-game] #app .pilot-row { padding-top: 10px !important; padding-bottom: 10px !important; }
html[data-game] #app .pilot-name { font-size: 15px !important; }
html[data-game] #app .pilot-car,
html[data-game] #app .pilot-preference { font-size: 13px !important; }
@media (min-width: 761px) {
  html[data-game] #app .departure-fold > summary > .ux-summary-registration-actions {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    grid-template-columns: repeat(3, auto) !important;
  }
  html[data-game] #app .departure-fold .ux-summary-registration-actions > button { white-space: nowrap; padding: 0 14px !important; }
}

/* =====================================================================
   Lisibilité des équipages
   - tuiles compactes, 2 à 3 par ligne, qui s'élargissent quand on les ouvre ;
   - un seul niveau de cadre (le départ) : l'intérieur se lit en lignes ;
   - la couleur d'un équipage sert à le reconnaître (même couleur partout),
     « Ton équipage » est écrit, et l'orange ne signale que « Places libres ».
   ===================================================================== */

/* Page de course : grille de tuiles. */
html[data-game] #app .ux-course-crews-block { border: 0 !important; background: none !important; padding: 0 !important; box-shadow: none !important; }
html[data-game] #app .ux-course-crews-body {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
  align-items: start;
}
html[data-game] #app .ux-course-crews-body > .empty { grid-column: 1 / -1; }
html[data-game] #app .crew-card-shell { margin: 0 !important; border-left-width: 1px !important; border-top: 3px solid var(--crew-color) !important; box-shadow: none !important; }
html[data-game] #app .crew-card-shell:has(> details[open]) { grid-column: 1 / -1; }
html[data-game] #app .crew-card-shell.is-mine { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }

html[data-game] #app .crew-tile-summary {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
html[data-game] #app .crew-tile-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
html[data-game] #app .crew-tile-head .crew-compact-team { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html[data-game] #app .crew-tile-head .crew-compact-team strong { color: var(--crew-color); font-size: 17px !important; }
html[data-game] #app .crew-tile-head .crew-compact-category .category-logo { width: 34px; height: auto; }
html[data-game] #app .crew-card-shell details[open] .crew-compact-chevron { transform: rotate(90deg); }
html[data-game] #app .crew-tile-summary .crew-compact-pilots {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  color: #e6ecea !important;
  white-space: normal !important;
  text-align: left !important;
}
html[data-game] #app .crew-tile-summary .crew-compact-pilots .is-empty { color: var(--muted, #92979c); font-style: italic; }
html[data-game] #app .crew-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
html[data-game] #app .crew-tile-foot .crew-compact-car { color: var(--muted, #92979c) !important; font-size: 13px !important; font-weight: 400 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* « Ton équipage » and « Responsable » side by side, on one line under the crew's name. */
.crew-tile-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -2px; }
html[data-game] #app .crew-tile-badges .crew-owner-badge { margin: 0 !important; }
.crew-mine-badge {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f2f5f4;
  color: #0b0d0e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
}
html[data-game] #app .crew-owner-badge { text-transform: none !important; letter-spacing: 0 !important; font-weight: 700 !important; }

/* État : « Places libres » en orange (à compléter), « Complet » en gris neutre. */
.crew-compact-status { text-transform: none !important; letter-spacing: 0 !important; }
.crew-compact-status.is-open { color: #f3b33d !important; border-color: rgba(243, 179, 61, .6) !important; background: rgba(243, 179, 61, .1) !important; }
.crew-compact-status.is-complete { color: #b7bfbc !important; border-color: #3e4649 !important; background: transparent !important; }

/* Intérieur d'une tuile ouverte : des lignes, plus de cartes dans les cartes. */
html[data-game] #app .crew-unified-body { padding: 4px 14px 12px !important; border: 0 !important; background: none !important; }
html[data-game] #app .crew-unified-body .pilot-row,
html[data-game] #app .ux-unassigned-grid .pilot-row {
  border: 0 !important;
  border-top: 1px solid var(--border, #292d31) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}
html[data-game] #app .crew-inline-management { border: 0 !important; background: none !important; padding: 6px 0 !important; }
html[data-game] #app .ux-course-pilots-accordion { border: 0 !important; border-top: 1px solid var(--border, #292d31) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; margin-top: 14px; }
html[data-game] #app .ux-course-pilots-accordion > summary { padding-left: 2px !important; padding-right: 2px !important; }

/* Actions d'une tuile : Rejoindre en bouton, Quitter / Gérer en liens, Supprimer isolé en rouge. */
html[data-game] #app .crew-self-actions {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px !important;
  padding: 8px 14px 10px !important;
  border-top: 1px solid var(--border, #292d31);
  background: none !important;
}
.link-button {
  min-height: 32px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: #cfe9ec;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(207, 233, 236, .35);
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-button:hover { color: #ffffff; text-decoration-color: currentColor; }
.danger-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: none;
  color: #ff8a8a;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.danger-link:hover { border-color: rgba(255, 119, 119, .5); background: rgba(255, 119, 119, .08); }

/* Départ : un seul bouton principal, le reste en liens. */
html[data-game] #app .departure-fold .ux-summary-registration-actions > .link-button {
  min-height: 40px !important;
  width: auto !important;
  padding: 0 6px !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #cfe9ec !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-transform: none !important;
}
html[data-game] #app .departure-fold .ux-summary-registration-actions > .link-button:hover { color: #ffffff !important; }
@media (max-width: 760px) {
  html[data-game] #app .departure-fold .ux-summary-registration-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    gap: 4px 14px !important;
  }
  html[data-game] #app .departure-fold .ux-summary-registration-actions > .primary-button { flex: 1 1 100% !important; }
}

/* En-tête de course : les chiffres sur une ligne. */
html[data-game] #app p.event-header-stats {
  display: block !important;
  margin: 0 !important;
  color: #c7d0d4;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 760px) { html[data-game] #app p.event-header-stats { white-space: normal; } }

/* Liste des courses : équipages en tuiles. */
html[data-game] .event-card .crew-summary-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)) !important;
  gap: 8px !important;
}
html[data-game] .event-card .crew-summary-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--border, #292d31) !important;
  border-top: 3px solid var(--crew-color) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .02) !important;
  min-width: 0;
}
html[data-game] .event-card .crew-summary-card.is-mine { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
html[data-game] .event-card .crew-summary-card .crew-summary-icon { display: none !important; }
html[data-game] .event-card .crew-summary-title strong { color: var(--crew-color) !important; font-size: 15px; }
html[data-game] .event-card .crew-summary-pilots {
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  margin: 0 !important;
  text-align: left !important;
  font-size: 13.5px;
  font-weight: 400 !important;
  color: #e6ecea;
}

/* Moins de gras : le gras reste pour les titres et les noms. */
html[data-game] #app .fold-meta,
html[data-game] #app .coverage-summary,
html[data-game] #app .pilot-car,
html[data-game] #app .pilot-preference,
html[data-game] #app .ux-departure-date,
html[data-game] #app .event-category-copy small,
html[data-game] #app .event-period-heading small { font-weight: 400 !important; }

/* « Peu importe la voiture » : même bordure que les autres choix. */
.car-any-option { border-style: solid !important; }
html[data-game] #app .crew-self-actions > .link-button {
  min-height: 32px !important;
  width: auto !important;
  padding: 0 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #cfe9ec !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
}
html[data-game] #app .crew-self-actions > .link-button:hover { color: #ffffff !important; }
html[data-game] #app .crew-self-actions > .danger-link { width: auto !important; box-shadow: none !important; font-size: 13px !important; }
/* Le départ est le seul cadre : la zone Équipages / pilotes n'en ajoute pas un second. */
html[data-game] #app .departure-participation-section { border: 0 !important; background: none !important; box-shadow: none !important; padding: 8px 0 0 !important; }
html[data-game] #app .crew-self-actions > .danger-link { margin-left: auto !important; }

/* Tuiles d'équipage : 4 par ligne au maximum, toutes de la même hauteur (la tienne comprise). */
html[data-game] #app .ux-course-crews-body {
  grid-template-columns: repeat(auto-fill, minmax(max(240px, calc((100% - 30px) / 4)), 1fr)) !important;
  align-items: stretch !important;
}
html[data-game] #app .crew-card-shell { grid-template-rows: 1fr auto; }
html[data-game] #app .crew-card-shell > details { height: 100%; }
html[data-game] #app .crew-card-shell.is-mine,
html[data-game] .event-card .crew-summary-card.is-mine { outline: 2px solid rgba(255, 255, 255, .5) !important; outline-offset: -2px !important; }
html[data-game] .event-card .crew-summary-list {
  grid-template-columns: repeat(auto-fill, minmax(max(220px, calc((100% - 24px) / 4)), 1fr)) !important;
  align-items: stretch !important;
}
html[data-game] #app .crew-card-shell > details:not([open]) { display: flex !important; flex-direction: column; }
html[data-game] #app .crew-card-shell > details:not([open]) > .crew-tile-summary { flex: 1; }
html[data-game] #app .crew-tile-foot { margin-top: auto; }

/* ---------- Fenêtres en étapes : équipage et événement ---------- */
body:has([data-crew-builder-overlay]) { overflow: hidden; }
.crew-builder-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 8, 10, .72);
}
.crew-builder-overlay .crew-builder-panel { margin: 0 !important; max-width: 680px; }
.crew-builder-step[hidden] { display: none !important; }
.crew-builder-step { display: flex; flex-direction: column; gap: 12px; }
.crew-builder-overlay .crew-builder-fields { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.crew-builder-overlay .crew-builder-fields label { display: grid; gap: 6px; font-weight: 600; }
.crew-builder-fields .category-area { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.crew-builder-overlay .crew-builder-fields .car-preference-option { display: flex; align-items: center; gap: 9px; }
.crew-builder-fields .car-preference-option input { width: 17px; min-width: 17px; max-width: 17px; }
.crew-builder-overlay .crew-builder-pilots { display: grid; gap: 8px; }
@media (max-width: 760px) {
  .crew-builder-overlay { align-items: flex-end; padding: 0; }
  .crew-builder-overlay .crew-builder-panel { max-width: none; max-height: 92vh; border-radius: 18px 18px 0 0; padding: 14px 14px 0; }
}

.event-stepper .event-step[hidden] { display: none !important; }
.event-stepper .registration-step-nav { margin: 8px 0 0; padding: 14px 0; background: var(--bg, #090a0b); }
.event-stepper .registration-summary-row .category-logo { width: 26px; height: auto; vertical-align: middle; }
.registration-summary-row > strong { display: flex !important; flex-wrap: wrap; gap: 4px 8px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .registration-summary-row { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .registration-summary-row > strong { font-size: 14px; }
}

/* ---------- Équipage ouvert : deux colonnes, heures lisibles ---------- */
@media (min-width: 900px) {
  html[data-game] #app .crew-card-shell:has(> details[open]) { grid-column: span 2 !important; }
}
@media (max-width: 899px) {
  html[data-game] #app .crew-card-shell:has(> details[open]) { grid-column: 1 / -1 !important; }
}
html[data-game] #app .ux-course-crews-body:has(details[open]) { align-items: start !important; }
/* Tuiles fermées : même hauteur (place pour trois pilotes), même quand une autre est ouverte. */
html[data-game] #app .crew-tile-summary .crew-compact-pilots { min-height: calc(3 * 1.45em); }
html[data-game] #app .crew-card-shell > details[open] .crew-tile-summary .crew-compact-pilots { display: none !important; }

html[data-game] #app .crew-unified-body { display: flex !important; flex-direction: column; gap: 6px; padding: 2px 16px 12px !important; }
html[data-game] #app .crew-unified-body .crew-inline-management { display: flex !important; align-items: center; gap: 8px; padding: 4px 0 !important; font-size: 13px; }
html[data-game] #app .crew-unified-body .crew-inline-management .coverage-summary { display: none !important; }
html[data-game] #app .crew-unified-body .crew-state-select { min-height: 32px !important; padding: 0 26px 0 10px !important; font-size: 13px !important; }

/* Une ligne par pilote : nom, puis sa frise avec les heures. */
html[data-game] #app .crew-unified-body .pilot-row { display: grid !important; gap: 4px !important; padding: 8px 0 !important; grid-template-columns: minmax(0, 1fr) !important; }
html[data-game] #app .crew-unified-body .pilot-main { display: flex !important; align-items: center; gap: 6px; min-width: 0; }
html[data-game] #app .crew-unified-body .pilot-name { font-size: 14.5px !important; color: #e6ecea !important; }
html[data-game] #app .crew-unified-body .pilot-category-logo { display: none !important; }
html[data-game] #app .crew-unified-body .presence-timeline { margin: 0 !important; }
html[data-game] #app .crew-unified-body .presence-edges { display: none !important; }
html[data-game] #app .crew-unified-body .presence-track { height: 14px !important; min-height: 0 !important; border-radius: 4px !important; }
html[data-game] #app .crew-unified-body .presence-timeline:not(.is-coverage) .presence-segment { min-height: 0 !important; height: 14px !important; font-size: 0 !important; }
html[data-game] #app .crew-unified-body .presence-timeline.is-coverage .presence-track,
html[data-game] #app .crew-unified-body .presence-timeline.is-coverage .presence-segment { height: 22px !important; min-height: 0 !important; font-size: 11px !important; }

/* =====================================================================
   Carte de course dans la liste : trois zones côte à côte
   course (nom en valeur) | équipages | circuit
   ===================================================================== */


/* Le nom de la course en valeur. */

html[data-game] .event-card .event-name {
  font-size: 26px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  color: #f4f6f5 !important;
}

/* Équipages : un petit titre, puis les tuiles. */


@media (max-width: 900px) {
  html[data-game] .event-card .event-name { font-size: 22px !important; }
}
/* L'ancienne carte réservait 292 px à droite pour le circuit : il fait maintenant partie de la grille. */
html[data-game] .event-card.event-card-harmonized { padding: 0 !important; min-height: 0 !important; }
/* Les équipages ne figurent plus dans la liste : la course, puis le circuit. */


/* =====================================================================
   Carte de course (liste) : quand, quoi, ta situation, remplissage.
   Deux cartes par ligne sur ordinateur (trois sur très grand écran).
   ===================================================================== */
html[data-game] .event-list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(max(440px, calc((100% - 16px) / 2)), 1fr)) !important;
  gap: 16px !important;
  align-items: stretch;
}
html[data-game] .event-card.race-card { padding: 0 !important; min-height: 0 !important; margin: 0 !important; height: 100%; text-align: left; }
html[data-game] .race-card .race-card-body {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 16px 18px !important;
  height: 100%;
  box-sizing: border-box;
}
html[data-game] .race-card .race-card-top { display: flex; align-items: flex-start; gap: 14px; }
html[data-game] .race-card .race-date {
  width: 62px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  line-height: 1.15;
}
html[data-game] .race-card .race-date small { font-size: 12px; color: #aab3b6; text-transform: lowercase; }
html[data-game] .race-card .race-date strong { font-size: 26px; font-weight: 800; color: #f4f6f5; }
html[data-game] .race-card .race-date b { margin-top: 4px; font-size: 14px; color: #7fe3ea; }
html[data-game] .race-card .race-date.is-unknown small { text-align: center; font-size: 11px; padding: 0 4px; }
html[data-game] .race-card .race-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
html[data-game] .race-card .event-name { font-size: 22px !important; line-height: 1.15 !important; font-weight: 800 !important; color: #f4f6f5 !important; }
html[data-game] .race-card .race-meta { font-size: 14px; color: #c7d0d4; }
html[data-game] .race-card .race-head .event-type-badge { font-size: 10.5px !important; padding: 2px 8px !important; margin-top: 2px; }
html[data-game] .race-card .race-card-top > .circuit-visual {
  position: static !important;
  flex: none;
  width: 150px !important;
  height: 112px !important;
  margin: 0 !important;
  opacity: .85;
  transform: none !important;
}
html[data-game] .race-card .race-card-top > .circuit-visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }

/* Horaires par jour. */
html[data-game] .race-card .race-starts { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-game] .race-card .race-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-game] .race-card .race-day em { width: 64px; font-style: normal; font-size: 13px; color: #aab3b6; }
html[data-game] .race-card .race-start {
  min-width: 42px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #e6ecea;
}
html[data-game] .race-card .race-more { font-size: 13px; color: #aab3b6; }

/* Ta situation, puis le remplissage. */
html[data-game] .race-card .race-situation { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-game] .race-card .race-situation .event-schedule-badge { margin: 0; }
html[data-game] .race-card .race-fill { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; }
html[data-game] .race-card .race-fill .event-category-badges { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; }
html[data-game] .race-card .event-card-status { display: none !important; }

@media (max-width: 600px) {
  html[data-game] .event-list { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-game] .race-card .race-card-body { padding: 14px !important; }
  html[data-game] .race-card .race-card-top > .circuit-visual { width: 88px !important; height: 68px !important; }
  html[data-game] .race-card .event-name { font-size: 19px !important; }
  html[data-game] .race-card .race-day em { width: 56px; }
}

/* Création d'événement : calendrier visible, heure en deux listes. */
.event-creation input[type="date"] { color-scheme: dark; cursor: pointer; }
.event-creation input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; }
.event-creation .time-picker { display: grid; gap: 6px; }
.event-creation .time-picker-row { display: flex; align-items: center; gap: 6px; }
.event-creation .time-picker-row select { flex: 1; min-width: 0; color-scheme: dark; }
.event-creation .departure-field { grid-template-columns: minmax(0, 1fr) minmax(190px, 220px) auto !important; align-items: end; }
.event-creation .time-picker-row select { min-width: 84px !important; width: auto !important; padding-right: 26px !important; }
@media (max-width: 600px) {
  .event-creation .departure-field { grid-template-columns: minmax(0, 1fr) auto !important; }
  .event-creation .departure-field > .time-picker { grid-column: 1 / 2; grid-row: 2; }
}

/* =====================================================================
   Page de course : même logique que la carte de la liste, en plus grand.
   ===================================================================== */
html[data-game] #app .race-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 20px 22px !important;
  min-height: 0 !important;
}
html[data-game] #app .race-header .race-card-top { display: flex; align-items: flex-start; gap: 18px; }
html[data-game] #app .race-header .race-date {
  width: 76px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 8px 0 10px;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; background: rgba(255, 255, 255, .03); line-height: 1.15;
}
html[data-game] #app .race-header .race-date small { font-size: 13px; color: #aab3b6; }
html[data-game] #app .race-header .race-date strong { font-size: 32px; font-weight: 800; color: #f4f6f5; }
html[data-game] #app .race-header .race-date b { margin-top: 4px; font-size: 16px; color: #7fe3ea; }
html[data-game] #app .race-header .race-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
html[data-game] #app .race-header .event-title { margin: 0 !important; font-size: 34px !important; line-height: 1.08 !important; }
html[data-game] #app .race-header .race-meta { font-size: 16px; color: #c7d0d4; }
html[data-game] #app .race-header .race-badges { display: flex; flex-wrap: wrap; gap: 6px; }
html[data-game] #app .race-header .event-header-countdown {
  margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
  font-size: 14px !important; color: #aab3b6 !important;
}
html[data-game] #app .race-header .event-header-countdown strong { color: #7fe0a8; }
html[data-game] #app .race-header .race-card-top > .circuit-visual {
  position: static !important; flex: none; width: 220px !important; height: 150px !important; margin: 0 !important; transform: none !important;
}
html[data-game] #app .race-header .race-card-top > .circuit-visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }
html[data-game] #app .race-header .race-starts { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-game] #app .race-header .race-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-game] #app .race-header .race-day em { width: 70px; font-style: normal; font-size: 14px; color: #aab3b6; }
html[data-game] #app .race-header .race-start { min-width: 46px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 7px; text-align: center; font-size: 14px; font-weight: 600; color: #e6ecea; }
html[data-game] #app .race-header .event-header-stats { display: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; white-space: normal !important; }
@media (max-width: 760px) {
  html[data-game] #app .race-header { padding: 14px !important; }
  html[data-game] #app .race-header .race-card-top { gap: 12px; }
  html[data-game] #app .race-header .race-date { width: 62px; }
  html[data-game] #app .race-header .race-date strong { font-size: 26px; }
  html[data-game] #app .race-header .event-title { font-size: 24px !important; }
  html[data-game] #app .race-header .race-meta { font-size: 14px; }
  html[data-game] #app .race-header .race-card-top > .circuit-visual { width: 90px !important; height: 70px !important; }
  html[data-game] #app .race-header .race-day em { width: 56px; font-size: 13px; }
}

/* Départ où tu es inscrit : contour clair et étiquette dans sa ligne de titre. */
html[data-game] #app .departure-fold.is-mine { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px; }
.departure-mine-badge {
  display: inline-flex;
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(82, 211, 216, .6);
  background: rgba(82, 211, 216, .1);
  color: #9eeef2;
  font-size: 12.5px;
  font-weight: 800;
}
.departure-mine-badge.is-crew { border-color: rgba(49, 184, 107, .7); background: rgba(49, 184, 107, .14); color: #8ff0b6; }
html[data-game] #app .departure-fold .fold-date { display: flex !important; flex-direction: column; align-items: flex-start; }
html[data-game] #app .race-header .event-header-stats .event-category-badge {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  width: auto !important;
  min-width: 0 !important;
  text-align: left !important;
}
html[data-game] #app .race-header .event-header-stats .event-category-copy { display: flex !important; flex-direction: column; align-items: flex-start; }
html[data-game] #app .race-header .event-header-countdown { display: inline !important; }
html[data-game] #app .race-header .event-header-countdown strong { display: inline !important; margin: 0 0 0 4px !important; font-size: inherit !important; }
html[data-game] #app .race-header .event-header-countdown { text-align: left !important; width: auto !important; }

/* Carte plus basse : carré de date à la hauteur du bloc nom / circuit / type, circuit calé dessus. */
html[data-game] .race-card .race-card-body { gap: 10px !important; padding: 14px 16px !important; }
html[data-game] .race-card .race-card-top { align-items: stretch !important; gap: 14px; }
html[data-game] .race-card .race-date { justify-content: center; padding: 4px 0 !important; }
html[data-game] .race-card .race-head { justify-content: center; gap: 3px !important; }
html[data-game] .race-card .race-card-top > .circuit-visual { width: 130px !important; height: 78px !important; align-self: center; }
html[data-game] .race-card .race-starts { padding-top: 8px !important; gap: 4px !important; }
html[data-game] .race-card .race-fill { margin-top: 0 !important; }

html[data-game] #app .race-header .race-card-top { align-items: stretch !important; }
html[data-game] #app .race-header .race-date { justify-content: center; padding: 6px 0 !important; }
html[data-game] #app .race-header .race-head { justify-content: center; }
@media (max-width: 600px) {
  html[data-game] .race-card .race-card-top > .circuit-visual { width: 80px !important; height: 60px !important; }
}

/* Circuit en panneau à droite, sur toute la hauteur de la carte. */
html[data-game] .race-card .race-card-body { flex-direction: row !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; }
html[data-game] .race-card .race-card-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
html[data-game] .race-card .race-card-circuit {
  flex: none;
  width: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  box-sizing: border-box;
  background: none;
}
html[data-game] .race-card .race-card-circuit > .circuit-visual {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 110px;
  margin: 0 !important;
  opacity: .9;
  transform: none !important;
}
html[data-game] .race-card .race-card-circuit > .circuit-visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }
/* Mobile : le circuit passe en bandeau en haut de la carte. */
@media (max-width: 600px) {
  html[data-game] .race-card .race-card-body { flex-direction: column !important; }
  html[data-game] .race-card .race-card-circuit { order: -1; width: 100%; height: 96px; padding: 10px 12px 0; }
  html[data-game] .race-card .race-card-circuit > .circuit-visual { min-height: 0; height: 100% !important; }
  html[data-game] .race-card .race-card-content { padding: 10px 12px 12px; }
}


html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-0) .pilot-name { color: #8fb6c9 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-1) .pilot-name { color: #aa9fc2 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-2) .pilot-name { color: #91bca8 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-3) .pilot-name { color: #c3a08d !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-4) .pilot-name { color: #bd98a5 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-5) .pilot-name { color: #a8b996 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-6) .pilot-name { color: #8fb8b6 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-7) .pilot-name { color: #99a7c7 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-8) .pilot-name { color: #c5b887 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-9) .pilot-name { color: #b397b4 !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-10) .pilot-name { color: #c1a48c !important; }
html[data-game] #app .crew-planning-row:has(.pilot-timeline-tone-11) .pilot-name { color: #94adc3 !important; }

/* =====================================================================
   Équipage ouvert : la frise de chaque pilote, et un avertissement pour les heures sans pilote.
   ===================================================================== */
html[data-game] #app .crew-gap-warning {
  margin: 4px 0 2px;
  padding: 8px 12px;
  border: 1px solid rgba(227, 76, 76, .55);
  border-radius: 8px;
  background: rgba(227, 76, 76, .1);
  color: #ffb3b3;
  font-size: 13.5px;
  font-weight: 700;
}
html[data-game] #app .crew-pilot-lines { display: grid; gap: 2px; margin-top: 6px; }
html[data-game] #app .crew-pilot-line { display: grid !important; gap: 4px !important; padding: 6px 0 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; }
html[data-game] #app .crew-pilot-line .crew-planning-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
html[data-game] #app .crew-pilot-line .pilot-name { font-size: 14.5px; font-weight: 700; }
html[data-game] #app .crew-pilot-line .crew-planning-edit { min-height: 0 !important; margin-left: auto; font-size: 12.5px !important; padding: 0 !important; }
html[data-game] #app .crew-pilot-line .presence-timeline { margin: 0 !important; }
html[data-game] #app .crew-pilot-line .presence-edges { display: none !important; }
html[data-game] #app .crew-pilot-line .presence-track,
html[data-game] #app .crew-pilot-line .presence-segment { height: 12px !important; min-height: 0 !important; font-size: 0 !important; }

/* =====================================================================
   Mes inscriptions : même en-tête que la carte de course, frises d'équipage.
   ===================================================================== */
html[data-game] #app .my-entry-race > .native-my-entry-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  grid-template-columns: none !important;
  min-height: 0 !important;
}
html[data-game] #app .my-entry-race .race-card-top { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 14px; }
html[data-game] #app .my-entry-race .race-head { justify-content: center; gap: 4px; }
html[data-game] #app .my-entry-race .race-head h2.event-name { margin: 0 !important; }
html[data-game] #app .my-entry-race .race-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
html[data-game] #app .my-entry-race .race-badges .event-category-badge { padding: 2px 8px !important; font-size: 12px !important; }
html[data-game] #app .my-entry-race .race-badges .departure-mine-badge { margin-top: 0; }
html[data-game] #app .my-entry-race .race-card-top > .circuit-visual { position: static !important; width: 120px !important; height: 78px !important; margin: 0 !important; align-self: center; transform: none !important; }
html[data-game] #app .my-entry-race .race-card-top > .circuit-visual img { width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; }
html[data-game] #app .my-entry-race .native-my-entry-open-event { flex: none; width: auto !important; }
.departure-mine-badge.is-waiting { border-color: rgba(228, 195, 65, .7); background: rgba(228, 195, 65, .1); color: #f0d77a; }
html[data-game] #app .my-entry-race .ux-my-own-crew .crew-pilot-lines,
html[data-game] #app .my-entry-race .ux-my-awaiting-crew .crew-pilot-lines { margin-top: 8px; }
@media (max-width: 760px) {
  html[data-game] #app .my-entry-race > .native-my-entry-header { flex-wrap: wrap !important; }
  html[data-game] #app .my-entry-race .race-card-top > .circuit-visual { width: 72px !important; height: 56px !important; }
  html[data-game] #app .my-entry-race .native-my-entry-open-event { flex: 1 1 100%; }
}
@media (max-width: 760px) {
  html[data-game] #app .my-entry-race > .native-my-entry-header { position: relative; padding: 12px !important; }
  html[data-game] #app .my-entry-race .native-my-entry-toggle { position: absolute; top: 10px; right: 10px; }
  html[data-game] #app .my-entry-race .race-card-top { padding-right: 36px; gap: 12px; }
  html[data-game] #app .my-entry-race .race-card-top > .circuit-visual { display: none !important; }
  html[data-game] #app .my-entry-race .race-date { width: 56px; }
  html[data-game] #app .my-entry-race .race-head h2.event-name { font-size: 19px !important; }
}

/* Mes inscriptions dépliée : trois colonnes côte à côte, sans cadres dans les cadres. */
html[data-game] #app .my-entry-race .my-entry-columns {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
html[data-game] #app .my-entry-column { min-width: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
html[data-game] #app .my-entry-column + .my-entry-column { border-left: 1px solid rgba(255, 255, 255, .08); }
html[data-game] #app .my-entry-column-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: #f2f5f4; }
html[data-game] #app .my-entry-column-title span { min-width: 24px; padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); font-size: 12px; text-align: center; color: #c7d0d4; }
html[data-game] #app .my-entry-column .ux-my-own-crew,
html[data-game] #app .my-entry-column .ux-my-awaiting-crew,
html[data-game] #app .my-entry-column .ux-my-other-crew {
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
html[data-game] #app .my-entry-column .ux-my-own-crew-head { padding: 0 0 6px !important; border: 0 !important; background: none !important; }
html[data-game] #app .my-entry-column .ux-my-other-crews-grid { display: flex !important; flex-direction: column; gap: 0 !important; }
html[data-game] #app .my-entry-column .ux-my-other-crew { padding: 8px 0 !important; border-top: 1px solid rgba(255, 255, 255, .06) !important; }
html[data-game] #app .my-entry-column .ux-my-other-crew:first-child { border-top: 0 !important; }
html[data-game] #app .my-entry-column .ux-my-awaiting-copy { display: grid; gap: 2px; }
html[data-game] #app .my-entry-column .ux-my-awaiting-copy span { color: #aab3b6; font-size: 13px; }
html[data-game] #app .my-entry-column .crew-pilot-lines { margin-top: 0 !important; }
@media (max-width: 1000px) {
  html[data-game] #app .my-entry-race .my-entry-columns { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-game] #app .my-entry-column + .my-entry-column { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
}
html[data-game] #app .my-entry-column .crew-pilot-line { background: none !important; border-radius: 0 !important; box-shadow: none !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ---------- Dates : un seul bloc de date partout (front/dates.mjs) ---------- */
.race-date {
  width: 62px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 8px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  line-height: 1.15;
  box-sizing: border-box;
}
.race-date small { font-size: 12px; color: #aab3b6; text-transform: lowercase; }
.race-date strong { font-size: 26px; font-weight: 800; color: #f4f6f5; }
.race-date.is-unknown small { text-align: center; font-size: 11px; padding: 0 4px; }
.race-start {
  display: inline-block;
  min-width: 42px;
  padding: 3px 8px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  color: #e6ecea;
  box-sizing: border-box;
}
/* Version compacte : titre de chaque départ d'une course. */
.race-date.is-compact { width: 46px; padding: 3px 0 4px; border-radius: 8px; }
.race-date.is-compact small { font-size: 10.5px; }
.race-date.is-compact strong { font-size: 18px; }
html[data-game] #app .departure-fold .fold-date { flex-direction: row !important; align-items: center !important; gap: 12px; }
html[data-game] #app .departure-fold > summary > .fold-index { align-self: center !important; }
html[data-game] #app .departure-fold .fold-date-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }

/* Accueil : le prochain départ est présenté comme une carte de course. */
.hub-race-top { display: flex; align-items: flex-start; gap: 14px; margin: 8px 0 18px; }
.hub-race-head { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.hub-race-top .hub-next-race h3,
.hub-race-head h3 { margin: 0 !important; }
.hub-race-head .hub-race-meta { margin: 0 !important; }
html[data-game] #app .departure-fold .race-date.is-compact { align-items: center !important; text-align: center !important; }
/* Un compte à rebours ne se coupe jamais en deux lignes. */
[data-countdown] { white-space: nowrap; }

/* Page course : actions de la course dans l'en-tête, sur la ligne des catégories. */
html[data-game] #app .race-header-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
html[data-game] #app .race-header-footer > .event-category-badges { margin: 0 !important; }
html[data-game] #app .race-header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
html[data-game] #app .race-header-actions > .secondary-button { width: auto !important; min-height: 38px !important; padding: 0 14px !important; font-size: 14px !important; }
html[data-game] #app .race-header-actions > .link-button { width: auto !important; min-height: 38px !important; box-shadow: none !important; }
html[data-game] #app .race-header-actions > .danger-link { width: auto !important; margin-left: 0; box-shadow: none !important; }
@media (max-width: 760px) {
  html[data-game] #app .race-header-actions { margin-left: 0; width: 100%; justify-content: flex-start; }
}

/* ---------- Gestion des membres : recherche, rôle enregistré dès qu'il change ---------- */
.members-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.members-search { flex: 1; min-width: 0; }
.members-search input { width: 100%; min-height: 42px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: rgba(0, 0, 0, .25); color: inherit; font: inherit; font-size: 15px; }
.members-help { margin: 0 0 14px; color: var(--muted, #92979c); font-size: 14px; }
.members-panel .members-row { grid-template-columns: minmax(0, 1fr) minmax(160px, 220px) 150px !important; }
.members-panel .members-row[hidden] { display: none !important; }
.members-row-status { font-size: 13px; font-weight: 700; color: var(--muted, #92979c); }
.members-row-status.is-saved { color: #7fe0a8; }
.members-row-status.is-error { color: #ff8a8a; }
.members-empty { margin: 12px 0 0; color: var(--muted, #92979c); }
@media (max-width: 760px) {
  .members-panel .members-row { grid-template-columns: minmax(0, 1fr) !important; }
  .members-panel .members-role-select { grid-column: 1 !important; }
  .members-panel .members-row-status:empty { display: none; }
}

/* Accueil : équipages avec la même couleur et le même statut que sur la page course. */
.crew-summary-card { grid-template-columns: auto minmax(120px, .8fr) minmax(0, 1.2fr) auto !important; }
.crew-summary-card .crew-compact-status { justify-self: end; padding: 3px 8px; border: 1px solid; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .crew-summary-card { grid-template-columns: auto minmax(0, 1fr) auto !important; }
  .crew-summary-card .crew-summary-pilots { grid-column: 2 / -1; }
}
.members-toolbar > .members-help { flex: 1; margin: 0; }
/* Fenêtre « Créer un équipage » : libellés d'étape lisibles. */
.crew-builder-step-label { font-size: 12.5px !important; }

/* ---------- Événements (format solo) ---------- */
.event-access-badge { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; }
.event-access-badge.is-open { color: #7fe3ea; border-color: rgba(82, 211, 216, .6); background: rgba(82, 211, 216, .08); }
.event-access-badge.is-safe { color: #f3b33d; border-color: rgba(243, 179, 61, .65); background: rgba(243, 179, 61, .08); }
.event-type-badge { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #f2f4f7; background: rgba(255, 255, 255, .06); }
/* Simulateur d'un événement : LMU, iRacing, AMS2, ACE. */
.event-badge-row { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.event-sim-badge { --sim: #8a949a; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--sim); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; }
.sim-lmu { --sim: #d8322c; } .sim-iracing { --sim: #2f6fd6; } .sim-ams2 { --sim: #e07a1f; } .sim-ace { --sim: #1f9d63; } .sim-acrally { --sim: #bf18ce; }
.access-open { --sim: #52d3d8; } .access-safe { --sim: #f3b33d; }

/* Création d'un événement : étapes courtes, choix en pastilles. */
.solo-event-form .solo-form-step { display: grid; gap: 18px; }
.solo-event-form .solo-form-step[hidden] { display: none; }
.solo-event-form .solo-rounds { display: grid; gap: 12px; }
.solo-weather-row { display: flex; gap: 6px; flex-wrap: wrap; }
.solo-weather-chip { position: relative; cursor: pointer; }
.solo-weather-chip input { position: absolute; opacity: 0; pointer-events: none; }
.solo-weather-chip span[aria-hidden] { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 42px; border: 1px solid var(--border, #2b3236); border-radius: 8px; background: var(--panel2, #12171a); font-size: 22px; filter: grayscale(.7); opacity: .6; }
.solo-weather-chip input:checked + span { filter: none; opacity: 1; border-color: #52d3d8; box-shadow: inset 0 -3px #52d3d8; }
.solo-weather-chip input:focus-visible + span { outline: 2px solid #52d3d8; outline-offset: 2px; }
.solo-event-info { display: grid; gap: 4px; margin: 0; font-size: 13.5px; }
.solo-event-info div { display: flex; gap: 10px; }
.solo-event-info dt { min-width: 96px; color: var(--muted, #9aa5aa); font-weight: 700; }
.solo-event-info dd { margin: 0; color: #e7ecee; }
.solo-event-form .solo-round { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border, #2b3236); border-radius: 10px; background: rgba(0, 0, 0, .18); }
.solo-event-form .solo-round-head { display: flex; align-items: center; justify-content: space-between; }
.solo-event-form .solo-round-title { color: #7fe3ea; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.solo-event-form .solo-round-head [data-remove-round][hidden] { display: none; }
.solo-event-form .solo-round-format { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.solo-event-form fieldset.solo-weather { margin: 0; }
.solo-event-form .solo-round-categories { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.solo-category-chip { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 44px; padding: 4px 8px; border: 1px solid var(--border, #2b3236); border-radius: 8px; background: var(--panel2, #12171a); cursor: pointer; opacity: .55; }
.solo-category-chip input { position: absolute; opacity: 0; pointer-events: none; }
.solo-category-chip .category-logo { width: 40px; height: 32px; object-fit: contain; }
.solo-category-chip:has(input:checked) { opacity: 1; border-color: var(--category-color, #52d3d8); box-shadow: inset 0 -3px var(--category-color, #52d3d8); }
.solo-category-chip:has(input:focus-visible) { outline: 2px solid #52d3d8; outline-offset: 2px; }
.solo-event-form [data-add-round] { justify-self: start; }
.solo-event-form [data-add-round][hidden] { display: none; }
.solo-event-form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.solo-event-form legend { padding: 0; margin-bottom: 8px; }
.sim-option-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-option { position: relative; cursor: pointer; }
.sim-option input { position: absolute; opacity: 0; pointer-events: none; }
.sim-option span { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; min-height: 42px; padding: 0 16px; border: 1px solid var(--border, #2b3236); border-radius: 8px; background: var(--panel2, #12171a); color: #c7d0d4; font-weight: 800; letter-spacing: .04em; }
.sim-option:hover span { border-color: var(--sim); }
.sim-option input:checked + span { border-color: var(--sim); background: color-mix(in srgb, var(--sim) 28%, transparent); color: #fff; box-shadow: inset 0 -3px var(--sim); }
.sim-option input:focus-visible + span { outline: 2px solid var(--sim); outline-offset: 2px; }
.solo-form-start, .solo-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; align-items: start; }
.solo-form-row > .form-label > input { margin-top: 8px; }
.solo-form-start .departure-field { display: contents; }
@media (max-width: 600px) { .sim-option { flex: 1 1 40%; } .sim-option span { width: 100%; } }
/* Le liseré de couleur suit le simulateur : rouge LMU, bleu iRacing, orange AMS2, vert ACE. */
.event-card.is-solo-open, .race-header.is-solo-open, .event-card.is-solo-safe, .race-header.is-solo-safe { --event-accent: var(--sim, #52d3d8) !important; }
.solo-fill { display: flex; flex-direction: column; gap: 5px; min-width: 180px; }
.solo-fill-copy { font-size: 13.5px; color: #c7d0d4; }
.solo-fill-copy strong { color: #f4f6f5; font-size: 15px; }
.solo-fill-copy em { font-style: normal; color: #f3b33d; font-weight: 700; }
.solo-fill-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.solo-fill-bar > span { display: block; height: 100%; background: #52d3d8; }
.solo-fill.is-full .solo-fill-bar > span { background: #f3b33d; }
html[data-game] .race-card .race-fill:has(.solo-fill) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.solo-card-categories { display: inline-flex; gap: 6px; }
.solo-card-categories .category-logo { width: 26px; height: auto; }
.departure-mine-badge.is-waiting { color: #f3b33d !important; border-color: rgba(243, 179, 61, .6) !important; }
.solo-blocked { font-size: 13.5px; font-weight: 700; color: #f3b33d; }
.solo-participants { display: flex; flex-direction: column; gap: 8px; }
.solo-subtitle { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 16px; }
.solo-help { margin: 0; color: var(--muted, #92979c); font-size: 13.5px; }
.solo-entries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 6px 14px; }
.solo-entry { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .025); }
.solo-entry.is-mine { border-color: rgba(82, 211, 216, .55); }
.solo-entries.is-waiting .solo-entry { border-style: dashed; }
.solo-entry-rank { font-weight: 800; color: #aab3b6; text-align: center; }
.solo-entries.is-waiting .solo-entry-rank { color: #f3b33d; }
.solo-entry-name { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-entry .solo-category { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.solo-entry .solo-category .category-logo { width: 24px; height: auto; }
.solo-muted { color: #8a9396; }
.solo-any-logo { display: inline-grid; place-items: center; width: 40px; height: 28px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 6px; font-size: 18px; color: #c7d0d4; flex: none; }
.solo-wait-notice { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid #f3b33d; border-radius: 0 8px 8px 0; background: rgba(243, 179, 61, .08); color: #f1e3c4; font-size: 14px; }
/* Formulaire : format, accès et manches */
.format-contents { display: contents; }
/* Gestion des membres : case « Pilote SAFE » */
.members-panel .members-row { grid-template-columns: minmax(0, 1fr) auto minmax(160px, 220px) 150px !important; }
.members-safe { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #f3b33d; cursor: pointer; white-space: nowrap; }
@media (max-width: 760px) {
  .solo-entries { grid-template-columns: minmax(0, 1fr); }
  .members-panel .members-row { grid-template-columns: minmax(0, 1fr) !important; }
}
/* Course solo à deux manches : catégorie et voiture de chaque manche. */
.solo-round-heading { margin: 0 0 4px; font-weight: 800; color: #7fe3ea; font-size: 15px; }

/* ---------- Accueil : présentation, choix de la simu, étapes ---------- */
.hub-main .hub-welcome { max-width: 760px; margin: 28px auto 8px; text-align: center; }
.hub-welcome h1 { margin: 0 0 10px; font-size: clamp(26px, 4vw, 40px); line-height: 1.12; color: #f4f6f5; }
.hub-welcome-lead { margin: 0 auto 18px; max-width: 620px; color: #c7d0d4; font-size: 17px; line-height: 1.5; }
.hub-welcome-actions { display: flex; justify-content: center; }
.hub-welcome-actions .hub-login-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 12px; font-size: 16px; font-weight: 800; text-decoration: none; }
.hub-welcome-back { margin: 0; font-size: 16px; color: #c7d0d4; }
.hub-trust { margin: 12px auto 0; max-width: 560px; font-size: 13.5px; color: var(--muted, #92979c); }
.hub-trust a { color: #7fe3ea; }
.hub-main .hub-intro { margin: 30px 0 14px; text-align: center; }
.hub-main .hub-intro h2 { margin: 0; font-size: clamp(22px, 3vw, 30px); }
.hub-main .hub-intro p { margin: 6px 0 0; color: var(--muted, #92979c); font-size: 14px; }
.hub-next-solo { border-top: 1px dashed rgba(255, 255, 255, .12); }
.hub-solo-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hub-solo-places { font-size: 13.5px; color: #c7d0d4; }
.hub-steps { max-width: 980px; margin: 34px auto 10px; }
.hub-steps h2 { margin: 0 0 14px; text-align: center; font-size: clamp(20px, 2.6vw, 26px); }
.hub-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: hub-step; }
.hub-steps-list li { counter-increment: hub-step; display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--border, #292d31); border-radius: 12px; background: var(--panel, #111315); }
.hub-steps-list li::before { content: counter(hub-step); display: inline-grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 50%; background: rgba(82, 211, 216, .14); color: #7fe3ea; font-weight: 800; }
.hub-steps-list strong { font-size: 15.5px; color: #f4f6f5; }
.hub-steps-list span { font-size: 13.5px; color: var(--muted, #92979c); }
@media (max-width: 900px) { .hub-steps-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .hub-main .hub-welcome { margin-top: 18px; padding: 0 4px; }
  .hub-welcome-lead { font-size: 15.5px; }
  .hub-welcome-actions .hub-login-button { width: 100%; }
  .hub-steps-list { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hub-steps-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px 14px; }
  .hub-steps-list li::before { grid-row: span 2; align-self: center; margin: 0; }
}
/* Accueil : la phrase de confiance est déjà dans la présentation, pas en double dans la barre. */
.site-nav-shell:has(+ .hub-main) .account-oauth-trust { display: none !important; }

/* Home: window to choose a simulator after the first Discord login. */
.hub-sim-dialog {
  width: min(520px, calc(100% - 32px));
  padding: 26px 26px 22px;
  border: 1px solid var(--border, #292d31);
  border-top: 4px solid #52d3d8;
  border-radius: 16px;
  background: var(--panel, #111315);
  color: #e6ecea;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.hub-sim-dialog::backdrop { background: rgba(3,5,7,.72); backdrop-filter: blur(3px); }
.hub-sim-dialog h2 { margin: 0 0 8px; font-size: 24px; font-weight: 850; color: #f4f6f5; }
.hub-sim-dialog p { margin: 0 0 18px; color: #c7d0d4; font-size: 15px; line-height: 1.55; }
.hub-sim-choices { display: grid; gap: 10px; }
.hub-sim-choice.game-lmu { --game-accent: #e30613; }
.hub-sim-choice.game-iracing { --game-accent: #4f74d8; }
.hub-sim-choice {
  display: flex; align-items: center; gap: 14px;
  min-height: 64px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 45%, var(--border, #292d31));
  border-left: 4px solid var(--game-accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--game-accent) 8%, var(--panel2, #171a1d));
  color: #f4f6f5; font-size: 17px; text-decoration: none;
}
.hub-sim-choice strong { flex: 1; }
.hub-sim-choice:hover, .hub-sim-choice:focus-visible { background: color-mix(in srgb, var(--game-accent) 18%, var(--panel2, #171a1d)); outline: none; }

/* "Je la fais tout seul" (endurances raced alone). */
.special-availability:has(.solo-driver) { display: flex; flex-wrap: wrap; gap: 8px; }
.special-button.solo-driver.active { border-color: rgba(243,179,61,.8); background: rgba(243,179,61,.16); color: #ffd98a; }
.solo-driver-tag { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(243,179,61,.16); color: #ffd98a; font-size: .85em; font-weight: 800; }
.solo-driver-warning, .solo-driver-note { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; line-height: 1.5; }
.solo-driver-warning { border: 1px solid rgba(243,179,61,.55); border-left: 4px solid #f3b33d; background: rgba(243,179,61,.1); color: #ffe2a8; font-weight: 700; }
.solo-driver-note { border: 1px solid rgba(82,211,216,.35); background: rgba(82,211,216,.07); color: #c7eef0; }
.solo-driver-badge { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(243,179,61,.6); border-radius: 6px; color: #ffd98a; font-size: 10px; font-weight: 900; letter-spacing: .04em; vertical-align: middle; }

/* Common "Horaire à définir" start: notice and the choice of an official slot. */
.tbd-notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid rgba(243,179,61,.45); border-left: 4px solid #f3b33d; border-radius: 10px; background: rgba(243,179,61,.08); color: #ffe2a8; font-size: 14px; line-height: 1.5; }
.slot-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; color: #c7d0d4; font-size: 13px; font-weight: 700; }
.slot-picker select { min-height: 34px; padding: 0 10px; border: 1px solid rgba(82,211,216,.5); border-radius: 8px; background: var(--panel2, #171a1d); color: #f4f6f5; font-weight: 700; }

/* Event form: common start "à définir" (day only). */
.departure-field.is-tbd { border-color: rgba(243,179,61,.45); }
.departure-tbd-note { display: grid; gap: 2px; align-content: start; }
.departure-tbd-note strong { color: #ffd98a; font-size: 15px; }
.departure-tbd-note small { color: #c7d0d4; font-size: 12.5px; line-height: 1.45; }

/* Community gate: not signed in, or not a member of the community's Discord server. */
.community-gate { max-width: 620px; margin: 40px auto; padding: 28px 26px; border: 1px solid var(--border, #292d31); border-top: 4px solid #52d3d8; border-radius: 16px; background: var(--panel, #111315); text-align: center; }
.community-gate h1 { margin: 0 0 12px; font-size: 28px; font-weight: 850; color: #f4f6f5; }
.community-gate p { margin: 0 0 20px; color: #c7d0d4; font-size: 16px; line-height: 1.6; }
.community-gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* Welcome screen for visitors (home of the main address and of each community). */
.community-gate.welcome { max-width: 1080px; margin: 34px auto 20px; padding: 0; border: 0; border-radius: 0; background: none; text-align: left; }
/* The navigation bar is of no use before signing in: the welcome screen has the Discord button. */
body:has(.community-gate.welcome.is-visitor) .site-nav-shell { display: none !important; }
.welcome-hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 56px); border: 1px solid var(--border, #292d31); border-radius: 20px; background: radial-gradient(circle at 100% 0%, rgba(82,211,216,.14), transparent 26rem), radial-gradient(circle at 0% 100%, rgba(227,6,19,.10), transparent 24rem), var(--panel, #111315); box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.welcome-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #52d3d8, #e30613 55%, #f3b33d); }
.welcome-kicker { margin: 0 0 12px; color: var(--community-accent, #52d3d8); font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.community-gate.welcome h1 { max-width: 720px; margin: 0 0 14px; font-size: clamp(28px, 4.2vw, 46px); line-height: 1.08; font-weight: 900; color: #f4f6f5; letter-spacing: -.01em; }
.welcome-lead { max-width: 640px; margin: 0 0 26px; color: #c7d0d4; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; }
.welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.welcome-discord { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 12px; background: #5865f2; color: #fff !important; font-size: 16px; font-weight: 800; text-decoration: none !important; box-shadow: 0 10px 26px rgba(88,101,242,.35); transition: transform .15s, box-shadow .15s, background .15s; }
.welcome-discord:hover, .welcome-discord:focus-visible { background: #4752c4; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(88,101,242,.45); }
.welcome-discord svg { width: 22px; height: 22px; flex: 0 0 22px; }
.welcome-elsewhere { margin-top: 18px; }
.welcome-elsewhere p { margin: 0 0 8px; color: #99a3a0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.welcome-elsewhere a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.welcome-elsewhere img { border-radius: 50%; }
.welcome-trust { margin: 16px 0 0; color: #99a3a0; font-size: 13px; }
.welcome-trust a { color: #c7d0d4; }
.welcome-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.welcome-features li { display: grid; gap: 6px; align-content: start; padding: 18px; border: 1px solid var(--border, #292d31); border-radius: 14px; background: var(--panel, #111315); }
.welcome-features svg { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: var(--community-accent, #52d3d8); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.welcome-features strong { color: #f4f6f5; font-size: 15px; }
.welcome-features span { color: #99a3a0; font-size: 13.5px; line-height: 1.5; }
@media (max-width: 900px) { .welcome-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .community-gate.welcome { margin-top: 16px; } .welcome-features { grid-template-columns: minmax(0, 1fr); } .welcome-discord { width: 100%; justify-content: center; } }

/* Presence timeline: a thin white separator between the hours inside the bar; a small tick rises only towards
   the hours written above it (the labels shown depend on the width, timeline.css). */
.presence-track > .presence-segment + .presence-segment { box-shadow: inset 2px 0 0 rgba(255, 255, 255, .35) !important; }
.presence-boundary::after { display: none !important; }
.presence-boundary:has(> .presence-time.ticks-4)::after { display: block !important; }
@container presence (min-width: 400px) {
  .presence-boundary:has(> .presence-time[class])::after { display: none !important; }
  .presence-boundary:has(> .presence-time.ticks-6)::after { display: block !important; }
}
@container presence (min-width: 640px) {
  .presence-boundary:has(> .presence-time[class])::after { display: none !important; }
  .presence-boundary:has(> .presence-time.ticks-10)::after { display: block !important; }
}
@container presence (min-width: 1000px) {
  .presence-boundary:has(> .presence-time[class])::after { display: none !important; }
  .presence-boundary:has(> .presence-time.ticks-16)::after { display: block !important; }
}
@container presence (min-width: 1500px) {
  .presence-boundary:has(> .presence-time[class])::after { display: none !important; }
  .presence-boundary:has(> .presence-time.ticks-24)::after { display: block !important; }
}

/* Pilots without a crew: cards in the style of the crew cards (frame, top stripe, category logo, name, car). */
html[data-game] #app .ux-unassigned-grid > .pilot-row { display: flex !important; flex-direction: column !important; gap: 8px !important; padding: 12px 14px !important; border: 1px solid #2b3538 !important; border-top: 3px solid var(--community-accent, #52d3d8) !important; border-radius: 10px !important; background: #101617 !important; }
html[data-game] #app .ux-unassigned-grid > .pilot-row.ux-current-pilot { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 2px; }
html[data-game] #app .ux-unassigned-grid > .pilot-row > .pilot-main { display: grid !important; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 2px 10px !important; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo { grid-column: 1; grid-row: 1 / span 2; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo .category-logo { width: 34px; height: auto; }
html[data-game] #app .ux-unassigned-grid .pilot-main > :not(.pilot-category-logo) { grid-column: 2; justify-self: start; min-width: 0; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-name { font-size: 16px !important; font-weight: 800 !important; color: #f4f6f5 !important; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-car { color: var(--muted, #92979c) !important; font-size: 13px !important; font-weight: 400 !important; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-preference { font-size: 12.5px; color: #c7d0d4; }
html[data-game] #app .ux-unassigned-grid > .pilot-row > .edit-button { align-self: flex-end; }

/* Members page: tabs, member cards, settings cards. */
.members-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.members-tabs button { min-height: 42px; padding: 0 18px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: var(--panel, #111315); color: #c7d0d4; font: inherit; font-weight: 800; cursor: pointer; }
.members-tabs button span { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; }
.members-tabs button[aria-selected="true"] { border-color: var(--community-accent, #52d3d8); color: #f4f6f5; box-shadow: inset 0 -3px 0 var(--community-accent, #52d3d8); }
.member-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.members-panel .member-card, .member-grid .member-card { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
.member-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.member-head .members-identity { flex: 1; }
.member-avatar { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgba(82,211,216,.14); border: 1px solid rgba(82,211,216,.45); color: var(--community-accent, #52d3d8); font-size: 13px; font-weight: 900; }
.member-badge { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: var(--community-accent, #52d3d8); color: #06181a; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.members-discord-roles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.members-discord-role { padding: 2px 8px; border: 1px solid rgba(88,101,242,.55); border-radius: 999px; background: rgba(88,101,242,.12); color: #d6dafe; font-size: 12.5px; font-weight: 700; }
.members-discord-role.is-empty { border-color: var(--border, #292d31); background: transparent; color: #99a3a0; }
.member-rights { display: flex; flex-wrap: wrap; gap: 5px; padding-top: 10px; border-top: 1px solid var(--border, #292d31); }
.member-right { padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.05); color: #c7d0d4; font-size: 12px; }
.member-right.is-all { background: rgba(127,224,168,.12); color: #7fe0a8; font-weight: 700; }
.member-right.is-none { color: #99a3a0; }

/* Community settings (members page, « Réglages » tab). */
.community-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; }
.community-settings[hidden] { display: none; }
.settings-card { padding: 20px; border: 1px solid var(--border, #292d31); border-radius: 16px; background: var(--panel, #111315); }
.settings-card h2 { margin: 0 0 12px; font-size: 17px; color: var(--community-accent, #52d3d8); }
.settings-roles-card { grid-column: 1 / -1; }
.settings-appearance { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.settings-appearance label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: #c7d0d4; }
.settings-appearance label small { font-weight: 400; color: #99a3a0; }
.settings-appearance input:not([type]) { min-height: 40px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--border, #292d31); border-radius: 9px; background: rgba(0,0,0,.25); color: inherit; font: inherit; }
.settings-appearance .members-help, .settings-actions { grid-column: 1 / -1; margin: 0; }
.settings-accent { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 12px; }
.settings-appearance input[type="color"] { width: 64px; height: 38px; padding: 0; border: 1px solid var(--border, #292d31); border-radius: 9px; background: none; cursor: pointer; }
.settings-actions { display: flex; align-items: center; gap: 12px; }
.settings-status { color: #7fe0a8; font-size: 13px; font-weight: 700; }
.settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border, #292d31); cursor: pointer; }
.settings-switch:first-of-type { border-top: 0; padding-top: 0; }
.settings-switch small { display: block; margin-top: 2px; color: #99a3a0; font-size: 13px; }
.settings-switch input { position: absolute; opacity: 0; pointer-events: none; }
.settings-switch i { position: relative; flex: 0 0 44px; height: 24px; border-radius: 999px; background: #2b3034; transition: background .15s; }
.settings-switch i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #f4f6f5; transition: transform .15s; }
.settings-switch input:checked + i { background: var(--community-accent, #52d3d8); }
.settings-switch input:checked + i::after { transform: translateX(20px); }
.settings-switch input:focus-visible + i { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 2px; }
.settings-switch input:disabled + i { opacity: .5; }
.role-legend-wrap { margin: 0 0 14px; }
.role-legend-wrap > summary { cursor: pointer; margin-bottom: 8px; color: var(--community-accent, #52d3d8); font-size: 14px; font-weight: 800; }
.role-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.03); }
.role-legend dt { font-size: 13px; font-weight: 800; color: #f4f6f5; }
.role-legend dd { margin: 1px 0 0; font-size: 12.5px; color: #99a3a0; }
.role-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 10px; }
.role-card { padding: 12px 14px; border: 1px solid var(--border, #292d31); border-radius: 12px; background: var(--panel2, #16191c); }
.role-card .role-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.role-card .role-head small { color: #99a3a0; font-size: 12px; }
.role-card .role-head .settings-status { margin-left: auto; }
.role-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.role-pill { position: relative; display: inline-flex; cursor: pointer; }
.role-pill input { position: absolute; opacity: 0; pointer-events: none; }
.role-pill span { padding: 5px 11px; border: 1px solid var(--border, #292d31); border-radius: 999px; color: #99a3a0; font-size: 12.5px; font-weight: 700; transition: background .12s, color .12s, border-color .12s; }
.role-pill input:checked + span { border-color: var(--community-accent, #52d3d8); background: rgba(82,211,216,.14); color: #f4f6f5; }
.role-pill input:checked + span::before { content: "✓ "; }
.role-pill input:focus-visible + span { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 2px; }
.role-pill input:disabled + span { opacity: .6; cursor: default; }
@media (max-width: 760px) {
  .community-settings, .role-list, .member-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-appearance { grid-template-columns: minmax(0, 1fr); }
  .settings-card { padding: 14px; }
}

.settings-banner-card { grid-column: 1 / -1; }
.settings-banner { display: grid; gap: 10px; }
.settings-banner-preview { width: 100%; aspect-ratio: 4 / 1; object-fit: cover; border: 1px solid var(--border, #292d31); border-radius: 10px; }
.settings-banner-pick { cursor: pointer; }
.settings-banner .members-help { margin: 0; }

.banner-cropper { display: grid; gap: 10px; }
.banner-crop-frame { overflow: hidden; border: 2px solid var(--community-accent, #52d3d8); border-radius: 10px; }
.banner-crop-frame canvas { display: block; width: 100%; aspect-ratio: 4 / 1; cursor: grab; touch-action: none; }
.banner-crop-frame canvas:active { cursor: grabbing; }
.banner-crop-zoom { display: flex; align-items: center; gap: 10px; color: #c7d0d4; font-size: 13px; font-weight: 700; }
.banner-crop-zoom input { flex: 1; accent-color: var(--community-accent, #52d3d8); }

/* « Mise en place » (members page): the setup steps of a community, and the platform tab of the managers. */
.setup { max-width: 920px; }
.setup-intro { margin: 0 0 14px; color: #c7d0d4; font-size: 15px; }
.setup-steps { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.setup-step > details { border: 1px solid var(--border, #292d31); border-radius: 14px; background: var(--panel, #111315); }
.setup-step.is-todo > details { border-left: 4px solid #f3b33d; }
.setup-step.is-done > details { border-left: 4px solid #7fe0a8; }
.setup-step.is-info > details { border-left: 4px solid var(--community-accent, #52d3d8); }
.setup-step > details > summary { display: flex; align-items: center; gap: 14px; padding: 16px 18px; cursor: pointer; list-style: none; }
.setup-step > details > summary::-webkit-details-marker { display: none; }
.setup-step > details > summary::after { content: "▾"; margin-left: auto; color: #99a3a0; transition: transform .15s; }
.setup-step > details[open] > summary::after { transform: rotate(180deg); }
.setup-check { flex: 0 0 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(243,179,61,.14); color: #f3b33d; font-weight: 900; }
.setup-step.is-done .setup-check { background: rgba(127,224,168,.14); color: #7fe0a8; }
.setup-step.is-info .setup-check { background: rgba(82,211,216,.14); color: var(--community-accent, #52d3d8); }
.setup-title { display: grid; gap: 2px; min-width: 0; }
.setup-title strong { color: #f4f6f5; font-size: 16px; }
.setup-title small { color: #99a3a0; font-size: 13px; overflow-wrap: anywhere; }
.setup-body { padding: 0 18px 18px 64px; color: #c7d0d4; font-size: 14.5px; line-height: 1.6; }
.setup-body p { margin: 0 0 10px; }
.setup-howto, .setup-tips { margin: 0 0 12px; padding-left: 20px; }
.setup-howto li, .setup-tips li { margin: 4px 0; }
.setup-note { padding: 8px 12px; border-radius: 8px; background: rgba(243,179,61,.08); color: #e8d3a6; font-size: 13.5px; }
.setup-guide { margin: 0 0 14px; padding: 10px 14px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: rgba(255,255,255,.02); }
.setup-guide summary { cursor: pointer; color: #f4f6f5; font-weight: 800; }
.setup-guide .setup-howto { margin-top: 10px; }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.setup-actions .welcome-discord { min-height: 44px; font-size: 15px; }
.crew-module-rights { display: grid; gap: 8px; margin: -4px 0 12px; }
.setup-error { color: #ffb4a8; }
.setup-form { display: grid; gap: 12px; }
.setup-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: #c7d0d4; }
.setup-form input:not([type=radio]), .setup-form select, .setup-inline input, .setup-message textarea, .setup-created textarea, .platform-slug input { width: 100%; min-height: 40px; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border, #292d31); border-radius: 9px; background: rgba(0,0,0,.25); color: inherit; font: inherit; font-size: 14px; }
.setup-modes { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.setup-modes legend { margin-bottom: 6px; color: #f4f6f5; font-weight: 800; }
.setup-mode { display: flex !important; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, #292d31); border-radius: 10px; cursor: pointer; }
.setup-mode:has(input:checked) { border-color: var(--community-accent, #52d3d8); background: rgba(82,211,216,.07); }
.setup-mode input { flex: 0 0 auto; width: auto !important; min-height: 0 !important; margin: 3px 0 0; accent-color: var(--community-accent, #52d3d8); }
.setup-mode > span { flex: 1 1 auto; text-align: left; }
.setup-mode small { display: block; color: #99a3a0; font-weight: 400; }
.setup-mode-block { display: none; gap: 12px; }
.setup-form[data-mode="one"] [data-mode-block="one"], .setup-form[data-mode="two"] [data-mode-block="two"] { display: grid; }
.setup-hook { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.setup-hook .settings-status { grid-column: 1 / -1; }
.setup-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.setup-inline input { flex: 1 1 260px; width: auto; }
.setup-message { display: grid; gap: 6px; font-weight: 700; color: #c7d0d4; }
.setup-message textarea, .setup-created textarea { resize: vertical; line-height: 1.5; }
.setup-created { margin-top: 16px; padding: 14px; border: 1px solid rgba(127,224,168,.45); border-radius: 12px; background: rgba(127,224,168,.06); }
.setup-created strong { color: #7fe0a8; }
.platform-list { display: grid; gap: 8px; }
.platform-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border, #292d31); border-radius: 10px; background: var(--panel2, #16191c); font-size: 13.5px; color: #c7d0d4; }
.platform-row div { display: grid; min-width: 0; }
.platform-row div a { overflow: hidden; color: #99a3a0; white-space: nowrap; text-overflow: ellipsis; }
.community-settings[data-panel="platform"] { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.platform-ok { color: #7fe0a8; font-weight: 700; }
.platform-ko, .platform-ko a { color: #f3b33d; font-weight: 700; }
.platform-slug { display: flex; align-items: center; gap: 6px; }
.platform-slug input { flex: 1 1 auto; min-width: 0; }
.platform-slug span { color: #99a3a0; font-weight: 400; white-space: nowrap; }
@media (max-width: 760px) {
  .setup-body { padding: 0 14px 14px; }
  .setup-hook, .platform-row { grid-template-columns: minmax(0, 1fr); }
  .platform-slug { flex-wrap: wrap; }
}

/* Recap step: example of the Discord message, switch, « Où le publier ? » cards. */
.recap-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 18px; align-items: start; margin-bottom: 14px; }
.recap-intro p { margin: 0; }
.recap-preview { margin: 0; padding: 12px; border-radius: 10px; background: #313338; color: #dbdee1; font-size: 12.5px; }
.recap-preview figcaption { margin-bottom: 8px; color: #949ba4; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.recap-preview-bot { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.recap-preview-bot strong { color: #f2f3f5; font-size: 13px; }
.recap-preview-avatar { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: #5865f2; color: #fff; font-size: 10px; font-weight: 900; }
.recap-preview-tag { padding: 0 4px; border-radius: 3px; background: #5865f2; color: #fff; font-size: 9.5px; font-weight: 800; }
.recap-preview-embed { display: grid; gap: 3px; margin-left: 34px; padding: 8px 10px; border-left: 4px solid #2563eb; border-radius: 4px; background: #2b2d31; }
.recap-preview-embed strong { color: #f2f3f5; }
.recap-preview-embed b { margin-top: 4px; color: #f2f3f5; }
.recap-preview-embed em { margin-top: 4px; color: #949ba4; font-size: 11px; font-style: normal; }
.setup-form .recap-switch { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px !important; border: 1px solid var(--border, #292d31) !important; border-radius: 12px; font-weight: 400; }
.setup-form .recap-switch > span { display: grid; gap: 2px; }
.setup-form .recap-switch strong { color: #f4f6f5; font-size: 15px; }
.setup-form .recap-switch i { flex: 0 0 44px; width: 44px; }
.recap-options { display: grid; gap: 12px; }
.setup-form[data-mode="none"] .recap-options { display: none; }
.recap-question { margin: 4px 0 0 !important; color: #f4f6f5; font-size: 15px; font-weight: 800; }
.recap-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.recap-card { display: flex !important; align-items: flex-start; gap: 10px; padding: 14px; border: 1px solid var(--border, #292d31); border-radius: 12px; cursor: pointer; }
.recap-card:has(input:checked) { border-color: var(--community-accent, #52d3d8); background: rgba(82,211,216,.07); }
.recap-card input { flex: 0 0 auto; width: auto !important; min-height: 0 !important; margin: 3px 0 0; accent-color: var(--community-accent, #52d3d8); }
.recap-card strong { display: block; color: #f4f6f5; font-size: 14.5px; }
.recap-card small { display: block; margin-top: 2px; color: #99a3a0; font-weight: 400; }
.recap-sims { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recap-sims > span { margin-right: 4px; color: #c7d0d4; font-size: 13px; font-weight: 700; }
@media (max-width: 760px) { .recap-intro, .recap-cards { grid-template-columns: minmax(0, 1fr); } }

/* Showcase of the main address: banner on every page, reset card of the managers. */
.showcase-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 18px 8px; padding: 10px 16px; border: 1px solid rgba(243,179,61,.45); border-radius: 12px; background: rgba(243,179,61,.08); color: #e8d3a6; font-size: 14px; }
.showcase-banner strong { padding: 2px 10px; border-radius: 999px; background: #f3b33d; color: #1a1406; font-size: 12px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.showcase-banner a { margin-left: auto; color: #f4f6f5; font-weight: 800; }
.showcase-reset { border-color: rgba(255,120,120,.4); }
.showcase-danger { background: #d9534f !important; border-color: #d9534f !important; color: #fff !important; }
@media (max-width: 760px) { .showcase-banner { margin: 0 10px 6px; } .showcase-banner a { margin-left: 0; } }

:root[data-community-accent] .primary-button { background: var(--community-accent) !important; border-color: var(--community-accent) !important; }
:root[data-community-accent] .top-stripes div:first-child { background: var(--community-accent) !important; }

/* Event form: several starts at once (days of a week and hours to tick). */
.bulk-departures { margin: 0 0 12px; padding: 10px 14px; border: 1px dashed var(--border, #3a4447); border-radius: 12px; }
.bulk-departures > summary { cursor: pointer; color: var(--community-accent, #52d3d8); font-weight: 800; }
.bulk-departures-body { display: grid; gap: 14px; margin-top: 10px; }
.bulk-step { display: grid; gap: 8px; }
.bulk-step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bulk-week-nav { display: flex; gap: 6px; }
.bulk-week-nav .secondary-button { min-height: 32px; min-width: 38px; padding: 0 10px; }
.bulk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.bulk-hours { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.bulk-chip { position: relative; display: block; cursor: pointer; }
.bulk-chip input { position: absolute; opacity: 0; pointer-events: none; }
.bulk-chip span { display: grid; place-items: center; min-height: 36px; padding: 4px 2px; border: 1px solid var(--border, #303638); border-radius: 9px; color: #c7d0d4; font-size: 13px; font-weight: 700; text-align: center; line-height: 1.15; }
.bulk-day span { min-height: 58px; }
.bulk-day small { color: #99a3a0; font-size: 11px; font-weight: 600; }
.bulk-day strong { font-size: 17px; color: #f4f6f5; }
.bulk-chip input:checked + span { border-color: var(--community-accent, #52d3d8); background: rgba(82,211,216,.16); color: #f4f6f5; box-shadow: inset 0 0 0 1px var(--community-accent, #52d3d8); }
.bulk-chip input:disabled + span { opacity: .35; cursor: default; }
.bulk-chip input:focus-visible + span { outline: 2px solid var(--community-accent, #52d3d8); outline-offset: 2px; }
.bulk-minute { display: flex; align-items: center; gap: 6px; color: #99a3a0; font-size: 13px; }
.bulk-minute select { min-height: 32px; width: auto; min-width: 76px; flex: 0 0 auto; padding-right: 26px; }
.bulk-departures-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.bulk-departures-actions strong { color: #f4f6f5; font-size: 14px; }
@media (max-width: 760px) { .bulk-hours { grid-template-columns: repeat(6, minmax(0, 1fr)); } .bulk-day span { min-height: 52px; } }

/* =====================================================================
   Race over several days: the starts as a planning
   - one column per race day (made for Friday–Sunday, up to a week: the days scroll sideways with arrows);
   - a start fits on three lines at most: « Départ 14h », its pilots and those without a crew by category,
     its crews in their colour; a start with nobody or already run fits on one line;
   - an opened start grows where it is, and its day widens (three days or fewer);
   - on a phone, one day at a time with a tab per day.
   ===================================================================== */
html[data-game] #app .departure-planning { display: grid; gap: 14px; margin-top: 18px; }
.planning-heading { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.planning-heading h2 { margin: 0; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: #c7d0d4; }
.planning-heading small { color: #92999c; font-size: 13px; }
.planning-arrows { display: none; gap: 6px; }
/* The race's buttons (link, edit, delete) on the heading line of the planning, the arrows after them. */
.planning-race-actions { margin-left: auto; }
html[data-game] #app .planning-race-actions .race-header-actions { margin: 0; flex-wrap: nowrap; gap: 6px 16px; }
html[data-game] #app .planning-race-actions .race-header-actions > * { min-height: 34px !important; font-size: 13.5px !important; white-space: nowrap; }
html[data-game] #app .planning-race-actions .race-header-actions > .secondary-button { padding: 0 12px !important; }
.departure-planning:not(:has(.planning-race-actions)) .planning-arrows { margin-left: auto; }
.departure-planning.has-more .planning-arrows { display: flex; }
.planning-arrows button { width: 36px; height: 32px; border: 1px solid #343c3f; border-radius: 9px; background: #111617; color: #f4f6f5; font-size: 18px; line-height: 1; cursor: pointer; }
.planning-tabs { display: none; }
.planning-scroll { min-width: 0; }
.planning-arrows button:disabled { opacity: .35; cursor: default; }
.planning-day.is-out { display: none; }
.planning-days { display: grid; grid-template-columns: var(--cols, repeat(var(--days), minmax(230px, 1fr))); gap: 16px; align-items: start; transition: grid-template-columns .28s ease; }
/* Days shown at once when the race lasts more than three days: 3 (default), 5 or 7. */
.planning-span { display: inline-flex; gap: 3px; padding: 3px; margin-left: 6px; border: 1px solid #2b3538; border-radius: 10px; background: #0f1415; }
.planning-span button { border: 0; border-radius: 7px; padding: 5px 11px; background: none; color: #c7d0d4; font-size: 13px; font-weight: 700; cursor: pointer; }
.planning-span button[aria-pressed="true"] { background: color-mix(in srgb, var(--community-accent, #52d3d8) 16%, transparent); color: #f4f6f5; box-shadow: inset 0 0 0 1px var(--community-accent, #52d3d8); }
.planning-day { display: grid; gap: 10px; min-width: 0; }
/* A day is a heading, not a card: its name in the accent colour, the date in large, a line underneath. */
.planning-day-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; padding: 2px 4px 10px; border-bottom: 3px solid var(--community-accent, #52d3d8); }
.planning-day-name { display: grid; gap: 1px; min-width: 0; }
.planning-day-name strong { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--community-accent, #52d3d8); }
.planning-day-name span { font-size: 24px; font-weight: 800; line-height: 1.1; color: #f4f6f5; white-space: nowrap; }
.planning-day-head small { color: #92999c; font-size: 13px; white-space: nowrap; padding-bottom: 3px; }
.planning-today { margin-bottom: 3px; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--community-accent, #52d3d8) 16%, transparent); color: var(--community-accent, #52d3d8); font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.planning-day.is-past .planning-day-head { opacity: .55; border-bottom-color: #3a4447; }

/* A start */
.planning-start { position: relative; border: 1px solid #2b3538; border-radius: 12px; background: #111617; transition: border-color .15s ease, background .15s ease, box-shadow .2s ease; }
.planning-start > summary { display: grid; gap: 8px; padding: 14px 44px 15px 16px; cursor: pointer; list-style: none; }
.planning-start > summary::-webkit-details-marker { display: none; }
.planning-start:hover { border-color: #3f4b4e; background: #141a1c; }
.planning-start.is-mine { border-color: var(--community-accent, #52d3d8); box-shadow: inset 0 0 0 1px var(--community-accent, #52d3d8); }
.planning-start.is-compact { background: transparent; border-style: dashed; }
.planning-start.is-compact > summary { padding-block: 11px; }
.planning-start.is-done:not([open]) { opacity: .5; }
/* Nobody on a start: greyed, no words needed (pilots, crews and « Ton départ » bring the colour). */
.planning-start.is-empty:not([open]) { border-color: #232b2d; }
.planning-start.is-empty:not([open]) .planning-start-head strong { color: #7d878a; }
.planning-start.is-empty:not([open]) .planning-chevron { color: #5b6568; }
.planning-start[open] { border-style: solid; border-color: var(--community-accent, #52d3d8); background: #141a1c; box-shadow: 0 14px 34px rgba(0, 0, 0, .45); opacity: 1; }
.planning-chevron { position: absolute; top: 13px; right: 12px; width: 18px; height: 18px; color: #92999c; transition: transform .2s ease; }
.planning-start.is-compact .planning-chevron { top: 10px; }
.planning-start[open] .planning-chevron { transform: rotate(180deg); color: var(--community-accent, #52d3d8); }
.planning-start-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px; }
.planning-start-head strong { font-size: 18px; color: #f4f6f5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.planning-start-end, .planning-start-state { color: #92999c; font-size: 13px; font-weight: 600; white-space: nowrap; }
.planning-tag { align-self: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.planning-tag.is-mine { background: var(--community-accent, #52d3d8); color: #062a2c; }
.planning-tag.is-live { background: #2f6e3f; color: #e6ffec; }
.planning-start-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #dfe6e4; font-size: 14px; }
.planning-free { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: #92999c; font-size: 13.5px; }
.planning-free-pill { padding: 1px 8px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--category-color, #8e9996) 65%, transparent); background: color-mix(in srgb, var(--category-color, #8e9996) 12%, transparent); color: color-mix(in srgb, var(--category-color, #c7d0d4) 55%, #fff); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.planning-crews { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.planning-crew { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--crew-color, #c7d0d4); font-size: 14px; font-weight: 700; }
.planning-crew .category-logo { width: 24px; height: auto; flex: none; }
.planning-crew .category-text-logo { font-size: 10px; color: #c7d0d4; }
.planning-crew.crew-palette-0 { --crew-color: #53d8ff; } .planning-crew.crew-palette-1 { --crew-color: #c58cff; }
.planning-crew.crew-palette-2 { --crew-color: #ffae62; } .planning-crew.crew-palette-3 { --crew-color: #ff79aa; }
.planning-crew.crew-palette-4 { --crew-color: #75a9ff; } .planning-crew.crew-palette-5 { --crew-color: #b5df62; }
.planning-crew.crew-palette-6 { --crew-color: #ffd45e; } .planning-crew.crew-palette-7 { --crew-color: #66e0b1; }
.planning-crew.crew-palette-8 { --crew-color: #ff7777; } .planning-crew.crew-palette-9 { --crew-color: #b99cff; }
.planning-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; min-width: 0; }
.planning-row .planning-free-pill + .planning-free-pill, .planning-free-icon + .planning-free-pill { margin-left: -8px; }
.planning-free-icon { display: inline-flex; color: #92999c; }
.planning-row[data-free-pilots] { cursor: pointer; border-radius: 6px; }
.planning-row[data-free-pilots]:hover .planning-free-icon { color: var(--community-accent, #52d3d8); }
.planning-row[data-free-pilots]:hover .planning-free-pill { filter: brightness(1.25); }
.planning-free-icon svg { width: 17px; height: 17px; }
.planning-row + .planning-row { padding-top: 8px; border-top: 1px solid #343e41; }
.planning-start[open] .planning-row { display: none; }
/* Quick actions of a start (« Inscription », « Créer un équipage »): small squares with an icon and a +. */
.planning-start.has-quick > summary { padding-right: 118px; }
.planning-start.has-quick .planning-row { margin-right: -74px; }
.planning-quick { position: absolute; top: 9px; right: 40px; display: flex; gap: 6px; }
.planning-start.is-compact .planning-quick { top: 7px; }
.planning-start.is-compact.has-quick > summary { min-height: 46px; align-content: center; }
.planning-quick-button { display: grid; place-items: center; width: 32px !important; height: 32px !important; min-width: 0 !important; min-height: 0 !important; padding: 0 !important; border: 1px solid #3a4548; border-radius: 9px; background: #151b1d; color: #c7d0d4; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.planning-quick-button svg { width: 19px; height: 19px; }
.planning-quick-icon { position: relative; display: grid; place-items: center; }
.planning-quick-label { display: none; }
/* Opened start: the two actions become buttons with their name, on the title line (the next line when the day
   is too narrow for them). */
.planning-start[open].has-quick > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-right: 44px; }
.planning-start[open] .planning-quick { position: static; margin-left: auto; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 100%; }
.planning-start[open] .planning-quick-button { width: auto !important; gap: 9px; grid-auto-flow: column; padding: 0 14px 0 11px !important; }
.planning-start[open] .planning-quick-label { display: inline; font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.planning-quick-button:hover, .planning-quick-button[aria-expanded="true"] { border-color: var(--community-accent, #52d3d8); color: var(--community-accent, #52d3d8); background: color-mix(in srgb, var(--community-accent, #52d3d8) 10%, #151b1d); }
.planning-quick-menu-wrap { position: relative; }
.planning-quick-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; display: grid; min-width: 250px; padding: 6px; border: 1px solid #3a4548; border-radius: 11px; background: #161c1e; box-shadow: 0 14px 32px rgba(0, 0, 0, .5); }
.planning-quick-menu[hidden] { display: none; }
.planning-quick-item { padding: 9px 11px; border: 0; border-radius: 8px; background: none; color: #e6ecea; font-size: 14px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
.planning-quick-item:hover, .planning-quick-item:focus-visible { background: color-mix(in srgb, var(--community-accent, #52d3d8) 14%, transparent); color: #fff; }
/* A crew's padlock: green and open while it takes pilots, red and closed once full. */
.planning-crew-lock { display: inline-flex; }
.planning-crew-lock.is-open { color: #35c26b; }
.planning-crew-lock.is-locked { color: #e0534f; }
.planning-crew-lock svg { width: 14px; height: 14px; }

/* Opened start: buttons first, then the crews (side by side when the day has widened) and the pilots. */
html[data-game] #app .planning-body.departure-fold { margin: 0 !important; padding: 0 16px 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; opacity: 1 !important; }
.planning-actions { padding: 12px 0 14px; border-top: 1px solid #262e31; }
/* The three buttons on one line (the opened day is wide enough for them). */
html[data-game] #app .planning-actions .ux-summary-registration-actions { display: flex !important; flex-wrap: nowrap !important; align-items: center; justify-content: flex-start !important; gap: 16px !important; margin: 0 !important; width: auto !important; grid-template-columns: none !important; }
html[data-game] #app .planning-actions .ux-summary-registration-actions > * { flex: none !important; width: auto !important; min-width: 0 !important; margin: 0 !important; grid-column: auto !important; white-space: nowrap; }
html[data-game] #app .planning-actions .ux-summary-registration-toggle { padding: 0 16px !important; }
html[data-game] #app .planning-body .departure-fold-body { padding: 0 !important; }
html[data-game] #app .planning-body .ux-course-crews-body { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
/* Pilots without a crew on the same grid as the crews above: same left edge, same columns, same gap. */
html[data-game] #app .planning-body .ux-course-crews-body { gap: 10px !important; }
html[data-game] #app .planning-body .ux-course-pilots-accordion { padding: 0 0 4px !important; }
html[data-game] #app .planning-body .ux-course-pilots-body, html[data-game] #app .planning-body .ux-unassigned-section { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; }
html[data-game] #app .planning-body .ux-unassigned-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 10px !important; padding-top: 4px; }
/* « Ton équipage » / your own entry: the white ring drawn inside the card, so every card keeps the same edges. */
html[data-game] #app .planning-body .crew-card-shell.is-mine, html[data-game] #app .planning-body .ux-unassigned-grid > .pilot-row.ux-current-pilot { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: -2px; }
html[data-game] #app .planning-body .pilot-row { min-width: 0; }
/* Crews of a start: no empty room kept under the pilots. */
html[data-game] #app .planning-body .crew-tile-summary .crew-compact-pilots { min-height: 0; }
html[data-game] #app .planning-body .pilot-row * { overflow-wrap: normal; word-break: normal; }

/* Date block of a race over several days: "ven. → dim." / "16–18" / "oct." */
html[data-game] #app .race-card .race-date.is-range, html[data-game] #app .race-header .race-date.is-range { width: auto !important; min-width: 62px; padding-inline: 10px !important; align-self: flex-start; height: auto; }
html[data-game] #app .race-card .race-date.is-range strong { font-size: 23px; }
html[data-game] #app .race-header .race-date.is-range strong { font-size: 28px; }
.race-date.is-range small { white-space: nowrap; }

/* Race header: a shortcut to the pilot's own start */
html[data-game] #app .race-header .race-my-start { display: grid; gap: 6px; justify-items: end; align-self: center; margin-left: auto; text-align: right; }
.race-my-start small { color: #92999c; font-size: 12.5px; }
html[data-game] #app .race-my-start .secondary-button { border-color: var(--community-accent, #52d3d8) !important; }

@media (prefers-reduced-motion: reduce) { .planning-days, .planning-start, .planning-chevron { transition: none; } }

/* Phone: one day at a time */
@media (max-width: 760px) {
  .planning-arrows, .departure-planning.has-more .planning-arrows, .planning-span { display: none; }
  .planning-race-actions { order: 5; flex-basis: 100%; margin-left: 0; }
  .planning-quick-button { width: 36px !important; height: 36px !important; }
  .planning-start.has-quick > summary { padding-right: 126px; }
  .planning-start.is-compact.has-quick > summary { min-height: 52px; }
  .planning-start.has-quick .planning-row { margin-right: -82px; }
  html[data-game] #app .planning-race-actions .race-header-actions { flex-wrap: wrap; gap: 6px 16px; }
  html[data-game] #app .planning-race-actions .race-header-actions > * { min-height: 32px !important; font-size: 13px !important; }
  html[data-game] #app .planning-race-actions .race-header-actions > .secondary-button { padding: 0 10px !important; }
  html[data-game] #app .planning-actions .ux-summary-registration-actions { flex-wrap: wrap !important; }
  .planning-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .planning-tab { flex: 1 0 70px; position: relative; display: grid; gap: 1px; padding: 8px 4px; border: 1px solid #343c3f; border-radius: 11px; background: #111617; color: #f4f6f5; line-height: 1.2; cursor: pointer; }
  .planning-tab small { color: #92999c; font-size: 11px; }
  .planning-tab strong { font-size: 15px; }
  .planning-tab.is-active { border-color: var(--community-accent, #52d3d8); background: color-mix(in srgb, var(--community-accent, #52d3d8) 12%, #111617); }
  .planning-tab-mine { width: 6px; height: 6px; border-radius: 50%; background: var(--community-accent, #52d3d8); justify-self: center; }
  .planning-scroll { overflow: visible; }
  .planning-days, .departure-planning.is-fit .planning-days { grid-template-columns: minmax(0, 1fr) !important; }
  .planning-day:not(.is-active) { display: none; }
  .planning-day.is-active { display: grid; }
  .planning-day-head { display: none; }
  html[data-game] #app .race-header .race-card-top { flex-wrap: wrap; }
  html[data-game] #app .race-header .race-my-start { order: 5; flex: 1 1 100%; justify-items: stretch; margin-left: 0; text-align: left; }
}

/* =====================================================================
   Race page, compact: the banner as a thin band and the race header on few lines, so the starts come right
   under it (the full banner stays on the list of races and the home page).
   ===================================================================== */
html[data-view="event"] header.site-hero .hero-picture { aspect-ratio: auto; height: clamp(76px, 8vw, 140px); }
html[data-view="event"] header.site-hero .hero-banner { object-fit: cover; object-position: center 40%; }
html[data-game] #app .race-header { gap: 10px !important; padding: 14px 18px !important; }
html[data-game] #app .race-header .race-card-top { align-items: center; gap: 16px; }
html[data-game] #app .race-header .race-date { width: 66px; padding: 5px 0 6px; }
html[data-game] #app .race-header .race-date strong { font-size: 25px; }
html[data-game] #app .race-header .race-date small { font-size: 12px; }
html[data-game] #app .race-header .race-date.is-range strong { font-size: 23px; }
html[data-game] #app .race-header .race-head { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 4px 12px; text-align: left; }
html[data-game] #app .race-header .event-title { flex-basis: 100%; font-size: 28px !important; }
html[data-game] #app .race-header .race-meta { font-size: 15px; }
html[data-game] #app .race-header .event-header-countdown { margin: 0 !important; }
html[data-game] #app .race-header .race-card-top > .circuit-visual { width: 150px !important; height: 84px !important; }
html[data-game] #app .race-header .race-header-footer { padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .07); }
html[data-game] #app .race-header .race-header-actions .secondary-button { min-height: 34px !important; padding: 0 12px !important; font-size: 13.5px !important; }
html[data-game] #app .race-header .event-category-badge { padding-block: 4px !important; }
html[data-game] #app .departure-planning { margin-top: 12px; }
@media (max-width: 760px) {
  html[data-view="event"] header.site-hero .hero-picture { height: 64px; }
  html[data-game] #app .race-header { padding: 12px !important; }
  html[data-game] #app .race-header .event-title { font-size: 22px !important; }
  html[data-game] #app .race-header .race-card-top > .circuit-visual { width: 72px !important; height: 56px !important; }
  html[data-game] #app .race-header .race-my-start small { display: none; }
  html[data-game] #app .race-header .race-my-start .secondary-button { min-height: 38px !important; font-size: 14px !important; }
  html[data-game] #app .race-header .race-header-actions { flex-wrap: wrap; gap: 8px 16px; justify-content: flex-start; }
  html[data-game] #app .race-header .race-header-actions > * { min-height: 32px !important; font-size: 13px !important; white-space: nowrap; }
  html[data-game] #app .race-header .race-header-actions > .secondary-button { padding: 0 10px !important; }
  html[data-game] #app .race-header .race-header-footer { gap: 10px !important; }
}

/* =====================================================================
   Info bubbles (data-tip, front/tooltip.mjs): a short explanation on hover (computer) or on a tap (phone).
   ===================================================================== */
.em-tip { position: fixed; z-index: 10000; max-width: min(280px, calc(100vw - 16px)); padding: 7px 11px; border: 1px solid #3a4548; border-radius: 9px; background: #1a2123; color: #e6ecea; font-size: 13px; font-weight: 500; line-height: 1.4; text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); pointer-events: none; }
.em-tip[hidden] { display: none; }
[data-tip]:not(button):not(a):not(summary):not(label) { cursor: help; }
.planning-row[data-free-pilots], .planning-start [data-tip] { cursor: pointer; }
.tip-info { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 4px; border: 1px solid #4a5558; border-radius: 50%; color: #aab3b6; font-size: 11px; font-style: normal; line-height: 1; vertical-align: 1px; cursor: help; }
.tip-info:hover { color: var(--community-accent, #52d3d8); border-color: var(--community-accent, #52d3d8); }

/* ---------- Phone pass (≤ 760px): compact bar, race cards on fewer lines, categories on one row ---------- */
@media (max-width: 760px) {
  .site-nav-shell { gap: 6px !important; padding: 6px !important; }
  .site-nav-shell #navigation .nav-game-switcher-button { min-height: 36px !important; font-size: 14px !important; }
  .site-nav-shell #navigation > .nav-sections { flex-wrap: wrap; gap: 4px !important; }
  .site-nav-shell #navigation > .nav-sections > .nav-section-button { flex: 1 1 auto !important; min-width: auto; min-height: 34px !important; padding: 0 8px !important; justify-content: center; font-size: 13px !important; white-space: nowrap; }

  /* Race list: filters and the add button on one line. */
  html[data-game] #app .page-head { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
  html[data-game] #app .page-head .event-filter { flex: 1 1 auto; }
  html[data-game] #app .page-head .event-filter-button { min-height: 36px !important; padding: 0 10px !important; font-size: 14px !important; }
  html[data-game] #app .page-head [data-action="create"] { min-height: 36px !important; padding: 0 12px !important; font-size: 13.5px !important; }

  /* Race card: the circuit drawing small at the top right, next to the title (no empty band above). */
  html[data-game] #app .race-card-body { position: relative; }
  html[data-game] #app .race-card-circuit { position: absolute !important; top: 10px; right: 10px; width: 64px !important; height: 56px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
  /* Reset the legacy 96px minimum: it otherwise overflows the 64px panel. */
  html[data-game] #app .race-card-circuit .circuit-visual { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 0 !important; max-height: 100% !important; flex: 0 1 auto !important; transform: none !important; }
  html[data-game] #app .race-card-circuit img { width: 100% !important; height: 100% !important; object-fit: contain; }
  html[data-game] #app .race-card .race-head { padding-right: 68px; min-width: 0; }
  html[data-game] #app .race-card .race-date { min-width: 52px; }

  /* Categories on one row (three per row at most, each keeps its logo, name and count). */
  html[data-game] #app .race-fill { display: block !important; }
  html[data-game] #app .event-category-badges { display: grid !important; width: 100% !important; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 4px !important; }
  html[data-game] #app .event-category-badge { min-width: 0; padding: 5px 5px !important; gap: 5px !important; }
  html[data-game] #app .event-category-badge .category-logo { width: 22px !important; height: auto !important; flex: 0 0 22px; }
  html[data-game] #app .event-category-copy { min-width: 0; }
  html[data-game] #app .event-category-copy strong { display: block; font-size: 11.5px !important; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html[data-game] #app .event-category-copy small { font-size: 10.5px !important; white-space: nowrap; }
  html[data-game] #app .race-header .event-category-badges.event-header-stats { display: grid !important; width: 100% !important; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)) !important; gap: 4px !important; }

  /* Race page: the date block keeps its size; crew cards only as tall as their drivers. */
  html[data-game] #app .race-header .race-date { align-self: flex-start !important; height: auto !important; }
  html[data-game] #app .crew-tile-summary .crew-compact-pilots { min-height: 0 !important; }
  html[data-game] #app .crew-tile-summary { gap: 6px !important; padding: 10px 12px !important; }
  /* Drivers without a crew: one card per row, full width (logo, name and car, then the whole timeline). */
  html[data-game] #app .ux-unassigned-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; }
  html[data-game] #app .ux-unassigned-grid > .pilot-row { width: auto !important; max-width: none !important; }
  html[data-game] #app .ux-unassigned-grid > .pilot-row > .pilot-main { grid-template-columns: 30px minmax(0, 1fr) !important; }
  html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo { grid-column: 1 !important; grid-row: 1 / span 2 !important; }
  html[data-game] #app .ux-unassigned-grid .pilot-main > :not(.pilot-category-logo) { grid-column: 2 !important; }
  html[data-game] #app .ux-unassigned-grid .presence-timeline { width: 100% !important; }
  html[data-game] #app .ux-course-pilots-body, html[data-game] #app .ux-unassigned-section { padding: 4px 0 !important; }
  /* Administration: the tabs on two columns (never out of the screen). */
  .members-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .members-tabs button { min-height: 40px; padding: 0 8px; font-size: 14px; white-space: nowrap; }
}

/* Large screens (27–34 inch, ultrawide): the whole interface grows in proportion and the page uses
   more of the width. The banner keeps its own sizing (its image is capped at its source resolution). */
@media (min-width: 2200px) { :root { --wide-zoom: 1.15; } }
@media (min-width: 2500px) { :root { --wide-zoom: 1.25; } main { max-width: 1760px; } }
@media (min-width: 3000px) {
  :root { --wide-zoom: 1.4; }
  main { max-width: 2000px; }
  html[data-game] .event-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (min-width: 2200px) {
  body > :not(.site-hero):not(.top-stripes):not(script):not(noscript) { zoom: var(--wide-zoom); }
}

/* ---------- Courses officielles : communauté de chaque inscrit et équipage ---------- */
.community-tag { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 22px; min-width: 22px; padding: 0 6px; border: 1px solid var(--tag); border-radius: 6px; color: var(--tag); background: color-mix(in srgb, var(--tag) 14%, transparent); font-size: 11px; font-weight: 900; letter-spacing: .04em; line-height: 1; text-transform: uppercase; vertical-align: middle; }
.community-tag.has-logo { width: 22px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; }
.community-tag.has-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Bigger in front of a pilot's or a crew's name, well visible: 30 px. */
.pilot-name:has(> .community-tag), .crew-planning-label { display: inline-flex; align-items: center; gap: 8px; }
.pilot-name > .community-tag, .crew-compact-team > .community-tag, .crew-planning-label > .community-tag { height: 30px; min-width: 30px; font-size: 12px; }
.pilot-name > .community-tag.has-logo, .crew-compact-team > .community-tag.has-logo, .crew-planning-label > .community-tag.has-logo { width: 30px; }
.planning-crew > .community-tag { height: 24px; min-width: 24px; }
.planning-crew > .community-tag.has-logo { width: 24px; }
.official-badge { display: inline-flex; align-items: center; padding: 2px 9px; border: 1px solid rgba(83, 216, 255, .75); border-radius: 999px; color: #53d8ff; background: rgba(83, 216, 255, .1); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
html[data-game] .race-card .race-head .official-badge { font-size: 10.5px; padding: 2px 8px; margin: 2px 6px 0 0; }
.community-choice { display: grid; gap: 8px; }
.community-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.community-choice-button { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; background: rgba(255, 255, 255, .04); color: inherit; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.community-choice-button:hover, .community-choice-button.active { border-color: #53d8ff; background: rgba(83, 216, 255, .1); }
.community-choice-button img, .community-choice-short { width: 36px; height: 36px; flex: none; border-radius: 50%; }
.community-choice-short { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--tag, #8e9996); color: var(--tag, #8e9996); background: color-mix(in srgb, var(--tag, #8e9996) 14%, transparent); font-size: 12px; font-weight: 900; }
.registration-community-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; }
.registration-community-line > span:first-child { color: #8e9996; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }

/* « Mes communautés », dans le menu du compte : le site de chacune, logo Discord ou nom court. */
.account-menu-heading { display: block; padding: 4px 10px 2px; color: #99a3a0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.account-community { gap: 10px; }
.account-community > span:not(.account-community-logo) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-community.is-current { cursor: default; background: rgba(89, 211, 216, .09); }
.account-community small { color: #52d3d8; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.account-community-logo { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.account-community-logo.is-short { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .1); font-size: 9.5px; font-weight: 900; }

/* Community of the site, next to the language flag: its Discord logo and its short name. */
.game-space-bar > .community-badge { display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 120px; padding: 0 10px 0 5px; border: 1px solid var(--community-accent, rgba(82, 211, 216, .5)); border-radius: 8px; background: rgba(12, 18, 21, .78); color: #f4f6f5; font-size: 13px; font-weight: 900; letter-spacing: .05em; white-space: nowrap; }
.game-space-bar > .community-badge:not(:has(img)) { padding-left: 10px; }
.game-space-bar > .community-badge img { width: 22px; height: 22px; flex: none; border-radius: 50%; object-fit: cover; }
.game-space-bar > .community-badge strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.game-space-bar:has(> .community-badge) { gap: 8px; }

/* ---------- Filtres de la liste des courses ---------- */
.race-filter-toggle { display: inline-flex !important; align-items: center; gap: 6px; }
.race-filter-toggle svg { width: 15px; height: 15px; }
.race-filter-toggle em { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--community-accent, #52d3d8); color: #061014; font-size: 11px; font-style: normal; font-weight: 900; line-height: 18px; text-align: center; }
.race-filter-panel { display: grid; gap: 12px; margin: 0 0 18px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(12, 18, 21, .78); }
.race-filter-group { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; }
.race-filter-title { color: #99a3a0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.race-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.race-filter-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: transparent; color: #dfe6e4; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.race-filter-chip:hover { border-color: rgba(82, 211, 216, .6); }
.race-filter-chip.active { border-color: var(--community-accent, #52d3d8); background: color-mix(in srgb, var(--community-accent, #52d3d8) 16%, transparent); color: #fff; }
.race-filter-chip img:not(.category-logo) { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
/* Category logos as on the cars: square on LMU, round on iRacing. */
.race-filter-chip .category-logo { width: 22px; height: auto; border-radius: 0; }
html[data-game="iracing"] .race-filter-chip .category-logo { border-radius: 50%; }
.race-filter-date { display: inline-flex; align-items: center; gap: 6px; color: #99a3a0; font-size: 13px; font-weight: 700; }
.race-filter-date input { min-height: 32px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 8px; background: rgba(0, 0, 0, .25); color: #eef3f2; font: inherit; color-scheme: dark; }
.race-filter-foot { display: flex; justify-content: flex-end; }
@media (max-width: 760px) {
  .race-filter-group { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ---------- Comment fonctionnent les communautés (une fois, puis depuis le menu du compte) ---------- */
.community-intro-overlay { position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .66); backdrop-filter: blur(3px); }
.community-intro { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; display: grid; gap: 14px; padding: 24px; border: 1px solid rgba(82, 211, 216, .35); border-radius: 16px; background: #0d1316; color: #e6ecea; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.community-intro h2 { margin: 0; font-size: 21px; color: #f4f6f5; }
.community-intro ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.community-intro li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.community-intro li > span { font-size: 19px; line-height: 1.3; text-align: center; }
.community-intro li p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #c7d0d4; }
.community-intro li strong { color: #f4f6f5; }
.community-intro-foot { margin: 0; color: #8e9996; font-size: 13px; }
.community-intro .primary-button { justify-self: end; min-width: 160px; }

/* Official race: the communities shown on the planning (chips above the starts). */
.race-community-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.race-community-filter .race-filter-chip small { color: #99a3a0; font-size: 11.5px; font-weight: 800; }
.race-community-filter .race-filter-chip.active small { color: inherit; }
.race-community-filter .community-tag { height: 20px; min-width: 20px; font-size: 10px; }
.race-community-filter .community-tag.has-logo { width: 20px; }

/* EVENT TDZ: the event's details on the calendar card, one line per round. */
.solo-card-info { display: grid; gap: 6px; margin: 10px 0 2px; }
.solo-info-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.solo-info-circuit { min-width: 0; margin-right: 2px; font-size: 12px; font-weight: 700; color: var(--text, #f2f4f7); }
.solo-info-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 3px 9px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px; background: rgba(255, 255, 255, .04); font-size: 12px; font-weight: 700; line-height: 1.2; color: #dfe5ea; }
.solo-info-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.solo-info-chip svg { flex: none; width: 14px; height: 14px; fill: none; stroke: #7fe3ea; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.solo-info-weather { padding: 2px 8px; font-size: 14px; }

/* EVENT TDZ: category logo on a round line, and the absents at the bottom of an event. */
.solo-info-category { display: inline-flex; align-items: center; }
.solo-info-category .category-logo, .solo-info-category img { width: 26px; height: 20px; object-fit: contain; }
.solo-category-chip { flex-direction: column; gap: 2px; }
.solo-category-chip > span { font-size: 10px; font-weight: 800; color: #c7d0d6; white-space: nowrap; }
.solo-single-category { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.solo-single-category .category-logo { width: 40px; height: 30px; object-fit: contain; }
.event-absences { margin: 18px 0 8px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .02); }
.event-absences-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.event-absences h2 { margin: 0; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: #c7d0d6; }
.event-absences h2 span { margin-left: 6px; color: #8a959c; }
.event-absences ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.event-absences li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: 13px; color: #dfe5ea; }
.event-absences li.is-mine { outline: 1px solid #7fe3ea; }
.event-absences p { margin: 8px 0 0; font-size: 13px; color: #8a959c; }
.solo-random-category { margin: 0; padding: 8px 12px; border: 1px dashed rgba(255, 255, 255, .18); border-radius: 8px; color: #c7d0d6; font-size: 13px; }

/* EVENT TDZ card: one bottom line (start, places, my situation), the circuit only when there is a map. */
html[data-game] .race-card.is-solo .solo-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
html[data-game] .race-card.is-solo .solo-card-start { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; font-size: 15px; font-weight: 800; color: #f4f6f5; }
html[data-game] .race-card.is-solo .solo-card-start svg { width: 15px; height: 15px; fill: none; stroke: #7fe3ea; stroke-width: 2; stroke-linecap: round; }
html[data-game] .race-card.is-solo .solo-card-foot .solo-fill { flex: 1; min-width: 140px; max-width: 240px; }
html[data-game] .race-card.is-solo .solo-card-foot .race-situation { margin-left: auto; }
/* Panel kept for the event type logo (to come); on a phone an empty one takes no room. */
@media (max-width: 600px) { html[data-game] .race-card .race-card-type-logo:empty { display: none; } }
.event-access-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
html[data-game] .race-card .race-card-type-logo:has(.event-access-logo) { padding: 8px; background: none; border: 0; }
html[data-game] #app .my-entry-race .race-card-top > .event-access-logo { flex: none; align-self: center; width: 80px; height: 80px; margin-left: auto; }
@media (max-width: 600px) {
  html[data-game] #app .my-entry-race .race-card-top > .event-access-logo { width: 48px; height: 48px; }
}
html[data-game] #app .race-header .event-type-panel { flex: none; display: flex; align-items: center; justify-content: center; width: 220px; height: 150px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; background: rgba(255, 255, 255, .03); }
html[data-game] #app .race-header .event-type-panel span { font-size: 28px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--sim, #7fe3ea); text-align: center; padding: 0 10px; overflow-wrap: anywhere; }
@media (max-width: 600px) { html[data-game] #app .race-header .event-type-panel { width: 90px; height: 70px; } html[data-game] #app .race-header .event-type-panel span { font-size: 15px; } }
/* « M'inscrire » is always unfolded: icon and label, one click enters the pilot. */
.planning-quick-button.is-labelled { width: auto !important; grid-auto-flow: column; gap: 8px; padding: 0 12px 0 9px !important; border-color: var(--community-accent, #52d3d8); color: var(--community-accent, #52d3d8); }
.planning-quick-button.is-labelled .planning-quick-label { display: inline; font-size: 13px; font-weight: 800; white-space: nowrap; }
.planning-quick-button.is-absence { border-color: #f3b33d; color: #f3b33d; }
.planning-quick-button.is-absence:hover { border-color: #f3b33d; color: #f3b33d; background: rgba(243, 179, 61, .1); }
.planning-quick-button.is-absence.is-active { background: rgba(243, 179, 61, .16); }
/* A narrow start (a day among several): the buttons go on their own line under « Départ 15h ». */
.planning-day { container-type: inline-size; }
@container (max-width: 520px) {
  .planning-start:not([open]) .planning-quick { position: static; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .planning-start.has-quick:not([open]) > summary { padding-right: 44px !important; }
  .planning-start.has-quick:not([open]) .planning-row { margin-right: 0 !important; }
}

/* Participants of a solo event: compact cards, several per row. */
.solo-entries { grid-template-columns: repeat(auto-fill, minmax(190px, 240px)); gap: 8px; }
.solo-entry { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; padding: 7px 12px 7px 8px; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.solo-entry-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 12.5px; color: #dfe5ea; }
.solo-entry-name { font-size: 14.5px; font-weight: 800; color: #f4f6f5; }
.solo-entry.is-mine { border-color: var(--community-accent, #52d3d8); background: color-mix(in srgb, var(--community-accent, #52d3d8) 10%, transparent); }
.solo-entry.is-mine .solo-entry-rank { background: var(--community-accent, #52d3d8); color: #0b1012; }
@media (max-width: 600px) { .solo-entries { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
html[data-game] #app .race-header .race-header-time { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; font-size: 18px; font-weight: 800; color: #f4f6f5; }
html[data-game] #app .race-header .race-header-time svg { width: 18px; height: 18px; fill: none; stroke: #7fe3ea; stroke-width: 2; stroke-linecap: round; }

/* EVENT TDZ page: every detail as an icon tile; several rounds side by side. */
.solo-event-details { display: grid; gap: 10px; width: 100%; }
.solo-detail-rounds { display: grid; gap: 10px; }
.solo-detail-rounds.is-multi { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.solo-detail-round.is-card { padding: 12px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .02); }
.solo-detail-round-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.solo-detail-round-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 800; color: #f2f5f7; }
.solo-detail-round-head em { margin-left: auto; flex: none; font-style: normal; font-size: 12px; font-weight: 700; color: #9aa6b0; }
.solo-round-index { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--community-accent, #7fe3ea); color: #061014; font-size: 12px; font-weight: 900; }
.solo-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.solo-detail { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.solo-detail.is-wide { grid-column: 1 / -1; }
.solo-detail-icon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(127, 227, 234, .1); }
.solo-detail-icon svg { width: 18px; height: 18px; fill: none; stroke: #7fe3ea; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.solo-detail-emoji { font-size: 18px; line-height: 1; }
.solo-detail-copy { display: grid; min-width: 0; }
.solo-detail-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8c98a2; }
.solo-detail-copy strong { overflow-wrap: anywhere; font-size: 15px; font-weight: 800; color: #f2f5f7; }
.solo-detail-logos { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.solo-detail-logos .category-logo, .solo-detail-logos img { height: 20px; width: auto; }

/* EVENT TDZ card, several rounds: one aligned line per round. */
.solo-round-lines { display: grid; grid-template-columns: auto minmax(0, max-content) auto auto; align-items: center; justify-content: start; gap: 6px 10px; }
.solo-round-line { display: contents; }
.solo-round-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: #f2f5f7; }
.solo-round-cats { display: inline-flex; gap: 4px; align-items: center; }
/* Registration, several rounds: « Je la fais » / « Je ne la fais pas ». */
.solo-round-toggle { display: inline-flex; gap: 0; margin: 4px 0 12px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; overflow: hidden; }
.solo-round-toggle .secondary-button { margin: 0; border: 0; border-radius: 0; background: transparent; color: #9aa6b0; }
.solo-round-toggle .secondary-button + .secondary-button { border-left: 1px solid rgba(255, 255, 255, .14); }
.solo-round-toggle .secondary-button.active { background: var(--community-accent, #7fe3ea); color: #061014; }
/* EVENT TDZ in rounds: the rounds as starts (« Manche 1 »), opened on their details and pilots. */
.solo-round-starts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.solo-round-start .solo-detail-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 12px; }
.solo-round-pilots { font-size: 13px; color: #9aa6b0; }
.solo-round-label { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--community-accent, #7fe3ea); white-space: nowrap; }
.planning-quick-button.is-labelled.is-active { border-color: rgba(46, 204, 113, .6); color: #6fe3a1; }
/* Solo pilots: small cards, by category (rank within its category). */
.solo-entry-groups { display: grid; gap: 10px; }
.solo-entry-group { display: grid; gap: 6px; }
.solo-entry-group-head { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #dfe5ea; }
.solo-entry-group-head .category-logo, .solo-entry-group-head img { width: auto; height: 18px; }
.solo-entry-group-head em { font-style: normal; color: #8c98a2; }
.solo-entries { grid-template-columns: repeat(auto-fill, minmax(140px, 180px)); gap: 6px; }
.solo-entry { grid-template-columns: 20px minmax(0, 1fr) auto auto; gap: 6px; padding: 4px 8px 4px 5px; border-radius: 999px; }
.solo-entry-rank { width: 20px; height: 20px; font-size: 11px; }
.solo-entry-name { font-size: 13px; }
.solo-entry-logo { display: inline-flex; }
.solo-entry-logo .category-logo, .solo-entry-logo img { width: auto; height: 16px; }
.solo-entry-edit { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #9aa6b0; cursor: pointer; }
.solo-entry-edit:hover { background: rgba(255, 255, 255, .08); color: #f2f5f7; }
.solo-entry-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .solo-entries { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.solo-entry-group-head .solo-any-logo { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .1); font-size: 11px; }
/* A round's format: one small frame per item, its icon on the left, then label and value. */
.round-info { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.round-item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; background: rgba(255, 255, 255, .03); }
.round-item-icon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px; background: rgba(127, 227, 234, .1); color: #7fe3ea; }
.round-item-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.round-item-emoji { font-size: 16px; line-height: 1; }
.round-item-copy { display: grid; line-height: 1.15; }
.round-item-copy small { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #8c98a2; }
.round-item-copy strong { font-size: 15px; font-weight: 700; color: #eef2f4; white-space: nowrap; }
.round-item-categories { gap: 6px; padding: 8px 12px; }
.round-item-categories .category-logo, .round-item-categories img { display: block; width: auto; height: 24px; }
@media (max-width: 600px) {
  .round-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .round-item { padding-right: 8px; }
}
.solo-entry-logo.is-any { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: rgba(255, 255, 255, .1); font-size: 11px; color: #dfe5ea; }
.planning-quick-button.is-labelled.is-leave { border-color: rgba(255, 107, 107, .55); color: #ff8a8a; }
/* Solo pilots: each card as wide as the full name (never cut). */
.solo-entries { display: flex; flex-wrap: wrap; gap: 6px; }
.solo-entry { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.solo-entry-name { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 600px) { .solo-entries { display: flex; } }
/* A round's head: « Manche 1 » small, the circuit large (what the pilots look for first). */
.solo-round-head { align-items: center; }
.round-start-title { display: grid; min-width: 0; line-height: 1.15; }
.round-start-title small { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--community-accent, #7fe3ea); }
.round-start-title strong { font-size: 20px; font-weight: 800; color: #f4f6f7; overflow-wrap: anywhere; }
.solo-round-name { font-size: 14px; }
@media (max-width: 600px) { .round-start-title strong { font-size: 18px; } }
.solo-round-pilots strong { color: #eef2f4; }

/* EVENT TDZ: single-round event, the circuit name is the header's main info. */
.race-meta .solo-header-circuit { font-size: 24px; font-weight: 800; color: var(--text, #fff); letter-spacing: 0; }
@media (max-width: 640px) { .race-meta .solo-header-circuit { font-size: 20px; } }
.solo-round-start.is-single > summary { cursor: default; }
/* Its pilot count sits in the frame's head, next to the buttons. */
.solo-round-start.is-single .solo-round-head .solo-subtitle { margin: 0; font-size: 16px; font-weight: 800; }
.solo-round-start.is-single .solo-participants > .solo-subtitle:first-child { display: none; }
/* « Me désinscrire » is red everywhere (endurances and events). */
.secondary-button.is-leave { border-color: rgba(255, 107, 107, .55) !important; color: #ff8a8a !important; }
/* Header of an event: the type panel the size of an endurance's circuit, the title and its line kept together. */
html[data-game] #app .race-header .race-head { align-content: center; }
html[data-game] #app .race-header .event-type-panel { width: 150px; height: 84px; }
html[data-game] #app .race-header .event-type-panel.has-access-logo { background: none; border: 0; }
html[data-game] #app .race-header .event-type-panel.has-access-logo .event-access-logo { max-height: 150px; }
html[data-game] #app .race-header .event-type-panel span { font-size: 22px; }
@media (max-width: 600px) { html[data-game] #app .race-header .event-type-panel { width: 90px; height: 70px; } html[data-game] #app .race-header .event-type-panel span { font-size: 15px; } }
/* Creating or editing a race or an event: the same step-by-step window as entering a race. */
body:has(.form-sheet-overlay) { overflow: hidden; }
.form-sheet-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 8, 10, .72); }
.form-sheet { max-width: 760px; padding-bottom: 18px; }
.form-sheet .form-panel { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
@media (max-width: 600px) { .form-sheet-overlay { padding: 0; align-items: stretch; } .form-sheet { max-height: none; border-radius: 0; } }
/* In the window, the steps read like an entry: no intro, no numbered heading, no box around each step. */
.form-sheet .creation-intro, .form-sheet .creation-card-heading { display: none; }
.form-sheet .creation-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.form-sheet .form-label { font-size: 13px !important; }
.form-sheet .registration-step-nav { position: sticky; bottom: -18px; margin: 12px -20px -18px; padding: 12px 20px 18px; background: var(--panel, #111315); border-top: 1px solid rgba(255, 255, 255, .08); }
/* A long typed car or category wraps inside its tile instead of overflowing on a phone. */
.round-item { min-width: 0; }
.round-item-copy { min-width: 0; }
.round-item-copy strong { white-space: normal; overflow-wrap: anywhere; }
/* « Comment devenir SAFE »: a link to the Discord channel, in the SAFE colour. */
.planning-quick-button.is-safe-guide { width: auto !important; padding: 0 12px !important; border-color: rgba(240, 192, 64, .55); color: #f0c040; text-decoration: none; }
.settings-safe-guide { display: grid; gap: 10px; }
.settings-safe-guide label { display: grid; gap: 6px; font-weight: 700; }
.crew-category { display: grid; gap: 6px; font-weight: 700; }
/* Site tour (2026-10-06). A duration (« 6 h ») never leaves its unit on the next line. */
.nowrap { white-space: nowrap; }
/* Countdown of a race header: « 4 j 8 h » stays together. */
.event-header-countdown strong { white-space: nowrap; }
/* Entry window: the note under the categories is not glued to the last one. */
.registration-category-list + .registration-step-help { margin-top: 10px; }
/* Race list filters on a phone: each on one line (« Mes courses » no longer wraps). */
@media (max-width: 640px) {
  html[data-game] #app .page-head .event-filter-button { white-space: nowrap; padding: 0 8px !important; font-size: 13px !important; }
}
/* Administration: every button the same size as the overview's; module tiles of a row the same height,
   their state at the bottom. */
.admin-shell .admin-main .primary-button, .admin-shell .admin-main .secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 12px; font-size: 13px; }
.admin-modules { align-items: stretch; }
.admin-module { display: flex; flex-direction: column; }
.admin-module-foot { margin-top: auto; }
/* Appearance: both name fields line up, the label text above each input. */
.settings-appearance label { align-content: end; }
.settings-appearance label > span:first-child { display: block; }
.admin-module-foot { min-height: 32px; }
/* Step windows: an opaque panel (the page no longer shows through), every field the same height and the
   fields of a row lined up on their bottom edge. */
.registration-sheet.form-sheet { background-color: #0c1012; }
.form-sheet .creation-field-grid { align-items: end; }
.form-sheet .creation-field-grid > .form-label, .form-sheet .creation-field-grid > .format-contents > .form-label { align-self: end; margin-bottom: 0; }
.form-sheet input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), .form-sheet select { min-height: 46px; box-sizing: border-box; }
.solo-event-form .solo-form-step > .form-label > input { margin-top: 8px; }
/* The simulator chooser also opens from « Endurance » (game pages do not load game-hub.css). */
.hub-sim-choice .game-badge { display: inline-grid; place-items: center; width: 46px; height: 34px; flex: none; border: 1px solid color-mix(in srgb, var(--game-accent) 72%, var(--border, #292d31)); border-radius: 8px; background: color-mix(in srgb, var(--game-accent) 16%, var(--panel2, #171a1d)); color: var(--game-accent); font-size: 14px; font-weight: 950; }
/* Administration on a phone: the sections in two columns, all visible (no more sideways scrolling). */
@media (max-width: 860px) {
  .admin-rail { flex-wrap: wrap; overflow: visible; }
  .admin-rail .admin-nav { flex: 1 1 calc(50% - 4px); justify-content: center; min-width: 0; gap: 8px; padding: 0 8px; font-size: 13.5px; white-space: nowrap; }
}

/* Endurance : badges sous la date, réglages de course en icônes (nom dans l'info-bulle). */
html[data-game] #app .race-header .race-side { flex: none; width: 120px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
html[data-game] #app .race-header .race-side .race-date { flex: none; width: auto !important; align-self: stretch !important; box-sizing: border-box; }
html[data-game] #app .race-header .race-side .race-badges { flex-direction: column; align-items: stretch; gap: 5px; width: 100%; }
html[data-game] #app .race-header .race-side .race-badges > * { box-sizing: border-box; width: 100%; margin: 0; justify-content: center; text-align: center; white-space: normal; line-height: 1.2; font-size: 10.5px; padding: 3px 6px; }
.race-info-chips { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 6px; margin-top: 4px; }
.race-info-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 8px; background: rgba(255, 255, 255, .04); color: #e6ecea; font-size: 14px; cursor: help; }
.race-info-chip svg { width: 18px; height: 18px; color: #7fe3ea; flex: none; }
.race-info-chip b { font-weight: 700; }
.race-info-fields { display: flex; flex-direction: column; gap: 8px; }
.race-info-fields > .form-label small { display: inline !important; margin: 0 !important; font-weight: 400; text-transform: none; color: #8f999d; }
.race-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.race-info-grid .form-label > span:first-child { display: inline-flex; align-items: center; gap: 6px; min-height: 18px; }
.race-info-grid svg { width: 16px; height: 16px; color: #7fe3ea; flex: none; }
.race-weather-fields { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; }
.race-weather-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.race-weather-slot { display: flex; align-items: center; gap: 6px; min-width: 0; }
.race-weather-slot small { flex: none; width: 12px; color: #8f999d; font-weight: 700; }
.race-weather-slot select { flex: 1; min-width: 0; }
.race-weather-chip { gap: 4px; }
.race-weather-chip i { font-style: normal; color: #8f999d; width: 18px; text-align: center; }
@media (max-width: 760px) {
  html[data-game] #app .race-header .race-side { width: 88px; }
  html[data-game] #app .race-header .race-side .race-badges > * { font-size: 8.5px; padding: 3px 2px; letter-spacing: 0; }
  .race-info-chip { font-size: 13px; padding: 3px 8px; }
}

/* « Inscription par catégorie »: the pilot's entry for the whole race, above the starts. */
.category-entry-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 14px 16px; border: 1px solid #2b3336; border-radius: 12px; background: rgba(13, 17, 18, .82); font-size: 14px; color: var(--muted, #b7bfbc); }
.category-entry-bar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.category-entry-bar-actions > button { min-height: 44px; }
.category-entry-bar-actions .danger-button { border-radius: 10px; font-weight: 700; }
.category-entry-bar.is-entered { border-color: rgba(79, 209, 197, .6); }
.category-entry-mine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--text, #f2f5f4); }
.category-entry-mine .category-logo { height: 20px; width: auto; }
.category-entry-mine em { font-style: normal; color: var(--muted, #92979c); }
.category-entry-mine em.is-waiting { color: #f3b33d; }
.category-entry-gate { display: grid; justify-items: center; gap: 14px; margin: 28px 0; padding: 48px 16px; border: 1px solid #2b3336; border-radius: 14px; background: rgba(13, 17, 18, .82); }
.category-entry-gate > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.category-entry-gate > div > button { min-width: 180px; min-height: 52px; font-size: 17px; }
.category-entry-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
body:has([data-category-entry]) { overflow: hidden; }
[data-category-entry].crew-builder-overlay { height: 100vh; height: 100dvh; bottom: auto; }
.category-entry-sheet { max-width: 760px; max-height: min(94vh, 980px); max-height: min(94dvh, 980px); padding-bottom: 0; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ce-tabs { display: flex; gap: 22px; margin: 2px 0 6px; border-bottom: 1px solid #2b3336; }
.ce-tabs span { padding: 0 0 9px; color: var(--muted, #92979c); font-size: 14px; font-weight: 700; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ce-tabs span.active { color: #4fd1c5; border-color: #4fd1c5; }
.ce-tabs span.done { color: var(--text, #f2f5f4); }
.ce-intro h3 { margin: 10px 0 4px; font-size: 22px; line-height: 1.25; color: var(--text, #f2f5f4); }
.ce-intro p { margin: 0 0 14px; color: var(--muted, #b7bfbc); font-size: 15px; }
.category-entry-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.category-entry-categories .category-button { min-height: 92px; flex-direction: column; justify-content: center; gap: 6px; }
.category-entry-categories .registration-category-copy { display: grid; justify-items: center; gap: 2px; }
.category-entry-categories .registration-category-copy em { font-style: normal; font-size: 13px; color: var(--muted, #92979c); }
.category-entry-categories .category-button.active .registration-category-copy em { color: #4fd1c5; font-weight: 700; }
.ce-start-days { display: grid; gap: 12px; }
.ce-start-day h4 { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; padding: 0 2px 5px; border-bottom: 2px solid var(--community-accent, #52d3d8); font-size: 15px; text-transform: capitalize; color: var(--text, #f2f5f4); }
.ce-start-day h4 span { color: var(--muted, #92979c); font-weight: 600; text-transform: none; }
.ce-start-list { display: grid; gap: 6px; }
.ce-start { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 8px; padding: 8px 10px 8px 12px; border: 1px solid #2b3538; border-radius: 10px; background: #111617; }
.ce-start.is-on { border-color: var(--community-accent, #52d3d8); box-shadow: inset 0 0 0 1px var(--community-accent, #52d3d8); }
.ce-start-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; min-width: 0; }
.ce-start-top strong { font-size: 17px; color: #f4f6f5; font-variant-numeric: tabular-nums; }
.ce-start-info { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ce-start-info .planning-free-pill { padding: 0 6px; font-size: 11.5px; }
.ce-start-crews { color: #92999c; font-size: 12px; font-weight: 600; }
.ce-start-choice { display: flex; gap: 6px; }
.ce-start-choice .planning-quick-button.is-labelled { width: auto !important; height: 32px !important; gap: 5px; padding: 0 9px 0 7px !important; grid-auto-flow: column; }
.ce-start-choice .planning-quick-button svg { width: 16px; height: 16px; }
.ce-start-choice .planning-quick-button.is-labelled .planning-quick-label { font-size: 12.5px; }
.ce-start-choice .planning-quick-button.is-labelled.is-active:not(.is-absence) { border-color: var(--community-accent, #52d3d8); background: var(--community-accent, #52d3d8); color: #062523; }
.ce-start-choice .planning-quick-button.is-absence.is-active { border-color: #f3b33d; background: #f3b33d; color: #1b1302; }
.ce-start-hours { grid-column: 1 / -1; display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid #263033; }
.ce-start-hours-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ce-start-hours-head span { color: #92999c; font-size: 12px; font-weight: 700; }
.ce-start-hours-head .is-part { color: #f3b33d; }
.ce-whole { flex: none; min-height: 26px !important; padding: 2px 10px; border: 1px solid var(--community-accent, #52d3d8); border-radius: 999px; background: none; color: var(--community-accent, #52d3d8); font-size: 13px; font-weight: 700; cursor: pointer; }
.ce-whole.active { background: var(--community-accent, #52d3d8); color: #062523; }
.ce-start-hours .presence-timeline { margin: 0; }
.ce-start-hours .presence-scale { height: 18px; font-size: 11px; }
.ce-start-hours .presence-track > .presence-segment { height: 26px; min-height: 26px; }
.ce-start-hours .presence-edges { display: none; }
.ce-concerned { margin: 14px 0 6px; padding-top: 12px; border-top: 1px solid #2b3336; font-size: 14px; color: var(--muted, #b7bfbc); }
.ce-concerned summary { cursor: pointer; font-weight: 700; }
.ce-concerned ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.ce-concerned li { display: flex; justify-content: space-between; gap: 10px; text-transform: capitalize; }
.ce-concerned li strong { color: var(--text, #f2f5f4); font-weight: 600; }
.ce-concerned li span { text-transform: none; font-weight: 700; }
.ce-concerned li span.is-whole { color: #4fd1c5; } .ce-concerned li span.is-part { color: #f3b33d; }
.category-entry-sheet .registration-workspace-head { position: sticky; top: -18px; z-index: 3; margin: -18px -20px 0; padding: 16px 20px 10px; background: #111315; align-items: center; }
.ce-footer { position: sticky; bottom: 0; margin: 12px -20px 0; padding: 14px 20px 12px; border-top: 1px solid #2b3336; background: var(--panel, #111315); }
.category-entry-sheet[data-step="3"] .ce-footer { position: static; }
.ce-footer .registration-step-nav { margin: 0; padding: 0; position: static; border: 0; background: none; }
.ce-tally { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ce-tally b { font-size: 34px; line-height: 1; color: #4fd1c5; }
.ce-tally strong { display: block; font-size: 16px; color: var(--text, #f2f5f4); }
.ce-tally em { display: block; font-style: normal; font-size: 13px; color: var(--muted, #92979c); }
.ce-tally.is-empty b { color: #f3b33d; }
.ce-footnote { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--muted, #92979c); }
@media (max-width: 760px) {
  .category-entry-sheet { max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); }
  .category-entry-sheet .registration-workspace-head { top: -14px; margin: -14px -14px 0; padding: 12px 14px 8px; }
  .ce-footer { margin: 12px -14px 0; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
}
@media (max-width: 520px) { .category-entry-bar { flex-direction: column; align-items: stretch; } .category-entry-bar-actions > button { flex: 1; } .category-entry-gate > div > button { min-width: 140px; } }
.category-entry-categories .category-button { width: 100% !important; max-width: none !important; min-height: 116px !important; padding: 14px 10px !important; }
.category-entry-categories .category-button .category-logo, .category-entry-categories .category-button img { height: 38px !important; width: auto !important; }
.category-entry-categories .registration-category-copy strong { font-size: 17px !important; color: var(--text, #f2f5f4); }
.category-entry-categories .registration-category-copy em { font-size: 14px !important; }
.registration-step .ce-range { margin-top: 12px; }
.ce-subtitle { margin: 18px 0 8px; font-size: 15px; color: var(--text, #f2f5f4); }
.ce-concerned-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.ce-concerned-list li { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr); align-items: center; gap: 12px; min-width: 0; padding: 5px 10px; border-radius: 6px; background: #121718; font-size: 12px; }
.ce-concerned-heading { display: grid; gap: 2px; }
.ce-concerned-heading strong { text-transform: capitalize; }
.ce-concerned-heading span { font-weight: 700; }
.ce-concerned-list li span.is-whole { color: #4fd1c5; } .ce-concerned-list li span.is-part { color: #f3b33d; }
/* Compact final check: ten starts stay readable alongside their availability. */
.category-entry-sheet[data-step="3"] .registration-stepper,
.category-entry-sheet[data-step="3"] .registration-step { gap: 6px; }
.category-entry-sheet[data-step="3"] .registration-summary-row { min-height: 30px; padding: 5px 10px; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 6px; font-size: 13px; }
.category-entry-sheet[data-step="3"] .registration-summary-row > span,
.category-entry-sheet[data-step="3"] .registration-summary-row > strong,
.category-entry-sheet[data-step="3"] .registration-summary-row > em { font-size: 12px; }
.category-entry-sheet[data-step="3"] .ce-subtitle { margin: 8px 0 2px; font-size: 13px; }
.category-entry-sheet[data-step="3"] .ce-tabs { display: none; }
.category-entry-sheet[data-step="3"] .ce-footer { margin-top: 8px; padding-top: 8px; padding-bottom: 8px; }
.category-entry-sheet[data-step="3"] .ce-tally { margin-bottom: 6px; gap: 8px; }
.category-entry-sheet[data-step="3"] .ce-tally b { font-size: 24px; }
.category-entry-sheet[data-step="3"] .ce-tally strong { font-size: 13px; }
.category-entry-sheet[data-step="3"] .ce-tally em { font-size: 11px; }
.ce-concerned-list .presence-timeline { margin-top: 0; }
.ce-concerned-list .presence-scale { height: 18px; }
.registration-sheet .ce-concerned-list .presence-time { font-size: 10px !important; line-height: 12px; }
.ce-concerned-list .presence-track > .presence-segment { height: 10px; }
.ce-concerned-list .presence-edges { display: none; }
@media (max-width: 520px) {
  .ce-concerned-list li { grid-template-columns: 120px minmax(0, 1fr); gap: 8px; padding: 5px 8px; font-size: 11px; }
}
.ce-empty { color: #f3b33d; }
.ce-cars { margin-top: 16px; }
.ce-cars-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; }
.ce-cars-title .category-logo { height: 20px; width: auto; }
.ce-cars-title span { margin-left: auto; font-size: 13px; color: var(--muted, #92979c); }
.ce-car-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pilot-category-logo.is-several { width: auto !important; gap: 4px; }
.pilot-category-logo.is-several img, .pilot-category-logo.is-several .category-logo { max-width: 30px; }
/* A driver without a crew entered in several categories: the logos side by side, the logo column as wide as them. */
html[data-game] #app .ux-unassigned-grid > .pilot-row > .pilot-main:has(> .pilot-category-logo.is-several) { grid-template-columns: auto minmax(0, 1fr) !important; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo.is-several { width: auto !important; max-width: none !important; justify-self: start !important; gap: 4px; }
html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo.is-several img { width: 30px !important; max-width: 30px !important; height: auto !important; max-height: 30px !important; object-fit: contain; }
/* In the narrow cards of the computer grid, the logos take their own line above the name. */
@media (min-width: 761px) {
  html[data-game] #app .ux-unassigned-grid > .pilot-row > .pilot-main:has(> .pilot-category-logo.is-several) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-game] #app .ux-unassigned-grid .pilot-main > .pilot-category-logo.is-several { grid-row: auto !important; order: -1; }
  html[data-game] #app .ux-unassigned-grid .pilot-main:has(> .pilot-category-logo.is-several) > * { grid-column: 1 !important; }
}
/* Tableau des disponibilités (TM). */
.ce-board { margin: 16px 0; border: 1px solid #2b3336; border-radius: 14px; background: rgba(13, 17, 18, .88); }
.ce-board > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.ce-board > summary::-webkit-details-marker { display: none; }
.ce-board-title { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text, #f2f5f4); }
.ce-board-stat { padding: 3px 10px; border-radius: 999px; border: 1px solid #3a4346; font-size: 13px; font-weight: 700; color: var(--muted, #b7bfbc); }
.ce-board-stat.is-waiting { border-color: #f3b33d; color: #f3b33d; }
.ce-board-stat.is-done { border-color: #4fd1c5; color: #4fd1c5; }
.ce-board-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; }
.ce-board-filters .category-logo { height: 16px; width: auto; margin-right: 6px; vertical-align: -3px; }
.ce-board-scroll { overflow-x: auto; padding: 0 16px 6px; }
.ce-board table { border-collapse: separate; border-spacing: 4px; min-width: 100%; font-size: 13px; }
.ce-board thead th { min-width: 118px; padding: 10px 8px; border-radius: 10px; background: #121718; text-align: center; vertical-align: top; font-weight: 600; color: var(--muted, #b7bfbc); }
.ce-board thead th.is-best { outline: 2px solid #4fd1c5; background: rgba(79, 209, 197, .1); }
.ce-board thead th.ce-board-corner { min-width: 190px; text-align: left; vertical-align: bottom; background: transparent; }
.ce-board-day { display: block; text-transform: capitalize; font-size: 12px; }
.ce-board thead th strong { display: block; margin: 2px 0 6px; font-size: 18px; color: var(--text, #f2f5f4); }
.ce-board-counts { display: flex; justify-content: center; align-items: center; gap: 4px 8px; flex-wrap: wrap; min-height: 20px; }
.ce-board-counts .category-logo { height: 16px; width: auto; }
.ce-board-counts b { color: var(--text, #f2f5f4); margin-left: -4px; }
.ce-board-best { display: block; margin-top: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #4fd1c5; }
.ce-board-create { margin-top: 8px; width: 100%; padding: 6px 4px; border: 1px solid #4fd1c5; border-radius: 8px; background: transparent; color: #4fd1c5; font-size: 12px; font-weight: 700; cursor: pointer; }
.ce-board-create:hover { background: #4fd1c5; color: #062523; }
.ce-board tbody th { padding: 8px 10px; border-radius: 10px; background: #121718; text-align: left; font-weight: 400; vertical-align: top; }
.ce-board-name { display: block; font-size: 14px; font-weight: 800; color: var(--text, #f2f5f4); }
.ce-board-cats { display: inline-flex; gap: 4px; margin: 4px 8px 0 0; vertical-align: middle; }
.ce-board-cats .category-logo { height: 18px; width: auto; }
.ce-board-car { font-size: 12px; color: var(--muted, #92979c); }
.ce-board-wish { display: block; font-size: 12px; color: var(--muted, #92979c); }
.ce-board tbody td { padding: 6px; border-radius: 10px; text-align: center; font-weight: 700; }
.ce-board td.is-off { background: rgba(255, 255, 255, .02); }
.ce-board td.is-whole { background: rgba(79, 209, 197, .22); color: #bff3ee; }
.ce-board td.is-part { background: rgba(243, 179, 61, .16); color: #f3b33d; }
.ce-board td.is-crew { background: #4fd1c5; color: #062523; }
.ce-board td.is-crew .category-logo { height: 14px; width: auto; margin-right: 4px; vertical-align: -2px; }
.ce-board td.is-muted { opacity: .35; }
.ce-board tr.is-placed th { opacity: .8; }
.ce-board-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 4px 16px 14px; font-size: 12px; color: var(--muted, #92979c); }
.ce-board-legend span::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.ce-board-legend .is-whole::before { background: rgba(79, 209, 197, .4); } .ce-board-legend .is-part::before { background: rgba(243, 179, 61, .5); } .ce-board-legend .is-crew::before { background: #4fd1c5; }
/* « Mon inscription » and the red « Me désinscrire » side by side, with the « … » menu, on a phone. */
@media (max-width: 440px) {
  .planning-start[open] .planning-quick { gap: 6px; flex-basis: calc(100% + 30px); max-width: none; margin-right: -30px; }
  .planning-start[open] .planning-quick-button.is-labelled { gap: 6px; padding: 0 10px 0 8px !important; }
}

/* Error pages (access, diagnostics): the button stays inside its card. */
.members-error > a { display: inline-flex; align-items: center; justify-content: center; margin: 4px 0 6px; }
/* Race page: the race type under the date fits its narrow column. */
html[data-game] #app .race-header .race-side .event-type-badge { padding: 4px 3px !important; font-size: 10px !important; letter-spacing: 0 !important; line-height: 1.2; text-align: center; border-radius: 10px; }
/* Race list on a computer: three categories stay on one line next to the circuit drawing. */
html[data-game] .race-card .race-fill .event-category-badge { min-width: 120px; }
/* Administration: links inside help texts in the site colour, not the browser's blue. */
.members-help a:not([class]) { color: var(--accent, #52d3d8); }

.rally-choice { flex: 1 1 180px; --sim: #bf18ce; }
.rally-choice > span { width: 100%; min-height: 92px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 18px; letter-spacing: normal; }
.rally-choice small { font-weight: 400; color: #c7d0d4; }
.rally-event-form [hidden] { display: none !important; }
.rally-event-form [data-rally-stages] { display: grid; gap: 14px; }
.rally-stage { align-items: end; }
.rally-stage > button { justify-self: end; }

/* Race overview: identity and personal start together, with a readable circuit. */
html[data-game] #app .race-header .race-card-top { display: grid; grid-template-columns: 120px minmax(0, 1fr) clamp(260px, 30vw, 440px); gap: 24px; }
html[data-game] #app .race-header .race-head { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: flex-start !important; gap: 8px; }
html[data-game] #app .race-header .event-title { flex-basis: auto; }
html[data-game] #app .race-header .race-card-top > .circuit-visual { width: 100% !important; height: 145px !important; }
html[data-game] #app .race-header .race-my-start { margin: 2px 0 0; text-align: left; justify-items: start; }
html[data-game] #app .race-header .race-my-start small { display: none; }
html[data-game] #app .race-header .race-header-actions { display: flex; align-self: flex-start; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.race-actions-menu { position: relative; }
.race-actions-menu > summary { display: grid; place-items: center; width: 36px; height: 30px; border: 1px solid #343c3f; border-radius: 8px; cursor: pointer; list-style: none; font-size: 24px; }
.race-actions-menu > summary::-webkit-details-marker { display: none; }
.race-actions-popover { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: 8px; padding: 12px; min-width: 210px; background: #151c1e; border: 1px solid #343c3f; border-radius: 10px; box-shadow: 0 8px 24px #0008; }
.planning-heading[hidden] { display: none !important; }
@media (max-width: 760px) {
  html[data-game] #app .race-header .race-card-top { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  html[data-game] #app .race-header .race-card-top > .circuit-visual { grid-column: 1 / -1; width: 100% !important; height: 115px !important; }
  html[data-game] #app .race-header .race-card-top > .event-type-panel { grid-column: 1 / -1; }
  html[data-game] #app .race-header .race-my-start { flex: none; order: initial; }
  html[data-game] #app .race-header .race-my-start .secondary-button { white-space: normal; text-align: left; }
}

html[data-game] #app .race-header .race-info-chips { display: flex; flex-wrap: wrap; align-items: center; align-self: flex-start; gap: 6px; }
html[data-game] #app .race-header .race-info-chip { flex: none; align-self: flex-start; height: auto !important; min-height: 0; padding: 5px 10px; }
html[data-game] #app .race-header > .race-starts { align-self: flex-start; width: auto; text-align: left; margin-top: 8px; }

/* Keep schedules in the information column, alongside the circuit. */
html[data-game] #app .race-header .race-head { justify-content: flex-start !important; align-content: flex-start; }
html[data-game] #app .race-header .race-head > .race-starts { margin: 2px 0 0 !important; padding: 0 !important; border: 0 !important; align-self: flex-start; width: auto; }
html[data-game] #app .race-header .race-header-actions { margin: 0 !important; align-self: flex-start !important; }
html[data-game] #app .race-header .race-card-top > .circuit-visual { align-self: center; }

/* Share belongs to the filter row; the header contains only race identity. */
.race-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 0; }
.race-controls .race-community-filter { margin: 0; }
.race-controls > .link-button { margin-left: auto; flex: none; }
html[data-game] #app .race-header .race-head { justify-content: flex-start !important; }
html[data-game] #app .race-header .race-side .race-header-actions { margin-top: 2px !important; }

.race-controls-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.race-controls-actions .race-header-actions { display: flex; margin: 0; }
.race-controls-actions .race-actions-popover { left: auto; right: 0; }

/* SOLO / TDZ logos occupy the same visual space as endurance circuits. */
html[data-game] #app .race-header .race-card-top > .event-type-panel { position: static !important; width: 100% !important; height: 175px !important; margin: 0 !important; align-self: center; flex: none; }
html[data-game] #app .race-header .event-type-panel.has-access-logo .event-access-logo { width: 100%; height: 100%; max-height: 175px; object-fit: contain; }
@media (max-width:760px) {
  html[data-game] #app .race-header .race-card-top > .event-type-panel { height: 115px !important; }
  html[data-game] #app .race-header .event-type-panel.has-access-logo .event-access-logo { max-height: 115px; }
}

/* Single-session settings use the endurance header's small icon pills. */
html[data-game] #app .race-header .round-info { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; border: 0; }
html[data-game] #app .race-header .round-item { display: inline-flex; flex: none; align-items: center; gap: 7px; min-height: 0; height: auto; padding: 5px 10px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: rgba(255,255,255,.04); }
html[data-game] #app .race-header .round-item-icon { width: 18px; height: 18px; padding: 0; background: none; border: 0; color: #7fe3ea; }
html[data-game] #app .race-header .round-item-icon svg { width: 18px; height: 18px; }
html[data-game] #app .race-header .round-item-copy small { display: none; }
html[data-game] #app .race-header .round-item-copy strong { font-size: 14px; line-height: 1.2; }
html[data-game] #app .race-header .round-item-categories .category-logo { height: 20px; }
.solo-password-near-entry { display: flex; margin: 8px 0 12px; }

html[data-game] #app .race-header .solo-header-circuit { font-size: 16px; font-weight: 400; color: #c7d0d4; }
.solo-header-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
html[data-game] #app .race-header .solo-header-summary .race-header-time { margin: 0; font-size: 15px; padding: 5px 10px; }

/* Shared endurance / SOLO header positions and dimensions. */
html[data-game] #app .race-header .race-side .event-badge-row { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 0; border: 0; background: none; }
html[data-game] #app .race-header .race-side .event-badge-row > * { box-sizing: border-box; width: 100%; justify-content: center; text-align: center; }
.solo-header-settings { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
html[data-game] #app .race-header .solo-header-settings .race-header-time { margin: 0; padding: 5px 10px; font-size: 14px; line-height: 1.2; }
html[data-game] #app .race-header .solo-header-settings .race-header-time svg { width: 18px; height: 18px; }
html[data-game] #app .race-header .solo-header-settings .round-info { display: contents; }
html[data-game] #app .race-header .race-card-top > .event-type-panel.has-access-logo { display: flex; justify-content: flex-end; height: 145px !important; }
html[data-game] #app .race-header .event-type-panel.has-access-logo .event-access-logo { width: auto; height: 145px; max-height: 145px; max-width: 100%; }
@media(max-width:760px){
 html[data-game] #app .race-header .race-card-top > .event-type-panel.has-access-logo { height: 115px !important; justify-content: center; }
 html[data-game] #app .race-header .event-type-panel.has-access-logo .event-access-logo { height: 115px; max-height: 115px; }
}

/* Explicit session labels, grouped in two compact rows at the left. */
html[data-game] #app .race-header .race-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
html[data-game] #app .race-header .race-meta .race-header-time { margin: 0; padding: 4px 8px; font-size: 13px; line-height: 1.2; }
.solo-session-chips { display: grid; gap: 6px; justify-items: start; max-width: 100%; }
.solo-session-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.solo-session-pill { flex: none; width: auto; padding: 5px 8px; border: 1px solid rgba(255,255,255,.16); border-radius: 7px; background: rgba(255,255,255,.04); color: #dbe3e4; font-size: 12px; line-height: 1.2; }

/* Multiple entries in one race share a header; each start keeps its own crew details. */
html[data-game] #app .my-entry-slot + .my-entry-slot { border-top: 1px solid var(--border, #39404a); }
html[data-game] #app .my-entry-slot-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0; padding: 14px 16px; font-size: 15px; }
html[data-game] #app .my-entry-slot-heading .race-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }