/* Shared stylesheet for every GENERATED page (build_pages.py).
   One file rather than a <style> block per page: at a thousand-odd pages the
   same four kilobytes inlined everywhere is four megabytes of tarball and a
   fresh parse on every visit, where a linked file is fetched once and then
   comes out of the browser's cache for the rest of the session.
   The palette is lifted from index.html so a generated page and the landing
   page look like the same site. */

:root{
  --bg:#0d0f12; --panel:#14171c; --panel2:#181c22; --line:#262b33;
  --text:#e8e6e0; --dim:#8b93a1; --gold:#d4a944; --gold2:#e0b25a;
  --green:#6fd06f; --red:#e06a5f; --blue:#5b9bd5;
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);
     font:15px/1.65 "Segoe UI",system-ui,-apple-system,sans-serif;
     -webkit-font-smoothing:antialiased}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--gold2)}
img{max-width:100%}

.wrap{max-width:920px;margin:0 auto;padding:28px 20px 80px}

/* ---- header ---- */
/* flex-start, not center: an open menu is tall, and centring against it drags
   the logo down to the middle of the page. */
.top{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;flex-wrap:wrap}
/* On a phone the menu takes its own full-width row under the brand, so the
   panel is as wide as the thumb reaching for it. */
@media (max-width:820px){
  .top{align-items:center}
  .menu{order:3;flex:1 1 100%}
  .top .spacer{display:none}
  .lang{order:2;margin-left:auto}
}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold);font-weight:700;
       letter-spacing:2.5px;font-size:17px;text-decoration:none}
.brand svg{width:24px;height:24px;flex:none}
.spacer{flex:1}
/* A menu, not a wall of links.
   Nine of them in a row fit a desktop and nothing else: at 375px they wrapped
   into three rows and ate 79 pixels before the content began. Built on
   <details> so it opens with no javascript at all, keeps the keyboard
   behaviour the browser already gives a disclosure, and still opens if a
   script elsewhere throws. Above the breakpoint the summary disappears and
   the same markup lays out as the inline row it always was. */
.menu{min-width:0}
.menu > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  padding:7px 13px;border:1px solid var(--line);border-radius:9px;
  color:var(--text);font-size:13.5px;user-select:none;
}
.menu > summary::-webkit-details-marker{display:none}
.menu > summary:hover{border-color:var(--gold);color:var(--gold2)}
.menu > summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.burger{width:15px;height:11px;position:relative;flex:none}
.burger::before,.burger::after,.burger{
  border-top:2px solid currentColor;box-sizing:border-box}
.burger::before,.burger::after{
  content:"";position:absolute;left:0;right:0;height:0}
.burger::before{top:3px}
.burger::after{top:8px}
.menu[open] > summary{border-color:var(--gold);color:var(--gold2)}

.menu > nav{display:flex;flex-direction:column;gap:1px;margin-top:9px;
            border:1px solid var(--line);border-radius:11px;overflow:hidden;
            background:var(--panel)}
/* Closed is closed, spelled out.
   Setting `display` on the child overrides the browser's own rule for a closed
   <details>; without this the menu would sit permanently open in every engine
   that still relies on that rule. */
.menu:not([open]) > nav{display:none}
.menu > nav a{color:var(--text);text-decoration:none;padding:11px 14px;
              font-size:14.5px;border-bottom:1px solid var(--line)}
.menu > nav a:last-child{border-bottom:0}
.menu > nav a:hover{background:var(--panel2);color:var(--gold2)}
/* Where you already are, said once and honestly. */
.menu > nav a[aria-current]{color:var(--gold);background:var(--panel2);
                            box-shadow:inset 3px 0 0 var(--gold)}

@media (min-width:821px){
  .menu > summary{display:none}
  /* The newer engines hide a closed <details> through ::details-content rather
     than through a rule on the children, and that slot is skipped for layout:
     the row rendered, but the <details> around it measured 0×0 and nine links
     hung over the page from a zero-width box. Telling the slot to show and to
     stop being a box of its own puts the row back in the header. Engines that
     do not know the pseudo-element ignore the rule and were never broken. */
  .menu::details-content{content-visibility:visible;display:contents}
  .menu:not([open]) > nav,
  .menu > nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:6px 14px;
              margin-top:0;border:0;border-radius:0;background:none;overflow:visible}
  .menu > nav a{color:var(--dim);padding:0;font-size:13.5px;border-bottom:0}
  .menu > nav a:hover{color:var(--text);background:none}
  .menu > nav a[aria-current]{color:var(--gold);background:none;box-shadow:none}
}
.lang a{border:1px solid var(--line);border-radius:9px;padding:3px 10px;
        font-size:11.5px;color:var(--dim);margin-left:4px;text-decoration:none}
