/* ==========================================================================
   Estoria MtG — application stylesheet
   --------------------------------------------------------------------------
   Ported from the reviewed mockups. Unlike the other sub-projects on this
   site, the components here are shared across fifteen-odd pages, so they
   live in one stylesheet rather than being repeated inline on each page.
   Page-specific rules still go in the page, via mtg_header(['css' => ...]).

   Every class is prefixed `mtg-` so nothing can collide with style.css.
   Remember: the global `*` reset in style.css zeroes fonts and does NOT set
   box-sizing, so components set both explicitly.
   ========================================================================== */

:root {
    --mtg-ink: #333;
    --mtg-muted: #777;
    --mtg-line: #d0d0d0;
    --mtg-panel: #ededed;
    --mtg-shadow: 0 1px 4px 0 rgba(0, 0, 0, .15);

    /* MTG colour identity */
    --mtg-w: #f8f0d8;
    --mtg-u: #c9dcf0;
    --mtg-b: #cfc9c9;
    --mtg-r: #f2ccc0;
    --mtg-g: #c8dfc8;
    --mtg-c: #dcdcdc;
    --mtg-gold: #e6d9a8;
}

/* --- structure ----------------------------------------------------------- */
.mtg-layout {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding-bottom: 40px;
}

.mtg-main {
    flex: 1;
    min-width: 0;
}

.mtg-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mtg-panel {
    box-sizing: border-box;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    padding: 18px 20px;
}

.mtg-panel-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555;
    margin-bottom: 12px;
}

.mtg-heading {
    padding: 24px 0 14px;
    font-size: 22px;
    font-weight: 700;
    border-bottom: 1px solid #b8b8b8;
    margin-bottom: 6px;
}

.mtg-hint {
    font-size: 13px;
    color: var(--mtg-muted);
    margin: 8px 0 20px;
    line-height: 1.5;
}

.mtg-row {
    display: flex;
    gap: 16px;
    align-items: center;
}

.mtg-row-between {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.mtg-spacer {
    flex: 1;
}

/* --- buttons -------------------------------------------------------------
   NOT .play-button — that is hard-coded to width:60px and overflows on any
   real label. */
.mtg-btn {
    box-sizing: border-box;
    display: inline-block;
    background-color: var(--theme);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    line-height: 34px;
    padding: 0 18px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
}

.mtg-btn:hover {
    filter: brightness(1.08);
}

.mtg-btn-ghost {
    background-color: transparent;
    color: #444;
    border: 1px solid #b4b4b4;
    line-height: 32px;
}

.mtg-btn-ghost:hover {
    border-color: var(--theme);
    color: var(--theme);
    filter: none;
}

.mtg-btn-dark {
    background-color: #3d3d3d;
}

.mtg-btn-sm {
    font-size: 12px;
    line-height: 26px;
    padding: 0 12px;
}

.mtg-btn[disabled],
.mtg-btn-disabled {
    background-color: #b9b9b9;
    cursor: not-allowed;
    pointer-events: none;
}

/* --- form controls -------------------------------------------------------
   style.css has zero form styling, so everything here is from scratch. */
.mtg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.mtg-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #666;
}

.mtg-input,
.mtg-select,
.mtg-textarea {
    box-sizing: border-box;
    width: 100%;
    background: #fff;
    border: 1px solid #c4c4c4;
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--mtg-ink);
}

.mtg-input:focus,
.mtg-select:focus,
.mtg-textarea:focus {
    outline: none;
    border-color: var(--theme);
}

.mtg-textarea {
    min-height: 90px;
    line-height: 1.5;
    resize: vertical;
}

.mtg-input-sm {
    width: 70px;
    padding: 5px 8px;
    font-size: 13px;
}

.mtg-help {
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.5;
}

.mtg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
}

.mtg-check input {
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* radio card — a big clickable option block */
.mtg-optioncard {
    box-sizing: border-box;
    display: block;
    background: #fff;
    border: 1px solid #c8c8c8;
    padding: 14px 16px;
    margin-bottom: 10px;
    cursor: pointer;
}

.mtg-optioncard:hover {
    border-color: var(--theme);
}

.mtg-optioncard.mtg-selected {
    border-color: var(--theme);
    box-shadow: inset 0 0 0 1px var(--theme);
    background: #f4fbf3;
}

.mtg-optioncard-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
}

.mtg-optioncard-desc {
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.5;
}

/* --- proxy card visual ---------------------------------------------------
   All mockup cards render as CSS placeholders. That is deliberate: the real
   image library is incomplete (DOM has 10 images for ~269 cards), so the
   placeholder state is what most cards will actually look like today. */
.mtg-cardgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.mtg-card {
    box-sizing: border-box;
    position: relative;
    width: 132px;
    background: #2b2b2b;
    padding: 6px;
    border-radius: 7px;
    box-shadow: var(--mtg-shadow);
    font-size: 11px;
    color: #111;
    cursor: pointer;
}

.mtg-card-inner {
    background: var(--mtg-c);
    border-radius: 3px;
    padding: 5px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 172px;
}

.mtg-card.mtg-w .mtg-card-inner { background: var(--mtg-w); }
.mtg-card.mtg-u .mtg-card-inner { background: var(--mtg-u); }
.mtg-card.mtg-b .mtg-card-inner { background: var(--mtg-b); }
.mtg-card.mtg-r .mtg-card-inner { background: var(--mtg-r); }
.mtg-card.mtg-g .mtg-card-inner { background: var(--mtg-g); }
.mtg-card.mtg-gold .mtg-card-inner { background: var(--mtg-gold); }

