/* Runewards — the rules reference. Generated page (tools/build_rules_page.mjs),
   built in the legal pages' vocabulary because it is the same kind of thing: a
   long document with a sticky index and numbered sections. Two components are
   new to this site and defined here — tables, and the Ask panel. */

/* The site's page width, not the legal pages' narrower measure. This page
   carries the standard header and the standard footer, both of which are
   1320px, so at 1180 the content sat 70px inside its own header - visibly
   adrift from the brand above it and the footer below it. The reading measure
   is unaffected: .rl-body caps itself at 74ch whatever the container does. */
.rl-main{max-width:1320px;margin:0 auto;padding:clamp(48px,7vw,86px) clamp(20px,5vw,48px) 40px}
.rl-main h1{margin:0 0 18px;font:700 clamp(30px,5vw,52px)/1.08 var(--fdisp);letter-spacing:.01em;color:var(--ink);text-wrap:balance}
.rl-standfirst{margin:0 0 clamp(28px,4vw,40px);max-width:64ch;font-size:17px;line-height:1.65;color:var(--ink);text-wrap:pretty}

/* ─── Ask: the one part of the page that needs an account ──
   The panel keeps its place and its footprint; everything below is about the
   states it moves through. Three of them are worth knowing about:

   BUSY is [data-busy="1"] on the section, which drives the hairline sweep, the
   turning star and the warmed border from one attribute rather than from a
   class on each part.

   The answer is revealed a word at a time (js/rules.js), so .ask-w starts at
   opacity 0 and gains .is-in. Any answer that arrives with motion reduced is
   painted whole - see the media query at the end, which is the only place that
   overrides it.

   Earlier turns collapse into .ask-hist as one line each, so a conversation
   stays inside this box instead of growing the page. */
.ask{position:relative;border:1px solid var(--line);border-radius:12px;background:var(--ground2);overflow:hidden;margin:0 0 clamp(36px,5vw,56px);transition:border-color .4s}
.ask[data-busy="1"]{border-color:rgba(47,212,220,.34)}

/* one hairline, to say the request is in flight */
.ask-sweep{position:absolute;top:0;left:0;right:0;height:1px;overflow:hidden;opacity:0;transition:opacity .3s;pointer-events:none}
.ask[data-busy="1"] .ask-sweep{opacity:1}
.ask-sweep i{position:absolute;top:0;left:0;height:1px;width:38%;background:linear-gradient(90deg,transparent,var(--gem),transparent);animation:ask-sweep 1.5s cubic-bezier(.45,0,.55,1) infinite}
@keyframes ask-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(363%)}}

.ask-head{padding:clamp(20px,2.6vw,26px) clamp(20px,2.8vw,28px) 0}
.ask-hrow{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:12px}
.ask-hrow h2{margin:0;font:700 clamp(17px,2.2vw,20px)/1.2 var(--fdisp);letter-spacing:.05em;text-transform:uppercase;color:var(--ink)}
.ask-star{width:17px;height:17px;flex:none;fill:none;stroke:var(--gem);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 50%}
.ask[data-busy="1"] .ask-star{animation:ask-turn 3.4s linear infinite}
@keyframes ask-turn{to{transform:rotate(360deg)}}
.ask-chip{flex:none;font:500 9px/1 var(--fmono);letter-spacing:.14em;text-transform:uppercase;border-radius:4px;padding:6px 8px;color:var(--gem);border:1px solid rgba(47,212,220,.45)}
.ask-chip.is-off{color:var(--ink-dim);border-color:var(--line)}
.ask-lede{margin:0 0 18px;max-width:70ch;font-size:14.5px;line-height:1.6;color:var(--ink-dim);text-wrap:pretty}
.ask-body{padding:0 clamp(20px,2.8vw,28px) clamp(18px,2.4vw,22px)}

