@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=optional');

/* Ubuntu-ish Colour theme
   Dark brown - #332532
   Light brown - #644D52
   Peach - #F77A52
   sunshine - #FF974F
   grey blue - #A49A87
 */

 /* alternative theme including white
  offwhite - #f8f8f8
  cream - #f2e5bd
  apple - #b9bf83
  pear - #a69f7c
  chocolate - #8c6865
  black - #000000
 */

 /* lavender theme including white
  purple - #6765AD
  blue - #8FB0FF
  offwhite - #F8F8F8
  lightgreen - #89B28A
  darkgreen - #577043
  nearly black -#292929
 */

 /* scheme picked from image
 light blue 199 217 236 #C7D9EC
 navy blue  75 87 134  #4b5786
 desaturated blue 86 129 178 #96b1cf
 mid blue 144 189 230 #90bde6
 really dark blue 23, 55, 94 #17375e
 orange 249 166 74 #f9a64a
 dark brown 162 83 55 #a25337
nearly black #292929
 */

/* Global font scaling: adjust html { font-size } to scale all text sizes together. */
html { font-size: 17px; }

:root {
    --white: #f8f8f8;
    --violet: #f2f2ff;
    --blueish: #e0f0ff;
    --realwhite: #fcfcfc;

    --green: green;
    --blue: #559eff;
    --dodgerblue: dodgerblue;
    --orange: orange;
    --red: red;
    --black: black;

    --verywhite: #d4d4d4;
    --lightblack: #161616;

    --paleblue: #96b1cf;
    --darkpaleblue: #768190;
    --navbackblue: #181b20;

    --grey: gray;
    --verydarkgrey: #393939;
    --darkgrey: #dddddd;
    --lightgrey: #eaeaea;
    --almostgrey: #bbbbbb;
    --quasiblack: #292929;

    --almostwhite: #eeeeee;
    --bluetext: #17375e;
    --greytext: #4b5786;

    --almostblue: #879ced;

    --yellow: yellow;
    --lightyellow: #f2e9a2;
    --darkyellow: #bf9b6b;
    --lighteryellow: #e8e4c8;
    --darkeryellow: #c7a44c;

    --mainImage: url("/img/misc/background.png");
    --darkImage: url("/img/misc/background-dark.png");

    --chartjs-default-grid: rgba(0,0,0,0.1);
    --chartjs-dark-grid: rgba(140,140,140,0.2);
    --chartjs-default-text: #000000;
    --chartjs-dark-text: var(--darkgrey);
    --chartjs-default-crosshair: rgba(0,0,0,0.12);
    --chartjs-dark-crosshair: rgba(255,255,255,0.15);

    --font-mono: 'Geist', sans-serif;

    /* ── Layout tokens ── */
    --nav-height: 56px;
    --page-gutter: 3vw;
    --page-max-width: min(80vw, 1600px);
    --content-padding-top: calc(var(--nav-height) + 2vh);

    /* ── Font Size Scale ── */
    --text-2xs:  0.625rem;  /* ~10px */
    --text-xs:   0.6875rem; /* ~11px */
    --text-sm:   0.75rem;   /* ~12px */
    --text-base: 0.825rem;  /* ~13px */
    --text-md:   0.895rem;  /* ~14px */
    --text-lg:   0.9625rem; /* ~15px */
    --text-xl:   1.03rem;   /* ~16px */
    --text-2xl:  1.1rem;    /* ~18px */
    --text-3xl:  1.17rem;   /* ~19px */
    --text-4xl:  1.2375rem; /* ~20px */
    --text-5xl:  1.3rem;    /* ~21px */
    --text-6xl:  1.375rem;  /* ~22px */
    --text-7xl:  1.5125rem; /* ~24px */
    --text-8xl:  1.65rem;   /* ~26px */
    --text-9xl:  1.7875rem; /* ~29px */
    --text-10xl: 1.925rem;  /* ~31px */
    --text-11xl: 2.2rem;    /* ~35px */

    --tier-s: #ff7f7f;
    --tier-a: #ffbf7f;
    --tier-b: #ffff7f;
    --tier-c: #7fff7f;
    --tier-d: #7fbfff;
    --tier-e: #7f7fff;
    --tier-f: #ff7fff;
}