.mtg-card-name {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.mtg-card-art {
    flex: 1;
    background: rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: rgba(0, 0, 0, .45);
    text-align: center;
    line-height: 1.3;
    padding: 2px;
}

.mtg-card-type {
    font-size: 9px;
    line-height: 1.2;
    border-top: 1px solid rgba(0, 0, 0, .18);
    padding-top: 3px;
    display: flex;
    justify-content: space-between;
    gap: 4px;
}

.mtg-card-nb {
    font-size: 8px;
    color: rgba(0, 0, 0, .5);
}

/* state overlays */
.mtg-card.mtg-missing .mtg-card-art {
    background: repeating-linear-gradient(45deg,
            rgba(0, 0, 0, .06) 0 6px,
            rgba(0, 0, 0, .12) 6px 12px);
}

.mtg-card.mtg-unowned {
    opacity: .55;
    filter: grayscale(.6);
}

.mtg-card-flag {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #d13b3b;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    line-height: 17px;
    padding: 0 6px;
    border-radius: 9px;
    z-index: 2;
}

.mtg-card-qty {
    position: absolute;
    bottom: -6px;
    left: -6px;
    background: #3d3d3d;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 19px;
    min-width: 19px;
    text-align: center;
    border-radius: 10px;
    z-index: 2;
}

/* --- mana pips ----------------------------------------------------------- */
.mtg-pip {
    display: inline-block;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 13px;
    text-align: center;
    color: #222;
    border: 1px solid rgba(0, 0, 0, .25);
    vertical-align: middle;
}

.mtg-pip-w { background: #fffbd5; }
.mtg-pip-u { background: #aae0fa; }
.mtg-pip-b { background: #cbc2bf; }
.mtg-pip-r { background: #f9aa8f; }
.mtg-pip-g { background: #9bd3ae; }
.mtg-pip-c { background: #ccc2c0; }

/* --- badges & pills ------------------------------------------------------ */
.mtg-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 17px;
    padding: 0 7px;
    border-radius: 2px;
    color: #fff;
}

.mtg-badge-common { background: #6d6d6d; }
.mtg-badge-uncommon { background: #7d8ba1; }
.mtg-badge-rare { background: #b8912f; }
.mtg-badge-mythic { background: #d0561a; }

.mtg-pill {
    display: inline-block;
    font-size: 12px;
    line-height: 22px;
    padding: 0 10px;
    border-radius: 11px;
    background: #dcdcdc;
    color: #444;
}

.mtg-pill-live {
    background: var(--theme);
    color: #fff;
    font-weight: 600;
}

.mtg-pill-done {
    background: #b6b6b6;
    color: #fff;
}

/* --- stats --------------------------------------------------------------- */
.mtg-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid #dcdcdc;
    font-size: 13px;
}

.mtg-stat:last-child {
    border-bottom: none;
}

.mtg-stat-label {
    color: var(--mtg-muted);
}

.mtg-stat-value {
    font-weight: 700;
    font-size: 15px;
}

.mtg-bignum {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.1;
}

.mtg-bignum-sub {
    font-size: 12px;
    color: var(--mtg-muted);
    margin-top: 2px;
}

/* --- progress bar -------------------------------------------------------- */
.mtg-bar {
    height: 7px;
    background: #d2d2d2;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 6px;
}

.mtg-bar-fill {
    height: 100%;
    background: var(--theme);
}

/* --- tabs ---------------------------------------------------------------- */
.mtg-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--mtg-line);
    margin-bottom: 18px;
}

.mtg-tab {
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.mtg-tab:hover {
    color: var(--mtg-ink);
}

.mtg-tab.mtg-active {
    color: var(--theme);
    border-bottom-color: var(--theme);
}

/* --- notices ------------------------------------------------------------- */
.mtg-notice {
    box-sizing: border-box;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 11px 14px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 16px;
    background: #fdf3d8;
    border-left: 3px solid #e0a91b;
    color: #5c4708;
}

.mtg-notice-info {
    background: #e6f0fa;
    border-left-color: #3d7fbf;
    color: #1e4468;
}

.mtg-notice-ok {
    background: #e9f7e5;
    border-left-color: var(--theme);
    color: #245b1a;
}

/* --- table tweaks (extends .games-table) --------------------------------- */
.mtg-table-compact td {
    padding: 7px 12px;
    font-size: 13px;
}

.mtg-table-compact th {
    padding: 9px 12px;
}

.mtg-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mtg-you td {
    background: #e4f2e1 !important;
    font-weight: 700;
}

/* --- modal --------------------------------------------------------------- */
.mtg-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}

.mtg-modal-backdrop.mtg-open {
    display: flex;
}

.mtg-modal {
    box-sizing: border-box;
    background: #f4f4f4;
    width: 520px;
    max-width: 92vw;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 6px 28px rgba(0, 0, 0, .35);
    padding: 24px 26px;
}

.mtg-modal-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

/* --- misc ---------------------------------------------------------------- */
.mtg-divider {
    height: 1px;
    background: var(--mtg-line);
    margin: 20px 0;
}

.mtg-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--mtg-muted);
    font-size: 13px;
    line-height: 1.6;
}

.mtg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #3d3d3d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* --- app nav -------------------------------------------------------------
   The MTG app owns its own nav; it does not link the rest of the site. */
.mtg-account {
    margin-left: auto;
}

.mtg-navon {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--theme);
}

/* --- sticky summary column ------------------------------------------------
   The sidebar follows you down the page. Capped to the viewport so a tall
   sidebar scrolls internally instead of having its bottom cut off.
   60px nav + breathing room = 80px. */
.mtg-sidebar {
    position: sticky;
    top: 80px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
    padding-right: 4px;
}

@media print {
    .mtg-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

/* --- per-rarity supply bars ---------------------------------------------- */
.mtg-rbar {
    margin-bottom: 12px;
}

.mtg-rbar:last-child {
    margin-bottom: 0;
}

.mtg-rbar-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 4px;
}

.mtg-rbar-name {
    font-weight: 700;
}

.mtg-rbar-num {
    color: var(--mtg-muted);
    font-variant-numeric: tabular-nums;
}

.mtg-rbar-num.mtg-over {
    color: #b33;
    font-weight: 700;
}

/* fits, but only just — worth noticing before the season, not during it */
.mtg-rbar-num.mtg-tight {
    color: #a8781a;
    font-weight: 700;
}

/* --- card hover preview ---------------------------------------------------
   Any element with data-cardtip="<card number>" shows the card on hover. */
.mtg-cardtip {
    position: fixed;
    z-index: 300;
    display: none;
    pointer-events: none;
    filter: drop-shadow(0 5px 16px rgba(0, 0, 0, .4));
}

.mtg-cardtip .mtg-card {
    width: 190px;
    cursor: default;
}

/* a real card scan is worth looking at, so it gets more room than the drawn
   stand-in does */
.mtg-cardtip .mtg-card-photo {
    width: 280px;
}

.mtg-cardtip .mtg-card-inner {
    height: 250px;
}

.mtg-cardtip .mtg-card-name {
    font-size: 12px;
}

.mtg-cardtip .mtg-card-art,
.mtg-cardtip .mtg-card-type {
    font-size: 11px;
}

/* --- collapsible panel ----------------------------------------------------
   <div class="mtg-panel mtg-collapsible" data-open="1">
     <div class="mtg-collapse-head">…title…<span class="mtg-collapse-arrow">▾</span></div>
     <div class="mtg-collapse-body">…</div>
   </div> */
.mtg-collapse-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.mtg-collapse-head .mtg-panel-title {
    margin: 0;
}

.mtg-collapse-head:hover .mtg-panel-title,
.mtg-collapse-head:hover .mtg-collapse-arrow {
    color: var(--theme);
}

.mtg-collapse-arrow {
    font-size: 11px;
    color: #888;
    transition: transform .15s ease;
}

.mtg-collapsible[data-open="1"] .mtg-collapse-body {
    margin-top: 14px;
}

.mtg-collapsible[data-open="0"] .mtg-collapse-body {
    display: none;
}

.mtg-collapsible[data-open="0"] .mtg-collapse-arrow {
    transform: rotate(-90deg);
}

/* --- compact per-round config table --------------------------------------- */
.mtg-rt {
    width: 100%;
    border-collapse: collapse;
}

.mtg-rt th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #666;
    padding: 0 8px 7px 0;
}

.mtg-rt th.mtg-c,
.mtg-rt td.mtg-c {
    text-align: center;
}

.mtg-rt td {
    padding: 6px 8px 6px 0;
    border-top: 1px solid #dcdcdc;
    font-size: 13px;
}

.mtg-rt tbody tr:first-child td {
    border-top: none;
}

.mtg-rt .mtg-rlabel {
    font-weight: 700;
    white-space: nowrap;
}

.mtg-rt .mtg-total {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- filter bar ----------------------------------------------------------
   A row of labelled controls above a table. Used by the accounts list, and by
   every listing page after it. */
.mtg-filters {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 16px;
}

.mtg-filters .mtg-field {
    margin-bottom: 0;
}

/* --- a person in a table row --------------------------------------------- */
.mtg-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mtg-user-name {
    font-weight: 700;
}

.mtg-user-sub {
    font-size: 11px;
    color: var(--mtg-muted);
}

tr.mtg-lockedrow td {
    background: #efe6e6 !important;
    color: #8a8a8a;
}

tr.mtg-lockedrow .mtg-user-name {
    text-decoration: line-through;
}

/* --- role badge ---------------------------------------------------------- */
.mtg-role {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    line-height: 17px;
    padding: 0 7px;
    border-radius: 2px;
    color: #fff;
}

.mtg-role-admin {
    background: #7a3fbf;
}

.mtg-role-player {
    background: var(--theme);
}

.mtg-role-guest {
    background: #8a8a8a;
}

.mtg-rolecard {
    display: flex;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #dcdcdc;
    font-size: 12px;
    line-height: 1.5;
}

.mtg-rolecard:last-child {
    border-bottom: none;
}

.mtg-rolecard-body {
    flex: 1;
    color: var(--mtg-muted);
}

/* --- buttons at the end of a table row ----------------------------------- */
.mtg-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

/* --- a password shown once ----------------------------------------------- */
.mtg-pw {
    font-family: Consolas, Monaco, monospace;
    font-size: 13px;
    background: #fff;
    border: 1px solid #c4c4c4;
    padding: 8px 10px;
    letter-spacing: 1px;
}

/* --- card tables ---------------------------------------------------------
   Shared by the set detail, the collection, the deck builder and the print
   picker: they all list cards the same way, so the pieces live here. */
.mtg-colorfilter {
    display: flex;
    gap: 4px;
}

.mtg-colorfilter span {
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    color: #333;
    user-select: none;
}

.mtg-colorfilter span.mtg-on {
    border-color: var(--theme);
}

.mtg-swatch {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, .2);
}

.mtg-nb {
    font-size: 12px;
    color: var(--mtg-muted);
    font-variant-numeric: tabular-nums;
}

.mtg-playset {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--theme);
    margin-left: 5px;
}

/* --- quantity stepper ----------------------------------------------------
   .mtg-step-flat is the same number with no buttons, for a page that only
   reports what you own rather than changing it. */
.mtg-step {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.mtg-step a {
    box-sizing: border-box;
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    color: #555;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
    cursor: pointer;
}

.mtg-step a:hover {
    border-color: var(--theme);
    color: var(--theme);
}

.mtg-step a.mtg-off {
    opacity: .35;
    pointer-events: none;
}

.mtg-step b {
    min-width: 26px;
    text-align: center;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

.mtg-step b.mtg-zero {
    color: #aaa;
    font-weight: 400;
}

.mtg-step-flat b {
    min-width: 0;
}

tr.mtg-changed td {
    background: #f4fbf3 !important;
}

/* --- a metric with a bar ------------------------------------------------- */
.mtg-summary {
    display: flex;
    gap: 26px;
}

.mtg-summary > div {
    flex: 1;
}

.mtg-metric-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    font-size: 12px;
    margin-bottom: 5px;
}

.mtg-metric-l {
    font-weight: 700;
}

.mtg-metric-v {
    color: var(--mtg-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- paging -------------------------------------------------------------- */
.mtg-pager {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 16px 0 4px;
}

.mtg-pager a,
.mtg-pager span {
    box-sizing: border-box;
    min-width: 32px;
    height: 30px;
    line-height: 28px;
    padding: 0 9px;
    text-align: center;
    font-size: 13px;
    text-decoration: none;
    color: #444;
    background: #fff;
    border: 1px solid #c4c4c4;
    border-radius: 3px;
}

.mtg-pager a:hover {
    border-color: var(--theme);
    color: var(--theme);
}

.mtg-pager .mtg-on {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
    font-weight: 700;
}

.mtg-pager .mtg-gap {
    border: none;
    background: none;
    min-width: 14px;
    padding: 0;
    color: var(--mtg-muted);
}

/* --- a card that has its image ------------------------------------------
   The files are full card scans, so the image is the whole card: no frame
   drawn around it, no name repeated above it. It keeps whatever width the
   context gives .mtg-card and takes its own height from the aspect ratio. */
.mtg-card-photo {
    padding: 0;
    background: none;
    box-shadow: none;
    line-height: 0;
    border-radius: 0;
}

.mtg-card-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4.7%;
    box-shadow: var(--mtg-shadow);
}

/* --- pending changes bar -------------------------------------------------
   Fixed to the bottom while a page has unsaved edits. The set detail and the
   collection both batch their steppers this way: change what you like, save
   once. */
.mtg-actionbar {
    box-sizing: border-box;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #3d3d3d;
    color: #fff;
    padding: 12px 0;
    display: none;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .3);
}

.mtg-actionbar.mtg-open {
    display: block;
}

.mtg-actionbar .container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mtg-actionbar-text {
    font-size: 13px;
    flex: 1;
}

.mtg-actionbar .mtg-btn-ghost {
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
}

.mtg-actionbar .mtg-btn-ghost:hover {
    color: #fff;
    border-color: #fff;
}

/* --- a row of metrics ----------------------------------------------------
   .mtg-metric wraps one bar; .mtg-metric-grid lays several across a panel. */
.mtg-metric {
    margin-bottom: 14px;
}

.mtg-metric:last-child {
    margin-bottom: 0;
}

.mtg-metric-grid {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.mtg-metric-grid .mtg-metric {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0;
}

.mtg-sub-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #777;
    margin: 18px 0 10px;
}

/* --- a small number field inside a table ---------------------------------
   Used by the per-round grids on the season form. */
.mtg-numin {
    box-sizing: border-box;
    width: 58px;
    background: #fff;
    border: 1px solid #c4c4c4;
    padding: 5px 6px;
    font-size: 13px;
    font-family: inherit;
    text-align: center;
    color: var(--mtg-ink);
}

.mtg-numin:focus {
    outline: none;
    border-color: var(--theme);
}

/* --- a list of sets with a checkbox each --------------------------------- */
.mtg-setlist label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #dcdcdc;
    font-size: 13px;
    cursor: pointer;
}

.mtg-setlist label:last-child {
    border-bottom: none;
}

.mtg-setlist label.mtg-off {
    opacity: .5;
    cursor: not-allowed;
}

.mtg-setlist .mtg-setcode {
    font-weight: 700;
    width: 46px;
}

.mtg-setlist .mtg-setcount {
    margin-left: auto;
    font-size: 12px;
    color: var(--mtg-muted);
}

/* --- season list rows -----------------------------------------------------
   One row per season, the whole row a link. The number block on the left is
   the only thing that changes colour: green while a season is being played,
   grey once it is history. */
.mtg-season-row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 22px;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    padding: 18px 22px;
    margin-bottom: 12px;
    text-decoration: none;
    color: inherit;
}

.mtg-season-row:hover {
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .25);
}

