/* /create/ only: the head (the heading with "Randomize" beside it, or under it on a phone),
   the summary's "Using another MUD client?" and its buttons, "Start over"'s landing, and on a
   desktop the pane under the summary that shows a card's More. The rest of the builder's look is
   in people.css. */
.c-title{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;margin-bottom:12px}
.c-title h1{margin:0}
.js .c-random.js-only{display:inline-flex;align-items:center;gap:10px;min-height:44px}
.i-dice{flex:none;width:22px;height:22px}
.c-said{font:italic 400 19px/1.4 var(--world);color:var(--text);margin:0;max-width:34em}
.c-said:not(:empty){margin:0 0 10px}
.c-other{margin:0}
.c-client{margin:0 0 6px}
.c-client summary{cursor:pointer;color:var(--gold);font-size:var(--t-small);padding:8px 0;min-height:44px;display:flex;align-items:center;list-style:none}
.c-client summary::-webkit-details-marker{display:none}
.c-client summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.c-client[open] summary::after{transform:rotate(225deg) translateY(-1px)}
.c-client > .small{margin:2px 0 6px}
.c-tools{display:flex;flex-wrap:wrap;gap:0 22px;margin:0}
.c-tools .c-reset{display:inline-flex;align-items:center;gap:7px}
.c-tools .i-dice{width:18px;height:18px}
/* "Start over" brings the first question to the top (js/builder.js), its heading focused */
.step{scroll-margin-top:20px}
.step h2[tabindex]:focus:not(:focus-visible){outline:none}
/* A card's More: the disclosure in the card, except on a desktop with scripts, where the button
   beside it shows the same text in the pane under the summary. */
.js .o-more-btn.js-only,.js .c-detail.js-only{display:none}
.o-more-btn{align-self:flex-start;margin:0 14px 10px 46px;padding:8px 0;min-height:44px;background:none;border:0;cursor:pointer;
  color:var(--gold);font:400 15px/1.2 var(--plain);align-items:center;text-align:left}
.o-more-btn::after{content:"";width:6px;height:6px;margin-left:10px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.o-more-btn.on{color:#F3E3BC}
.o-more-btn:has(+ .o-more + .o-figs){margin-bottom:0}
.c-detail{background:var(--pitch);border:1px solid var(--rule);padding:16px 22px 6px;
  min-height:6em;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
/* only the hint: one quiet line, no empty box */
.c-detail:has(> .c-detail-hint:not([hidden])){min-height:0}
.c-detail h3{font:400 24px/1.2 var(--world);color:var(--text);margin:0 0 6px}
.c-detail-text p{font:400 18px/1.55 var(--world);margin:0 0 12px}
.c-detail-hint{font-size:15px;line-height:1.45;color:var(--dim);margin:0 0 10px}
@media (min-width:861px){
  /* the summary keeps its height (its button in view); the pane takes what is left and scrolls in itself */
  .js .c-aside{display:flex;flex-direction:column;gap:12px}
  .js .c-summary{flex:none}
  .js .c-detail.js-only{display:block;flex:0 1 auto}
  .js .o-more-btn.js-only{display:flex}
  .js .o-more{display:none}
}
/* Without scripts the mode question still works: with Quick Start ticked, the four questions only
   Full Customization asks are not shown (with scripts, js/builder.js hides them itself). */
html:not(.js) .c-form:has(#o-mode-novice:checked) .step[data-advanced]{display:none}
.c-nojs{margin:0 0 10px;max-width:40em}
/* the game's own words in a line of copy ("B) Build") stay on one line */
.c-aside .small code{white-space:nowrap}