.light-theme {
    --normal: var(--black);
    --background: var(--white);
    --tralternatebase: var(--realwhite);
    --tralternate: var(--violet);
    --hover: var(--blueish);
    --headingtext: var(--bluetext);
    --activetext: var(--greytext);
    --navbackground: var(--paleblue);
    --selectedhover: var(--almostblue);
    --headerbackground: var(--lightgrey);
    --normaltext: var(--quasiblack);
    --autocomplete: var(--verywhite);

    --asuccess: var(--green);
    --anormal: var(--blue);
    --ainfo: var(--dodgerblue);
    --awarning: var(--orange);
    --adanger: var(--red);
    --adefault: var(--black);

    --aliasing: var(--lightyellow);
    --antialiasing: var(--lighteryellow);
    --slider: var(--yellow);
    --backgroundImage: var(--mainImage);
    --chartjs-grid: var(--chartjs-default-grid);
    --chartjs-text: var(--chartjs-default-text);
    --chartjs-crosshair: var(--chartjs-default-crosshair);

    --bg-active: var(--headerbackground);
    --bg-example: var(--headerbackground);
    --bg-hover: var(--hover);

    --text-tag: var(--normal);
    --text-primary: var(--headingtext);
    --text-secondary: var(--normaltext);

    --border-example: var(--ainfo);

    --syntax-text: var(--ainfo);
    --syntax-border-color: var(--navbackground);

    /* Layered surfaces for card-based layouts */
    --surface-0: var(--background);
    --surface-1: #ffffff;
    --surface-2: #f0f0f2;
    --surface-3: #e2e4e6;
    --surface-4: #d4d6d8;
    --border-subtle: rgba(0,0,0,0.06);
    --border-moderate: rgba(0,0,0,0.12);
    --text-dim: #6b7280;
    --accent-muted: rgba(85,158,255,0.08);
    --accent-border: rgba(85,158,255,0.2);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --row-even: #ffffff;
    --row-odd: #f7f7fa;
    --row-hover: #eeeef4;
}

.dark-theme {
    --normal: var(--darkgrey);
    --background: var(--lightblack);
    --tralternatebase: var(--verydarkgrey);
    --tralternate: var(--grey);
    --hover: var(--almostgrey);
    --headingtext: var(--white);
    --activetext: var(--almostwhite);
    --navbackground: var(--navbackblue);
    --selectedhover: var(--almostblue);
    --headerbackground: var(--quasiblack);
    --normaltext: var(--white);
    --autocomplete: var(--verywhite);

    --asuccess: var(--green);
    --anormal: var(--blueish);
    --ainfo: var(--violet);
    --awarning: var(--orange);
    --adanger: var(--red);
    --adefault: var(--white);

    --aliasing: var(--darkyellow);
    --antialiasing: var(--darkeryellow);
    --slider: var(--navbackground);
    --backgroundImage: var(--darkImage);
    --chartjs-grid: var(--chartjs-dark-grid);
    --chartjs-text: var(--chartjs-dark-text);
    --chartjs-crosshair: var(--chartjs-dark-crosshair);

    --bg-active: var(--headerbackground);
    --bg-example: var(--headerbackground);
    --bg-hover: var(--hover);

    --text-tag: var(--normal);
    --text-primary: var(--headingtext);
    --text-secondary: var(--normaltext);

    --border-example: var(--awarning);

    --syntax-text: var(--awarning);
    --syntax-border-color: var(--navbackground);

    /* Layered surfaces for card-based layouts */
    --surface-0: var(--background);
    --surface-1: #181b20;
    --surface-2: #1f2328;
    --surface-3: #282d35;
    --surface-4: #323840;
    --border-subtle: rgba(255,255,255,0.06);
    --border-moderate: rgba(255,255,255,0.12);
    --text-dim: #5f6672;
    --accent-muted: rgba(91,141,239,0.12);
    --accent-border: rgba(91,141,239,0.25);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --row-even: #13151a;
    --row-odd: #181b20;
    --row-hover: #252930;
}