.mtg-season-no {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    background: #3d3d3d;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.mtg-season-no.mtg-live {
    background: var(--theme);
}

.mtg-season-no b {
    font-size: 21px;
    font-weight: 700;
}

.mtg-season-no span {
    font-size: 9px;
    letter-spacing: .5px;
    margin-top: 2px;
}

.mtg-season-body {
    flex: 1;
    min-width: 0;
}

.mtg-season-name {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mtg-season-meta {
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.5;
}

.mtg-season-side {
    text-align: right;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.6;
    width: 150px;
}

.mtg-season-side b {
    font-size: 14px;
    font-weight: 700;
    color: var(--mtg-ink);
}

/* --- rounds ---------------------------------------------------------------
   The strip is the season at a glance: grey for a round not yet started, dark
   for one that is done, green for the one being played. */
.mtg-rounds {
    display: flex;
    gap: 4px;
}

.mtg-round {
    flex: 1;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    line-height: 24px;
    background: #d2d2d2;
    color: #777;
}

.mtg-round.mtg-done {
    background: #9a9a9a;
    color: #fff;
}

.mtg-round.mtg-now {
    background: var(--theme);
    color: #fff;
}

.mtg-roundblock {
    margin-bottom: 24px;
}

.mtg-round-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.mtg-round-head h3 {
    font-size: 16px;
    font-weight: 700;
}

.mtg-round-date {
    font-size: 13px;
    color: var(--mtg-muted);
    font-weight: 600;
}

/* a round with nothing in it yet, or nothing it will ever have */
.mtg-roundempty {
    padding: 22px;
    text-align: center;
    font-size: 13px;
    color: var(--mtg-muted);
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
}

/* --- a match ---------------------------------------------------------------
   Two names either side of a score. The middle and trailing columns are fixed
   widths, not min-widths: a wider value in one row would otherwise shove the
   name columns and make rows disagree with each other down the page. */
.mtg-pair {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    margin-bottom: 9px;
    font-size: 14px;
}

.mtg-pair-side {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.mtg-pair-side.mtg-right {
    justify-content: flex-end;
}

.mtg-pair-score {
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    width: 190px;
    flex-shrink: 0;
    text-align: center;
}

.mtg-pair-score.mtg-noscore {
    font-size: 11px;
    font-weight: 600;
    color: var(--mtg-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mtg-win {
    font-weight: 700;
}

/* the same 190px as a static score, so editable and locked rows line up */
.mtg-pair-edit {
    width: 190px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
}

.mtg-score {
    box-sizing: border-box;
    width: 46px;
    background: #fff;
    border: 1px solid #c4c4c4;
    padding: 5px 6px;
    font-size: 14px;
    font-family: inherit;
    font-weight: 700;
    text-align: center;
    color: var(--mtg-ink);
}

.mtg-score:focus {
    outline: none;
    border-color: var(--theme);
}

.mtg-pair-action {
    width: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* the row that adds one — same skeleton, so it reads as the next line of the
   list rather than a form bolted underneath it */
.mtg-pair-new {
    border: 1px dashed #b4b4b4;
    box-shadow: none;
    background: transparent;
}

.mtg-pair-new .mtg-select {
    font-size: 13px;
    padding: 5px 8px;
}

/* a secondary figure beside a headline one — the cards a pool does not hold */
.mtg-extras {
    font-weight: 400;
    color: var(--mtg-muted);
    cursor: help;
}

/* --- home hero ------------------------------------------------------------
   The one thing the home page is for: the season being played, where you are
   in it, and what happens next. */
.mtg-hero {
    box-sizing: border-box;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    padding: 34px 36px;
    margin: 28px 0 18px;
}

.mtg-hero-t {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 6px;
}

.mtg-hero-s {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
}

.mtg-hero-next {
    font-size: 13px;
    color: var(--mtg-muted);
    line-height: 1.6;
    margin-top: 6px;
}

.mtg-hero-next b {
    color: var(--mtg-ink);
}

.mtg-hero .mtg-row {
    margin-top: 22px;
}

/* the global reset zeroes list padding, so a list inside a notice needs its own */
.mtg-ends {
    margin: 8px 0 0;
    padding-left: 18px;
    list-style: disc;
    line-height: 1.6;
}

.mtg-ends li {
    margin-bottom: 4px;
}


/* ---------------------------------------------------------------------------
   Boosters, by round
   ---------------------------------------------------------------------------
   Both levels fold: a round, and a pack inside it. <details> rather than a
   click handler, because the browser already does this — it opens on Enter,
   it is reachable by keyboard, it prints expanded, and Ctrl+F finds text in a
   closed one in most browsers. There is no JavaScript on this page at all.

   The reset zeroes list styling, and a <summary> is a list item, so the
   default triangle has to be turned off in two ways: `list-style` for
   everything current and the -webkit- pseudo-element for Safari.
   ------------------------------------------------------------------------- */
.mtg-rpacks {
    box-sizing: border-box;
    background: var(--mtg-panel, #ededed);
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .15);
    padding: 4px 20px 8px;
    margin-bottom: 16px;
}

.mtg-rpacks-head,
.mtg-pack-head {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mtg-rpacks-head::-webkit-details-marker,
.mtg-pack-head::-webkit-details-marker {
    display: none;
}

.mtg-rpacks-head {
    padding: 14px 0;
}

.mtg-rpacks-n {
    font-size: 15px;
    font-weight: 700;
}

.mtg-rpacks-note {
    font-size: 12.5px;
    color: var(--mtg-muted);
}

/* the fold marker: a triangle that turns, drawn in CSS so nothing is loaded */
.mtg-caret {
    flex: none;
    width: 0;
    height: 0;
    border-left: 5px solid var(--mtg-muted);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .12s ease;
}

details[open] > summary > .mtg-caret {
    transform: rotate(90deg);
}

.mtg-pack {
    border-top: 1px solid #ddd;
}

.mtg-pack-head {
    padding: 9px 0;
}

.mtg-pack-n {
    flex: none;
    width: 92px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mtg-muted);
}

.mtg-pack-spread {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* every bucket is shown, zeros included, so the seven of them read as a shape
   rather than a list — which only works if they never move and never vanish */
.mtg-pack-pip {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--mtg-muted);
}

.mtg-pack-none {
    opacity: .35;
}


.mtg-pack-list {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px 15px;
}

.mtg-pack-list td {
    padding: 5px 0;
    font-size: 13.5px;
    vertical-align: middle;
}

.mtg-pack-list tr + tr td {
    border-top: 1px solid #e4e4e4;
}

.mtg-pack-r {
    width: 78px;
    padding-right: 14px;
}

.mtg-pack-c {
    width: 26px;
}

.mtg-pack-name {
    width: auto;
}

.mtg-pack-in {
    width: 62px;
    text-align: right;
}

/* the in-or-out switch: a checkbox, because that is what it is */
.mtg-inout {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--mtg-muted);
}

.mtg-inout input {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.mtg-inout input:disabled {
    cursor: default;
}

/* a card that will not be printed is dimmed, not struck through: it is still in
   the pack and still owned — somebody just already has a copy of it */
.mtg-cardout .mtg-pack-name,
.mtg-cardout .mtg-pack-r {
    opacity: .45;
}

.mtg-pack-save {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 0 14px 15px;
}

.mtg-pack-save .mtg-help {
    max-width: 560px;
}


/* who opened a pack — shown folded, changed unfolded */
.mtg-pack-who {
    margin-left: auto;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mtg-ink);
}

.mtg-pack-nobody {
    font-weight: 400;
    font-style: italic;
    color: #a08a4a;
}

.mtg-pack-give {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0 12px 15px;
}

.mtg-pack-give .mtg-label {
    margin-bottom: 0;
}

.mtg-pack-give .mtg-select {
    width: 190px;
}


/* ---------------------------------------------------------------------------
   The market
   ------------------------------------------------------------------------- */
.mtg-market td {
    vertical-align: middle;
}

.mtg-mk-set {
    font-size: 11px;
    color: var(--mtg-muted);
    margin-left: 8px;
    white-space: nowrap;
}

.mtg-qty {
    box-sizing: border-box;
    width: 62px;
    padding: 5px 6px;
    font-family: inherit;
    font-size: 13px;
    border: 1px solid #c4c4c4;
    background: #fff;
}

/* the running total, which sticks to the bottom so it is still there after
   scrolling past forty rows of cards */
.mtg-mk-bar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 14px;
    padding: 12px 16px;
    background: #ededed;
    box-shadow: 0 -1px 4px 0 rgba(0, 0, 0, .15);
    font-size: 13.5px;
}

.mtg-mk-over {
    color: #a8410a;
    font-weight: 700;
}

.mtg-mk-bar button[disabled] {
    opacity: .45;
    cursor: default;
}

.mtg-mk-orders {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mtg-mk-orders td {
    padding: 4px 0;
    vertical-align: top;
}

.mtg-mk-orders tr + tr td {
    border-top: 1px solid #e0e0e0;
}

.mtg-mk-n {
    width: 30px;
    font-weight: 700;
    color: var(--mtg-muted);
}

.mtg-mk-when {
    width: 58px;
    text-align: right;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3px;
    color: var(--mtg-muted);
}

/* Undoing a purchase. Quiet until it is pointed at: it sits beside every
   waiting line, and a column of red crosses would read as a list of problems
   rather than a list of cards on their way. */
.mtg-mk-x {
    width: 20px;
    text-align: right;
}

.mtg-mk-x button {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 1px solid var(--mtg-line);
    border-radius: 3px;
    background: #fff;
    font: 700 13px/1 Lato, sans-serif;
    color: var(--mtg-muted);
    cursor: pointer;
}

.mtg-mk-x button:hover {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
}


/* ---------------------------------------------------------------------------
   The order log
   ------------------------------------------------------------------------- */

/* A row carries a colour swatch, a card name, a rarity badge and a status pill,
   none of which share a baseline on their own. */
.mtg-orders td {
    vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   Option pickers on the printout page

   Links rather than a form, because every option changes what the preview says
   and a page that reloads on each click needs no JavaScript to stay honest.
   ------------------------------------------------------------------------- */
.mtg-pickrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mtg-pick {
    box-sizing: border-box;
    padding: 5px 11px;
    font-size: 12.5px;
    line-height: 1.4;
    color: #444;
    text-decoration: none;
    background: #fff;
    border: 1px solid #c4c4c4;
}

.mtg-pick:hover {
    border-color: var(--theme);
    color: var(--theme);
}

.mtg-pick.mtg-on {
    background: var(--theme);
    border-color: var(--theme);
    color: #fff;
    font-weight: 700;
}

.mtg-pick.mtg-on:hover {
    color: #fff;
}

/* an option this combination cannot offer — a ruler with no margin to put it in */
.mtg-pick.mtg-off {
    color: #a0a0a0;
    background: #f2f2f2;
    border-style: dashed;
    cursor: not-allowed;
}

/* The print link sits at the right-hand end of a round summary. Clicking it
   navigates, so the fold it also toggles never matters. */
.mtg-rpacks-print {
    margin-left: auto;
}


/* ---------------------------------------------------------------------------
   Decks

   A deck row is a panel rather than a link, because it carries forms — sharing,
   archiving, deleting — and a form inside an anchor is not valid HTML. The name
   is the link instead, which is also the only part worth clicking.
   ------------------------------------------------------------------------- */
.mtg-deckrow {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    padding: 14px 18px;
    margin-bottom: 12px;
}

.mtg-deckrow.mtg-away {
    opacity: .72;
}

/* somebody else's private deck: its name, and nothing else to look at */
.mtg-deckrow.mtg-shut {
    background: #e8e8e8;
    box-shadow: none;
    border: 1px dashed #c4c4c4;
}

.mtg-deck-colours {
    display: flex;
    gap: 3px;
    width: 78px;
    flex-shrink: 0;
}

.mtg-deck-colours span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .25);
}

.mtg-deck-body {
    flex: 1;
    min-width: 0;
}

.mtg-deck-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mtg-deck-name a {
    color: inherit;
    text-decoration: none;
}

.mtg-deck-name a:hover {
    color: var(--theme);
}

.mtg-deck-meta {
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.5;
}

.mtg-deck-side {
    flex-shrink: 0;
    width: 150px;
    text-align: right;
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.6;
}

.mtg-deck-side b {
    font-size: 15px;
    font-weight: 700;
    color: var(--mtg-ink);
}

.mtg-deck-acts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    width: 82px;
}

.mtg-deck-acts form {
    display: block;
}

/* the buttons stack, so they share a width whether they are links or submits */
.mtg-deck-acts .mtg-btn {
    box-sizing: border-box;
    width: 100%;
}

.mtg-owner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
}

/* the "start a deck" fold, which is the only way a deck comes into being */
.mtg-newdeck {
    box-sizing: border-box;
    border: 2px dashed #b4b4b4;
    margin-bottom: 12px;
}

.mtg-newdeck > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    cursor: pointer;
    list-style: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--mtg-muted);
}

