/*
 * The profile card design from the prototype (docs/profile-design.css), shared by
 * /profile and the app's Progress tab. The .sx-* rules are the prototype's own, kept
 * verbatim except where contrast forced a change — every such spot says so inline.
 *
 * Tokens are declared here because the prototype leaned on Mobalytics' live token set;
 * the values are the ones read out of mobalytics.gg's dark theme.
 */
:root {
        --gray-975: #0c091f;
        --gray-950: #171233;
        --gray-900: #251f47;
        --gray-800: #2d2752;
        --gray-700: #36305c;
        --gray-600: #3f3966;
        --gray-500: #494370;
        --gray-400: #544e7a;
        --gray-300: #797499;
        --gray-200: #a5a2b8;
        --gray-100: #c7c5d6;
        --gray-600-25: rgba(63, 57, 102, 0.25);
        --gray-600-50: rgba(63, 57, 102, 0.5);
        --gray-800-50: rgba(45, 39, 82, 0.5);
        --gray-950-50: rgba(23, 18, 51, 0.5);
        --general-white-100: #fff;
        --general-gold-200: #f2bf43;
        --general-orange-200: #fc7c00;
        --general-purple-100: #bf3cd5;
        /*
         * Epic's colour has to carry meaning — it is how a reader tells Epic from Rare — but
         * the design's #bf3cd5 measures 3.94:1 as 11.5px text on the row background. Same
         * hue (291°) and saturation, lightness raised from 53.5% to 64%: 5.43:1. Kept as a
         * separate token so the original stays visible next to it.
         */
        --tier-epic-text: #cd68de;
        --general-blue-200: #38c6f4;
      }


      /*
       * Page-level rules (body, main, links, the box-sizing reset) deliberately live in each
       * page instead of here: this file is the card design, and a shared `main {max-width}`
       * would squeeze the admin tables on the main page.
       */

      /* ---- hero ---- */
      .hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding-bottom: 18px; }
      .hero-avatar {
        width: 82px; height: 82px; border-radius: 8px; flex: 0 0 auto; object-fit: cover;
        background: var(--gray-700); border: 1px solid var(--gray-600);
      }
      .hero-name { font-size: 26px; font-weight: 900; letter-spacing: -0.01em; margin: 0; }
      .hero-handle { color: var(--gray-200); font-size: 14px; font-weight: 400; margin-left: 8px; }
      .hero-meta {
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
        font-size: 12.5px; color: var(--gray-200); margin-top: 6px;
      }
      .hero-meta b { color: var(--gray-100); font-weight: 500; }
      /* Same call as .sx-sep: gray-400 is 2.92:1 and reads as dirt, not punctuation. */
      .hero-dot { color: var(--gray-200); }
      .hero-stats { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
      .stat {
        background: var(--gray-800); border: 1px solid var(--gray-600); border-radius: 6px;
        padding: 8px 12px; min-width: 92px;
      }
      .stat .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
      .stat .k { font-size: 11px; color: var(--gray-200); text-transform: uppercase; letter-spacing: 0.06em; }

      .section { margin-top: 26px; }
      .section-title {
        font-size: 17px; font-weight: 700; display: flex; align-items: baseline; gap: 8px;
      }
      .section-title span { font-size: 13px; font-weight: 400; color: var(--gray-200); }
      .empty {
        margin-top: 12px; padding: 14px 16px; border-radius: 5px; color: var(--gray-200);
        background: var(--gray-800-50); border: 1px solid var(--gray-600-50); font-size: 13px;
      }

      /* ---- the prototype's card, unchanged ---- */
      /*
       * A measure, not the full page. The admin tables want every pixel; a card whose whole
       * content is a name, a meta line and a bar does not — at 1672px the progress bar ends up
       * a hand's width from the title it belongs to. 1240px is what /profile uses.
       */
      .sx { display: flex; flex-direction: column; gap: 8px; font-family: inherit; max-width: 1240px; }
      .sx * { box-sizing: border-box; }
      .sx-card {
        border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 5px; overflow: hidden;
        background: linear-gradient(
          to right,
          color-mix(in srgb, var(--mgp-game-color) 20%, var(--gray-700)) 0%,
          var(--gray-700) 200px,
          var(--gray-700) 100%
        );
      }
      .sx-card > summary {
        list-style: none; cursor: pointer; padding: 14px 16px; display: flex; align-items: center;
        gap: 12px; flex-wrap: wrap;
      }
      .sx-card > summary::-webkit-details-marker { display: none; }
      .sx-card > summary:hover { background: var(--gray-600-25); }
      .sx-badge {
        width: 30px; height: 30px; border-radius: 5px; flex: 0 0 auto; display: flex;
        align-items: center; justify-content: center; font-size: 11px; font-weight: 900;
        color: var(--gray-950); background: var(--mgp-game-color);
      }
      .sx-name {
        font-size: 14px; font-weight: 700; color: var(--general-white-100); white-space: nowrap;
        overflow: hidden; text-overflow: ellipsis; max-width: 340px;
      }
      .sx-meta {
        display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--gray-200);
        white-space: nowrap;
      }
      .sx-meta b { color: var(--gray-100); font-weight: 500; }
      /* Decorative separator, but gray-400 sits at 2.92:1 and reads as dirt rather than punctuation. */
      /* On the purple ramp gray-300 measures 4.08:1 here, so the separator steps up once more. */
      .sx-sep { color: var(--gray-200); }
      .sx-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
      .sx-prog { display: flex; align-items: center; gap: 8px; }
      .sx-track { width: 120px; height: 5px; border-radius: 3px; background: var(--gray-950-50); overflow: hidden; }
      .sx-track > i { display: block; height: 100%; border-radius: 3px; background: var(--general-gold-200); }
      .sx-pct {
        font-size: 12px; font-weight: 700; color: var(--general-gold-200);
        font-variant-numeric: tabular-nums; min-width: 34px; text-align: right;
      }
      .sx-chev {
        width: 9px; height: 9px; border-right: 2px solid var(--gray-300);
        border-bottom: 2px solid var(--gray-300); transform: rotate(45deg);
        margin: -4px 4px 0 0; transition: transform 0.15s;
      }
      .sx-card[open] .sx-chev { transform: rotate(-135deg); margin-top: 2px; }
      .sx-body {
        border-top: 1px solid var(--gray-600-50); padding: 12px 16px 14px; display: flex;
        flex-direction: column; gap: 6px; background: var(--gray-800-50);
      }
      .sx-bodyhead {
        display: flex; justify-content: space-between; align-items: baseline; font-size: 11px;
        letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-200); padding-bottom: 2px;
      }
      .sx-row {
        display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center;
        padding: 9px 10px; border-radius: 5px; background: var(--gray-900);
        border: 1px solid rgba(255, 255, 255, 0.04);
      }
      .sx-ico {
        width: 40px; height: 40px; border-radius: 5px; display: flex; align-items: center;
        justify-content: center; font-size: 13px; font-weight: 900; color: var(--gray-950);
        background: var(--mgp-game-color); border: 2px solid transparent; overflow: hidden;
      }
      .sx-ico img { width: 100%; height: 100%; display: block; object-fit: cover; }
      .sx-row[data-tier='mythic'] .sx-ico,
      .sx-row[data-tier='legendary'] .sx-ico { border-color: var(--general-gold-200); }
      .sx-aname { font-size: 13.5px; font-weight: 700; color: var(--general-white-100); }
      .sx-adesc { font-size: 12px; color: var(--gray-200); margin-top: 1px; }
      .sx-arare { font-size: 11.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
      .sx-arare b { font-weight: 700; }
      .sx-adate { font-size: 11.5px; color: var(--gray-200); white-space: nowrap; text-align: right; }
      .sx-all {
        margin-top: 2px; font-size: 12px; color: var(--general-blue-200); text-decoration: none;
        align-self: flex-start; background: none; border: 0; cursor: pointer; padding: 0;
        font-family: inherit;
      }
      .sx-all:hover { text-decoration: underline; }
      .sx-t-mythic { color: var(--general-gold-200); }
      .sx-t-legendary { color: var(--general-orange-200); }
      .sx-t-epic { color: var(--tier-epic-text); }
      .sx-t-rare { color: var(--general-blue-200); }
      .sx-t-common { color: var(--gray-200); }
      .sx-note { font-size: 12.5px; color: var(--gray-200); padding-top: 4px; }
      .sx-note b { color: var(--gray-100); font-weight: 500; }
      /* Locked rows keep the layout but read as unfinished, so a full list stays scannable. */
      .sx-row.locked { opacity: 0.62; }
      .sx-row.locked .sx-ico { filter: grayscale(1); }

      @media (max-width: 820px) {
        .sx-right { margin-left: 0; width: 100%; justify-content: space-between; }
        .sx-track { width: 100%; flex: 1; }
        .sx-name { max-width: none; }
        .sx-meta { flex-wrap: wrap; white-space: normal; }
        .hero-stats { margin-left: 0; }
      }