/* Flag emoji polyfill for Chromium on Windows (no native flag glyphs). */
@font-face {
    font-family: 'Twemoji Country Flags';
    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F;
    src: url('https://cdn.jsdelivr.net/npm/country-flag-emoji-polyfill@0.1/dist/TwemojiCountryFlags.woff2') format('woff2');
}

/* reset all margins and padding*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Geist', 'Twemoji Country Flags', sans-serif;
}

body {
    background-color: var(--background);
    color: var(--normal);
}

table {
    border-collapse: collapse;
    /*margin: 0 10px 0 10px;*/
}

th, td {
    text-align: left;
    padding: 4px;
}

tr:nth-child(even) {
    background-color: var(--tralternate);
}

tr:nth-child(odd) {
    background-color: var(--tralternatebase);
}

tr:hover {
    background-color: var(--hover);
}

tr:nth-child(even).no-hover:hover{
    background-color: var(--tralternate);
}

tr:nth-child(odd).no-hover:hover{
    background-color: var(--background);
}

th.wrap {
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 360px;
}

table.searchResults {
    float: left;
    min-width:360px;
}

table.setValue {
    border-collapse: collapse;
    table-layout: fixed;
    width: 95%;
}

tr.setValue {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

td.setValue {
    width: 65%;
    white-space: nowrap;
}

td img {
    vertical-align: top;
}


tr.setValue:hover {
    background-color: rgba(0, 0, 0, 0.0) !important;
}

h1 {
    color: var(--headingtext);
    margin-left: 20px;
    margin-top: 20px;
    margin-bottom: 10px
}

p {
    color: var(--normaltext);
    margin-left: 20px;
    margin-bottom: 20px;
}

.btn {
    border: none;
    background-color: inherit;
    padding: 4px 8px;
    font-size: var(--text-2xl);
    cursor: pointer;
    display: inline-block;
}

.btn:hover {
    text-decoration: underline;
}

.success {color: var(--asuccess);}
.normal {color: var(--anormal);}
.info {color: var(--ainfo);}
.warning {color: var(--awarning);}
.danger {color: var(--adanger);}
.default {color: var(--adefault);}

a {
    color: var(--ainfo);
    text-decoration: none;
}

a.pagination {
    color: var(--normal);
    text-decoration: none;
    display: inline;
}


/*********** TOP NAVBAR ***********/

/* Theme toggle */
.ban-theme-toggle {
    position: relative;
    width: 32px; height: 32px;
    background: none; border: none;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s;
}
.ban-theme-toggle:hover { background: var(--surface-3, var(--navbackground)); }

.theme-icon {
    position: absolute;
    transition: opacity 0.35s ease, transform 0.45s ease;
}
.theme-icon-sun {
    opacity: 0;
    transform: rotate(-90deg);
}
.theme-icon-moon {
    opacity: 1;
    transform: rotate(0deg);
}

/* Dark mode: moon out, sun in */
.dark-theme .theme-icon-sun {
    opacity: 1;
    transform: rotate(0deg);
}
.dark-theme .theme-icon-moon {
    opacity: 0;
    transform: rotate(90deg);
}

/* Mobile hamburger */
.ban-nav-hamburger {
    display: none;
    width: 36px; height: 36px;
    border-radius: var(--radius-sm, 6px);
    background: none; border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    color: var(--activetext);
    font-size: var(--text-6xl); cursor: pointer;
    align-items: center; justify-content: center;
    transition: all 0.12s;
    font-family: inherit;
}
.ban-nav-hamburger:hover { border-color: var(--accent-border, rgba(91,141,239,0.25)); color: var(--normal); }

/* Mobile slide-out menu.
   Overlay and menu use the same 0.25s timing so they fade/slide off
   in lock-step. Using visibility (rather than display: none) lets the
   overlay's opacity transition actually play to completion on close,
   and the visibility transition is delayed to the end of the duration
   so the element stays interactive (and visually present) until the
   menu has finished sliding off-screen. */
.ban-nav-mobile-overlay {
    position: fixed; inset: 0; z-index: 250;
    background: rgba(0,0,0,0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.ban-nav-mobile-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Inverse on open: flip visibility immediately so the fade-in plays. */
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.ban-nav-mobile-menu {
    position: fixed; top: 0; right: 0; z-index: 260;
    width: 280px; height: 100vh;
    background: var(--navbackground);
    border-left: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    padding: 20px;
    overflow-y: auto;
    visibility: hidden;
    /* Slide via transform (GPU-composited, no layout thrash) — much
       smoother than animating `right`, which was producing a final-
       frame snap when the visibility flip landed. */
    transform: translateX(100%);
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.ban-nav-mobile-menu.open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

.ban-nav-mobile-close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm, 6px);
    background: var(--surface-2, var(--navbackground)); border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    color: var(--activetext); font-size: var(--text-2xl); cursor: pointer;
    margin-bottom: 16px; margin-left: auto;
    font-family: inherit;
}

.ban-nav-mobile-links {
    list-style: none; display: flex; flex-direction: column; gap: 2px;
    margin: 0; padding: 0;
}
.ban-nav-mobile-links a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-radius: var(--radius-sm, 6px);
    color: var(--activetext); text-decoration: none;
    font-size: var(--text-lg); font-weight: 500; transition: all 0.1s;
}
.ban-nav-mobile-links a:hover { background: var(--surface-2, var(--navbackground)); color: var(--normal); }
.ban-nav-mobile-links a.active { color: var(--ainfo); background: var(--accent-muted, rgba(91,141,239,0.12)); }
.ban-nav-mobile-links a .nav-icon { font-size: var(--text-2xl); width: 22px; text-align: center; }

.ban-nav-mobile-divider {
    border: none; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06)); margin: 12px 0;
}
.ban-nav-mobile-ext {
    display: flex; gap: 10px; padding: 8px 0;
}
.ban-nav-mobile-ext a {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm, 6px);
    background: var(--surface-2, var(--navbackground)); border: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    text-decoration: none;
}
.ban-nav-mobile-ext a img { width: 22px; height: 22px; opacity: 0.7; }

