/* The section «Аукцион» (/auction/) and its block on the home page: classes ah-* only, the site's tokens (site.css :root) for
   surfaces, lines and text, so both styles of the site (the art behind the page is the only thing that changes) look alike.
   The page intro is the site's own (.page-head, .kpis); the data author's original stylesheet stays in
   auction/source-private/module-as-delivered/auction.css.  Compact since 18.10.2026 (owner): one line per profession in the
   budget with the marks on the same line, dense price rows and filters without visible labels (each control keeps its name for
   screen readers), phone cards of two short rows; the text never goes below the site's table size (.8125rem). */
.ah-page,.ah-widget{color:var(--text);min-width:0;max-width:100%}
.ah-page{display:grid;gap:22px;min-width:0}
.ah-market,.ah-prof-detail,.ah-table-wrap{min-width:0}
.ah-table-wrap{position:relative;overflow-x:auto;max-width:100%;overscroll-behavior-x:contain}
.ah-market,.ah-widget{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;box-shadow:0 8px 30px #0003}
.ah-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;margin-bottom:10px}
.ah-section-head h2{margin:0;font-size:1.3rem}
.ah-section-head .eyebrow{margin:0 0 4px}
.ah-section-head .ah-caption{margin:3px 0 0}
.ah-head-text{min-width:0}
.ah-head-tools{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.ah-head-tools .btn{flex:none;min-height:36px}
.ah-band{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-3)}
.ah-band select,.ah-band .dd{width:120px}
.ah-lead{color:var(--text-2);font-size:.9rem;line-height:1.5;margin:0 0 10px}
.ah-muted{color:var(--text-3)}
.ah-mode-note{font-size:.86rem;color:var(--text-2);border-left:3px solid var(--accent-dim);background:#e0b25b0d;border-radius:0 6px 6px 0;margin:0 0 12px;padding:7px 12px;line-height:1.5}
.ah-factions{display:flex;gap:6px}
.ah-faction{display:flex;align-items:center;gap:6px;min-height:36px;padding:4px 11px;font:inherit;font-size:.875rem;border:1px solid var(--line-2);border-radius:6px;background:var(--panel-2);color:var(--text-2);cursor:pointer;white-space:nowrap}
.ah-faction span{font-size:.8125rem;color:var(--text-3)}
.ah-faction img{object-fit:contain}
.ah-faction[aria-pressed=true]{background:#182435;border-color:#526c97;color:#d6e6ff}
.ah-faction[data-faction=horde][aria-pressed=true]{background:#321b1d;border-color:#985250;color:#f7c9c0}
.ah-caption{font-size:.8125rem;line-height:1.55;color:var(--text-3);margin:10px 0 0}
.ah-filters{display:grid;grid-template-columns:minmax(220px,1fr) minmax(150px,200px) minmax(150px,200px) auto;gap:8px;align-items:center}
.ah-filters label,.ah-prof-detail>label{display:grid;gap:5px;font-size:.8125rem;color:var(--text-3);min-width:0}
.ah-filters input,.ah-filters select,.ah-widget select{box-sizing:border-box;width:100%;max-width:100%;height:36px;border:1px solid var(--line-2);border-radius:6px;background:var(--bg);color:var(--text);font:inherit;font-size:.9rem;padding:5px 10px}
.ah-filters .btn{min-height:36px;justify-content:center}
.ah-filters input::placeholder{color:var(--text-3);opacity:.8}
.ah-filters input:focus-visible,.ah-filters select:focus-visible,.ah-widget select:focus-visible{border-color:var(--teal)}
/* the site's own dropdown (ui.js .dd-btn) stands in for every select: the same height and text size as the search field */
.ah-filters .dd,.ah-band .dd{display:block}
.ah-filters .dd-btn,.ah-widget .dd-btn{min-height:36px;padding:5px 10px;font-size:.9rem}
.ah-result-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;margin:8px 0 4px}
.ah-result-bar p{margin:0;color:var(--text-3);font-size:.8125rem}
.ah-text-btn,.ah-detail-btn{font:inherit;color:var(--accent-2);border:0;background:transparent;font-size:.8125rem;cursor:pointer;padding:6px 0}
.ah-text-btn:disabled,.ah-detail-btn:disabled{opacity:.45;cursor:default}
.ah-market-table,.ah-prof-table{width:100%;border-collapse:collapse;text-align:left;font-size:.9rem}
.ah-market-table thead,.ah-prof-table thead{border-bottom:1px solid var(--accent-dim)}
.ah-market-table th,.ah-prof-table thead th{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2);font-weight:600;padding:7px 10px;background:var(--panel-2);white-space:nowrap}
.ah-market-table td,.ah-prof-table td,.ah-prof-table tbody th{padding:5px 10px;border-bottom:1px solid #ffffff0d;line-height:1.4}
.ah-market-table td:first-child{width:46%}
.ah-market-table td:last-child{text-align:right}
.ah-market-table td:not(:first-child){white-space:nowrap}
.ah-market-table tr:last-child td,.ah-prof-table tr:last-child td,.ah-prof-table tr:last-child th{border-bottom:0}
.ah-item{display:flex;align-items:center;gap:9px;text-decoration:none;line-height:1.3;min-width:230px}
.ah-item img{flex-shrink:0;border:1px solid #7e6b45;border-radius:4px;box-shadow:0 1px 4px #0009}
.ah-money{white-space:nowrap;font-variant-numeric:tabular-nums}
.ah-money>span{white-space:nowrap}
.ah-money small{font-size:.72em;opacity:.85}
.ah-gold{color:#efd08a}.ah-silver{color:#d6dde2}.ah-copper{color:#dba38a}
.ah-pagination{display:flex;justify-content:center;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
.ah-pagination .btn{min-height:34px}
.ah-pagination span{font-size:.86rem;color:var(--text-3)}
.ah-empty{padding:24px 16px;text-align:center;color:var(--text-3)}
.ah-empty h3{color:var(--text-2);margin-bottom:6px}
.ah-load-status:empty{display:none}
.ah-load-status{padding:10px 0;font-size:.86rem;color:#e9c08c}
/* the profession budget: one line per profession — the name, the two sums with their marks, the skill reached */
.ah-prof-table thead th img{vertical-align:-3px;object-fit:contain;margin-right:3px}
.ah-prof-table thead th:first-child{width:30%}
.ah-prof-table thead th:last-child,.ah-prof-table td.ah-reach{text-align:right}
.ah-prof-table tbody th{font-weight:400}
.ah-prof-table td{white-space:nowrap}
.ah-prof-link{display:flex;align-items:center;gap:9px;font:inherit;color:var(--text);background:transparent;border:0;text-decoration:none;cursor:pointer;text-align:left;padding:0;line-height:1.3}
.ah-prof-link img{border:1px solid #665231;border-radius:4px;flex:none}
.ah-prof-table .ah-money{font-size:.875rem}
.ah-marks{display:inline-flex;align-items:center;gap:5px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.ah-tag{display:inline-block;color:#c5d5da;font-size:.6875rem;line-height:1.35;padding:0 4px;border:1px solid #4a5d66;border-radius:4px;vertical-align:middle;cursor:help}
.ah-miss{font-size:.6875rem;line-height:1.35;color:var(--text-3);cursor:help}
.ah-caption .ah-tag{cursor:default}
.ah-reach{font-size:.8125rem;color:var(--text-2);font-variant-numeric:tabular-nums}
.ah-reach-incomplete{color:var(--accent)}
.ah-prof-detail{padding:14px 16px;margin-top:12px;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg-2);scroll-margin-top:20px}
.ah-prof-detail .ah-section-head{align-items:start;flex-wrap:nowrap}
.ah-prof-detail h3{font-size:1.2rem;margin:0 0 4px}
.ah-prof-detail h4{margin:16px 0 8px}
.ah-prof-detail p{line-height:1.55;font-size:.86rem;margin:0}
.ah-prof-detail .ah-caption{margin-top:8px}
.ah-prof-detail>label{max-width:230px}
.ah-prof-detail .ah-caption-tight{margin-top:4px}
.ah-prof-detail .ah-mode-note{margin:10px 0 0}
.ah-shopping{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px}
.ah-shopping-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #ffffff0d}
.ah-shopping-row .ah-item{min-width:0;font-size:.8125rem}
.ah-shopping-row .ah-item img{width:22px;height:22px}
.ah-shopping-row>span{font-size:.8125rem;color:var(--text-3);white-space:nowrap}
.ah-step-list{margin:0;padding:0;list-style:none;display:grid;gap:4px}
.ah-step-list li{font-size:.86rem;display:flex;gap:12px;line-height:1.45}
.ah-step-list b{min-width:66px;color:var(--accent);font-variant-numeric:tabular-nums}
.ah-step-list small{color:var(--text-3);white-space:nowrap}
.ah-method{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:12px 18px}
.ah-method summary{cursor:pointer;color:var(--accent-2);font-weight:500}
.ah-method div{max-width:900px}
.ah-method p{font-size:.9rem;line-height:1.65;color:var(--text-2);margin-top:10px}
.ah-dialog{box-sizing:border-box;width:min(620px,calc(100% - 28px));max-height:calc(100dvh - 50px);overflow:auto;background:var(--panel);color:var(--text);border:1px solid var(--accent-dim);border-radius:10px;padding:20px;box-shadow:0 20px 100px #000b}
.ah-dialog::backdrop{background:#000a}
.ah-dialog-head{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:14px}
.ah-dialog-head h2{margin:0}
.ah-dialog-head .btn{padding:2px 12px;font-size:1.4rem;line-height:1.2}
.ah-dialog .ah-item{margin-bottom:14px;min-width:0}
.ah-dialog .ah-item img{width:44px;height:44px}
.ah-dialog-table{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ah-dialog-card{padding:12px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:6px}
.ah-dialog .ah-dialog-card h3{font:inherit;font-weight:600;margin:0 0 6px;display:flex;align-items:center;gap:7px}
.ah-dialog-card h3 img{width:22px;height:22px;object-fit:contain}
.ah-dialog-card p{font-size:.8125rem;color:var(--text-3);margin:4px 0}
.ah-dialog-card b{font-size:1.05rem;display:block;font-weight:400;margin:4px 0}
.ah-dialog h3{margin:16px 0 8px}
.ah-history{height:85px;width:100%;border-bottom:1px solid var(--line)}
.ah-history polyline{fill:none;stroke:var(--accent);stroke-width:2}
.ah-dialog .ah-caption{margin:8px 0}
/* the home page: the block sits between the news strip and the groups of sections */
.ah-widget-home{padding:16px 20px}
@media (hover:hover){
  .ah-prof-link:hover{color:var(--accent-2)}
  .ah-text-btn:not(:disabled):hover,.ah-detail-btn:not(:disabled):hover{text-decoration:underline}
  .ah-market-table tbody tr:hover,.ah-prof-table tbody tr:hover{background:#e0b25b0a}
  .ah-item:hover span{text-decoration:underline}
  .ah-faction:not(:disabled):hover{border-color:var(--accent-dim)}
}
@media (max-width:900px){
  .ah-filters{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
  .ah-search{grid-column:1/-1}
  .ah-shopping{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:650px){
  .ah-market,.ah-widget,.ah-widget-home{padding:12px}
  .ah-section-head{gap:8px 12px}
  .ah-section-head h2{font-size:1.2rem}
  /* the range dropdown never shrinks below its longest option («225–300»: it was cut to «1…» at 360 px and to «150…» at 390 px
     on the home page); on a narrow phone the home link shows «Все цены →» (the word «аукциона» stays for screen readers), and
     what still does not fit wraps instead of being cut */
  .ah-head-tools{width:100%;flex-wrap:wrap}
  .ah-band{flex:none}
  .ah-band select,.ah-band .dd{flex:none;width:6.5rem}
  .ah-factions{width:100%}
  .ah-faction{flex:1;justify-content:center;padding:4px 8px;font-size:.84rem}
  /* the filters in two rows: the search with «Сбросить», then the category and the sorting, half and half (the focus order stays
     the markup's: search, category, sorting, «Сбросить») */
  .ah-filters{display:flex;flex-wrap:wrap;gap:8px}
  .ah-search{flex:1 1 60%;order:1}
  .ah-filters .btn{flex:none;padding:6px 10px;order:2}
  .ah-cat,.ah-sort{flex:1 1 40%;order:3}
  .ah-filters input{font-size:16px}   /* 16 px: a phone does not zoom the page in when the field takes the focus */
  .ah-filters .dd-btn,.ah-widget .dd-btn{font-size:.875rem}
  .ah-market-table{font-size:.8125rem}
  .ah-item{min-width:0;gap:8px}
  .ah-pagination{gap:12px}
  .ah-prof-detail{padding:12px}
  .ah-prof-detail .ah-section-head{flex-wrap:wrap}
  .ah-dialog{padding:16px}
  .ah-dialog-table{grid-template-columns:minmax(0,1fr)}
  .ah-method{padding:12px 14px}
  /* the profession budget on a phone: two short lines per profession — the name over the skill reached on the left, the sums of
     the Alliance and the Horde one under the other on the right, each led by its faction's emblem and followed by its marks on the
     same line (the column heads stay for screen readers; the rows keep role=row / rowheader / cell) */
  .ah-prof-table,.ah-prof-table tbody{display:block}
  .ah-prof-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ah-prof-table tbody tr{display:grid;grid-template-columns:minmax(min-content,1fr) minmax(0,62%);align-items:center;gap:2px 8px;padding:6px 0;border-bottom:1px solid #ffffff0d}
  .ah-prof-table tbody tr:last-child{border-bottom:0}
  .ah-prof-table tbody th,.ah-prof-table tbody td{padding:0;border:0;white-space:normal;min-width:0}
  .ah-prof-table tbody th{grid-column:1;grid-row:1}
  .ah-prof-table tbody td.ah-reach{grid-column:1;grid-row:2;text-align:left;padding-left:24px}
  /* a route that reaches its target needs no «300 / 300» on a phone (it stays for screen readers); the name then stands by both sums */
  .ah-prof-table tbody td.ah-reach:not(.ah-reach-incomplete){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ah-prof-table tbody tr:not(:has(td.ah-reach-incomplete)) th{grid-row:1/span 2}
  .ah-prof-table tbody td.ah-sum:nth-of-type(1){grid-column:2;grid-row:1}
  .ah-prof-table tbody td.ah-sum:nth-of-type(2){grid-column:2;grid-row:2}
  .ah-prof-table tbody td.ah-sum::before{content:"";display:inline-block;width:14px;height:14px;margin-right:5px;vertical-align:-2px;background:no-repeat center/contain}
  .ah-prof-table tbody td.ah-sum:nth-of-type(1)::before{background-image:url(media/alliance.png)}
  .ah-prof-table tbody td.ah-sum:nth-of-type(2)::before{background-image:url(media/horde.png)}
  .ah-prof-table .ah-money{font-size:.8125rem}
  .ah-prof-table .ah-marks{margin-left:4px;gap:4px}
  .ah-prof-link{font-size:.8125rem;gap:6px}
  .ah-prof-table .ah-prof-link img{width:18px;height:18px}
  /* the prices on a phone: one card per item in two rows — the item and «Подробнее», then the two prices and the quantity, each
     named by its column head (data-label; the heads stay for screen readers and the rows keep role=row/cell, see
     auction/render.py PRICE_HEAD); nothing goes beyond the panel's edge */
  .ah-market-table,.ah-market-table tbody{display:block}
  .ah-market-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ah-market-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;gap:4px 10px;padding:7px 0;border-bottom:1px solid #ffffff0d}
  .ah-market-table tbody tr:last-child{border-bottom:0}
  .ah-market-table tbody td:nth-child(n){padding:0;border:0;width:auto;white-space:normal;text-align:left;min-width:0}
  .ah-market-table tbody td:nth-child(1){grid-column:1/3;grid-row:1}
  .ah-market-table tbody td:nth-child(5){grid-column:3;grid-row:1;justify-self:end;text-align:right}
  .ah-market-table tbody td:nth-child(2){grid-column:1;grid-row:2;align-self:start}
  .ah-market-table tbody td:nth-child(3){grid-column:2;grid-row:2;align-self:start}
  .ah-market-table tbody td:nth-child(4){grid-column:3;grid-row:2;justify-self:end;text-align:right;align-self:start}
  .ah-market-table tbody td[data-label]::before{content:attr(data-label);content:attr(data-label) / "";display:block;margin-bottom:1px;font-size:.6875rem;line-height:15px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
  .ah-market-table .ah-money{white-space:normal}
  .ah-market-table .ah-detail-btn{min-height:34px;padding:5px 12px;border:1px solid var(--line-2);border-radius:6px;background:var(--panel-2)}
}
@media (max-width:420px){
  .ah-more-word{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
}