.mtg-newdeck > summary::-webkit-details-marker {
    display: none;
}

.mtg-newdeck:hover {
    border-color: var(--theme);
}

.mtg-newdeck:hover > summary {
    color: var(--theme);
}

.mtg-newdeck[open] {
    border-style: solid;
    border-color: #c4c4c4;
    background: var(--mtg-panel);
}

.mtg-newdeck-body {
    padding: 0 18px 18px;
}

/* one heading's worth of a deck list: "Creatures 17" */
.mtg-deck-group {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 20px 0 8px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.mtg-deck-group span {
    font-weight: 400;
    color: var(--mtg-muted);
}

.mtg-deck-list td {
    vertical-align: middle;
}

.mtg-deck-list .mtg-qn {
    width: 34px;
    font-weight: 700;
    text-align: right;
}


/* ---------------------------------------------------------------------------
   The deck builder

   The deck lives in the sidebar rather than above the pool, which is where the
   mockup put it. The sidebar is already sticky, so the list, the curve and the
   colours stay on screen the whole time you are browsing — and the one thing a
   builder must never do is hide the deck you are building.
   ------------------------------------------------------------------------- */
.mtg-db-pool {
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
}

.mtg-db-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px;
    border-bottom: 1px solid #ddd;
    font-size: 13px;
}