/* Responsive: collapse to hamburger */
@media (max-width: 900px) {
    .ban-nav-hamburger { display: flex; }
}

/*********** END OF TOP NAVBAR ***********/


.index ol {
    padding: 14px 16px;
}

.index li {
    float: left;
    padding: 4px 8px;
    margin: 4px 20px;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: var(--text-3xl);
  border: none;
  outline: none;
  color: var(--activetext);
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  height: 48px;
}

.active {
    background-color: var(--background);
    color: var(--activetext);
}
a.active:hover{
    color: var(--activetext);
}
a.beta {
    color: #ffffff;
    font-weight: bold;
    pointer-events: none;
    padding-left: 10px;
}

.selected {
    background-color: var(--activetext);
    color: var(--background);
}
a.selected:hover{
    color: var(--selectedhover);
}

#container{width: 900px;}
#left{float: left; width: 215px;}
#right{float: right; width: 215px;}
#center{margin: 0 auto; width: 215px;}

.bg{
    height: 480px;
    background-image: var(--backgroundImage);
    background-repeat: no-repeat;
    background-color: var(--background);
}
/* ═══ Base template layout ═══ */
.page-content {
    padding-top: 83px;
    min-height: 100vh;
}

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1.5em;
}
.page-header h1 {
    font-size: var(--text-8xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    margin: 0;
}
.page-header .page-subtitle {
    color: var(--activetext);
    font-size: var(--text-2xl);
    margin: 0.25em 0 0;
}
.page-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    background: var(--surface-3);
    border: 1px solid var(--border-subtle);
    color: var(--activetext);
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s;
    flex-shrink: 0;
}
.page-action:hover {
    color: var(--normal);
    border-color: var(--accent-border);
    background: var(--surface-2);
}
.page-action.active {
    color: var(--ainfo);
    border-color: var(--accent-border);
    background: var(--accent-muted);
}

.page-error {
    padding: 2em var(--page-gutter);
    font-size: var(--text-4xl);
    color: var(--adanger);
}

.page-sticky-toolbar {
    position: sticky;
    top: var(--nav-height);
    z-index: 50;
    background: var(--background);
}

/* ═══ Page width tiers ═══ */
.page-standard {
    max-width: var(--page-max-width);
    margin: 0 auto;
    /*padding: 0 var(--page-gutter);*/
}
.page-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}
.page-compact {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--page-gutter);
}

