/* New Players: the three-path fork, the route, refreshers and the controls table. Loaded on that page only.
   The path cards, the route's chapters and "Read it anyway" are pressable, so they wear bone frames. */

.mm-np-fork{margin:clamp(8px,2vw,18px) 0 clamp(36px,6vw,64px)}
.mm-np-fork > .mm-eyebrow{margin:0 0 14px}
.mm-np-paths{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* A spectrum under the three: the game on one end, the world on the other. */
.mm-np-paths::after{content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:1px;background:linear-gradient(90deg,var(--mm-steel),var(--mm-brass) 50%,var(--mm-vitae));opacity:.55}
.mm-np-path{--tone:var(--mm-brass);position:relative;display:grid;align-content:start;gap:8px;padding:22px 22px 20px;border:2px solid rgba(242,235,225,.7);border-radius:2px;background:var(--ink-2);color:var(--mm-ash);text-decoration:none;cursor:pointer;
  transition:border-color var(--mm-quick) var(--mm-ease),background-color var(--mm-quick) var(--mm-ease),opacity var(--mm-slow) var(--mm-ease),box-shadow var(--mm-quick) var(--mm-ease)}
.mm-np-path.is-fivem{--tone:var(--mm-steel)}
.mm-np-path.is-wod{--tone:var(--mm-vitae)}
.mm-np-path::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--tone);opacity:.6;transition:opacity var(--mm-slow) var(--mm-ease)}
.mm-np-glyph{width:40px;height:40px;color:var(--tone)}
.mm-np-glyph svg{width:100%;height:100%}
.mm-np-path b{font:var(--display-wght) calc(20px * var(--display-scale))/1.15 var(--display);letter-spacing:0;color:var(--mm-ink)}
.mm-np-path > span:last-child{font-size:15px;line-height:1.55}
.mm-np-path:hover{border-color:var(--bone);background:#221c20}
.mm-np-path:hover::before{opacity:1}
.mm-np-path:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.mm-np-path.is-on{border-color:var(--bone);box-shadow:inset 0 0 0 2px var(--bone);background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 14%,var(--ink-2)),var(--ink-2) 70%)}
.mm-np-path.is-on::before{opacity:1}
.mm-np[data-path]:not([data-path=""]) .mm-np-path:not(.is-on){opacity:.62}
.mm-np[data-path]:not([data-path=""]) .mm-np-path:not(.is-on):hover{opacity:1}

.mm-np-route{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:34px;animation:mm-np-in var(--mm-slow) var(--mm-ease)}
.mm-np-route[hidden]{display:none}
.mm-np-route .mm-eyebrow{margin:0}
.mm-np-route ol{display:flex;flex-wrap:wrap;gap:6px 0;margin:0;padding:0;list-style:none;counter-reset:np}
.mm-np-route li{display:flex;align-items:center;counter-increment:np}
.mm-np-route li + li::before{content:"";width:16px;height:1px;margin:0 6px;background:var(--mm-brass-line)}
.mm-np-route a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border:2px solid rgba(242,235,225,.7);border-radius:2px;font:700 15px/1.2 var(--mm-ui);color:var(--mm-ink);text-decoration:none;transition:border-color var(--mm-quick),background-color var(--mm-quick),color var(--mm-quick)}
.mm-np-route a::before{content:counter(np) "\00a0";color:var(--mm-brass);font-variant-numeric:lining-nums}
.mm-np-route a:hover{border-color:var(--bone);background:var(--bone);color:var(--ink)}
.mm-np-route a:hover::before{color:var(--ink)}
.mm-np-route li.is-brief a{color:var(--mm-ash);border-style:dashed}

/* The chapters. Path-only paragraphs stay hidden until their path is chosen. */
.mm-np-body{transition:opacity .2s var(--mm-ease)}
.mm-np-body.is-switching{opacity:.15}
.mm-np-ch{margin:0}
.mm-np-ch + .mm-np-ch{margin-top:clamp(40px,6vw,64px)}
[class*="mm-np-for-"]{display:none;padding:10px 14px;border-left:2px solid var(--mm-brass);background:var(--mm-brass-wash);font-style:italic;color:var(--mm-ink)}
.mm-np[data-path="fivem"] .mm-np-for-fivem,.mm-np[data-path="both"] .mm-np-for-both,.mm-np[data-path="wod"] .mm-np-for-wod{display:block}

/* Refreshers: a chapter this reader probably knows shows its heading and opening line, and folds the rest. */
.mm-np-brief{display:none!important}
.mm-np-ch.is-brief:not(.is-opened) .mm-np-brief{display:flex!important;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 12px}
.mm-np-ch.is-brief:not(.is-opened) > *:not(h2):not(.mm-np-brief):not(.is-style-mm-lede){display:none}
.mm-np-ch.is-brief:not(.is-opened) > h2{opacity:.8}
.mm-np-brief-tag{font:800 11px/1 var(--mm-ui);letter-spacing:.18em;text-transform:uppercase;color:var(--mm-smoke)}
.mm-np-open{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border:2px solid var(--bone);border-radius:2px;background:none;cursor:pointer;font:700 15px/1.2 var(--mm-ui);color:var(--bone);transition:background-color var(--mm-quick),color var(--mm-quick)}
.mm-np-open:hover{background:var(--bone);color:var(--ink)}
.mm-np-ch.is-opened > *{animation:mm-np-in var(--mm-slow) var(--mm-ease)}

/* The controls table. */
.mm-ctl{list-style:none!important;margin:1.2em 0 1.6em!important;padding:0!important;border-top:1px solid var(--page-rule)}
.mm-ctl-row{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:2px 20px;align-items:baseline;margin:0!important;padding:12px 0!important;border-bottom:1px solid var(--page-rule)}
.mm-ctl-row::before{display:none!important}
.mm-ctl-keys{grid-row:span 2;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mm-ctl-keys .mm-key{font-size:13px;padding:3px 8px}
.mm-ctl-or{font:italic 400 13px/1 var(--mm-text);color:var(--mm-smoke)}
.mm-ctl-name{font:700 13px/1.5 var(--mm-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--mm-ink)}
.mm-ctl-what{color:var(--mm-ash);font-size:15.5px;line-height:1.5}
.mm-np-admin{padding:10px 14px;box-shadow:inset 3px 0 0 var(--mm-vitae);background:var(--mm-velvet);font-size:14px;color:var(--mm-ash)}

@keyframes mm-np-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .mm-np-paths{grid-template-columns:minmax(0,1fr)}
  .mm-np-paths::after{display:none}
  .mm-np-path{grid-template-columns:40px minmax(0,1fr);column-gap:16px;padding:16px 16px 15px}
  .mm-np-glyph{grid-row:span 2;width:34px;height:34px}
  .mm-np-path > span:last-child{grid-column:2}
}
@media (max-width:560px){
  .mm-ctl-row{grid-template-columns:minmax(0,1fr)}
  .mm-ctl-keys{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .mm-np-path,.mm-np-body{transition:none}
  .mm-np-route,.mm-np-ch.is-opened > *{animation:none}
}