/* ==========================================================================
   STEEL AGE — the Character Builder
   Loaded after steelage.css and built from it: the same bar, the same spread,
   the same leaf and rail. The plate, which on the chapter pages is a drawing
   out of the book, is here the character itself — the token and the figures
   the sheet will carry — on the book's dark page with its double gold rule.
   ========================================================================== */

:root{
  --rust:#8b3a1a;
  --steel:#4a5260;
  --line:rgba(154,122,58,.55);
  --line-soft:rgba(154,122,58,.3);
  --paper:#fbf7ee;
}

/* ------------------------------------------------------------ the spread */
main.builder .plate.record{flex:0 0 35%;min-width:300px;display:flex}
main.builder .leaf{margin:4.19vh 4.19vh 4.19vh 0;display:flex;flex-direction:column;padding-bottom:0}

/* the record: a page out of the book, as the Digital Play trailer is */
.record .page{
  position:relative;flex:1;min-width:0;margin:4.19vh 2.6vh 4.19vh 4.19vh;
  background:var(--brown);
}
.record .page::before,.record .page::after{
  content:"";position:absolute;pointer-events:none;border:1px solid var(--gold);
}
.record .page::before{inset:0}
.record .page::after{inset:7px;opacity:.55}
.record-inner{
  position:absolute;inset:14px;overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(10px,1.6vh,22px) clamp(12px,1.2vw,22px) clamp(14px,2vh,26px);
  color:#e9dcbd;font-size:clamp(12.5px,1.5vh,17px);line-height:1.45;
}

.token-wrap{display:flex;justify-content:center;margin:0 0 .6em}
#token{width:min(62%,30vh);aspect-ratio:1;height:auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.65))}

.rec-name{
  font-family:'Cinzel',serif;font-weight:700;text-align:center;
  font-size:clamp(17px,2.4vh,28px);line-height:1.12;letter-spacing:.06em;
  color:var(--gold-lit);text-shadow:0 1px 0 #000,0 0 16px rgba(199,167,102,.28);
}
.rec-name.unnamed{color:rgba(232,207,148,.45);font-weight:600}
.rec-line{
  text-align:center;font-style:italic;color:#c9b68c;margin-top:.25em;font-size:.95em;
}
.rec-rule{display:flex;align-items:center;gap:.7em;margin:.85em 0 .75em}
.rec-rule::before,.rec-rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.rec-rule i{font-style:normal;color:var(--gold);font-size:.8em}