.mtg-db-item:last-child {
    border-bottom: none;
}

.mtg-db-item:hover {
    background: #e4e4e4;
}

/* in the deck already — the count on the right says how many */
.mtg-db-item.mtg-on {
    background: #e2f0df;
}

.mtg-db-item.mtg-on:hover {
    background: #d8ebd4;
}

.mtg-db-set {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--mtg-muted);
    width: 42px;
    flex-shrink: 0;
}

.mtg-db-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtg-db-own {
    width: 62px;
    flex-shrink: 0;
    text-align: right;
    font-size: 11px;
    color: var(--mtg-muted);
}

/* a card you do not own a copy of; basics never say this */
.mtg-db-own.mtg-none {
    color: #b33;
}

.mtg-db-item .mtg-qty {
    flex-shrink: 0;
}

/* --- the deck, in the sidebar -------------------------------------------- */
.mtg-db-list {
    max-height: 40vh;
    overflow-y: auto;
    margin-right: -4px;
    padding-right: 4px;
}

.mtg-db-head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mtg-muted);
}

.mtg-db-head:first-child {
    margin-top: 0;
}

.mtg-db-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
}

.mtg-db-q {
    width: 20px;
    flex-shrink: 0;
    text-align: right;
    font-weight: 700;
}

.mtg-db-nm {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mtg-db-x {
    flex-shrink: 0;
    color: #b33;
    font-weight: 700;
    opacity: .45;
    cursor: pointer;
    background: none;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.mtg-db-line:hover .mtg-db-x,
.mtg-db-x:focus {
    opacity: 1;
}

/* --- the mana curve ------------------------------------------------------ */
.mtg-curve {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 92px;
    margin-top: 4px;
}

.mtg-curve-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.mtg-curve-bar {
    width: 100%;
    background: var(--theme);
    border-radius: 2px 2px 0 0;
    min-height: 2px;
}

.mtg-curve-bar.mtg-zero {
    background: #cfcfcf;
}

.mtg-curve-lbl {
    font-size: 10px;
    color: var(--mtg-muted);
}

/* --- one bar of colour proportions --------------------------------------- */
.mtg-colorbar {
    display: flex;
    height: 9px;
    border-radius: 4px;
    overflow: hidden;
    background: #d5d5d5;
    margin-bottom: 12px;
}

.mtg-colorbar span {
    display: block;
}

/* --- the unsaved-changes bar --------------------------------------------- */
.mtg-unsaved {
    display: none;
    margin-top: 16px;
}

.mtg-unsaved.mtg-open {
    display: block;
}

/* ---------------------------------------------------------------------------
   The rankings timeline

   One column per round ever played, so the table is wider than the page and
   scrolls sideways inside its own box. The rank and player columns are stuck to
   the left edge — a rating three seasons back is meaningless if you cannot see
   whose it is.
   ------------------------------------------------------------------------- */
.mtg-rk-wrap {
    overflow-x: auto;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
}

table.mtg-rk {
    border-collapse: separate;
    border-spacing: 0;
    width: max-content;
    min-width: 100%;
}

.mtg-rk th,
.mtg-rk td {
    padding: 9px 14px;
    font-size: 13px;
    white-space: nowrap;
    border-bottom: 1px solid #ddd;
    text-align: center;
    vertical-align: middle;
}

.mtg-rk tbody tr:last-child td {
    border-bottom: none;
}

.mtg-rk th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #555;
    background: #e3e3e3;
    border-bottom: 2px solid #d0d0d0;
    line-height: 1.5;
}

/* the round still being played: its ratings are worked out on the spot */
.mtg-rk th.mtg-live {
    color: #245b1a;
    background: #cfe7cb;
    box-shadow: inset 0 -2px 0 0 var(--theme);
}

.mtg-rk td.mtg-live {
    background: #dceeda;
}

.mtg-rk th small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mtg-muted);
}