/* ═══ Card base (surface + border + radius, no padding) ═══ */
.card {
    background: var(--surface-1);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

/* ═══ Data table base + row stripes ═══ */
.table-data {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-md);
}
.table-data th {
    padding: 8px 12px;
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    background: var(--surface-2);
    border-bottom: 2px solid var(--border-subtle);
    text-align: left;
    white-space: nowrap;
}
.table-data td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.table-data tbody tr:nth-child(even) { background: var(--row-even); }
.table-data tbody tr:nth-child(odd) { background: var(--row-odd); }
.table-data tbody tr:hover { background: var(--row-hover); }

/* ═══ Back link ═══ */
.back-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-md);
    color: #3b6fd4;
    text-decoration: none;
    margin-bottom: 0.5em;
}
.dark-theme .back-link {
    color: #5b8def;
}
.back-link:hover { text-decoration: underline; }

/* ═══ Pagination ═══ */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 1em 0;
}
.pagination a {
    padding: 5px 10px;
    border-radius: 5px;
    background: var(--surface-2);
    color: var(--activetext);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: 600;
    transition: all 0.12s;
}
.pagination a:hover {
    background: var(--surface-3);
    color: var(--normal);
}
.pagination .cur {
    font-weight: 700;
    color: var(--ainfo);
}
.pagination .pg-info {
    color: var(--text-dim);
    font-size: var(--text-sm);
}

.indent{
    margin-left: 30px;
}

.footer {
    color: var(--activetext);
    margin-left: 20px;
}

.search {
    padding: 8px 8px;
    display: inline-block;
    width: 354px;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    z-index: 2;
}



th a {
    color: var(--normal);
    text-decoration: none;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;

    top: 50%;
    -ms-transform: translateY(10%);
    transform: translateY(10%);
}

