/* ==========================================================================
   CAMMUS & XUANSU - mobile widget rebuild - 2026-10-07 (v3)
   Loaded AFTER xuansu.mobile-20260922-1.css and xuansu.design-20261007-2.css,
   so these rules win on ties. Everything here is scoped to phones
   (max-width: 767.98px) and to tables that the companion script has
   rebuilt (table.fp-card-table inside body.fp-cards). Desktop is untouched.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* Tables the script could not rebuild keep Bootstrap's own horizontal
     scroll, so they can never widen the page itself. */
  body.fp-cards .fp-mobile-scroll:not([data-fp-card-wrap="1"]) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* ---------- card shell ------------------------------------------------ */

  body.fp-cards table.fp-card-table {
    display: block;
    width: 100%;
    min-width: 0 !important;
    margin: 0;
    background: transparent;
    border: 0;
  }

  body.fp-cards table.fp-card-table > thead { display: none; }

  body.fp-cards table.fp-card-table > tbody { display: block; padding: 0.7rem; }

  body.fp-cards table.fp-card-table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.9rem;
    row-gap: 0.1rem;
    align-items: start;
    margin: 0 0 0.7rem;
    padding: 0.75rem 0.85rem 0.6rem;
    background-color: var(--fp-surface);
    background-image: var(--fp-gradient-surface, none);
    border: 1px solid var(--fp-border);
    border-left: 3px solid rgba(16, 185, 129, 0.55);
    border-radius: var(--fp-radius-sm, 10px);
    box-shadow: var(--fp-shadow-xs, none);
    overflow: hidden;
  }

  body.fp-cards table.fp-card-table > tbody > tr:last-child { margin-bottom: 0; }

  /* ---------- one label/value row per cell ------------------------------ */

  body.fp-cards table.fp-card-table > tbody > tr > td {
    order: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.22rem 0 !important;
    border: 0 !important;
    background: transparent;
    font-size: 0.82rem;
    line-height: 1.4;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: right;
    color: var(--fp-text);
    font-variant-numeric: tabular-nums;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="field"]::before {
    content: attr(data-fp-label);
    flex: 0 0 auto;
    margin-right: auto;
    padding-right: 0.35rem;
    color: var(--fp-muted);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-empty="1"] { display: none !important; }

  /* Long names must wrap on a phone instead of being cut with an ellipsis. */
  body.fp-cards table.fp-card-table > tbody > tr > td .fp-match-title,
  body.fp-cards table.fp-card-table > tbody > tr > td .text-truncate,
  body.fp-cards table.fp-card-table > tbody > tr > td [class*="truncate"] {
    max-width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: break-word;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td > span,
  body.fp-cards table.fp-card-table > tbody > tr > td > .d-inline-flex { min-width: 0; }

  body.fp-cards table.fp-card-table > tbody > tr > td .flex-nowrap,
  body.fp-cards table.fp-card-table > tbody > tr > td .d-inline-flex {
    flex-wrap: wrap !important;
    max-width: 100%;
    row-gap: 0.2rem;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td .fp-time-gap {
    margin-bottom: 0;
    margin-right: 0.35rem;
  }

  /* ---------- rank badge ------------------------------------------------ */

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"] {
    order: -3;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 1.85rem;
    max-width: 100%;
    margin: 0 0 0.45rem;
    padding: 0.12rem 0.6rem !important;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-align: center;
    white-space: nowrap;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="1"] {
    background: linear-gradient(135deg, #f9dc7c, #c9962c);
    color: #3b2a00;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="2"] {
    background: linear-gradient(135deg, #e6ecf3, #9aa6b6);
    color: #28303a;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="3"] {
    background: linear-gradient(135deg, #eab98c, #b06f37);
    color: #3a2205;
  }

  /* ---------- card head (driver / title) -------------------------------- */

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="title"] {
    order: -2;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.45rem 0.5rem;
    margin: 0 0 0.5rem;
    padding: 0 0 0.55rem !important;
    border-bottom: 1px dashed var(--fp-border) !important;
    font-size: 0.96rem;
    font-weight: 700;
    text-align: left;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="title"] > .d-inline-flex {
    margin-right: 0.25rem !important;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="title"] img.img-circle,
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="title"] img.rounded-circle {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
  }

  /* ---------- full width rows ------------------------------------------- */

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"],
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"] {
    grid-column: 1 / -1;
  }

  /* ---------- actions --------------------------------------------------- */

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"] {
    order: 5;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.55rem 0 0 !important;
    border-top: 1px dashed var(--fp-border) !important;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"] .btn,
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"] a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0.3rem 0.7rem;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"] .btn i {
    margin-right: 0.25rem;
  }

  /* Merged action cells: keep the original column list as a caption. */
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-action-label]::before {
    content: attr(data-fp-action-label);
    flex: 1 1 100%;
    margin: 0 0 0.3rem;
    color: var(--fp-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: right;
  }

  /* ---------- media ----------------------------------------------------- */
  /* Never override the height="" attribute of brand logos / avatars: only
     cap the width, and let rich values wrap onto their own line instead of
     squeezing the text into a sliver. */
  body.fp-cards table.fp-card-table > tbody > tr > td img { max-width: 100%; }
  body.fp-cards table.fp-card-table > tbody > tr > td img.img-circle { flex: 0 0 auto; }
  body.fp-cards table.fp-card-table > tbody > tr > td img:not(.img-circle) { flex: 0 0 auto; }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"] {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    justify-content: flex-end;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"] > span,
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"] > a,
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"] > .d-inline-flex {
    flex: 0 1 auto;
    min-width: 0;
  }

  /* ---------- notice row (single colSpan cell) -------------------------- */

  body.fp-cards table.fp-card-table > tbody > tr.fp-card-notice {
    display: block;
    padding: 0;
    margin: 0 0 0.7rem;
    border: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    overflow: visible;
  }

  body.fp-cards table.fp-card-table > tbody > tr.fp-card-notice > td {
    display: block;
    padding: 0.85rem 0.75rem !important;
    border: 1px dashed var(--fp-border) !important;
    border-radius: var(--fp-radius-sm, 10px);
    text-align: center;
    color: var(--fp-muted);
  }

  /* ---------- status variants ------------------------------------------ */

  body.fp-cards table.fp-card-table > tbody > tr.fp-result-dnf { opacity: 0.85; }

  /* ---------- dark mode ------------------------------------------------- */

  body.dark-mode.fp-cards table.fp-card-table > tbody > tr {
    border-left-color: rgba(52, 211, 153, 0.6);
  }

  body.dark-mode.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"] {
    color: #34d399;
  }

  body.dark-mode.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="1"] { color: #3b2a00; }
  body.dark-mode.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="2"] { color: #28303a; }
  body.dark-mode.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="rank"][data-fp-rank="3"] { color: #3a2205; }
  /* ---------- wide values: label on its own line ------------------------ */
  /* Values the script flagged as wide (long text, merged columns, rich
     markup) get their label printed above the value and are aligned to the
     start, so long dates / descriptions / car names no longer wrap into a
     ragged right-aligned block. */
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"] {
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    text-align: left;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-wide="1"]::before {
    content: attr(data-fp-label);
    flex: 1 1 100%;
    margin: 0 0 0.15rem;
    padding-right: 0;
    color: var(--fp-muted);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: normal;
  }

  /* Rows that only exist to hold an "empty value" dash are removed. */
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-cell="action"][data-fp-empty="1"] {
    display: none !important;
  }

  /* ---------- podium: always a real 3-column podium --------------------- */
  /* Below 390px the older sheet switched the podium to a vertical stack,
     which pushed the three finishers (and their pedestals) onto separate
     rows. Keep the classic 2-1-3 layout at every phone width instead and
     let the finisher blocks shrink / wrap their own text. */
  .fp-podium,
  .fp-podium.fp-podium-lg {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.85rem 0.15rem 0.2rem;
  }

  .fp-podium > .fp-podium-item,
  .fp-podium.fp-podium-lg > .fp-podium-item {
    /* cancel the nth-child re-ordering the <=389.98px block applied to the
       1-2-3 DOM order: the markup arrives as 2-1-3 already. */
    order: 0;
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    padding: 0;
  }

  .fp-podium-name,
  .fp-podium-club,
  .fp-podium-region,
  .fp-podium-store,
  .fp-podium-car,
  .fp-podium-lg .fp-podium-name,
  .fp-podium-lg .fp-podium-club,
  .fp-podium-lg .fp-podium-region,
  .fp-podium-lg .fp-podium-store,
  .fp-podium-lg .fp-podium-car {
    width: auto;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .fp-podium-time,
  .fp-podium-lg .fp-podium-date {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* ---------- podium, small phones --------------------------------------- */
@media (max-width: 575.98px) {
  .fp-podium,
  .fp-podium.fp-podium-lg {
    gap: 0.25rem;
    padding: 0.7rem 0.1rem 0.2rem;
  }

  .fp-podium-avatar,
  .fp-podium-lg .fp-podium-avatar {
    width: 44px;
    height: 44px;
    border-width: 2px;
  }

  .fp-podium-name,
  .fp-podium-lg .fp-podium-name {
    font-size: 0.72rem;
  }

  .fp-podium-time,
  .fp-podium-lg .fp-podium-time {
    font-size: 0.76rem;
  }

  .fp-podium-club,
  .fp-podium-region,
  .fp-podium-store,
  .fp-podium-lg .fp-podium-club,
  .fp-podium-lg .fp-podium-region,
  .fp-podium-lg .fp-podium-store {
    font-size: 0.63rem;
  }

  .fp-podium-car,
  .fp-podium-lg .fp-podium-car {
    font-size: 0.62rem;
  }

  .fp-podium-date,
  .fp-podium-lg .fp-podium-date {
    font-size: 0.6rem;
    line-height: 1.25;
  }

  .fp-podium-laps {
    font-size: 0.64rem;
  }

  .fp-podium-block {
    font-size: 0.95rem;
    border-radius: 6px 6px 0 0;
  }

  .fp-podium-1 { height: 62px; }
  .fp-podium-2 { height: 46px; }
  .fp-podium-3 { height: 36px; }
}

@media (max-width: 389.98px) {
  .fp-podium-avatar,
  .fp-podium-lg .fp-podium-avatar {
    width: 38px;
    height: 38px;
  }

  .fp-podium-name,
  .fp-podium-lg .fp-podium-name {
    font-size: 0.68rem;
  }

  .fp-podium-time,
  .fp-podium-lg .fp-podium-time {
    font-size: 0.72rem;
  }

  .fp-podium-block {
    font-size: 0.85rem;
  }

  .fp-podium-1 { height: 54px; }
  .fp-podium-2 { height: 40px; }
  .fp-podium-3 { height: 32px; }
}

/* ---------- v3:  Province / city pair always shares one card row ---------- */

@media (max-width: 767.98px) {
  /* province / city (and their ranked variants) are one pair: the
     companion script tags them data-fp-region="start" / "end". Pinning the
     first cell to column 1 and the second to column 2 keeps them on the same
     line no matter how many half-width cells sit above them. */
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region] {
    grid-column: auto / span 1;
    align-items: baseline;
    flex-wrap: nowrap;
    justify-content: flex-end;
    min-width: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region="start"] {
    grid-column-start: 1;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region="end"] {
    grid-column-start: 2;
  }

  /* cancel the full-width promotion for a region cell: label and value must
     stay on one line even when the script measured it as wide. */
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region][data-fp-wide="1"] {
    flex-wrap: nowrap;
    justify-content: flex-end;
    text-align: right;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region]::before,
  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region][data-fp-wide="1"]::before {
    content: attr(data-fp-label);
    flex: 0 0 auto;
    margin: 0 auto 0 0;
    padding-right: 0.35rem;
    color: var(--fp-muted);
    font-size: 0.71rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-align: left;
    white-space: nowrap;
  }

  body.fp-cards table.fp-card-table > tbody > tr > td[data-fp-region] > * {
    min-width: 0;
  }
}