/* Leaders and teams (leaders.html): the hall's look, with a little more ceremony. */
.leaders-head .site-fan { margin: 0 0 10px; }
.leaders-head .site-card { width: 78px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0 4px; }
.cta-row .ms-btn, .cta-row .ms-btn-2 { padding: 11px 20px; text-decoration: none; }

.tiles.three { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.quote { margin: 20px 0 6px; padding: 16px 18px; background: var(--parch); border: 2px solid var(--parch-brd); border-radius: 14px; font-size: 1.08rem; line-height: 1.5; position: relative; }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-size: .85rem; color: var(--ink3); }

.tbl-wrap { overflow-x: auto; margin: 12px 0; border: 2px solid var(--tan); border-radius: 12px; background: #fff; }
.tbl-wrap table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tbl-wrap th, .tbl-wrap td { padding: 9px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tan-lt); }
.tbl-wrap tr:last-child td { border-bottom: 0; }
.tbl-wrap th { font-family: var(--font-pixel); font-weight: normal; color: var(--red); background: var(--parch); font-size: 1rem; }
.mirror td:first-child { width: 52%; }
.mirror td b { color: var(--red); }

/* The skills map: pips, three = the main thing practised. */
.skills { min-width: 0; }

.skills th:not(:first-child) { font-size: .82rem; text-align: center; writing-mode: horizontal-tb; }
.skills td:first-child a { color: var(--ink); text-decoration: none; font-weight: bold; white-space: nowrap; }
.skills td:first-child a:hover { color: var(--red); }
.skills td:not(:first-child) { text-align: center; }
.skills td.p1::after, .skills td.p2::after, .skills td.p3::after { font-family: var(--font-ui); color: var(--red); letter-spacing: 2px; }
.skills td.p1::after { content: "■"; opacity: .45; }
.skills td.p2::after { content: "■■"; opacity: .7; }
.skills td.p3::after { content: "■■■"; }

.formats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-top: 12px; }
.formats > div { padding: 14px; background: #fff; border: 2px solid var(--tan); border-radius: 14px; }
.formats b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.05rem; }
.formats h3 { margin: 2px 0 4px !important; font-size: 1.2rem !important; }
.formats p { margin: 4px 0; font-size: .92rem; color: var(--ink2); }

/* Sessions: fold open, a card's art as the badge. */
.lsession { margin: 10px 0; background: #fff; border: 2px solid var(--tan); border-radius: 14px; overflow: hidden; }
.lsession[open] { border-color: var(--parch-brd); box-shadow: 0 3px 0 var(--tan); }
.lsession summary { display: flex; align-items: center; gap: 14px; padding: 10px 14px; cursor: pointer; list-style: none; }
.lsession summary::-webkit-details-marker { display: none; }
.lsession summary::after { content: "+"; margin-left: auto; font-family: var(--font-pixel); font-size: 1.6rem; color: var(--red); }
.lsession[open] summary::after { content: "−"; }
.lsession summary:hover { background: var(--parch); }
.lcard { flex-shrink: 0; width: 48px; height: 58px; display: flex; align-items: center; justify-content: center; background: var(--card-bg, #fff); border: 2px solid var(--parch-brd); border-radius: 6px; box-shadow: 0 2px 0 var(--tan); rotate: -4deg; }
.lsession:nth-of-type(even) .lcard { rotate: 4deg; }
.lcard img { width: 34px; height: 34px; object-fit: contain; image-rendering: pixelated; }
.lt { display: flex; flex-direction: column; min-width: 0; }
.lt b { font-family: var(--font-pixel); font-weight: normal; color: var(--red); font-size: 1.15rem; line-height: 1.2; }
.lt span { font-size: .85rem; color: var(--ink3); }
.lbody { padding: 2px 18px 12px 76px; }
.lbody p { margin: 7px 0; font-size: .95rem; }
.lbody b { color: var(--red); }
.kitlink { font-size: .88rem !important; color: var(--ink3); border-top: 1px dotted var(--tan); padding-top: 7px; }
.kitlink a { color: var(--red); font-weight: bold; }
@media (max-width: 520px) { .lbody { padding-left: 16px; } }

/* On a phone the skill names stand on end, so the whole map fits without scrolling. */
@media (max-width: 700px) {
    .skills th:not(:first-child) { writing-mode: vertical-rl; transform: rotate(180deg); text-align: left; vertical-align: bottom; height: 112px; padding: 8px 4px; font-size: .78rem; }
    .skills td:not(:first-child) { padding: 8px 2px; }
    .skills td:first-child a { white-space: normal; }
    .skills td.p1::after, .skills td.p2::after, .skills td.p3::after { letter-spacing: 0; font-size: .7rem; }
    .skills td.p2::after { content: "■\A■"; white-space: pre; line-height: .8; }
    .skills td.p3::after { content: "■\A■\A■"; white-space: pre; line-height: .8; }
}
.defaults { padding: 10px 14px; background: var(--parch); border: 2px dashed var(--parch-brd); border-radius: 12px; font-size: .93rem; }
.defaults b { color: var(--red); }