/* Reference pages: Rules, card rulings, the glossary, community and the written How to play guide.
   Loaded after inner.css and density.css. The shared page system sets the edge, the H1 and the
   prose column; this file holds running text near 70 characters a line and adds the tools the
   long pages need (a rulings filter and letter bar, a contents column for the guide). */

/* Measure. */
:is([data-page-family=rules],[data-page-family=community],[data-page-family=glossary]) #main .page-intro .lede{max-width:42em}
[data-page-family=rules] .reading :is(p,li,blockquote):not(.fine){max-width:31em}
[data-page-family=rules] .reading :is(.table-wrap,table,figure,.article-contents){max-width:46rem}
[data-page-family=community] #main :is(.section>p,.resource p){max-width:30em}
[data-page-family=glossary] .glossary-list dd{max-width:34em}

/* Rules: a reference article nested in the page (Fallen Feline) sits on the same edge as the rest. */
[data-page-family=rules] .reading .reading.section{padding:28px 0 0;border-bottom:0;max-width:none}

/* Rules and the glossary are siblings: the same section heading size. */
:is([data-page-family=rules] .reading,[data-page-family=glossary] .glossary) h2{font-size:clamp(30px,3vw,42px);line-height:1.08;margin-bottom:14px}
[data-page-family=glossary] .glossary .subhead{margin:36px 0 18px}
[data-page-family=glossary] .glossary .subhead:first-child{margin-top:8px}

/* Community: its links are visibly links, like prose links elsewhere. */
[data-page-family=community] #main :is(p,.resource)>a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
[data-page-family=community] .resource-grid+p{margin-top:28px}

/* Card rulings: a filter and a letter bar that stay in reach on a long page. On wide screens the
   rulings use the full page width and read like a dictionary, two columns per letter. */
[data-page-family=rules] #main>.rulings-index{max-width:none}
.rulings-index>.rulings-lede{max-width:29em}
.rulings-tools{position:sticky;top:var(--top-bar,0px);z-index:4;margin:18px calc(var(--page-gutter) * -1) 8px;padding:12px var(--page-gutter) 0;background:var(--bg);border-bottom:1px solid var(--soft)}
.rulings-filter{display:grid;grid-template-columns:auto minmax(0,26rem) 1fr;align-items:center;gap:8px 14px;margin-bottom:10px}
.rulings-filter label{font:500 14px/1.5 var(--body);color:var(--muted)}
.rulings-filter input{min-height:44px;padding:0 14px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:16px var(--body);border-radius:0}
.rulings-count{margin:0;font:14px/1.5 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.rulings-letters{display:flex;flex-wrap:wrap;margin:0 0 0 -10px}
.rulings-letters a{display:inline-grid;place-items:center;min-width:34px;min-height:40px;padding:0 4px;font:600 15px/1 var(--body);color:var(--ink);text-decoration:none}
.rulings-letters a:hover{text-decoration:underline;text-underline-offset:4px}
.rulings-letters a[aria-disabled]{color:var(--muted);opacity:.45;pointer-events:none}
.rulings-list .subhead,.rulings-card{scroll-margin-top:140px}
.rulings-card :is(p,h3){max-width:31em}
@media(min-width:1100px){
 .rulings-letter{columns:2;column-gap:64px}
 .rulings-letter>.subhead{column-span:all}
 .rulings-card{break-inside:avoid}
}
.rulings-empty{margin:28px 0;font-size:17px;line-height:1.6}
.rulings-empty a{text-decoration:underline;text-underline-offset:4px}
/* Keyword chips read like they do on card pages, where this text comes from. */
.rulings-card .kw{background:var(--bg3);color:var(--ink);border:0;border-radius:2px;padding:2px 4px;font-size:.85em}

/* How to play: the guide beside a sticky contents column on wide screens, a contents bar on phones. */
.utility-page .how-to-play{max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,46rem);gap:0 64px;justify-content:start}
.guide-aside{display:none}
.guide-intro{max-width:29em}
.guide-lede{max-width:30em}
.guide-lesson h3{font-size:30px;line-height:1.05;margin:52px 0 4px;scroll-margin-top:16px}
.guide-step h4{font:600 19px/1.35 var(--body);text-transform:none;letter-spacing:0;margin:0 0 6px}
.guide-step p{font-size:18px;line-height:1.6;max-width:27em}
.guide-step p.guide-rule{font:13px/1.5 var(--mono);max-width:none}
.guide-contents{margin:24px 0 8px;border:1px solid var(--soft);background:var(--bg2)}
.guide-contents>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:0 16px;font:600 16px/1.3 var(--body);cursor:pointer;list-style:none}
.guide-contents>summary::-webkit-details-marker{display:none}
.guide-contents>summary:after{content:'+';font-weight:400;font-size:20px}
.guide-contents[open]>summary:after{content:'–'}
.guide-contents>summary span{margin-left:auto;font-weight:400;color:var(--muted);font-size:14px}
.guide-contents nav{padding:4px 16px 16px;max-height:65vh;overflow:auto}
:is(.guide-contents,.guide-toc) ol{list-style:none;margin:0;padding:0;columns:auto}
:is(.guide-contents,.guide-toc) ol ol{margin:2px 0 8px 14px;padding-left:12px;border-left:1px solid var(--soft)}
:is(.guide-contents,.guide-toc) a{display:flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none;font-size:15px;line-height:1.3}
:is(.guide-contents nav,.guide-toc)>ol>li>a{font-weight:600}
:is(.guide-contents,.guide-toc) ol ol a{color:var(--muted);font-size:14px;min-height:32px}
:is(.guide-contents,.guide-toc) a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
@media(max-width:1099px){.guide-contents{position:sticky;top:var(--top-bar,0px);z-index:4}}
@media(min-width:1100px){
 .utility-page .how-to-play{grid-template-columns:minmax(0,46rem) minmax(220px,260px)}
 .guide-main{grid-column:1;min-width:0}
 .guide-contents{display:none}
 .guide-aside{display:block;grid-column:2;grid-row:1}
 .guide-toc{position:sticky;top:calc(var(--top-bar,0px) + 24px);max-height:calc(100vh - 48px - var(--top-bar,0px));overflow:auto;margin:0;padding:4px 0 16px 18px;border:0;border-left:1px solid var(--soft)}
 .guide-toc>p{margin:0 0 8px;font:500 13px/1.4 var(--body);color:var(--muted)}
 .guide-toc a[aria-current]{color:var(--ink)}
 .guide-toc a[aria-current=location]{box-shadow:inset 3px 0 0 var(--ink);margin-left:-21px;padding-left:18px}
 .guide-toc ol ol a[aria-current=location]{margin-left:-15px;padding-left:12px}
}
@media(max-width:700px){
 .rulings-tools{padding-top:10px}
 .rulings-filter{grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:6px}
 .rulings-filter label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .rulings-count:empty{display:none}
 .rulings-letters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--page-gutter) * -1);padding:0 calc(var(--page-gutter) - 4px)}
 .rulings-letters::-webkit-scrollbar{display:none}
 .rulings-letters a{flex:none;min-width:44px;min-height:44px}
 .rulings-list .subhead,.rulings-card{scroll-margin-top:130px}
 .guide-step h4{font-size:18px}
 .guide-step p{font-size:16px}
 .guide-lesson h3{font-size:26px}
}