/* 7.22.0: the tiles beside the help pages (/appeal, support, my applications, rules) – like "What we offer" of the start
   page (.offer-card / .offer-icon in pages.css), side by side: the icon left, the text right. side-tiles.js builds them. */
.side-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 22px; align-items: start; }
.side-main { min-width: 0; }
.side-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: calc(var(--header-h) + 16px); }
.side-head { padding: 0 2px 4px; }
.side-head h2 { font-size: 1.15rem; }
.side-tile { grid-template-columns: 44px 1fr; column-gap: 14px; row-gap: 2px; padding: 14px 16px; }
.side-tile .offer-icon { grid-row: span 2; width: 44px; height: 44px; border-radius: 13px; }
.side-tile .offer-icon .icon { width: 22px; height: 22px; }
.side-tile h3 { margin: 0; font-size: 1rem; }
.side-tile p { font-size: 0.88rem; line-height: 1.45; }
.side-tile-n { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #fff; color: #120c1f; box-shadow: 0 0 0 2px var(--tile); font-size: 0.7rem; font-weight: 800; vertical-align: 1px; }
.t-grass { --tile: var(--grass); --tile-2: var(--grass-2); }
.t-diamond { --tile: var(--diamond); --tile-2: var(--t-diamond-2); }
.t-gold { --tile: var(--gold); --tile-2: var(--t-gold-2); }
.t-amethyst { --tile: var(--t-amethyst); --tile-2: var(--t-amethyst-2); }
.t-mint { --tile: var(--t-mint); --tile-2: var(--t-mint-2); }
.t-pink { --tile: var(--t-pink); --tile-2: var(--t-gold-2); }
.nowrap { white-space: nowrap; }
/* rules: the table of contents left, the rules, the tiles right */
.rules-layout:has(> .side-col) { grid-template-columns: 220px minmax(0, 1fr) 300px; }
.rules-layout:has(> .side-col):not(:has(.rules-toc)) { grid-template-columns: minmax(0, 1fr) 300px; }
.rules-layout > .side-col { position: sticky; top: calc(var(--header-h) + 16px); }
.side-wrap { display: contents; }
/* no rules written yet: the tiles in a row under the note */
.rules-side > .side-col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rules-side > .side-col > .side-head { grid-column: 1 / -1; }
@media (max-width: 1100px) { .rules-side > .side-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .rules-side > .side-col { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1280px) {
  .rules-layout:has(> .side-col) { grid-template-columns: 220px minmax(0, 1fr); }
  .rules-layout:has(> .side-col):not(:has(.rules-toc)) { grid-template-columns: minmax(0, 1fr); }
  .rules-layout > .side-col { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rules-layout > .side-col > .side-head { grid-column: 1 / -1; }
}
/* phone: everything in one column (after the 1280 rule, which would win otherwise) */
@media (max-width: 760px) {
  .rules-layout:has(> .side-col) { grid-template-columns: minmax(0, 1fr); }
  .rules-layout > .side-col { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .side-layout { grid-template-columns: minmax(0, 1fr); }
  .side-layout > .side-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .side-layout > .side-col > .side-head { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .side-layout > .side-col { grid-template-columns: minmax(0, 1fr); }
}
/* 7.22.0: "Your e-mails" in the player area – a tile per kind of e-mail with its switch */
.pl-mail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.pl-mail { grid-template-columns: 44px 1fr auto; cursor: pointer; }
.pl-mail .switch { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.pl-mail-team { grid-column: 1 / -1; margin-top: 4px; }