.lang a.on{border-color:var(--gold);color:var(--gold)}

.crumbs{font-size:12.5px;color:var(--dim);margin-bottom:14px}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 6px;opacity:.5}

/* ---- headings ---- */
h1{font-size:clamp(24px,3.6vw,33px);line-height:1.18;margin-bottom:10px;
   text-wrap:balance}
h2{font-size:19px;color:var(--gold);margin:38px 0 10px}
h3{font-size:15.5px;margin:22px 0 6px}
.lede{color:#cfd4dd;max-width:660px;margin-bottom:18px}
.sub{color:var(--dim);font-size:13px;margin:-4px 0 14px;max-width:660px}

/* ---- the fact strip under the title ---- */
.facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.fact{background:var(--panel);border:1px solid var(--line);border-radius:10px;
      padding:7px 12px;font-size:13px;color:#cfd4dd}
.fact b{color:var(--text)}
.fact--warn{border-color:#5a3f22;color:var(--gold2)}

.head{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.head__text{flex:1 1 380px;min-width:0}
.head__img{flex:0 0 128px;background:var(--panel);border:1px solid var(--line);
           border-radius:14px;padding:10px;display:flex;align-items:center;
           justify-content:center}
.head__img img{width:108px;height:108px;object-fit:contain}

/* ---- tables ---- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;
           background:var(--panel)}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
th,td{text-align:right;padding:9px 12px;border-bottom:1px solid var(--line);
      white-space:nowrap;font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left;white-space:normal}
/* Numbers sit right, prose sits left, and a column header belongs over its own
   content: right-aligning "Откуда" put the word at the far edge of a wide
   column of chips it had nothing to do with. */
th.l,td.wrap-cell{text-align:left}
th{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
   font-weight:600}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.03)}
td.wrap-cell{white-space:normal;color:#cfd4dd;font-size:13.5px}
.na{color:var(--dim)}
.up{color:var(--green)} .down{color:var(--red)}

/* ---- panels ---- */
.box{background:var(--panel);border:1px solid var(--line);border-radius:12px;
     padding:16px 18px}
.box+.box{margin-top:12px}
.cta{background:var(--panel);border:1px solid var(--line);
     border-left:3px solid var(--gold);border-radius:10px;padding:14px 18px;
     margin-top:34px;color:#cfd4dd;font-size:14px}
.verdict{font-size:15px}
.verdict b{color:var(--gold2)}

/* ---- chips (relic / mission lists) ---- */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);
      border-radius:7px;padding:2px 8px;font-size:12.5px;color:#cfd4dd;
      white-space:nowrap}
.chip--vault{border-color:#5a3f22;color:var(--gold2)}
.pill{display:inline-block;font-size:11px;border:1px solid var(--line);
      border-radius:6px;padding:1px 6px;color:var(--dim);margin-left:6px;
      vertical-align:middle}
details summary{cursor:pointer;color:var(--gold);padding:8px 0;font-size:14px}
details summary:hover{color:var(--gold2)}

/* ---- the hub ---- */
.cat{margin-top:34px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
      gap:8px;margin-top:12px}
.grid a{background:var(--panel);border:1px solid var(--line);border-radius:10px;
        padding:9px 12px;text-decoration:none;color:var(--text);font-size:13.5px;
        display:flex;align-items:center;gap:8px}
.grid a:hover{border-color:var(--gold);color:var(--gold2)}
.grid a .mr{color:var(--dim);font-size:11.5px;margin-left:auto}
.grid a.off{color:var(--dim)}

.related{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.related a{background:var(--panel);border:1px solid var(--line);border-radius:9px;
           padding:6px 11px;font-size:13px;text-decoration:none}

/* ---- picking the two halves of a riven line ---- */
/* Two framed windows with a plus between them: the shape says what the page
   does before a word of it is read. On a phone they stack and the plus turns
   into a row of its own. */
.pick{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;
      margin-top:14px}
.pick__plus{align-self:center;color:var(--dim);font-size:22px;line-height:1;
            padding:0 2px;user-select:none}
@media (max-width:760px){
  .pick{grid-template-columns:1fr;gap:8px}
  .pick__plus{justify-self:center;padding:2px 0}
}
.pick__win{min-width:0;background:var(--panel);border:1px solid var(--line);
           border-radius:14px;padding:12px 12px 13px}
.pick__h{font-size:11.5px;text-transform:uppercase;letter-spacing:.5px;
         color:var(--dim);font-weight:600;margin:0 0 9px 2px}
.pick__list{display:flex;flex-direction:column;gap:5px;
            max-height:330px;overflow-y:auto;padding-right:4px}
/* Conditions are two or three words, so they fit a grid of pills. Tasks are
   sentences and stay one per row. */
.pick__list--grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
                  gap:5px;align-content:start}
.pcard{display:block;background:var(--panel2);border:1px solid var(--line);
       border-radius:9px;padding:8px 11px;font-size:13.5px;color:var(--text);
       text-decoration:none;cursor:pointer;transition:border-color .15s,
       background .15s}
.pcard:hover{border-color:var(--gold);color:var(--text)}
.pcard__en{display:block;color:var(--dim);font-size:11.5px;margin-top:2px}
.pcard.on{border-color:var(--gold);background:rgba(212,169,68,.09);
          box-shadow:inset 3px 0 0 var(--gold)}
.pcard.on,.pcard.on:hover{color:var(--gold2)}
/* A scrollbar that belongs to the panel it lives in. The browser default is a
   bright strip against a dark surface, which makes it the loudest thing in a
   section built to be quiet. */
.pick__list{scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.pick__list::-webkit-scrollbar{width:8px}
.pick__list::-webkit-scrollbar-track{background:transparent}
.pick__list::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.pick__list:hover::-webkit-scrollbar-thumb{background:#39404b}

.memo{margin-top:16px;background:var(--panel);border:1px solid var(--line);
      border-left:3px solid var(--gold);border-radius:12px;padding:16px 18px}
.memo__empty{color:var(--dim);font-size:13.5px}
.memo__pair{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:700px){.memo__pair{grid-template-columns:1fr;gap:14px}}
.memo__lbl{font-size:11px;text-transform:uppercase;letter-spacing:.5px;
           color:var(--dim);font-weight:600;margin-bottom:3px}
.memo__pair b{display:block;color:var(--gold2);font-size:14.5px;
              margin-bottom:5px;line-height:1.35}
.memo__pair p{color:#cfd4dd;font-size:13.5px;line-height:1.6}
.memo h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;
         color:var(--dim);margin:20px 0 9px}
/* The verdict is advice, not a score: it says which half will actually stop
   you, so it is worth reading before the sentence next to it. */
.rule{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
      color:#cfd4dd;line-height:1.6;padding:9px 0;
      border-top:1px solid var(--line)}
.rule:first-of-type{border-top:0;padding-top:0}
.rule .v{flex:none;min-width:84px;font-size:11px;text-transform:uppercase;
         letter-spacing:.5px;font-weight:600;padding:2px 8px;border-radius:6px;
         border:1px solid var(--line);text-align:center;margin-top:1px}
.rule--easy .v{color:var(--green);border-color:#2d4a2d}
.rule--watch .v{color:var(--gold2);border-color:#5a3f22}
.rule--hard .v{color:var(--red);border-color:#5a2b26}
@media (max-width:520px){
  .rule{flex-direction:column;gap:5px}
  .rule .v{align-self:flex-start;min-width:0}
}
/* A row the memo is quoting, or one a card jumped to, says so for a moment. */
tr:target td{background:rgba(212,169,68,.07)}

/* ---- searching the log of past offerings ---- */
.bsearch{display:block;width:100%;max-width:460px;margin:0 0 12px;
         background:var(--panel);border:1px solid var(--line);border-radius:10px;
         color:var(--text);font:14px inherit;padding:9px 13px}
.bsearch:focus{outline:none;border-color:var(--gold)}
.bsearch::placeholder{color:var(--dim)}
/* The answer, not the table: somebody typing a name wants a sentence, and the
   table underneath is the evidence for it. */
.bans{border-left:3px solid var(--gold);margin-bottom:12px;font-size:14px;
      color:#cfd4dd}
.bans b{color:var(--gold2);font-size:15px}
td.nowrap{white-space:nowrap}
.count{font-size:12.5px;margin-top:10px}

/* ---- where a relic drops ---- */
/* A second row under the relic rather than a sixth column: the answer is a
   sentence, and a sentence does not fit a column of numbers. */
tr.srcrow td{border-bottom:1px solid var(--line);padding:2px 12px 10px;
             white-space:normal;text-align:left;font-size:12.5px}
tr.srcrow .chips{display:inline-flex;flex-wrap:wrap;gap:5px;vertical-align:middle}
tr.srcrow .chip{font-size:11.5px;padding:1px 7px;background:transparent}
tbody tr.srcrow:hover{background:none}

/* ---- a screenshot used as evidence ---- */
/* Beside the sentence it belongs to, captioned, and never the widest thing on
   the page: full width and unlabelled it read as a banner and pushed every
   actual word below the fold. */
.about__sec{overflow:hidden}
.shotfig{float:right;width:min(340px,42%);margin:2px 0 12px 18px}
.shotfig img{display:block;width:100%;height:auto;border:1px solid var(--line);
             border-radius:10px}
.shotfig figcaption{color:var(--dim);font-size:12px;line-height:1.5;margin-top:7px}
.about__sec p{color:#cfd4dd;font-size:14px;line-height:1.65}
@media (max-width:700px){
  .shotfig{float:none;width:100%;margin:0 0 14px}
}

footer{border-top:1px solid var(--line);margin-top:44px;padding-top:16px;
       color:var(--dim);font-size:12.5px}
footer a{color:var(--dim)}

/* ---- a guide's numbered ways ---- */
/* The number is the structure, so it is a real element and not a list marker:
   each way is a section a reader can be sent to («третий способ»), and the
   digit has to be visible next to the heading rather than in a gutter. */
.way{margin-top:30px}
.way h2{display:flex;align-items:center;gap:11px;margin:0 0 10px;font-size:19px}
.way__n{flex:none;width:27px;height:27px;border-radius:50%;
        display:inline-flex;align-items:center;justify-content:center;
        background:var(--panel2);border:1px solid var(--gold);color:var(--gold);
        font-size:13.5px;font-weight:700;font-variant-numeric:tabular-nums}
.way .box p{color:#cfd4dd;font-size:14.5px}
/* The catch is the half of a guide that is usually missing, so it is set apart
   rather than tucked into the paragraph above it. */
.way__catch{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);
            font-size:13.5px}
.way__catch b{color:var(--gold2)}
.way__more{margin-top:10px;font-size:13px;color:var(--dim)}

/* ---- reviews ---- */
/* Plain cards on purpose. Rating widgets, avatars and «verified» badges are
   the visual language of the review sections nobody believes, and the words
   are the only thing here worth looking at. */
.rev{background:var(--panel);border:1px solid var(--line);border-radius:12px;
     padding:14px 17px;margin-top:12px}
.rev__top{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;
          margin-bottom:8px}
.rev__stars{color:var(--gold);font-size:14px;letter-spacing:2px;flex:none}
.rev__who{font-size:14px}
.rev__top time{color:var(--dim);font-size:12.5px;margin-left:auto;
               font-variant-numeric:tabular-nums}
.rev__body{color:#cfd4dd;font-size:14.5px;white-space:pre-line;
           overflow-wrap:anywhere}
.rev__other{font-size:15px;color:var(--dim);margin:34px 0 0;
            text-transform:none;letter-spacing:0}
.rev__how{margin-top:26px;color:var(--dim);font-size:13px;max-width:660px}
@media (max-width:520px){
  .rev__top time{margin-left:0;width:100%}
}

/* Nothing has been written yet, and the page says so rather than hiding. */
.rev__none{color:#cfd4dd;max-width:660px;font-size:14.5px;margin-top:6px}