.autocomplete {
    /* The container must be positioned relative */
    position: relative;
    display: inline-block;
}
.autocomplete:has(.autocomplete-items) input {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    transition: border-radius 0.15s;
}
.autocomplete-items {
    position: absolute;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    border: 1px solid var(--border-moderate);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--surface-4) transparent;
}
.light-theme .autocomplete-items {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.dark-theme .autocomplete-items {
    background: rgba(20, 24, 30, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.autocomplete-items div {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--normal);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--text-lg);
    transition: background 0.1s;
}
.autocomplete-items div:last-child { border-bottom: none; }
.autocomplete-items div:hover {
    background: var(--accent-muted);
}
.autocomplete-active {
    background: var(--accent-muted) !important;
    color: var(--ainfo) !important;
}

pre {
  display: inline-block;
  font-family: var(--font-mono);
  white-space: pre;
}

.anchor{
    display: block;
    position: relative;
    top: -48px;
    visibility: hidden;
}

span {
    line-height: 1;
}

span.emoji {
    font-size: var(--text-8xl);
    text-align: center;
    vertical-align: middle;
    line-height: 1;
}

table.tiers {
    margin: 10px;
}

tr.tiers{
    background-color: #1a1a1a;
    vertical-align: middle;
}

td.tiers {
    min-width: 50px;
    text-align: center;
    font-size: var(--text-8xl);
    margin: auto;
    color: #000000;
}

.arrow {
  border: solid var(--normal);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  margin: 0 2px;
}
th nobr {
  margin-left: 4px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 30%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is too small, make the columns stack on
 * top of each other instead of next to each other */
@media screen and (max-width: 1300px) {
  .column {
    width: 90%;
  }
}



.small-hidden-text {
  color: transparent;
  font-size: var(--text-lg);
  position: absolute;
  padding: .65% 0 0 1%;
  letter-spacing: 0px;
  pointer-events: none;
  width: 146px; /* Size of the small img */
  white-space: normal;
}

/* Sortable table headers (tablesort library) */
th[role=columnheader]:not([data-sort-method='none']) {
    cursor: pointer;
    user-select: none;
}

th[role=columnheader]:not([data-sort-method='none']):after {
    content: '';
    float: right;
    margin-top: 5px;
    margin-left: 8px;
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: var(--normal) transparent;
    visibility: visible;
    opacity: 0.3;
}

th[aria-sort=ascending]:not([data-sort-method='none']):after {
    border-bottom: none;
    border-width: 6px 6px 0;
}

th[aria-sort]:not([data-sort-method='none']):after {
    opacity: 0.6;
}

th[role=columnheader]:not([data-sort-method='none']):hover:after {
    opacity: 1;
}

.foil-wrap.hoverWrap {
    position: absolute;
    z-index: 200;
    pointer-events: none;
}
.hoverWrap > img.hoverImage {
    position: static;
    width: auto;
    max-width: 640px;
    max-height: 360px;
    border-radius: 8px;
}

/* ── Content-warning blur ── */
/* Applies to wrapper divs (.foil-wrap, .sidebar-img-wrap) and standalone <img> elements */
.content-warning:not(.cw-revealed) img,
img.content-warning:not(.cw-revealed) {
    filter: blur(14px);
    transition: filter 0.25s;
}
.content-warning:not(.cw-revealed) {
    cursor: pointer;
    overflow: hidden;
}
/* Revealed state */
.content-warning.cw-revealed img,
img.content-warning.cw-revealed {
    filter: none;
    transition: filter 0.25s;
}

/* Foil card image overlay */
.foil-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.foil-wrap > img {
    display: block;
}
.foil-wrap[data-foil="true"]::after,
.foil-wrap[data-etched="true"]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(
        105deg,
        rgba(255, 0, 0, 0.22) 0%,
        rgba(255, 154, 0, 0.22) 15%,
        rgba(208, 222, 33, 0.25) 30%,
        rgba(79, 220, 74, 0.25) 45%,
        rgba(63, 218, 216, 0.25) 55%,
        rgba(47, 107, 236, 0.22) 70%,
        rgba(166, 68, 253, 0.22) 85%,
        rgba(235, 66, 137, 0.20) 100%
    );
    mix-blend-mode: screen;
    pointer-events: none;
}
.foil-wrap[data-etched="true"]::after {
    background: linear-gradient(
        105deg,
        rgba(235, 66, 137, 0.20) 0%,
        rgba(166, 68, 253, 0.22) 15%,
        rgba(47, 107, 236, 0.22) 30%,
        rgba(63, 218, 216, 0.25) 45%,
        rgba(79, 220, 74, 0.25) 55%,
        rgba(208, 222, 33, 0.25) 70%,
        rgba(255, 154, 0, 0.22) 85%,
        rgba(255, 0, 0, 0.22) 100%
    );
}

@font-face {
    font-family: 'phyrexian';
    src: url('phyrexian.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:lang(phi) {
    font-family: 'phyrexian', sans-serif;
}

@font-face {
    font-family: 'quenya';
    src: url('quenya.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:lang(qya) {
    font-family: 'quenya', sans-serif;
}

/* Override table.tiers for better card wrapping */
table.tiers td div {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
}

/* Upload results table */
.label-caps {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.label-caps-sm {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

.toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--border-moderate);
    flex-shrink: 0;
}

/* ═══ Shared options page wrapper ═══ */
.opts-page-wrap {
    padding: 6vh 0 5vh;
}
.opts-page-wrap h1 {
    font-size: var(--text-7xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 0.25em;
}
.opts-page-wrap .opts-desc {
    color: var(--activetext);
    font-size: var(--text-lg);
    margin: 0 0 1.5em;
}

.opts-section {
    padding: 1.5em;
    margin-bottom: 1.25em;
}

.opts-section h2 {
    font-size: var(--text-3xl);
    font-weight: 600;
    margin: 0 0 4px;
}

.opts-section .section-desc {
    font-size: var(--text-md);
    color: var(--activetext);
    margin: 0 0 14px;
}

.opts-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}

.opts-btn {
    padding: 7px 16px;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}

.opts-btn-warn {
    background: rgba(210,153,34,0.15);
    color: var(--awarning);
}

.opts-btn-warn:hover {
    background: rgba(210,153,34,0.25);
}

.opts-btn-ok {
    background: rgba(63,185,80,0.15);
    color: var(--asuccess);
}

.opts-btn-ok:hover {
    background: rgba(63,185,80,0.25);
}

.opts-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 6px 12px;
}
.opts-checkbox-grid.opts-grid-wide {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.opts-checkbox-grid label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    color: var(--activetext);
    cursor: pointer;
    transition: background 0.1s;
}

.opts-checkbox-grid label:hover {
    background: var(--surface-2);
}

.opts-checkbox-grid input[type="checkbox"] {
    accent-color: var(--ainfo);
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}
.opts-nowrap label { white-space: nowrap; }

/* ═══ Two-column layout (sellers/vendors) ═══ */
.opts-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
}
.opts-two-col h3 {
    font-size: var(--text-md);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    margin: 0 0 0.625em;
}
@media (max-width: 640px) {
    .opts-page-wrap { padding: 2vh 4vw 3vh; }
    .opts-two-col { grid-template-columns: 1fr; }
}

.hover-arrow {
    color: var(--text-dim);
    font-size: var(--text-2xl);
    opacity: 0;
    transition: all 0.2s;
}

/* Apply to parent: .card-with-arrow:hover .hover-arrow */
.card-with-arrow:hover .hover-arrow {
    opacity: 1;
    color: var(--ainfo);
    transform: translateX(2px);
}

.card-accent-bar {
    position: relative;
    overflow: hidden;
}

.card-accent-bar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ainfo);
    opacity: 0;
    transition: opacity 0.2s;
}

