/* com_asean - site styles shared by all five views.
   Same look as com_chess_xqbase / com_fideplayers: gradient banner, blue table
   header, a filter row under the header and dimmed-background modals. */

.asean-site {
    --as-blue: #0078D4;
    --as-border: #d5d9de;
    /* Chips, pills and selects all stand exactly this tall so every row lines up. */
    --as-pill-h: 32px;
    font-size: .9rem;
}

/* -- Banner ----------------------------------------------------------- */
/* The artwork is the banner; the page name sits in its bottom right corner. */
.asean-site .as-banner {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .7rem;
    color: #fff;
    line-height: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

.asean-site .as-banner-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.asean-site .as-banner-sub {
    position: absolute;
    right: .9rem;
    bottom: .55rem;
    line-height: 1.25;
    font-weight: 700;
    font-style: italic;
    font-size: .95rem;
    padding: .1rem .7rem;
    border-radius: 999px;
    background: rgba(8, 18, 38, .5);
}

.asean-site .as-banner a {
    color: #fff !important;
    text-decoration: none !important;
}

/* A championship with no artwork of its own borrows the other one; the picture is dimmed
   right down so the name written over it is the only title anybody reads. Replace it by
   dropping a file at the path the series names, and this whole treatment disappears. */
.asean-site .as-banner-plain .as-banner-img { filter: brightness(.25) saturate(.45) blur(2px); }

.asean-site .as-banner-name {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    padding: 0 1rem;
    line-height: 1.15;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.6vw, 2.1rem);
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #ffd83d;
}

@media (max-width: 640px) {
    .asean-site .as-banner-sub { font-size: .78rem; right: .5rem; bottom: .35rem; padding: .05rem .5rem; }
}

/* The two cells of the import preview an editor may correct. They sit inside a table that
   is otherwise plain text, so they stay quiet: no border until the cell is hovered or the
   control has focus, which keeps the preview readable while still saying "you can change
   this". */
.asean-site .im-fix {
    width: 100%;
    height: 26px;
    padding: 0 .3rem;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font: inherit;
    color: inherit;
}