/* ── earlier turns, one line each ── */
.ask-hlabel{margin:0;padding:14px clamp(20px,2.8vw,28px) 0;border-top:1px solid var(--line);font:600 9.5px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;color:#6E5C50}
.ask-hlabel+.ask-hist{border-top:0}
.ask-hist:empty{display:none}
.ask-hist{border-top:1px solid var(--line)}
.ask-hturn{border-bottom:1px solid rgba(58,36,32,.6)}
.ask-hsum{width:100%;display:flex;align-items:center;gap:12px;padding:13px clamp(20px,2.8vw,28px);background:transparent;border:0;cursor:pointer;text-align:left;font-family:var(--fbody);transition:background .18s}
.ask-hsum:hover{background:rgba(36,21,18,.4)}
.ask-mk{flex:none;width:18px;height:18px;border-radius:4px;background:var(--raised);border:1px solid var(--line);font:600 8.5px/17px var(--fmono);text-align:center;color:#6E5C50}
.ask-hq{flex:1;min-width:0;font-size:13.5px;line-height:1.45;color:var(--ink-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask-hmeta{flex:none;font:500 10px/1 var(--fmono);color:#6E5C50}
.ask-hcv{flex:none;width:9px;height:9px;fill:none;stroke:#6E5C50;stroke-width:1.7;transition:transform .22s}
.ask-hturn[data-open="1"] .ask-hcv{transform:rotate(180deg)}
.ask-hturn[data-open="1"] .ask-hq{color:var(--ink)}
.ask-hdet{display:none;padding:0 clamp(20px,2.8vw,28px) 18px 50px}
.ask-hturn[data-open="1"] .ask-hdet{display:block}
.ask-hdet p{margin:0 0 12px;max-width:74ch;font-size:14.5px;line-height:1.7;color:var(--ink-dim);text-wrap:pretty}

/* ── the answer ── */
.ask-answer{border-top:1px solid var(--line);background:rgba(20,10,8,.5);padding:clamp(20px,2.6vw,24px) clamp(20px,2.8vw,28px)}
.ask-status{display:flex;align-items:center;gap:9px;margin:0 0 14px;font:500 9.5px/1 var(--fmono);letter-spacing:.15em;text-transform:uppercase;color:var(--gem)}
.ask-status i{width:5px;height:5px;border-radius:50%;background:var(--gem);flex:none;animation:ask-beat 1.15s ease-in-out infinite}
@keyframes ask-beat{0%,100%{opacity:.28;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}
.ask-status.is-done{color:#6E5C50;letter-spacing:.16em}
.ask-status.is-done i{display:none}
.ask-atext p{margin:0 0 14px;max-width:74ch;font-size:15.5px;line-height:1.75;color:var(--ink);text-wrap:pretty}
.ask-atext>:last-child{margin-bottom:0}

/* ── what an answer may be made of ──
   The subset js/rules.js parses into DOM: emphasis, code, lists, one level of
   heading, and a table. Nothing else can be created, so nothing else needs
   styling. The table borrows the document's own look below (.rl-t) rather
   than inventing a second one - a comparison of five cards should read like
   the rules tables it sits above. */
.ask-atext strong{font-weight:600;color:var(--gold)}
.ask-atext code{font:500 14px/1.4 var(--fmono);color:var(--gold);word-break:break-word}
.ask-h{margin:22px 0 10px;font:700 12px/1.3 var(--fdisp);letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}
.ask-atext>.ask-h:first-child{margin-top:0}
.ask-list{margin:0 0 14px;padding:0 0 0 2px;max-width:74ch;list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:ask-n}
.ask-list li{position:relative;padding-left:20px;font-size:15px;line-height:1.7;color:var(--ink);text-wrap:pretty}
ul.ask-list li::before{content:"";position:absolute;left:2px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--bronze)}
ol.ask-list li{counter-increment:ask-n}
ol.ask-list li::before{content:counter(ask-n);position:absolute;left:0;top:1px;font:500 11px/1.6 var(--fmono);color:var(--bronze)}

.ask-tw{overflow-x:auto;overscroll-behavior-x:contain;margin:0 0 16px;max-width:100%}
.ask-t{border-collapse:collapse;width:auto;min-width:min(100%,420px);font-size:14px}
.ask-t th,.ask-t td{padding:9px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.ask-t thead th{font:600 9.5px/1.4 var(--fbody);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-dim);border-bottom-color:var(--bronze);white-space:nowrap}
.ask-t tbody tr:last-child th,.ask-t tbody tr:last-child td{border-bottom:0}
.ask-t td{color:var(--ink);line-height:1.6}
.ask-t td.ask-tk{color:var(--ink);font-weight:600;white-space:nowrap}
.ask-t td+td{font-variant-numeric:tabular-nums}
.ask-w{opacity:0}
.ask-w.is-in{opacity:1;transition:opacity .19s ease-out}
.ask-caret{display:inline-block;width:2px;height:15px;background:var(--gem);vertical-align:-2px;margin-left:2px;animation:ask-blink .9s step-end infinite}
@keyframes ask-blink{50%{opacity:0}}

/* the skeleton, sized like the answer it stands in for */
.ask-skel{display:flex;flex-direction:column;gap:11px}
.ask-skel i{height:10px;border-radius:5px;background:var(--raised);position:relative;overflow:hidden}
.ask-skel i:nth-child(1){width:100%}
.ask-skel i:nth-child(2){width:93%}
.ask-skel i:nth-child(3){width:97%}
.ask-skel i:nth-child(4){width:54%}
.ask-skel i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(185,165,148,.16),transparent);animation:ask-shimmer 1.5s linear infinite}
@keyframes ask-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

.ask-cites{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.ask-cites-l{font:600 9.5px/1 var(--fbody);letter-spacing:.16em;text-transform:uppercase;color:#6E5C50;margin-right:4px}
.ask-cite{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:5px;background:rgba(36,21,18,.6);font:500 12px/1 var(--fmono);color:var(--gold);text-decoration:none;opacity:0;transform:translateY(4px);transition:color .18s,border-color .18s}
.ask-cite.is-in{opacity:1;transform:none;transition:opacity .28s ease-out,transform .28s ease-out,color .18s,border-color .18s}
.ask-cite:hover{color:#FFD84A;border-color:var(--gold-core)}

/* Two buttons live in an answer: the retry inside a failure card, and
   "Not right?" under the citations. Same quiet shape as a citation chip. */
.ask-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.ask-act.is-ok{color:var(--gem);border-color:rgba(47,212,220,.45);cursor:default}
.ask-act{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border:1px solid var(--line);border-radius:5px;background:transparent;color:var(--ink-dim);font:500 10.5px/1 var(--fbody);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;font-family:var(--fbody);transition:color .18s,border-color .18s}
.ask-act:hover{color:var(--gem);border-color:rgba(47,212,220,.45)}

/* ── the caveat, as one glyph ──
   It reads the same under every answer, so as a paragraph it stops being read
   and only makes the panel longer. The button sits on the status line and the
   text is one click away, which is also where a reader goes looking for it. */
.ask-arow{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ask-arow .ask-status{margin:0}
.ask-info{flex:none;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;color:#6E5C50;transition:color .18s}
.ask-info svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.ask-info:hover,.ask-info[aria-expanded="true"]{color:var(--gem)}
.ask-note{margin:0 0 14px;max-width:74ch;padding:12px 14px;border:1px solid var(--line);border-left:2px solid #6E5C50;border-radius:0 7px 7px 0;background:rgba(15,7,5,.55);font-size:12.5px;line-height:1.65;color:var(--ink-dim);text-wrap:pretty}

/* a failure is a card where the answer would be, not a note under the field:
   a spent budget or an unconfigured server is not a typing mistake */
.ask-fail{border:1px solid rgba(224,138,60,.35);border-radius:9px;background:rgba(224,138,60,.055);padding:16px 17px}
.ask-fail.is-calm{border-color:rgba(47,212,220,.3);background:rgba(47,212,220,.05)}
.ask-fail h3{margin:0 0 8px;font:700 14px/1.35 var(--fbody);color:var(--ink)}
.ask-fail p{margin:0;font-size:13.5px;line-height:1.65;color:var(--ink-dim);max-width:62ch;text-wrap:pretty}
.ask-fail-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}

/* ── the form ── */
.ask-form{display:flex;flex-direction:column;gap:12px}
.ask-label{font:600 11px/1 var(--fbody);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim)}
/* ── the composer ──
   The field and its controls share one border, and the controls sit BELOW the
   text inside it rather than floating over the corner: a question that grows
   to six rows then has nothing running underneath a button. The whole box
   takes the focus ring, because the whole box is the control. */
.ask-composer{border:1px solid var(--line);border-radius:12px;background:#0F0705;transition:border-color .2s,box-shadow .2s}
.ask-composer:focus-within{border-color:var(--gem);box-shadow:0 0 0 3px rgba(47,212,220,.15)}
.ask-composer.is-bad{border-color:rgba(224,96,60,.75);box-shadow:0 0 0 3px rgba(224,138,60,.12)}
.ask-field{display:block;width:100%;min-height:58px;max-height:190px;padding:14px 16px 4px;border:0;background:transparent;color:var(--ink);font:400 15px/1.55 var(--fbody);resize:none;overflow-y:auto}
.ask-field::placeholder{color:#6E5C50;opacity:1}
.ask-field:focus{outline:0}
.ask-field:disabled{opacity:.6}
.ask-tools{display:flex;align-items:center;gap:10px;padding:6px 10px 10px 16px}
.ask-meta{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.ask-fcount{font:500 10px/1 var(--fmono);color:#6E5C50;opacity:0;transition:opacity .22s,color .22s}
.ask-fcount.is-on{opacity:1}
.ask-fcount.is-near{color:#E08A3C}
.ask-field-msg{margin:0;font-size:13px;line-height:1.5;max-width:52ch;text-wrap:pretty}
.ask-field-msg:empty{display:none}
.ask-field-msg.is-err{color:#E08A3C}
.ask-field-msg.is-hint{color:var(--ink-dim)}

/* The signed-out door still wants a button that says a word. */
.ask-btn{position:relative;min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:6px;background:var(--gem);color:#08201F;font:700 12px/1 var(--fbody);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 0 0 1px rgba(47,212,220,.5);transition:transform .16s;font-family:var(--fbody)}
.ask-btn:hover{transform:translateY(-2px);color:#08201F}

/* Send and Stop: one 34px circle each, in the corner of the composer. Send is
   muted until there is something to send - it stays clickable, because an
   empty press is how you get told to type a question. */
.ask-send,.ask-stop{flex:none;position:relative;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;transition:opacity .18s,background .18s,color .18s,border-color .18s,transform .16s}
.ask-send{border:0;background:var(--gem);color:#08201F;opacity:.42}
.ask-send.is-ready{opacity:1}
.ask-send:hover{transform:translateY(-1px)}
.ask-send:disabled{cursor:default;transform:none}
.ask-send-arrow{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:opacity .16s}
.ask-send[data-busy="1"] .ask-send-arrow{opacity:0}
.ask-dots{position:absolute;inset:0;display:none;align-items:center;justify-content:center;gap:3px}
.ask-send[data-busy="1"] .ask-dots{display:flex}
.ask-dots i{width:4px;height:4px;border-radius:50%;background:#08201F;animation:ask-hop 1s ease-in-out infinite}
.ask-dots i:nth-child(2){animation-delay:.14s}
.ask-dots i:nth-child(3){animation-delay:.28s}
@keyframes ask-hop{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ask-stop{border:1px solid var(--line);background:transparent;color:var(--ink-dim)}
.ask-stop svg{width:14px;height:14px;fill:currentColor}
.ask-stop:hover{color:#E08A3C;border-color:rgba(224,138,60,.5)}
.ask-count{margin:0;font:500 11px/1.4 var(--fmono);color:#6E5C50}
.ask-count:empty{display:none}
.ask-count.is-warn{color:#E08A3C}

/* ── signed out ── */
.ask-demo{border:1px solid var(--line);border-radius:9px;background:rgba(15,7,5,.6);padding:17px 18px}
.ask-demo-tag{display:inline-block;margin-bottom:12px;font:500 8.5px/1 var(--fmono);letter-spacing:.14em;text-transform:uppercase;color:#6E5C50;border:1px solid var(--line);border-radius:4px;padding:5px 8px}
.ask-demo-q{display:flex;gap:10px;margin:0 0 12px}
.ask-demo-q p{margin:0;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.ask-demo-a{margin:0;font-size:14px;line-height:1.72;color:var(--ink-dim);text-wrap:pretty}
.ask-door{display:flex;flex-wrap:wrap;gap:13px 18px;align-items:center;margin-top:18px}

@media (max-width:620px){
  .ask-hdet{padding-left:44px}
  .ask-hmeta{display:none}
}

/* Motion reduced: the answer is painted whole, and nothing loops. This is the
   only place .ask-w is overridden, so the reveal cannot leave text invisible. */
@media (prefers-reduced-motion:reduce){
  .ask-sweep i,.ask-star,.ask-status i,.ask-skel i::after,.ask-dots i,.ask-caret{animation:none}
  .ask-w,.ask-cite{opacity:1;transform:none;transition:none}
}

/* ─── The document ───────────────────────────────────────── */
.rl-grid{display:grid;grid-template-columns:264px minmax(0,1fr);gap:clamp(28px,4vw,48px);align-items:start}
.rl-toc{position:sticky;top:96px;display:flex;flex-direction:column;gap:1px;border-left:1px solid var(--line);padding-left:18px;max-height:calc(100vh - 130px);overflow:auto;overscroll-behavior:contain}
.rl-toc-title{margin:0 0 12px;font:600 10px/1 var(--fbody);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim)}
.rl-toc a{display:flex;gap:9px;padding:6px 0;font-size:13px;line-height:1.4;color:var(--ink-dim);text-decoration:none;transition:color .18s}
.rl-toc a:hover{color:var(--gold)}
.rl-toc a.is-here{color:var(--gold)}
.rl-toc .n{font:500 11px/1.5 var(--fmono);color:var(--bronze);flex:none}
@media (max-width:899.98px){
  .rl-grid{grid-template-columns:minmax(0,1fr)}
  .rl-toc{position:static;max-height:none;overflow:visible}
}

.rl-body{min-width:0;max-width:74ch}
.rl-sec{scroll-margin-top:100px;padding-bottom:clamp(28px,4vw,40px);margin-bottom:clamp(28px,4vw,40px);border-bottom:1px solid var(--line)}
.rl-sec:last-child{border-bottom:0;margin-bottom:0}
.rl-h2row{display:flex;gap:12px;align-items:baseline;margin-bottom:14px}
.rl-h2row .n{font:500 13px/1.5 var(--fmono);color:var(--bronze);flex:none}
.rl-h2row h2{margin:0;font:700 clamp(20px,2.6vw,26px)/1.2 var(--fdisp);letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-wrap:balance}
.rl-h3{scroll-margin-top:100px;margin:26px 0 12px;display:flex;gap:10px;align-items:baseline;font:700 15px/1.3 var(--fbody);letter-spacing:.02em;color:var(--ink)}
.rl-h3n{font:500 12px/1.5 var(--fmono);color:var(--bronze);flex:none}
.rl-p{margin:0 0 14px;font-size:15.5px;line-height:1.75;color:var(--ink);text-wrap:pretty}
.rl-p:last-child{margin-bottom:0}
.rl-p code{font:500 14px/1 var(--fmono);color:var(--gold)}
/* A question in section 35. */
.rl-q{margin:20px 0 6px;font:700 15px/1.35 var(--fdisp);letter-spacing:.05em;color:var(--ink)}
.rl-ul{margin:4px 0 14px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
/* NOT display:flex. A flex container makes every CHILD a flex item, so a list
   item reading `You hold <strong>up to 6 quests</strong>.` became three items
   with a 12px gap between each, and broke across lines around its own bold.
   That held for 56 of the 81 list items in the document. The bullet is
   positioned instead, which leaves the item an ordinary block and its text
   ordinary inline text - the same pattern .ask-list already uses. */
.rl-li{position:relative;padding-left:17px;font-size:15px;line-height:1.7;color:var(--ink);text-wrap:pretty}
.rl-li::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;border-radius:50%;background:var(--bronze)}
/* The game's own wording, quoted. Deliberately unlike our prose. */
.rl-said{margin:0 0 14px;padding:14px 18px;border-left:2px solid var(--gold-core);background:rgba(36,21,18,.5);font:400 14.5px/1.7 var(--fbody);font-style:italic;color:var(--ink-dim);text-wrap:pretty}
.rl-said strong{font-style:normal;font-weight:600;color:var(--ink)}

/* Tables: hairlines, mono figures, no zebra. Scroll inside their own box so a
   three-column table never makes the page scroll sideways. */
/* A figure in the document: full measure of the column, its own frame, the
   caption in the same quiet voice as a table's header. width/height come from
   the file so the space is reserved before the image arrives. */
.rl-fig{margin:18px 0 20px;padding:0;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(15,7,5,.5)}
.rl-fig img{display:block;width:100%;height:auto}
.rl-fig figcaption{padding:10px 14px 11px;font-size:12.5px;line-height:1.55;color:var(--ink-dim);border-top:1px solid var(--line);text-wrap:pretty}
.rl-tw{overflow-x:auto;margin:0 0 16px;overscroll-behavior-x:contain}
.rl-t{width:100%;border-collapse:collapse;font-size:14.5px}
.rl-t th{text-align:left;padding:0 16px 10px 0;font:600 9.5px/1.4 var(--fbody);letter-spacing:.16em;text-transform:uppercase;color:#6E5C50;border-bottom:1px solid var(--line);white-space:nowrap}
.rl-t td{padding:11px 16px 11px 0;border-bottom:1px solid var(--line);line-height:1.55;color:var(--ink);vertical-align:top}
.rl-t tr:last-child td{border-bottom:0}
.rl-t .rl-k{font:600 13px/1.5 var(--fbody);color:var(--ink)}
.rl-t .rl-v{font:500 13.5px/1.5 var(--fmono);color:var(--gold)}
.rl-t code{font:500 13px/1 var(--fmono);color:var(--gold)}