html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--bs-body-bg), 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.card-suggest-list {
    position: absolute;
    z-index: 1050;
    left: 0;
    right: 0;
    max-height: 320px;
    overflow-y: auto;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-hover-preview {
    position: fixed;
    width: 300px;
    display: none;
    z-index: 2000;
    pointer-events: none;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.set-picker {
    position: relative;
}

.set-picker-pop {
    position: absolute;
    z-index: 1060;
    left: 0;
    right: 0;
    display: none;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}

.set-picker-list {
    max-height: 260px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.set-icon {
    height: 1.25em;
    width: 1.25em;
    object-fit: contain;
}

.cv-row {
    background: var(--bs-body-bg);
}

    .cv-row.row-new {
        border-left: 4px solid var(--bs-success) !important;
    }

    .cv-row.row-changed {
        border-left: 4px solid var(--bs-warning) !important;
    }

    .cv-row.row-remove {
        border-left: 4px solid var(--bs-danger) !important;
        background: var(--bs-danger-bg-subtle);
    }

    .cv-row.row-saved {
        background: var(--bs-success-bg-subtle);
    }

.cv-pop {
    position: absolute;
    z-index: 1060;
    display: none;
    min-width: 100%;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
}

.cv-pop-list {
    max-height: 320px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.cv-qty {
    width: 125px;
}

/* ---- Soft table row (replaces table-light so it follows the theme) ---- */
tr.cv-soft { --bs-table-bg: var(--bs-tertiary-bg); }

/* ---- Small floating labels on card images keep dark text in every theme ---- */
.dk-vprice, .dk-vctl { color: #212529; }

/* ---- Dark theme ---- */
[data-bs-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.6); }
[data-bs-theme="dark"] .navbar-toggler { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .text-bg-dark { background-color: #495057 !important; color: #fff !important; }
[data-bs-theme="dark"] .card-suggest-list { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); }

[data-bs-theme="dark"] .table-primary   { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(13, 110, 253, .22);  --bs-table-border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .table-success   { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(25, 135, 84, .26);   --bs-table-border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .table-warning   { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(255, 193, 7, .16);   --bs-table-border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .table-danger    { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(220, 53, 69, .22);   --bs-table-border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .table-info      { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(13, 202, 240, .16);  --bs-table-border-color: rgba(255, 255, 255, .12); }
[data-bs-theme="dark"] .table-secondary { --bs-table-color: var(--bs-body-color); --bs-table-bg: rgba(108, 117, 125, .26); --bs-table-border-color: rgba(255, 255, 255, .12); }

/* Deck page */
[data-bs-theme="dark"] .dk-gh { border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .dk-row:hover { background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .dk-name:hover { color: #c4b5fd; }
[data-bs-theme="dark"] .dk-price, [data-bs-theme="dark"] .dk-set { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .dk-set { border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .dk-tag { background: rgba(167, 139, 250, .22); color: #c4b5fd; }
[data-bs-theme="dark"] .dk-btn { color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .dk-btn:hover { background: rgba(167, 139, 250, .25); color: #e9e3ff; }
[data-bs-theme="dark"] .dk-noimg { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); }
[data-bs-theme="dark"] .dk-own-none { background: #495057; color: #adb5bd; }
[data-bs-theme="dark"] .dk-check-ok { background: rgba(25, 135, 84, .18); border-color: rgba(25, 135, 84, .5); color: #75b798; }
[data-bs-theme="dark"] .dk-check-warn { background: rgba(255, 193, 7, .12); border-color: rgba(255, 193, 7, .4); }
[data-bs-theme="dark"] .dk-check-bad { background: rgba(220, 53, 69, .15); border-color: rgba(220, 53, 69, .45); }
[data-bs-theme="dark"] .dk-ownbar { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] #bigCard { background: var(--bs-tertiary-bg) !important; }

/* Help page */
[data-bs-theme="dark"] .help-entry { background: var(--bs-body-bg); border-color: var(--bs-border-color); }
[data-bs-theme="dark"] .help-entry[open] > summary { background: var(--bs-tertiary-bg); border-bottom-color: var(--bs-border-color); }
[data-bs-theme="dark"] .help-tag { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* ---- Phones and tablets ---- */
img, svg { max-width: 100%; }
main { min-width: 0; }

/* Wide tables scroll sideways inside their own box instead of stretching the page (site.js wraps them). */
@media (max-width: 991.98px) {
    .cv-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .cv-scroll > table.cv-wide { min-width: 46rem; }
}

/* No hover on touch screens, so the floating card preview would only get in the way. */
@media (hover: none) {
    .card-hover-preview:not(.touch-on) { display: none !important; }
    /* Stops the phone's own "save image / copy" menu from appearing on a long press. */
    [data-large] img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}

/* iPhones zoom the page when a field smaller than 16px gets focus. */
@media (pointer: coarse) {
    input.form-control, select.form-select, textarea.form-control, .form-control-sm, .form-select-sm { font-size: 16px; }
    .btn-sm { padding-top: .35rem; padding-bottom: .35rem; }
    .page-link { padding: .45rem .75rem; }
}

@media (max-width: 575.98px) {
    .display-6 { font-size: 1.7rem; }
    h1, .h3 { font-size: 1.4rem; }
    .container { padding-left: .75rem; padding-right: .75rem; }
    .navbar .nav-link { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Filter rows (Cards and Collection pages): nothing may stick out of the box on a phone. */
#filterRows > div { min-width: 0; }
#filterRows > div > * { max-width: 100%; min-width: 0; }
#filterRows select, #filterRows input { max-width: 100%; }

/* On tablets and desktops the match type and the text box stay side by side on one line, next to the field choice. */
@media (min-width: 768px) {
    #filterRows > div > select { max-width: 200px; }
    #filterRows > div > .cv-textctl { flex: 1 1 300px; flex-wrap: nowrap; }
    #filterRows .cv-textctl > .cv-textbox { flex: 1 1 160px !important; min-width: 120px !important; max-width: 380px !important; }
}

/* Tables marked cv-stack turn each row into a small stacked block on phones (Sets, Binders). */
@media (max-width: 767.98px) {
    table.cv-stack thead { display: none; }
    table.cv-stack, table.cv-stack > tbody { display: block; width: 100%; }
    table.cv-stack > tbody > tr {
        display: flex; flex-wrap: wrap; align-items: center; column-gap: 0; row-gap: .1rem;
        padding: .55rem .25rem; border-bottom: 1px solid var(--bs-border-color);
    }
    table.cv-stack > tbody > tr > td {
        display: block; border: 0; padding: .1rem 1rem .1rem 0; min-width: 0 !important; text-align: left !important;
    }
    table.cv-stack > tbody > tr > td.cv-full { flex: 0 0 100%; }
    table.cv-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label) " "; color: var(--bs-secondary-color); font-size: .85em;
    }
    table.cv-stack > tbody > tr > td:empty { display: none; }
    /* The last small stat stretches so a colored row is colored all the way across. */
    table.cv-stack > tbody > tr > td.cv-grow { flex: 1 1 auto; }
    /* Sets: line the date, progress bar and copies up with the set name (past its icon, and past the arrow on sub-sets). */
    table.cv-stack > tbody > tr.set-parent > td:nth-child(2),
    table.cv-stack > tbody > tr.set-parent > td:nth-child(4),
    table.cv-stack > tbody > tr.set-parent > td:nth-child(5) { padding-left: 1.9rem; }
    table.cv-stack > tbody > tr.set-child > td:nth-child(2),
    table.cv-stack > tbody > tr.set-child > td:nth-child(4),
    table.cv-stack > tbody > tr.set-child > td:nth-child(5) { padding-left: 4.2rem; }
}

/* Set symbols are black artwork; flip them to white on the dark theme so they can be seen. */
[data-bs-theme="dark"] .set-icon, [data-bs-theme="dark"] .set-icon-lg { filter: invert(1); }

/* Thumbnails in tables keep their shape even when a column is squeezed. */
table img { max-width: none; }

/* Colored icons in the menus */
.nav-ic { margin-right: .4rem; font-size: 1.05em; vertical-align: -.12em; }
.ic-blue   { color: #3d8bfd; }
.ic-purple { color: #9b6bdf; }
.ic-orange { color: #fd8a2e; }
.ic-teal   { color: #1fb58f; }
.ic-red    { color: #e5484d; }
.ic-pink   { color: #e0529c; }
.ic-cyan   { color: #12a5c4; }
.ic-green  { color: #2ea36a; }
.ic-gray   { color: #8a949e; }

/* Parts of a page that only make sense for a signed-in member */
.anon .own-only,
.anon [data-col="owned"],
.anon [data-col="wish"] { display: none !important; }

/* Deck: highlight one function */
.dk-dim { opacity: .22; filter: grayscale(.7); transition: opacity .15s; }
.dk-fn { text-decoration: none; }
.dk-fn.active { font-weight: 700; text-decoration: underline; }

/* Cinzel Decorative (SIL Open Font License, bundled with the site) for the brand and page headings */
@font-face {
    font-family: 'Cinzel Decorative';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../lib/fonts/cinzel-decorative/cinzel-decorative-latin-700-normal.woff2') format('woff2');
}
h1, .navbar-brand {
    font-family: 'Cinzel Decorative', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    letter-spacing: .02em;
}

/* Identity "Manage your account" pages: same heading size as the rest of the site */
main:has(.nav-pills.flex-column) h1 { font-size: calc(1.275rem + .3vw); }
@media (min-width: 1200px) { main:has(.nav-pills.flex-column) h1 { font-size: 1.75rem; } }

.ic-gold   { color: #d4a017; }
/* The Life counter menu item is only shown on touch screens (phones and tablets). */
.life-nav { display: none; }
@media (pointer: coarse) { .life-nav { display: list-item; } }