.asean-site tr:hover .im-fix { border-color: var(--as-border); background: #fff; }

.asean-site .im-fix:focus {
    border-color: var(--as-blue);
    background: #fff;
    outline: none;
}

/* --- medals tally, compact layout ------------------------------------------------- */

/* Used by a championship played only as Open and Women, where the wide grid would be
   mostly white. One line per country; a block of three medal columns per section, then
   the totals - the same shape the team ranking of com_chessresults uses. */
.asean-site .as-tally-team th.as-combo-head {
    background: #4a6a8c;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .3px;
    text-transform: uppercase;
}

.asean-site .as-tally-team th.as-total-head {
    background: #17795e;
    color: #fff;
}

/* The medal headers are pictures, so they need no width to speak of. */
.asean-site .as-tally-team th.as-m-g,
.asean-site .as-tally-team th.as-m-s,
.asean-site .as-tally-team th.as-m-b {
    width: 34px;
    font-size: .95rem;
    padding: .15rem 0;
}

.asean-site .as-tally-team th.as-m-g { background: #fff3cd; }
.asean-site .as-tally-team th.as-m-s { background: #e9ecef; }
.asean-site .as-tally-team th.as-m-b { background: #f7ded9; }

.asean-site .as-tally-team td.as-n {
    width: 34px;
    font-variant-numeric: tabular-nums;
}

/* A hairline after each block, so the eye can tell one section from the next. */
.asean-site .as-tally-team td.as-block-end,
.asean-site .as-tally-team th.as-combo-head { border-right: 2px solid #cfd6de; }

.asean-site .as-tally-team td.as-tot { font-weight: 700; }
.asean-site .as-tally-team td.as-tot.gold   { background: #fff8e1; }
.asean-site .as-tally-team td.as-tot.silver { background: #f2f4f6; }
.asean-site .as-tally-team td.as-tot.bronze { background: #fbeeea; }

.asean-site .as-tally-team td.as-rank-cell { font-size: 1.05rem; font-weight: 700; }
.asean-site .as-tally-team tr.as-podium td { background: #fcfdff; }

.asean-site .as-tally-team td.as-country-row { white-space: nowrap; }

/* A championship with no edition on record yet: quiet, not an error - the data is simply
   still to come. Sits inside a table cell as happily as on its own. */
.asean-site .as-empty {
    padding: .85rem 1rem;
    border: 1px dashed var(--as-border);
    border-radius: 8px;
    background: #fafbfc;
    color: #5a6673;
    line-height: 1.5;
}

.asean-site .as-empty a { font-weight: 600; }

/* --- which championship is being read --------------------------------------------- */

/* One row above the view tabs, and deliberately not in the same key: the tabs are the
   pages of a championship, this row is the championship itself, so it reads as a heading
   over them rather than as a seventh tab. */
.asean-site .as-branch {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 .45rem;
}

.asean-site .as-branch a {
    padding: 0 1.1rem;
    min-height: var(--as-pill-h);
    display: inline-flex;
    align-items: center;
    border: 1px solid #cfd6de;
    border-radius: 999px;
    background: #f1f4f8;
    color: #46525f !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s;
}

.asean-site .as-branch a:hover { background: #e4eaf1; }

.asean-site .as-branch a.on {
    background: #2c3e50;
    border-color: #2c3e50;
    color: #fff !important;
}

/* -- View switcher ----------------------------------------------------
   One dark colour per view so the reader always knows where they are;
   the active pill is the same colour with a white ring around it. */
.asean-site .as-nav {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: .6rem;
}

.asean-site .as-nav a {
    padding: 0 .9rem;
    min-height: var(--as-pill-h);
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 999px;
    color: #fff !important;
    text-decoration: none !important;
    white-space: nowrap;
    font-weight: 600;
    opacity: .88;
    transition: opacity .15s, box-shadow .15s;
}

.asean-site .as-nav a:hover { opacity: 1; }

.asean-site .as-nav a.on {
    opacity: 1;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(0, 0, 0, .22);
}

.asean-site .as-nav a.as-v-intro     { background: #b4551f; }
.asean-site .as-nav a.as-v-events    { background: #1f3f8f; }
.asean-site .as-nav a.as-v-numbers   { background: #0e6b6b; }
.asean-site .as-nav a.as-v-tally     { background: #8a5a06; }
.asean-site .as-nav a.as-v-tables    { background: #5a2a7a; }
.asean-site .as-nav a.as-v-medalists { background: #8c1f3d; }
/* Editors' own tabs: grey, so they never look like one of the championship pages. */
.asean-site .as-nav a.as-v-check     { background: #4a5560; }
.asean-site .as-nav a.as-v-import    { background: #3d4d5c; }

/* --- view=check ------------------------------------------------------------------ */

.asean-site .as-pick-row {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: .6rem 0;
}

.asean-site .as-pick-row select { width: 300px; }

.asean-site .as-check-note {
    margin: 0 0 .6rem;
    max-width: 90ch;
}

/* Severity of a row: a red or amber edge on the left, nothing louder - the table is read
   line by line and a full-width tint would drown the values being compared. */
.asean-site tr.ck-error td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.asean-site tr.ck-warn  td:first-child { box-shadow: inset 3px 0 0 #d99a12; }

/* Two repair buttons per row: on a narrow column they stack instead of being cut off,
   and the report reads line by line so wrapped text is fine here. */
/* A pairing the program is not sure about: same medal, names only loosely alike. */
.asean-site .ck-doubt {
    color: #c0392b;
    font-weight: 700;
    cursor: help;
}

.asean-site .ck-fix {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.asean-site .asean-check .as-tbl td,
.asean-site .asean-check .as-tbl th {
    white-space: normal;
    overflow: visible;
}

/* A row that has been set aside, shown only when asked for. */
.asean-site tr.ck-off td { opacity: .55; }

.asean-site .as-stat.ck-chip-bad {
    background: #fdeeec;
    border-color: #e7a79e;
}

/* Editing buttons live at the right end of the navigation row. */
.asean-site .as-admin-tools {
    margin-left: auto;
    display: flex;
    gap: .35rem;
    align-items: center;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .asean-site .as-admin-tools { margin-left: 0; }
}

/* Every button of the component: same height, radius and text size as a chip. */
.asean-site .as-btn,
.asean-site .as-tools select,
.asean-site .as-admin-tools select {
    padding: 0 .9rem;
    min-height: var(--as-pill-h);
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 600;
    text-transform: none;
    border: 1px solid var(--as-border);
    background: #fff;
    color: #24303c;
    cursor: pointer;
    white-space: nowrap;
}

.asean-site .as-tools select,
.asean-site .as-admin-tools select {
    padding: 0 1.9rem 0 .8rem;
    font-weight: 400;
}

.asean-site .as-btn:hover { filter: brightness(1.08); }
.asean-site .as-btn.clear  { background: #e6a700; border-color: #e6a700; color: #fff; }
.asean-site .as-btn.export { background: #17795e; border-color: #17795e; color: #fff; }
.asean-site .as-btn.add    { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.asean-site .as-btn.del    { background: #b42318; border-color: #b42318; color: #fff; }
.asean-site .as-btn.cols   { background: #475467; border-color: #475467; color: #fff; }

.asean-site .as-pane {
    border: 1px solid var(--as-border);
    border-radius: 6px;
    background: #fff;
    padding: .7rem;
}

/* -- Statistic chips -------------------------------------------------- */
.asean-site .as-stats {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.asean-site .as-stat {
    border: 1px solid var(--as-border);
    /* Half the flag box, so a chip repeats the curve of the flag inside it. */
    border-radius: 11px;
    background: #fff;
    padding: 0 .7rem;
    min-height: var(--as-pill-h);
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.asean-site .as-stat strong { margin-left: .3rem; }

/* A tint per chip, so a row of figures is not one long white bar. Light enough that the
   black text keeps well over the 4.5:1 contrast ratio. */
.asean-site .as-stat.tint-blue  { background: #eef4fd; border-color: #bcd4f2; }
.asean-site .as-stat.tint-teal  { background: #eaf6f1; border-color: #a8d7c4; }
.asean-site .as-stat.tint-amber { background: #fffaf2; border-color: #e8c69d; }

/* Chip that lists the busiest federations: flag, code and count, one after another.
   The flag sprite floats, so each entry is its own flex line to keep it beside the code. */
.asean-site .as-stat-top { gap: .4rem; }

.asean-site .as-top-item {
    display: inline-flex;
    align-items: center;
    gap: 0;
    /* The flag sits at the left edge with the same 3px showing above, below and to its
       left, and the corner radius matches the flag, so pill and flag read as one shape
       instead of a circle floating in a capsule. */
    padding: 3px .55rem 3px 3px;
    border-radius: 11px;
}

/* The pill has no flex gap any more (the flag owns the left edge), so the count keeps
   its own space away from the federation code. */
.asean-site .as-top-item strong { margin-left: .3rem; }

/* One hue fading with the rank - it reads as an order without borrowing medal colours,
   and it stays in the same family as the chip it sits in. Each "top five" chip sets its
   own ramp below, so two of them never look like the same list. */
.asean-site .as-stat-top {
    --as-r1: #efc98f;
    --as-r2: #f1ce9a;
    --as-r3: #f2d3a4;
    --as-r4: #f4d8af;
    --as-r5: #f5ddb9;
    --as-r6: #f7e3c4;
    --as-r7: #f8e8ce;
    --as-r8: #faedd9;
    --as-r9: #fbf2e3;
    --as-r10: #fdf7ee;
}

/* Ten entries do not fit on one line, so they are laid out five to a row: equal columns
   mean the flags, the names and the counts of the second row line up under the first. */
.asean-site .as-top-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.asean-site .as-top-label { white-space: nowrap; }

/* The medalists page stacks two of these chips ("Top 10 golds" over "Top 10 individual
   golds"). Their labels differ in width, so without a common minimum the two grids start
   at different x positions and the rankings no longer line up column by column. The
   longer label is 138px, so the shorter one is padded out to match it. */
.asean-site .as-stats-players .as-top-label { min-width: 142px; }

/* Holding the label at the width of the longer one costs the grid ~60px, and the widest
   entry (Nguyen Thi Mai Hung) needs every pixel of a cell, so the pill is tightened the
   same way the tally's ten-column grid is. */
.asean-site .as-stats-players .as-top-item { padding-right: .3rem; }

.asean-site .as-stats-players .as-flag { margin-right: .28rem; }

.asean-site .as-stats-players .as-top-item strong { padding-left: .25rem; }

/* Player names need roughly 180px each; below the full-width layout five of them no
   longer fit, so the rows lose columns instead of losing the ends of the names. */
@media (max-width: 1200px) {
    .asean-site .as-stats-players .as-top-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .asean-site .as-stats-players .as-top-label { min-width: 0; }
    .asean-site .as-stats-players .as-top-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
    .asean-site .as-stats-players .as-top-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The tally lists federation codes, which are short enough to keep all ten on one line.
   A cell is only ~98px there, and the widest entry (VIE 1,556) needed every pixel, so the
   padding and the space after the flag are tightened inside this grid only. */
.asean-site .as-top-grid.cols-10 {
    grid-template-columns: repeat(10, minmax(0, 1fr));
}

.asean-site .as-top-grid.cols-10 .as-top-item {
    padding-right: .3rem;
}

.asean-site .as-top-grid.cols-10 .as-flag {
    margin-right: .25rem;
}

/* Below the full-width layout ten columns would start clipping, so fall back to five. */
@media (max-width: 1200px) {
    .asean-site .as-top-grid.cols-10 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Inside a grid cell the count is pushed to the right edge, so the numbers form their
   own column instead of ending wherever the name happens to stop. */
.asean-site .as-top-grid .as-top-item {
    min-width: 0;
    overflow: hidden;
}

.asean-site .as-top-grid .as-top-item strong {
    margin-left: auto;
    padding-left: .35rem;
}

.asean-site .as-top-item.r1 { background: var(--as-r1); }
.asean-site .as-top-item.r2 { background: var(--as-r2); }
.asean-site .as-top-item.r3 { background: var(--as-r3); }
.asean-site .as-top-item.r4 { background: var(--as-r4); }
.asean-site .as-top-item.r5 { background: var(--as-r5); }
.asean-site .as-top-item.r6 { background: var(--as-r6); }
.asean-site .as-top-item.r7 { background: var(--as-r7); }
.asean-site .as-top-item.r8 { background: var(--as-r8); }
.asean-site .as-top-item.r9 { background: var(--as-r9); }
.asean-site .as-top-item.r10 { background: var(--as-r10); }

/* Gold ramp - the tally's five best federations. */
.asean-site .as-stat.tint-gold {
    background: #fffaef;
    border-color: #e6c780;
    --as-r1: #f0cd83;
    --as-r2: #f2d28f;
    --as-r3: #f3d79b;
    --as-r4: #f5dca7;
    --as-r5: #f6e1b3;
    --as-r6: #f8e6c0;
    --as-r7: #f9ebcc;
    --as-r8: #fbf0d8;
    --as-r9: #fcf5e4;
    --as-r10: #fefaf0;
}

/* Violet ramp - the medalists' five most decorated players. */
.asean-site .as-stat.tint-violet {
    background: #f6f2fc;
    border-color: #cdb8e6;
    --as-r1: #cbb2e8;
    --as-r2: #d0b9ea;
    --as-r3: #d5c1ed;
    --as-r4: #dac8ef;
    --as-r5: #dfd0f1;
    --as-r6: #e4d7f4;
    --as-r7: #e9dff6;
    --as-r8: #eee6f8;
    --as-r9: #f3eefb;
    --as-r10: #f8f5fd;
}

/* On the medalists page each entry is a button that drives the filter row below, so it
   has to shed the browser's button chrome and keep the pill it was as a span. */
.asean-site button.as-top-item {
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.asean-site button.as-top-item:hover,
.asean-site button.as-top-item:focus-visible {
    filter: brightness(.94);
    outline: 0;
}

/* The entry whose filters are currently applied. A ring rather than another colour, so
   it still reads as its place in the ranking. */
.asean-site button.as-top-item.is-on {
    box-shadow: 0 0 0 2px #1f7a4d;
}

/* Cyan ramp - the medalists' individual-only ranking. It sits right under the violet
   row, so the two lists must not be mistaken for one another at a glance. */
.asean-site .as-stat.tint-cyan {
    background: #eef8fb;
    border-color: #a9d5e4;
    --as-r1: #a3d3e6;
    --as-r2: #acd8e9;
    --as-r3: #b6dceb;
    --as-r4: #bfe1ee;
    --as-r5: #c8e6f0;
    --as-r6: #d2ebf3;
    --as-r7: #dbeff5;
    --as-r8: #e4f4f8;
    --as-r9: #eef8fa;
    --as-r10: #f5fbfd;
}

/* Public controls (clear filters + page size) sit at the right end of the chip row */
.asean-site .as-tools {
    margin-left: auto;
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: .9rem;
}

@media (max-width: 900px) {
    .asean-site .as-tools { margin-left: 0; }
}
.asean-site .as-stat.gold   { background: #fff8e1; border-color: #f0c040; }
.asean-site .as-stat.silver { background: #f4f6f8; border-color: #b9c2cb; }
.asean-site .as-stat.bronze { background: #fdf1e7; border-color: #d79a67; }

/* -- Tables ----------------------------------------------------------- */
.asean-site .as-tbl {
    width: 100%;
    border-collapse: collapse;
}

/* Percent widths from the <colgroup> only bind when the layout is fixed. */
.asean-site .as-tbl.as-fixed { table-layout: fixed; }

.asean-site .as-tbl.as-fixed td,
.asean-site .as-tbl.as-fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
}

.asean-site .as-tbl th {
    background: var(--as-blue);
    color: #fff;
    padding: .35rem .4rem;
    text-align: left;
    white-space: nowrap;
    user-select: none;
    vertical-align: middle;
}

.asean-site .as-tbl thead tr.as-filter th {
    background: #eaf2fb;
    padding: .2rem .25rem;
}

.asean-site .as-tbl td {
    padding: .28rem .4rem;
    border-bottom: 1px solid #eceff2;
    vertical-align: middle;
}

.asean-site .as-tbl tbody tr:nth-child(even) { background: #fafbfc; }
.asean-site .as-tbl tbody tr:hover { background: #f0f6fd; }
.asean-site .as-tbl th.sortable { cursor: pointer; }
.asean-site .as-tbl th.sortable:hover { background: #0069bd; }
.asean-site .as-tbl .as-num { text-align: right; font-variant-numeric: tabular-nums; }
.asean-site .as-tbl .as-mid { text-align: center; }

.asean-site .as-tbl input.form-control,
.asean-site .as-tbl select.form-select {
    font-size: .82rem;
    padding: .1rem .3rem;
    height: 26px;
}

/* Medals */
/* Every badge is the same width and its word sits in the middle, so a column of medals
   reads as one straight edge instead of a ragged one. The width is set by the longest
   label in use, "Bronze+". */
.asean-site .as-medal {
    display: inline-block;
    min-width: 4.4rem;
    text-align: center;
    border-radius: 3px;
    padding: 0 .4rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The cell a badge sits in: centred, so the column of badges has the same margin on both
   sides whatever the table around it does. */
.asean-site td.as-medal-cell { text-align: center; }

/* A cell that takes you somewhere. No colour of its own: it wears the template's link
   colour, the same as the FIDE ID links beside it, so a reader recognises it as a link
   without having to learn a new convention. */
.asean-site a.as-xlink:hover { text-decoration: underline; }

/* The time controls of an edition, ticked on the "add edition" form. */
.asean-site .as-fmt-row {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1.1rem;
    padding-top: .45rem;
}

.asean-site .as-fmt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-weight: 500;
    font-size: .95rem;
    white-space: nowrap;
}

.asean-site .as-fmt input { margin: 0; }

/* The age group that came with the medal ("(WS50)"), kept out of the badge itself and
   centred underneath it. */
.asean-site .as-medal-note {
    display: block;
    font-size: .75em;
    line-height: 1.1;
    text-align: center;
    color: #5a6570;
    white-space: nowrap;
}

.asean-site .as-medal.gold   { background: #ffd94a; color: #4a3600; }
.asean-site .as-medal.silver { background: #d7dee4; color: #33404a; }
.asean-site .as-medal.bronze { background: #e3a978; color: #4a2a10; }

/* -- Pager -------------------------------------------------------------
   Bootstrap pagination, same shape as view=players in com_fideplayers. */
.asean-site .as-pager {
    display: flex;
    gap: .6rem;
    align-items: center;
    margin-top: .6rem;
    flex-wrap: wrap;
}

.asean-site .as-pager .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.asean-site .as-pager ul.pagination li.page-item a.page-link {
    /* The site template turns pagination links into fixed-size circles, which cuts off
       anything wider than two characters - force a pill that grows with its label. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    height: auto !important;
    min-width: 32px;
    min-height: 30px;
    padding: 0 .6rem !important;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    background: #fff;
    color: var(--as-blue);
    text-decoration: none;
    font-size: .88rem;
    line-height: 1;
}

.asean-site .as-pager .page-item .page-link:hover { background: #f0f6fd; }

.asean-site .as-pager .page-item.active .page-link {
    background: var(--as-blue);
    border-color: var(--as-blue);
    color: #fff;
    font-weight: 700;
}

.asean-site .as-pager .page-item.disabled .page-link {
    color: #9aa3ab;
    background: #f5f6f7;
    pointer-events: none;
}

/* -- Modal ------------------------------------------------------------ */
.asean-site .as-modal-bd {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 1050;
    display: none;
}

.asean-site .as-modal {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(720px, 95vw);
    background: #fff;
    border-radius: 8px;
    z-index: 1051;
    display: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
    max-height: 82vh;
    overflow: auto;
}

.asean-site .as-modal .as-m-head {
    background: var(--as-blue);
    color: #fff;
    padding: .55rem .9rem;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    border-radius: 8px 8px 0 0;
}

.asean-site .as-modal .as-m-head button {
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.1em;
    cursor: pointer;
}

.asean-site .as-modal .as-m-body { padding: .8rem .9rem; }

.asean-site .as-modal .as-m-foot {
    padding: .6rem .9rem;
    border-top: 1px solid var(--as-border);
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
}

.asean-site .as-m-row {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

/* Form controls inside a popup: one height for every box and button, the way the popups of
   com_chess_xqbase are built. 30px keeps a four-field row on one line. */
.asean-site .as-modal .as-m-row .form-control,
.asean-site .as-modal .as-m-row .form-select {
    /* A textarea sizes itself from its cols attribute unless told otherwise, which is what
       kept the arbiter box at 20 characters while its column was much wider. */
    width: 100%;
    height: 30px;
    padding: .1rem .45rem;
    font-size: .92rem;
}

.asean-site .as-modal .as-m-row textarea.form-control {
    /* The template caps every textarea at max-width: 240px, which is what kept this box at
       20 characters however wide its column was. */
    width: 100% !important;
    max-width: none !important;
    height: 30px;
    min-height: 30px;
    line-height: 1.35;
    resize: vertical;
}

/* Two arbiters is the normal case (one for standard, one for rapid and blitz), so the box
   shows two lines from the start instead of hiding the second one. */
.asean-site .as-modal .as-m-row textarea.as-arb {
    height: 48px;
    min-height: 48px;
    padding-top: .2rem;
}

/* The arbiter line and four full format names need the room (the inline width on the
   element itself is what actually applies - this rule is the fallback). */
.asean-site .as-modal#m-evedit { width: min(980px, 96vw); }

.asean-site .as-modal .as-m-foot .btn {
    height: 30px;
    padding: 0 .9rem;
    display: inline-flex;
    align-items: center;
}

/* Federation suggestions: fixed, so the modal's own scrolling cannot clip the list. */
.asean-site .as-ac-wrap { position: relative; }

/* The list is moved onto <body> to escape the modal's transform, so it needs a rule that
   does not depend on sitting inside .asean-site any more. */
.asean-site .as-ac-dd,
body > .as-ac-dd {
    display: none;
    position: fixed;
    z-index: 1060;
    max-height: 260px;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--as-border);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.asean-site .as-ac-item,
body > .as-ac-dd .as-ac-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .5rem;
    cursor: pointer;
    font-size: .9rem;
    white-space: nowrap;
}

.asean-site .as-ac-item:hover,
body > .as-ac-dd .as-ac-item:hover { background: #eaf3fb; }

/* The fields the program fills in itself, folded away until someone needs them. */
.asean-site .as-auto-row > summary {
    cursor: pointer;
    font-size: .85rem;
    color: #56616c;
    margin-bottom: .5rem;
}

.asean-site .as-m-row label {
    display: block;
    font-size: .82rem;
    color: #56616c;
    margin-bottom: .1rem;
}

/* -- Introduction article --------------------------------------------- */
.asean-site .as-article { font-size: 1rem; line-height: 1.6; }
.asean-site .as-article img { max-width: 100%; height: auto; }
.asean-site .as-article h2 { margin-top: 1.2rem; }
.asean-site .as-article table { max-width: 100%; }
.asean-site .as-article > table,
.asean-site .as-article div[style*="overflow"] { overflow-x: auto; }

/* Status messages never sit flush against the text before them. */
.asean-site #as-status { margin-left: .6rem; }

/* Round federation flags from FIDE's own set. They are square SVGs, so one size covers
   both axes; the sprite rules below only still apply to codes with no file yet. */
/* Size and picture both come from CSS: the markup only carries .as-flag plus the code
   class (.as-f-vie), whose rule lives in the generated flags.css. Two reasons it is not
   an <img>: the template styles every img with max-width:100%, which squeezed the flag
   sideways in a narrow cell (20px in the widest Participants table, 0px in the cross
   table), and a src attribute would have to be built from Uri::root() in both PHP and
   JS. One box here now governs the whole component - the tally keeps .as-flag-lg. */
.asean-site .as-flag {
    width: var(--as-flag-size, 22px);
    height: var(--as-flag-size, 22px);
    min-width: var(--as-flag-size, 22px);
    max-width: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    vertical-align: -.35em;
    /* A full space before the code that follows ("[flag] VIE"), not just a hairline. */
    margin-right: .4rem;
    flex: none;
}

/* Headings (the per-edition rows you click to open) carry a larger flag; the list that
   unfolds underneath keeps the standard size. */
.asean-site .as-acc > summary .as-flag {
    --as-flag-size: 30px;
    vertical-align: -.5em;
    margin-right: .4rem;
}

/* A background image is dropped by default when printing, unlike the old <img>. */
@media print {
    .asean-site .as-flag {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* A cell that holds nothing but a flag drops the trailing space. It has to be marked
   with a class: :only-child counts elements only, so it also matched the flag in a
   "[flag] VIE" cell - the code is a text node - and glued the code to the flag. */
.asean-site td.as-flagcell .as-flag {
    margin-right: 0;
}

/* The template sprite in use (flag30F.png, 520x445) lays its cells out on a 35x25 grid
   but paints each flag only 30x20 in the top-left corner; the rest of the cell is
   transparent. Stretching the box to 35x25 made the background wrap around for the last
   column (HKG, SIN, ISR, POL, AUT...), pulling column 1 back in - the red stripe beside
   the Hong Kong flag was Gibraltar bleeding through. Keep the box at the painted size and
   never let the sprite repeat. The older flag30P.png did paint a full 35x25 cell. */
.asean-site [class^="tn_"],
.asean-site [class*=" tn_"] {
    width: 30px;
    height: 20px;
    background-repeat: no-repeat;
}

/* A cell holding nothing but a flag: the fixed layout clips its overflow, so keep the
   padding out of the way and let the 30px sprite show even on a narrow screen. */
.asean-site .as-tbl.as-fixed td.as-flagcell {
    overflow: visible;
    padding-left: .25rem;
    padding-right: .12rem;
}

/* -- Cross table pickers ---------------------------------------------- */
.asean-site .as-picker {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.asean-site .as-picker .as-select {
    min-height: var(--as-pill-h);
    padding: 0 2rem 0 .8rem;
    border: 1px solid var(--as-border);
    border-radius: 999px;
    background: #fff;
    font-size: .9rem;
    cursor: pointer;
    max-width: 100%;
}

/* Fixed widths: a select otherwise grows to fit its longest option and pushes the logo
   onto a second line. Both lists are the same width. */
.asean-site .as-picker label .as-select { width: 300px; }
.asean-site .as-picker .as-picker-note { margin-left: .6rem; }

/* Logo of the edition: fixed height, any width - long, square or round all fit. */
.asean-site .as-logo-box {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* The logo is taller than the row it sits in: the negative margin keeps the row at its
   own height while the picture spills over the empty space beside the headline below.
   It cannot spill upwards instead, because the export button occupies that corner. */
.asean-site .as-logo {
    height: 104px;
    margin-top: -10px;
    margin-bottom: -40px;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

/* Keep the headline clear of the overhanging logo. */
.asean-site .as-rank-head.as-with-logo { padding-right: 280px; }

/* Nothing chosen yet: a dashed placeholder of the same height opens the browser. */
.asean-site .as-logo-empty {
    height: 54px;
    padding: 0 1rem;
    border: 1px dashed var(--as-border);
    border-radius: 10px;
    background: #fff;
    color: #9aa3ab;
    font-size: .85rem;
    cursor: pointer;
}

.asean-site .as-logo-empty:hover { color: #1f7a4d; border-color: #1f7a4d; }

/* The picture itself opens the browser; the cross appears only under the pointer. */
.asean-site .as-logo-edit { position: relative; }
.asean-site .as-logo-edit .as-logo { cursor: pointer; }

.asean-site .as-logo-x {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 3;
    display: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #b3261e;
    color: #fff;
    font-size: .75rem;
    line-height: 22px;
    cursor: pointer;
}

.asean-site .as-logo-edit:hover .as-logo-x { display: block; }

/* -- Image browser (logo picker) -------------------------------------- */
.asean-site .as-browse-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}

.asean-site .as-crumbs { font-size: .9rem; color: #6b7480; }

.asean-site .as-crumb {
    padding: 0;
    border: 0;
    background: none;
    color: #1f3f8f;
    font-size: .9rem;
    cursor: pointer;
}

.asean-site .as-crumb:hover { text-decoration: underline; }
.asean-site .as-browse-find { width: 180px; margin-left: auto; }

.asean-site .as-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .5rem;
    max-height: 58vh;
    overflow-y: auto;
    padding: .2rem;
}

.asean-site .as-browse-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    padding: .4rem;
    border: 1px solid var(--as-border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

.asean-site .as-browse-item:hover { border-color: #1f7a4d; box-shadow: 0 0 0 2px rgba(31, 122, 77, .15); }
.asean-site .as-browse-item img { width: 100%; height: 70px; object-fit: contain; }
.asean-site .as-dir-icon { font-size: 2.6rem; line-height: 70px; }

.asean-site .as-browse-name {
    width: 100%;
    font-size: .72rem;
    color: #4a5560;
    text-align: center;
    word-break: break-all;
}

.asean-site .as-browse-more {
    grid-column: 1 / -1;
    padding: .5rem;
    border: 1px dashed var(--as-border);
    border-radius: 8px;
    background: #fff;
    color: #1f3f8f;
    font-size: .85rem;
    cursor: pointer;
}

.asean-site .as-browse-wait {
    grid-column: 1 / -1;
    padding: 1.4rem;
    color: #6b7480;
    text-align: center;
}

@media (max-width: 991px) {
    /* No room to overhang once the row wraps. */
    .asean-site .as-logo { height: 54px; margin-top: 0; margin-bottom: 0; }
    .asean-site .as-rank-head.as-with-logo { padding-right: 0; }
}

@media (max-width: 780px) {
    .asean-site .as-picker label:nth-of-type(1) .as-select,
    .asean-site .as-picker label:nth-of-type(2) .as-select { width: 100%; }
    .asean-site .as-picker .as-select { min-width: 0; width: 100%; }
    .asean-site .as-picker .as-picker-note { margin-left: 0; }
}

/* -- Final ranking table (view=tables) -------------------------------- */
.asean-site .as-rank-head {
    margin-bottom: .5rem;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.asean-site .as-rank-tbl td { white-space: nowrap; }

/* The round columns are the ones that multiply, so they get the tightest treatment:
   almost no side padding and slightly smaller digits. Every one of them is held to the
   width of five characters - '130w1' is the longest a Swiss cell gets - so a round robin,
   whose cells are a single '1' or '*', spreads out the same way instead of collapsing
   into a clump on the right. */
.asean-site .as-rank-tbl .as-rd {
    padding-left: 2px;
    padding-right: 2px;
    font-size: .8rem;
    letter-spacing: -.2px;
    font-variant-numeric: tabular-nums;
    width: 5ch;
    min-width: 5ch;
}

/* Fixed width, so spare space goes to the name column instead of stretching one round. */
.asean-site .as-rank-tbl th.as-rd {
    width: 5ch;
    min-width: 5ch;
    padding-left: 3px;
    padding-right: 3px;
}

/* A row the records treat as a special case: small mark after the name, story in the
   title attribute. */
.asean-site .as-rank-tbl .as-note {
    margin-left: .28em;
    color: var(--as-blue, #2d6cb5);
    font-size: .9em;
    cursor: help;
}

/* The diagonal of a round robin: the cell where a player meets themselves. */
.asean-site .as-rank-tbl td.as-rd-self {
    background: #dfe6ee;
    color: #7a8798;
    font-weight: 700;
}

.asean-site .as-rank-tbl tr.as-has-medal td.as-rd-self { background: #e4e2d5; }

.asean-site .as-rank-tbl tr.as-team-row td.as-rd-self { background: #cfe0ea; }

/* The name column takes the slack so the round columns stay put. A table cell ignores
   max-width, so the cap lives on an inline-block inside it: a long name wraps onto a
   second line instead of pushing the table wider, and a narrow screen cannot squeeze the
   column down to a couple of letters either. */
.asean-site .as-rank-tbl td.as-name {
    width: 100%;
    white-space: normal;
    line-height: 1.25;
}

.asean-site .as-rank-tbl td.as-name > span {
    display: inline-block;
    max-width: 26ch;
    min-width: 11ch;
    overflow-wrap: anywhere;
}
.asean-site .as-rank-tbl tr.as-block-head td,
.asean-site .as-tbl tr.as-block-head td {
    background: #1f7a4d;
    color: #fff;
    font-weight: 700;
    letter-spacing: .03em;
}

.asean-site .as-rank-tbl tr.as-has-medal { background: #fffdf3; }

/* Team blocks: their own blue header, and a tinted bold row where each team starts. */
.asean-site .as-rank-tbl tr.as-team-head th {
    background: var(--as-blue);
    color: #fff;
    padding: .28rem .4rem;
    font-size: .86rem;
    text-align: left;
}

.asean-site .as-rank-tbl tr.as-team-head th.as-mid { text-align: center; }

.asean-site .as-rank-tbl tr.as-team-row,
.asean-site .as-rank-tbl tr.as-team-row.as-has-medal { background: #e8f4fb; }

.asean-site .as-rank-tbl tr.as-team-row td { font-weight: 700; }
.asean-site .as-rank-tbl tr.as-team-row:hover { background: #dbecf7; }

/* -- Medals tally: many age-group columns, so everything is tightened up
   until the table fits the page without a horizontal scrollbar. ------- */
.asean-site .as-tally-tbl { font-size: .78rem; table-layout: auto; }
.asean-site .as-tally-tbl th { padding: .25rem .2rem; text-align: center; }
.asean-site .as-tally-tbl td { padding: .18rem .2rem; }
.asean-site .as-tally-tbl .as-medal { padding: 0 .12rem; font-size: .95em; letter-spacing: -.02em; }
.asean-site .as-tally-tbl .as-country { text-align: center; line-height: 1.25; }
.asean-site .as-tally-tbl .as-country strong { display: block; }

/* Narrow screens: shrink the tally further before falling back to scrolling. */
@media (max-width: 1280px) {
    .asean-site .as-tally-tbl { font-size: .72rem; }
    .asean-site .as-tally-tbl th { padding: .2rem .12rem; }
    .asean-site .as-tally-tbl td { padding: .14rem .12rem; }
    .asean-site .as-tally-tbl .as-flag-lg { --as-flag-lg-size: 46px; width: 46px; }
}

/* Round, and as wide as the rectangular GIF it replaces, so the column keeps its size.
   Only the GIF fallback still needs the hairline border - a circle does not. */
.asean-site .as-flag-lg {
    width: var(--as-flag-lg-size, 60px);
    height: var(--as-flag-lg-size, 60px);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin: 0 auto .1rem;
}

.asean-site img.as-flag-gif {
    height: auto;
    border: 1px solid #dfe3e7;
}

@media print {
    .asean-site .as-flag-lg {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

/* -- Per-edition accordion (tally / numbers) -------------------------- */
.asean-site .as-acc { border: 1px solid var(--as-border); border-radius: 6px; margin-bottom: .4rem; background: #fff; }
.asean-site .as-acc > summary {
    padding: .5rem .8rem;
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.asean-site .as-acc > summary::-webkit-details-marker { display: none; }
.asean-site .as-acc > summary::before { content: '▸'; color: var(--as-blue); }
.asean-site .as-acc[open] > summary::before { content: '▾'; }
.asean-site .as-acc[open] > summary { border-bottom: 1px solid var(--as-border); background: #f7fafd; }
.asean-site .as-acc .as-acc-body { padding: .6rem; overflow-x: auto; }

.asean-site .as-scroll { overflow-x: auto; }
.asean-site .text-muted-sm { color: #7a848d; font-size: .85em; }

/* --- view=import ------------------------------------------------------------------ */

/* Where the workbooks are dropped: a dashed box, tinted while a file is over it. */
.asean-site .as-drop {
    border: 2px dashed var(--as-border);
    border-radius: 8px;
    padding: 1.1rem;
    text-align: center;
    color: #7a848d;
    cursor: pointer;
    margin-bottom: .6rem;
    background: #fbfdff;
}

.asean-site .as-drop:hover,
.asean-site .as-drop.on { border-color: var(--as-blue); background: #eef4fd; color: var(--as-blue); }

.asean-site .as-files select.form-select { height: 30px; padding: 0 .4rem; font-size: .9em; }

/* The figure that would be replaced is the one to notice, so it gets a warning tint. */
.asean-site .as-stat.tint-warn { background: #fdf1ee; border-color: #e8b0a2; }
.asean-site .as-stat .as-stat-note { color: #7a848d; font-size: .8em; font-style: normal; margin-left: .35rem; }

.asean-site .as-warn {
    margin: 0 0 .6rem;
    padding: .5rem .5rem .5rem 1.6rem;
    background: #fffaf2;
    border: 1px solid #e8c69d;
    border-radius: 6px;
    font-size: .88em;
}

.asean-site .im-bad { color: #b42318; font-weight: 600; }
.asean-site .im-ok  { color: #17795e; font-weight: 600; }

/* Tally and participants sit side by side while the screen is wide enough for both. */
.asean-site .as-two { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .8rem; }
.asean-site .as-two > div { flex: 1 1 320px; min-width: 0; }
.asean-site .as-sub { font-size: 1rem; font-weight: 600; margin: 0 0 .35rem; }