/* Shared page header. Direct-child selectors keep match scoreboards independent. */
.d-flex .panel.header {
  --header-surface: #0d2801;
  --header-border: #34493a;
  --header-accent: #a4c47b;
  --header-text: #ecf1e8;
  --header-muted: #a3b4a0;
  box-sizing: border-box;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 12px;
  border: 1px solid var(--header-border);
  border-top: 3px solid #6c8c52;
  border-radius: 4px;
  background: var(--header-surface);
  color: var(--header-text);
  box-shadow: none;
}

  .d-flex .panel.header > .lheader {
    flex-basis: fit-content;
    min-width: 0;
    padding: 2px 0;
    color: var(--header-text);
    text-align: left;
  }

    .d-flex .panel.header > .lheader table {
      max-width: 100%;
      border-collapse: collapse;
      text-align: left;
    }

    .d-flex .panel.header > .lheader td,
    .d-flex .panel.header > .lheader th {
      padding: 0;
      text-align: left;
      vertical-align: middle;
    }

      .d-flex .panel.header > .lheader td + td {
        padding-left: 16px;
      }

    .d-flex .panel.header > .lheader :is(h1, h2, h3, h4, h5, h6) {
      margin: 0;
      text-align: left;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    .d-flex .panel.header > .lheader :is(h1, h2, h3) {
      color: var(--header-text);
      font-size: clamp(20px, 1.6vw, 26px);
      font-weight: 600;
      letter-spacing: -0.02em;
    }

    .d-flex .panel.header > .lheader :is(h4, h5, h6),
    .d-flex .panel.header > .lheader .sub {
      color: var(--header-muted);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.5;
    }

    .d-flex .panel.header > .lheader :is(h1, h2, h3) + :is(h4, h5, h6, .sub, table),
    .d-flex .panel.header > .lheader .name + table {
      margin-top: 1px;
    }

    .d-flex .panel.header > .lheader .name {
      align-items: center;
      gap: 10px;
    }

    /* Only the page icon receives this treatment, not status icons beside a name. */
    .d-flex .panel.header > .lheader > table > tbody > tr > td:first-child > .fmp-icons,
    .d-flex .panel.header > .lheader > .fmp-icons {
      display: inline-grid;
      place-items: center;
      box-sizing: border-box;
      width: 54px;
      height: 54px;
      border: 1px solid #3d5239;
      border-radius: 3px;
      background: #1d3021;
      color: var(--header-accent);
      font-size: 46px;
      line-height: 1;
      text-shadow: none;
    }

  .d-flex .panel.header > #img_homelogo {
    flex: 0 0 auto;
    align-self: center;
  }

    .d-flex .panel.header > #img_homelogo .logo {
      height: 60px;
      max-width: 72px;
      padding: 0;
      margin: 0;
      object-fit: contain;
    }

  .d-flex .panel.header > .rheader {
    box-sizing: border-box;
    width: max-content;
    flex-basis: fit-content;
    align-self: stretch;
    min-width: 0;
    max-width: 100%;
    padding: 4px 6px;
    border: 1px solid var(--header-border);
    border-radius: 8px;
    background: #103101;
    color: var(--header-text);
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums;
  }

    /* Some pages leave an unused rheader in their markup. */
    .d-flex .panel.header > .rheader:not(:has(*)) {
      display: none;
    }

    .d-flex .panel.header > .rheader > table:not(.roles) {
      width: 100%;
      border-collapse: collapse;
    }

    .d-flex .panel.header > .rheader :is(th, td) {
      padding: 2px 0 2px;
      border: 0;
      color: var(--header-text);
      font-size: 13px;
      font-weight: 400;
      line-height: 1.1;
      vertical-align: baseline;
      width: unset;
    }

    .d-flex .panel.header > .rheader th {
      padding-right: 6px;
      color: #bbad94;
      font-size: 13px;
      font-weight: 400;
      text-align: left;
      line-height: 14px;
    }

    .d-flex .panel.header > .rheader > table:not(.roles) th {
      /* width: 38%; */
    }

    .d-flex .panel.header > .rheader > table:not(.roles) td {
      text-align: left;
    }

    .d-flex .panel.header > .rheader tr {
      border-bottom: 1px solid rgba(163, 180, 160, 0.12);
    }

      .d-flex .panel.header > .rheader tr:last-child {
        border-bottom: 0;
      }

    /* Champ and other pages render the same label/value pairs with flex rows. */
    .d-flex .panel.header > .rheader > .d-flex {
      display: grid;
      grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
      align-items: baseline;
      gap: 12px;
      padding: 3px 0;
      margin: 0;
    }

    .d-flex .panel.header > .rheader .title {
      margin: 0;
      border: 0;
      color: var(--header-muted);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.5;
    }

    .d-flex .panel.header > .rheader .value {
      min-width: 0;
      padding: 0;
      color: var(--header-text);
      font-size: 13px;
      line-height: 1.5;
    }


  .d-flex .panel.header > :is(.lheader, .rheader) .big a {
    color: #dcbfa4;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }

  .d-flex .panel.header > :is(.lheader, .rheader) a {
    color: #c0dca4;
    text-decoration: none;
  }

    .d-flex .panel.header > :is(.lheader, .rheader) a:hover {
      color: #e3f1d3;
      text-decoration: underline;
    }

    .d-flex .panel.header > :is(.lheader, .rheader) a:focus-visible {
      outline: 2px solid var(--header-accent);
      outline-offset: 3px;
    }

  .d-flex .panel.header .flag {
    vertical-align: middle;
  }

@media (max-width: 1100px) {
  .d-flex .panel.header > .lheader {
    flex-basis: 100%;
  }

  .d-flex .panel.header > .rheader {
    flex: 1 1 220px;
  }

  /* Club pages place the crest before the lheader instead of inside it. */
  .d-flex .panel.header > #img_homelogo:not(:empty) + .lheader {
    flex-basis: calc(100% - 88px);
  }
}

@media (max-width: 768px) {
  .d-flex .panel.header {
    gap: 8px;
    padding: 10px;
  }

    .d-flex .panel.header > .lheader td + td {
      padding-left: 12px;
    }

    .d-flex .panel.header > .lheader > table > tbody > tr > td:first-child > .fmp-icons,
    .d-flex .panel.header > .lheader > .fmp-icons {
      width: 44px;
      height: 44px;
      font-size: 35px;
    }

    .d-flex .panel.header > #img_homelogo:not(:empty) + .lheader {
      flex-basis: calc(100% - 84px);
    }
}