/* The reference pages: help files, kin, classes and the other creation choices, the
   reference lists, the feature pages and the hubs. Loaded after site.css by those pages
   only; uses its tokens. */

/* The game's own text, reflowed (sitegen/gametext.py) */
.gtext p,.gtext li{max-width:none}
.gtext h2,.gtext h3{font:italic 400 clamp(22px,2vw,27px)/1.25 var(--world);margin:1.3em 0 .4em}
.gtext ul{padding-left:1.3em;margin:0 0 .9em}
.gtext li{margin:.25em 0}
.gtext ul.key-list{list-style:none;padding-left:0}
.gtext .key-list li{margin:.1em 0}
/* Preformatted game text is aligned in columns: it scrolls inside its own box, it never wraps. */
.gt{margin:0 0 1em;max-width:100%;overflow-x:auto;background:var(--pitch);border:1px solid var(--rule);padding:14px 16px;font:13px/1.55 var(--mono);color:#C9C2B4;white-space:pre;overflow-wrap:normal;word-break:normal}
.gt a{color:var(--gold)}
.world-text p{font:400 var(--t-tale)/1.6 var(--world);max-width:none}
.world-text p + p{text-indent:1.6em}
.world-text h2,.world-text h3{font:italic 400 clamp(22px,2vw,27px)/1.25 var(--world);margin:1.2em 0 .4em}
.world-text .gt{font-size:13px}

/* A help file's summary, syntax, art and "See:" lines (/help/<id>/) */
.help-summary{margin-bottom:.9em}
.help-syntax{margin-top:0;margin-bottom:1.2em}
.help-syntax .syn-label{margin:0 0 6px;color:var(--dim);font-size:var(--t-small)}
.help-syntax .gt{margin:0}
.help-art{margin-top:0;margin-bottom:1.4em}
.art{margin:0;max-width:100%;overflow-x:auto;background:var(--pitch);border:1px solid var(--rule);padding:14px 16px;font:13px/1.3 var(--mono);color:#C4C4C4;white-space:pre;overflow-wrap:normal;word-break:normal}
.help-art figcaption{margin-top:8px}
.see-line{font-variant-caps:normal}
@media (max-width:600px){ .art,.gt{font-size:12px;padding:12px} }

/* Search on /help/ and /players/ */
.find{max-width:none;margin-top:8px}
.find div{max-width:480px}
.find input{font-size:20px}
.find .small{margin:10px 0 0}
.found:empty{display:none}
.found{margin-top:18px}
.hits{list-style:none;margin:0;padding:0}
.hits li{padding:8px 0;border-bottom:1px solid var(--rule)}
.hits a{font:400 21px/1.3 var(--plain)}
.hits span{display:block;color:var(--dim);font-size:var(--t-small);line-height:1.45}

/* The A to Z list */
.letters{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0 0 8px}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font:400 22px/1 var(--canon);text-decoration:none}
.letters a:hover{text-decoration:underline;text-decoration-thickness:1px}
.az{margin-top:28px}
.az h3{font:400 34px/1 var(--canon);margin:0 0 10px;color:var(--dim)}
.azlist{list-style:none;margin:0;padding:0;columns:2 13rem;column-gap:var(--gutter)}
.azlist li{break-inside:avoid;padding:3px 0;line-height:1.35}
.azlist a{display:inline-block;padding:4px 0}
.starts{columns:2 13rem;column-gap:var(--gutter)}
.keys code{font-size:.92em}
.keys{margin-top:28px}
.seealso h2{font-size:clamp(26px,2.4vw,32px)}

@media (max-width:860px){
  .azlist a,.plain-list a{min-height:44px;display:inline-flex;align-items:center}
  .azlist li,.plain-list li{padding:0}
}

/* The game's command lists and grids, as tables */
.gtt{border-collapse:collapse;width:100%;margin:0 0 1.1em;font-size:19px;line-height:1.45}
.gtt td{padding:7px 14px 7px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.gtt td:first-child{font:15px/1.45 var(--mono);color:var(--text);width:1%;min-width:7.5em;max-width:16em}
.gtt td:last-child{padding-right:0}
.gtt.grid td{font:14px/1.4 var(--mono);width:auto;min-width:0;padding-right:8px;overflow-wrap:anywhere}
@media (max-width:600px){
  .gtt{font-size:17px}
  .gtt td:first-child{font-size:14px;min-width:6em;width:38%}
  .gtt.grid td{font-size:12.5px;width:auto}
}

/* A list of links that flows like a sentence */
.flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 22px}
.flow li{padding:2px 0}
@media (max-width:860px){ .flow a{display:inline-flex;align-items:center;min-height:44px} .flow li{padding:0} }
@media (min-width:601px){ .gtt td:first-child{white-space:nowrap} .gtt.grid td{white-space:normal} }

/* The character reference */
.refgroup > h2{font-size:clamp(30px,3.4vw,44px);margin-bottom:.3em}
.gshort{font-size:var(--t-lead);line-height:1.45;margin-bottom:.6em}
.refgroup .world-text p{font-size:clamp(19px,1.5vw,21px)}
.ref{border-collapse:collapse;width:100%;margin-top:18px;font-variant-numeric:lining-nums tabular-nums}
.ref th{font:400 var(--t-small)/1.4 var(--plain);color:var(--dim);text-align:left;padding:6px 0;border-bottom:1px solid var(--rule)}
.ref td{padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.ref td.n,.ref th.n{text-align:right;padding-right:0;white-space:nowrap;color:var(--dim)}
.ref .nm{font:400 23px/1.25 var(--world)}
.ref .what{display:block;font-size:var(--t-small);line-height:1.45;color:var(--dim)}
.gives{margin:0;padding-left:1.2em}
.gives li{margin:.3em 0;max-width:none}
.facts p{max-width:none}
.h-small,.block > h2.h-small{font:italic 400 clamp(24px,2.2vw,30px)/1.2 var(--world);margin-bottom:.4em}

/* Reference lists */
.entries{list-style:none;margin:0;padding:0}
.entries li{padding:10px 0;border-bottom:1px solid var(--rule)}
.entries .nm,.pairs .nm{font:400 23px/1.25 var(--world)}
.entries .what,.pairs .what{display:block;font-size:var(--t-small);line-height:1.45;color:var(--dim)}
.entries .said{display:block;font-size:19px;line-height:1.5;margin-top:2px}
.entries a.small{display:inline-block;margin-top:2px}
.pairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 var(--gutter)}
.pairs li{padding:8px 0;border-bottom:1px solid var(--rule)}
.petfam{margin-top:clamp(36px,5vw,64px)}
.ores .nm{font-size:21px}
.range{display:block;margin-top:6px;max-width:16rem}
.range .track{fill:var(--rule)}
.range .span{fill:var(--gold)}
@media (max-width:600px){
  .ores th,.ores td{padding-right:8px}
  .ores .nm{font-size:19px}
}

/* Feature pages: the home page's tale and exhibit, then a reading column */
.feature .page-head{max-width:52rem}
.feature .plate{margin-top:clamp(20px,3vw,40px)}
.fpair{margin-top:clamp(28px,4vw,56px)}
.feature .tale h2{font:italic 400 clamp(28px,3.4vw,42px)/1.14 var(--world);margin-bottom:.6em}
.fscry{margin-top:26px}
.fcol{max-width:40rem}
.fcol .rec div{grid-template-columns:minmax(0,1fr) minmax(0,auto)}
.fcol .rec dd + dd{text-align:right}
.fcol .rec dt a{color:var(--dim)}
.fcol .count td:last-child{white-space:nowrap}
@media (min-width:861px){
  .fpair .tale{grid-column:1/span 7}
  .fpair .exhibit{grid-column:8/span 5}
  .fcol{margin-left:0}
}
@media (max-width:600px){
  .fcol .rec div{display:block}
  .fcol .rec dd + dd{text-align:left;color:var(--dim)}
}

/* Hubs: players, new, community, data */
.subhead{margin:1.4em 0 .5em}
.after-fig{margin-top:18px}
.game-quote{margin:0 0 .6em;padding:0 0 0 18px;border-left:1px solid var(--rule)}
.game-quote p{font-size:19px}
.warn .said{font:italic 400 20px/1.45 var(--world)}
.warn a.small{display:inline-block;margin-top:4px}
.files code{font-size:15px;overflow-wrap:anywhere}
.files td:first-child{overflow-wrap:anywhere}

/* The game's ruled tables (a header over a ===== ruler) */
.gtt.cols th{font:400 var(--t-small)/1.35 var(--plain);color:var(--dim);text-align:left;vertical-align:bottom;padding:6px 12px 6px 0;border-bottom:1px solid var(--rule)}
.gtt.cols td:first-child{font:inherit;color:inherit;width:auto;min-width:0;white-space:normal}
/* break between words only, so 3x99% keeps its % on phones; a table too wide scrolls in its own box */
.gtt.cols td{overflow-wrap:break-word}
.table-scroll > .gtt{margin-bottom:0}
.table-scroll{margin:0 0 1.1em}
@media (max-width:600px){ .gtt.cols{font-size:15px} .gtt.cols td,.gtt.cols th{padding-right:8px} }
/* Long slash-joined words in the game's bonus lines ("mind/physical/summon/…") */
.gives li,.ref .what,.entries .what,.entries .said,.gtext p,.gtext li,.world-text p{overflow-wrap:anywhere}