.card-accent-bar:hover::before {
    opacity: 1;
}

/* ═══ Tooltip (merged from tooltip.css) ═══ */
.tooltip {
    position: relative;
    display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: var(--navbackground);
    color: var(--almostwhite);
    text-align: center;
    vertical-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 105%;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
}

/* ═══════════════════════════════════════════════════
   Mobile Foundation
   ═══════════════════════════════════════════════════ */

/* Horizontal scroll wrapper for data tables on mobile */
.table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 769px) {
    .table-scroll-wrap { overflow-x: visible; }
}

/* ── Mobile layout token overrides ── */
@media (max-width: 768px) {
    :root {
        --page-gutter: 16px;
        --page-max-width: 100%;
        --content-padding-top: calc(var(--nav-height) + 8px);
    }

    .page-content { padding-top: 56px; }

    /* Legacy table overflow fixes */
    table.searchResults { float: none; min-width: 0; width: 100%; }
    th.wrap { max-width: none; }

    /* Touch-friendly tap targets (excludes nav which has its own sizing) */
    .page-content button,
    .page-content select,
    .page-content .btn,
    .page-content [role="button"] {
        min-height: 44px;
    }
}

@media (max-width: 640px) {
    /* Responsive search input */
    .search { width: 100%; box-sizing: border-box; }

    /* Tighter table cells on small screens */
    th, td { padding: 4px 6px; font-size: var(--text-sm); }
}

/* === Confirm dialog (shared, loaded everywhere via main.css) === */
.ban-confirm-dialog-host[hidden] { display: none !important; }
.ban-confirm-dialog-host {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Anchored mode: scope overlay to the parent element (passed as opts.anchor). */
.ban-confirm-dialog-host.anchored {
    position: absolute;
    z-index: 5;
}

.ban-confirm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ban-confirm-dialog-host.anchored .ban-confirm-backdrop {
    border-radius: inherit;
}

.ban-confirm-modal {
    position: relative;
    max-width: 24em;
    width: calc(100% - 3em);
    padding: 1.25em 1.3em 1.15em;
    background: var(--surface-2);
    border: 1px solid var(--border-moderate);
    border-radius: 0.75em;
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.4);
    color: var(--normal);
    text-align: center;
}

.ban-confirm-message {
    margin: 0 0 1.2em;
    font-size: 1rem;
    line-height: 1.45;
}

.ban-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 0.6em;
}

.ban-confirm-btn {
    padding: 0.5em 0.95em;
    border-radius: 0.4em;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #4a4f5a;
    color: #fff;
    font: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.ban-confirm-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    background: #5a5f6a;
}

.ban-confirm-btn-danger {
    background: var(--adanger, #c0392b);
    border-color: var(--adanger, #c0392b);
    color: #fff;
}
.ban-confirm-btn-danger:hover {
    background: color-mix(in srgb, var(--adanger, #c0392b) 88%, white);
    border-color: color-mix(in srgb, var(--adanger, #c0392b) 88%, white);
}