.mtg-rk th.mtg-live small {
    color: #3d7a33;
}

/* frozen rank and player columns */
.mtg-rk .c-rank {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 62px;
    background: var(--mtg-panel);
}

.mtg-rk .c-player {
    position: sticky;
    left: 62px;
    z-index: 2;
    text-align: left;
    min-width: 170px;
    background: var(--mtg-panel);
    box-shadow: 1px 0 0 0 #d0d0d0;
}

.mtg-rk th.c-rank,
.mtg-rk th.c-player {
    z-index: 3;
    background: #e3e3e3;
}

.mtg-rk th.c-player {
    box-shadow: 1px 0 0 0 #d0d0d0;
}

.mtg-rk tbody tr.mtg-you td {
    background: #e4f2e1;
}

.mtg-rk-elo {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mtg-rk-sub {
    font-size: 11px;
    color: var(--mtg-muted);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

.mtg-up {
    color: #1d8a10;
    font-weight: 700;
}

.mtg-down {
    color: #b33;
    font-weight: 700;
}

.mtg-flat {
    color: #999;
}

.mtg-rk-none {
    color: #bbb;
    font-size: 14px;
}

.mtg-medal {
    display: inline-block;
    width: 22px;
    text-align: center;
    font-size: 15px;
}

.mtg-rk-player {
    display: flex;
    align-items: center;
    gap: 9px;
}

.mtg-rk-hint {
    font-size: 12px;
    color: var(--mtg-muted);
    margin-top: 12px;
    line-height: 1.6;
}

/* --- the panel above the timeline ---------------------------------------- */
.mtg-rk-top {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-bottom: 16px;
}

.mtg-rk-leader {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.mtg-rk-crown {
    font-size: 30px;
    line-height: 1;
}

.mtg-rk-leadername {
    font-size: 20px;
    font-weight: 700;
}

.mtg-rk-leadersub {
    font-size: 12px;
    color: var(--mtg-muted);
    margin-top: 2px;
}

.mtg-rk-stats {
    display: flex;
    gap: 34px;
    margin-left: auto;
}

.mtg-rk-stat-v {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mtg-rk-stat-l {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--mtg-muted);
    margin-top: 5px;
}

/* ---------------------------------------------------------------------------
   Career records and head to head
   ------------------------------------------------------------------------- */
.mtg-kpis {
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
}

.mtg-kpi {
    box-sizing: border-box;
    flex: 1;
    background: var(--mtg-panel);
    box-shadow: var(--mtg-shadow);
    padding: 16px 18px;
}

.mtg-kpi-v {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.mtg-kpi-l {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mtg-muted);
    margin-top: 6px;
}

/* a win rate as a bar inside a table cell */
.mtg-wr {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mtg-wr .mtg-bar {
    flex: 1;
    margin-top: 0;
    min-width: 60px;
}

.mtg-wr-v {
    width: 38px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* --- the computed curiosities -------------------------------------------- */
.mtg-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.mtg-fact {
    box-sizing: border-box;
    flex: 1 1 calc(50% - 8px);
    min-width: 260px;
    background: #fff;
    border-left: 3px solid var(--theme);
    padding: 12px 14px;
}

.mtg-fact-l {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mtg-muted);
    margin-bottom: 5px;
}

.mtg-fact-v {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
}

.mtg-fact-s {
    font-size: 12px;
    color: var(--mtg-muted);
    line-height: 1.5;
    margin-top: 3px;
}

/* --- a proportion bar, for how matches end and who leads a rivalry -------- */
.mtg-split {
    display: flex;
    height: 26px;
    border-radius: 4px;
    overflow: hidden;
    background: #d2d2d2;
}

.mtg-split span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}

.mtg-split .mtg-s-a {
    background: var(--theme);
}

.mtg-split .mtg-s-b {
    background: #6f7f95;
}

.mtg-split .mtg-s-c {
    background: #b0975a;
}

/* --- head to head --------------------------------------------------------- */
.mtg-picker {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 20px;
}

.mtg-picker .mtg-field {
    margin-bottom: 0;
    width: 230px;
}

.mtg-vs {
    font-size: 13px;
    font-weight: 700;
    color: var(--mtg-muted);
    line-height: 34px;
}

.mtg-h2h-score {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.mtg-h2h-side {
    flex: 1;
    min-width: 0;
}

.mtg-h2h-side.mtg-b {
    text-align: right;
}

.mtg-h2h-name {
    font-size: 17px;
    font-weight: 700;
}

.mtg-h2h-sub {
    font-size: 12px;
    color: var(--mtg-muted);
    margin-top: 3px;
}

.mtg-h2h-n {
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.mtg-h2h-dash {
    font-size: 20px;
    color: #aaa;
}

.mtg-h2h-facts {
    display: flex;
    gap: 26px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.mtg-h2h-facts > div {
    flex: 1;
    min-width: 130px;
}

.mtg-lose {
    color: #888;
}

.mtg-res {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}

/* --- one line of the legality panel -------------------------------------- */
.mtg-legal {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
    font-size: 13px;
    line-height: 1.45;
}

.mtg-tick {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-weight: 700;
}

.mtg-tick.mtg-yes {
    color: var(--theme);
}

.mtg-tick.mtg-no {
    color: #b33;
}

/* the dot on the save button while there is something to save. Not .mtg-dot:
   inc/env.php uses that for the status lights on the environment panel. */
.mtg-savedot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    margin-left: 7px;
    vertical-align: middle;
}


/* ---------------------------------------------------------------------------
   The ledger — one player's credits, every row of them
   ------------------------------------------------------------------------- */

/* The one sortable column on the site. It is a link rather than a script so
   the order survives a reload and can be linked to. */
.mtg-lg-sort {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.mtg-lg-sort:hover {
    text-decoration: underline;
}

/* Money in and money out. Colour rather than a sign alone, because a column of
   numbers is scanned rather than read. */
.mtg-lg-up {
    color: #1a7a10;
    font-weight: 700;
}

.mtg-lg-down {
    color: #c0392b;
    font-weight: 700;
}

/* A note is an aside, not a column somebody reads down. */
.mtg-ledger td.mtg-help {
    color: var(--mtg-muted);
}