.rec-attrs{display:grid;grid-template-columns:repeat(4,1fr);gap:.45em}
.rec-attr{
  text-align:center;padding:.35em .2em .4em;
  border:1px solid rgba(154,122,58,.55);background:rgba(255,233,176,.04);
}
.rec-attr span{display:block;font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rec-attr b{display:block;font-family:'Cinzel',serif;font-size:1.55em;line-height:1.15;color:var(--gold-lit)}
.rec-attr small{display:block;font-size:.85em;color:#c9b68c}
.rec-attr.raised b{color:#fff3cf;text-shadow:0 0 10px rgba(255,233,176,.45)}

.rec-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.45em;margin-top:.55em}
.rec-stat{padding:.3em .45em;border-bottom:1px solid rgba(154,122,58,.35)}
.rec-stat span{display:block;font-family:'Cinzel',serif;font-size:.6em;letter-spacing:.13em;text-transform:uppercase;color:var(--gold)}
.rec-stat b{font-family:'Cinzel',serif;font-weight:600;font-size:1.05em;color:#f2e3ba}

.rec-h{
  font-family:'Cinzel',serif;font-weight:600;font-size:.68em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:1em 0 .35em;
}
.rec-list{list-style:none}
.rec-list li{display:flex;justify-content:space-between;gap:.8em;padding:.12em 0;border-bottom:1px dotted rgba(154,122,58,.3)}
.rec-list li em{font-style:normal;font-family:'Cinzel',serif;font-size:.78em;letter-spacing:.08em;color:var(--gold-bright);white-space:nowrap}
.rec-empty{font-style:italic;color:rgba(201,182,140,.6)}
.rec-note{font-style:italic;color:#c9b68c;font-size:.92em}

/* ------------------------------------------------------------ the leaf */
.builder-leaf > *{flex-shrink:0}
/* a <nav>, so the site's bar rules (flex:1, space-evenly) are undone here */
.builder-leaf .steps{
  flex:none;justify-content:flex-start;min-width:0;
  display:flex;flex-wrap:wrap;align-items:flex-start;align-content:flex-start;gap:.15em .1em;margin:0 0 .9em;padding:0 0 .55em;
  border-bottom:1px solid var(--line-soft);
  font-family:'Cinzel',serif;
}
.steps button{
  appearance:none;border:0;background:none;cursor:pointer;
  display:flex;align-items:baseline;gap:.35em;padding:.3em .55em;line-height:1.3;
  font-family:'Cinzel',serif;font-size:.66em;letter-spacing:.12em;text-transform:uppercase;
  color:#8a7652;position:relative;
}
.steps button b{font-weight:700;color:#9a7a3a;font-size:1.08em}
.steps button.done b::after{content:" ◆";font-size:.6em;color:#5d7a4a;vertical-align:.25em}
.steps button[aria-current="step"]{color:#3a2a10}
.steps button[aria-current="step"]::after{
  content:"";position:absolute;left:12%;right:12%;bottom:-2px;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.steps button:disabled{cursor:default;opacity:.45}
.steps button:not(:disabled):hover{color:#3a2a10}
/* fixed by the Fate Roll: still visitable, quieter */
.steps button.locked{font-style:italic}
.steps button.locked.done b::after{color:#9a7a3a}

.builder-leaf h1 .num{color:var(--gold);margin-right:.35em}
.step-body{flex:1}
.leaf.railed.builder-leaf{font-size:clamp(13px,1.62vh,19px)}
/* the steps, head and foot span the leaf; inside the body the rail applies */
.leaf.railed.builder-leaf > :not(h1):not(.aside){max-width:none}
fieldset.lockset{border:0;margin:0;padding:0;min-width:0}
.step-body > :not(.aside){max-width:64.8%}
.step-body > .wide{max-width:none}
.step-body .aside{
  float:right;clear:right;width:30.3%;margin:.15em 0 1.15em 4.9%;
  font-size:.82em;line-height:1.46;color:var(--ink-soft);padding-left:1.15em;
  background-image:linear-gradient(180deg,rgba(154,122,58,0) 0%,rgba(154,122,58,.2) 4%,rgba(154,122,58,.7) 11%,
    rgba(154,122,58,.78) 45%,rgba(154,122,58,.55) 70%,rgba(154,122,58,.68) 88%,rgba(154,122,58,.18) 97%,rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:1px 100%;background-position:left top;
}
.step-body .aside h3{
  font-family:'Cinzel',serif;font-weight:600;font-size:.82em;letter-spacing:.13em;text-transform:uppercase;
  color:#7a5f2a;margin:0 0 .3em;padding-bottom:.28em;
  background-image:linear-gradient(90deg,rgba(154,122,58,0) 0%,rgba(154,122,58,.55) 6%,rgba(154,122,58,.8) 30%,
    rgba(154,122,58,.6) 70%,rgba(154,122,58,.18) 94%,rgba(154,122,58,0) 100%);
  background-repeat:no-repeat;background-size:100% 1px;background-position:left bottom;
}
.step-body .aside p{margin-top:.5em;text-align:left}
.step-body .aside p:first-of-type{margin-top:0}
.step-body .aside.voice p{font-style:italic}
.step-body .aside .src{display:block;margin-top:.45em;font-style:italic;text-align:right;font-size:.94em;color:#6d5322}
.step-body p{margin-top:.7em}
.step-body h2{margin-top:1.2em}

.aside table.board{width:100%;border-collapse:collapse;margin-top:.3em}
.aside table.board td{padding:.12em .2em;border-bottom:1px dotted var(--line-soft)}
.aside table.board td:first-child{font-family:'Cinzel',serif;font-weight:700;color:#6d5322;width:2.6em}
.aside table.board td:last-child{text-align:right;color:var(--ink-soft)}

/* the foot of each step: where you are and the way on */
.step-foot{
  position:sticky;bottom:0;clear:both;
  margin:1.3em calc(-1 * clamp(16px,2.3vw,48px)) 0;padding:.75em clamp(16px,2.3vw,48px) clamp(12px,2.2vh,28px);
  display:flex;align-items:center;gap:.9em;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(240,232,216,0),var(--parchment) 32%);
}
.step-foot .issues{flex:1;min-width:12em;font-style:italic;color:#7a3a1a;font-size:.92em;line-height:1.35}
.step-foot .issues.ok{color:#5d6a3a}
.leaf button.cta{font-size:.8em;padding:.62em 1.45em;cursor:pointer}
.leaf button.cta:disabled{opacity:.45;cursor:not-allowed}
.leaf label.cta{display:inline-block;cursor:pointer;font-family:'Cinzel',serif;font-weight:600;font-size:.8em;
  letter-spacing:.16em;text-transform:uppercase;padding:.62em 1.45em;line-height:1.2}
.leaf button.cta.quiet,.leaf a.cta.quiet,.leaf label.cta.quiet{background:transparent;color:#6d5322;border-color:rgba(154,122,58,.6);box-shadow:none}
.leaf button.cta.quiet:hover{color:#3a2a10;border-color:var(--gold)}

/* ------------------------------------------------------------ choices */
.choices{display:grid;gap:.7em;margin-top:.9em}
.choices.two{grid-template-columns:1fr 1fr}
.choice{
  appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;width:100%;
  display:block;padding:.75em .95em .8em;position:relative;
  background:rgba(255,255,255,.26);border:1px solid rgba(154,122,58,.5);
  transition:border-color .2s,background .2s,box-shadow .2s;
}
.choice:hover{border-color:var(--gold);background:rgba(255,255,255,.4)}
.choice[aria-pressed="true"]{
  background:rgba(255,255,255,.6);border-color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(154,122,58,.5),0 2px 10px rgba(122,96,52,.18);
}
.choice[aria-pressed="true"]::after{
  content:"◆";position:absolute;right:.7em;top:.55em;color:var(--gold);font-size:.85em;
}
.choice:disabled{cursor:not-allowed;opacity:.55}
.choice .t{
  display:block;font-family:'Cinzel',serif;font-weight:700;font-size:.92em;letter-spacing:.07em;
  text-transform:uppercase;color:#4a3714;padding-right:1.2em;
}
.choice .m{display:block;font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#9a7a3a;margin-top:.15em}
.choice .d{display:block;margin-top:.35em;font-size:.95em;line-height:1.42;color:var(--ink-soft)}
.choice .k{display:block;margin-top:.45em;font-size:.86em;color:#6d5322}
.choice .k b{font-family:'Cinzel',serif;font-weight:600;font-size:.82em;letter-spacing:.1em;text-transform:uppercase;color:#7a5f2a}

/* the toggles: skill picks, acumens, equipment choices */
.chips{display:flex;flex-wrap:wrap;gap:.45em;margin-top:.55em}
.chip{
  appearance:none;cursor:pointer;font:inherit;
  font-family:'Cinzel',serif;font-size:.72em;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.55em .9em;color:#5a4520;background:rgba(255,255,255,.28);border:1px solid rgba(154,122,58,.55);
}
.chip:hover{border-color:var(--gold);color:#3a2a10}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#2c1f13,var(--brown));color:#f4e6c2;border-color:var(--gold)}
.chip:disabled{cursor:not-allowed;opacity:.45}
.chip.fixed{cursor:default;background:rgba(154,122,58,.15)}

.field{display:block}
.label{
  display:block;font-family:'Cinzel',serif;font-size:.66em;letter-spacing:.16em;text-transform:uppercase;
  color:#7a5f2a;margin:1.1em 0 .35em;
}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1em;color:var(--ink);
  padding:.48em .7em;background:rgba(255,255,255,.4);
  border:1px solid rgba(154,122,58,.6);border-radius:0;outline:none;
}
.field textarea{min-height:4.6em;resize:vertical;line-height:1.4}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:rgba(255,255,255,.6)}
.field input::placeholder,.field textarea::placeholder{color:#9a8a70;font-style:italic}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#7a5f2a 50%),linear-gradient(135deg,#7a5f2a 50%,transparent 50%);
  background-position:calc(100% - 15px) 55%,calc(100% - 10px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2em}
.row{display:flex;gap:.8em;flex-wrap:wrap}
.row > .field{flex:1;min-width:9em}
.row > .field.narrow{flex:0 0 6em;min-width:6em}
.inline-actions{display:flex;gap:.6em;align-items:center;flex-wrap:wrap;margin-top:.6em}

/* ------------------------------------------------------------ point buy */
.purse{display:flex;align-items:center;gap:.9em;margin-top:.6em}
.purse .pips{display:flex;gap:4px}
.purse .pips i{width:.8em;height:.8em;transform:rotate(45deg);border:1px solid var(--gold);display:block}
.purse .pips i.on{background:var(--gold)}
.purse b{font-family:'Cinzel',serif;color:#4a3714;letter-spacing:.06em}
.attr-rows{margin-top:.6em}
.attr-row{
  display:grid;grid-template-columns:1fr auto auto;gap:.4em 1.1em;align-items:center;
  padding:.65em 0;border-bottom:1px solid var(--line-soft);
}
.attr-row .t{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--rust);font-size:.95em}
.attr-row .d{grid-column:1;font-size:.88em;color:var(--ink-soft);line-height:1.38}
.attr-row .stepper{grid-row:1 / span 2;grid-column:2;display:flex;align-items:center;gap:.4em}
.attr-row .score{
  min-width:7.4em;text-align:center;font-family:'Cinzel',serif;font-weight:700;font-size:1.05em;letter-spacing:.06em;color:#2c241b;
  border:1px solid var(--steel);background:var(--paper);padding:.32em .5em;
}
.attr-row.poor .score{color:#7a2a12;border-color:#7a2a12}
.rec-attr b.tier{font-size:.78em;letter-spacing:.05em}
.aside table.board th{font-family:'Cinzel',serif;font-size:.6em;letter-spacing:.12em;text-transform:uppercase;color:#7a5f2a;text-align:right;font-weight:600}
.aside table.board tr.common td{background:rgba(154,122,58,.1)}
.attr-row .mod{grid-row:1 / span 2;grid-column:3;text-align:center;min-width:5.6em}
.attr-row .mod b{display:block;font-family:'Cinzel',serif;font-size:1.25em;color:#2c241b;border:2px solid #1a1410;background:var(--paper);width:2.1em;margin:0 auto;padding:.02em 0}
.attr-row .mod small{display:block;font-family:'Cinzel',serif;font-size:.58em;letter-spacing:.14em;text-transform:uppercase;color:#7a5f2a;margin-top:.3em}
.step-btn{
  appearance:none;cursor:pointer;width:1.9em;height:1.9em;border:1px solid var(--gold);
  background:linear-gradient(180deg,#2c1f13,var(--brown));color:#f4e6c2;font:600 1em/1 'Cinzel',serif;
}
.step-btn:disabled{opacity:.3;cursor:not-allowed}

/* ------------------------------------------------------------ tables */
table.pick{width:100%;border-collapse:collapse;margin-top:.6em;font-size:.95em}
table.pick th{font-family:'Cinzel',serif;font-weight:600;font-size:.62em;letter-spacing:.14em;text-transform:uppercase;color:#7a5f2a;text-align:left;padding:.2em .5em;border-bottom:1px solid var(--line)}
table.pick td{padding:.42em .5em;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.pick tr.sel td{background:rgba(255,255,255,.55)}
table.pick tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
table.pick tr[data-act]{cursor:pointer}
table.pick tr[data-act]:hover td{background:rgba(255,255,255,.35)}
table.pick td b{font-family:'Cinzel',serif;font-size:.86em;letter-spacing:.08em;color:#4a3714}
table.pick .dim{color:#8a7a60;font-style:italic}

.skill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(13.5em,1fr));gap:.5em;margin-top:.7em}
.skill-grid .choice{padding:.55em .75em .6em}
.skill-grid .choice .t{font-size:.8em}
.skill-grid .choice .d{font-size:.86em;margin-top:.2em}

.grant{margin-top:1em;padding:.7em .9em .8em;border:1px solid var(--line);background:rgba(255,255,255,.22)}
.grant h3{font-family:'Cinzel',serif;font-weight:700;font-size:.85em;letter-spacing:.1em;text-transform:uppercase;color:var(--rust)}
.grant h3 small{font-weight:600;color:#9a7a3a;letter-spacing:.12em;margin-left:.6em}
.grant .domain{margin-top:.5em}
.grant .domain > span{font-family:'Cinzel',serif;font-size:.62em;letter-spacing:.16em;text-transform:uppercase;color:#7a5f2a}
.grant .chips{margin-top:.3em}
.grant ul{list-style:none;margin-top:.4em}
.grant li{padding:.2em 0;border-bottom:1px dotted var(--line-soft)}
.grant li b{font-family:'Cinzel',serif;font-size:.85em;letter-spacing:.06em;color:#4a3714}

/* ------------------------------------------------------------ dice */
.dice{display:flex;gap:.5em;align-items:center}
.die{
  width:2.2em;height:2.2em;display:inline-flex;align-items:center;justify-content:center;
  font-family:'Cinzel',serif;font-weight:700;font-size:1.15em;color:#f4e6c2;
  background:linear-gradient(180deg,#2c1f13,var(--brown));border:1px solid var(--gold);
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.die.rolling{animation:tumble .5s ease-out}
@keyframes tumble{0%{transform:rotate(-200deg) scale(.6);opacity:.2}70%{transform:rotate(12deg) scale(1.08)}100%{transform:none;opacity:1}}
.dice .sum{font-family:'Cinzel',serif;font-weight:700;font-size:1.4em;color:#4a3714;margin-left:.3em}

.fate-result{margin-top:1em;padding:1em 1.1em;border:1px solid var(--gold);background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(154,122,58,.35)}
.fate-result .t{font-family:'Cinzel',serif;font-weight:700;font-size:1.25em;letter-spacing:.07em;text-transform:uppercase;color:var(--rust)}
.fate-result .odds{font-family:'Cinzel',serif;font-size:.66em;letter-spacing:.16em;text-transform:uppercase;color:#9a7a3a;margin-left:.5em}
.warn{margin-top:.8em;padding:.55em .8em;border-left:3px solid var(--rust);background:rgba(139,58,26,.07);font-style:italic;color:#5a2a12}
.locked-note{margin:.2em 0 .8em;padding:.5em .8em;border-left:3px solid var(--gold);background:rgba(154,122,58,.1);font-style:italic;color:#5a4520}

/* ------------------------------------------------------------ the token */
.token-bench{display:grid;grid-template-columns:minmax(10em,15em) 1fr;gap:1.1em;align-items:start;margin-top:.6em}
.token-bench canvas{width:100%;height:auto;aspect-ratio:1;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,.35))}
.token-bench .controls{display:grid;grid-template-columns:repeat(auto-fill,minmax(10em,1fr));gap:.1em .8em}
.token-bench .controls .label{margin-top:.6em}

/* ------------------------------------------------------------ the sheet */
.takeaway{display:grid;grid-template-columns:repeat(auto-fit,minmax(14em,1fr));gap:.8em;margin-top:1em}
.takeaway .card{padding:.9em 1em 1em;border:1px solid var(--line);background:rgba(255,255,255,.3)}
.takeaway .card h3{font-family:'Cinzel',serif;font-weight:700;font-size:.9em;letter-spacing:.09em;text-transform:uppercase;color:var(--rust)}
.takeaway .card p{font-size:.92em;margin-top:.35em;color:var(--ink-soft);text-align:left;hyphens:none}
.takeaway .card .check{display:flex;gap:.45em;align-items:center;margin-top:.6em;font-size:.9em;color:#6d5322;font-style:italic}
.takeaway .card .inline-actions{margin-top:.75em}
.status{font-style:italic;color:#6d5322;font-size:.9em;margin-top:.5em;min-height:1.3em}

/* ------------------------------------------------------------ Play Tools */
.tool-list{list-style:none;margin-top:.9em}
.tool-list li{padding:.85em 0;border-bottom:1px dotted rgba(154,122,58,.42)}
.tool-list .what{font-family:'Cinzel',serif;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#4a3714}
.tool-list .what a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(154,122,58,.5)}
.tool-list .what a:hover{color:#3a2a10;border-color:var(--gold)}
.tool-list .when{float:right;font-family:'Cinzel',serif;font-size:.72em;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.tool-list .when.live{color:#5d7a4a}
.tool-list p{margin-top:.3em !important}

/* ------------------------------------------------------------ the phone bar
   The site's phone pages (css/phone.css) carry a short sticky bar with the
   contents behind a disclosure, because ten links will not fit in a row at
   390px. The builder is one page for every screen, so it carries that bar
   too, shown only where the phone pages would be. Copied from phone.css,
   scoped to .phonebar so it cannot touch the desktop bar. */
.phonebar{display:none}
.phonebar{
  position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,var(--brown-mid),var(--brown));
  border-bottom:1px solid var(--gold);box-shadow:0 2px 14px rgba(0,0,0,.55);
}
.phonebar .row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;gap:12px;flex-wrap:nowrap}
.phonebar .brand{flex:none;min-width:0;padding:0;display:block;text-decoration:none}
.phonebar .brand::after{display:none}
.phonebar .brand .mark{display:block;font-size:19px}
.phonebar .brand .sub{display:block;margin-top:5px;font-size:8.5px}
.phonebar details{position:relative}
.phonebar summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:.55em;padding:9px 12px;min-height:44px;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-bright);border:1px solid rgba(154,122,58,.55);
}
.phonebar summary::-webkit-details-marker{display:none}
.phonebar summary .glyph{font-size:9px;color:var(--gold)}
.phonebar details[open] summary{color:var(--gold-lit);border-color:var(--gold-bright)}
.phonebar nav{
  position:absolute;right:0;top:calc(100% + 9px);width:min(86vw,320px);
  display:grid;grid-template-columns:1fr 1fr;padding:6px;
  background:linear-gradient(180deg,#20160d,var(--brown));border:1px solid var(--gold);box-shadow:0 10px 34px rgba(0,0,0,.65);
}
.phonebar nav a{
  display:flex;align-items:center;justify-content:flex-start;min-height:44px;padding:8px 10px;
  font-family:'Cinzel',serif;font-size:10.5px;line-height:1.25;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-bright);text-decoration:none;white-space:normal;
}
.phonebar nav a + a::before,.phonebar nav a::after{display:none}
.phonebar nav a[aria-current="page"]{color:var(--gold-lit)}
.phonebar nav a[href="/get"]{grid-column:1 / -1;justify-content:center;color:#e8cf94;margin-top:4px;border-top:1px solid rgba(154,122,58,.45)}

/* ------------------------------------------------------------ narrow screens
   The builder is one page for every screen. Below 960px the spread stacks as
   the site's own pages do: the record becomes a band across the top, token
   beside the name, and the leaf runs on below it. */
@media (max-width:960px), (max-height:460px){
  body.tool .topbar{display:none}
  body.tool .phonebar{display:block}
  main.builder{flex-direction:column}
  /* the rail reads after the step, as the phone pages set their asides */
  .step-body{display:flex;flex-direction:column}
  .step-body > *{order:0}
  .step-body > .aside{order:1}
  main.builder .plate.record{flex:none;min-width:0;height:auto;max-height:none;padding:0}
  .record .page{margin:14px 14px 0}
  .record-inner{position:relative;inset:auto;overflow:visible;padding:16px 16px 14px}
  .token-wrap{float:left;width:30%;max-width:150px;margin:0 14px 6px 0}
  #token{width:100%}
  .rec-name,.rec-line{text-align:left}
  .rec-rule{clear:both}
  main.builder .leaf{margin:14px;overflow:visible}
  .step-body > :not(.aside){max-width:none}
  .step-body .aside{float:none;width:auto;margin:1.2em 0;padding:.15em 0 .2em 1.1em}
  .choices.two{grid-template-columns:1fr}
  .token-bench{grid-template-columns:1fr}
  .token-bench canvas{max-width:14em;margin:0 auto}
  .step-foot{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px}
  .attr-row{grid-template-columns:1fr auto}
  .attr-row .mod{grid-row:auto;grid-column:2}
  .attr-row .stepper{grid-row:auto;grid-column:1}
  .attr-row .d{grid-column:1 / -1}
}
@media (max-width:620px){
  /* on a phone the band above the steps holds the face and the figures; the
     rest is on the steps themselves, and on the sheet */
  .rec-more{display:none}
  .rec-attrs{grid-template-columns:repeat(4,1fr)}
  .rec-stats{grid-template-columns:repeat(2,1fr)}
  .steps button span{display:none}
}