/* BOOKER Method page (assets/method.js). Scoped to #view-method; uses style.css variables. */
#view-method .prose{max-width:860px}
#view-method .mx{overflow-wrap:break-word}
#view-method .mx h3{scroll-margin-top:70px}
#view-method .mx-hero{border-bottom:1px solid var(--rule-dk); padding-bottom:16px; margin-bottom:6px}
#view-method .mx-kicker{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700}
#view-method .mx-hero h2{border:0; padding:0; margin:2px 0 10px; font-size:22px}
#view-method .mx-big{font-size:16px; color:var(--ink); margin:0 0 10px; line-height:1.35}
#view-method .mx-big b{color:var(--accent)}

/* acronym */
#view-method .mx-acro{list-style:none; padding:0; margin:14px 0 0; display:flex; flex-wrap:wrap; gap:4px 18px}
#view-method .mx-acro li{margin:0}
#view-method .mx-acro-row{display:flex; align-items:baseline; text-decoration:none; color:inherit}
#view-method .mx-letter{font-size:26px; font-weight:700; color:var(--accent); line-height:1}
#view-method .mx-word{font-size:16px; color:var(--ink-2)}
#view-method .mx-acro-row:hover .mx-word{color:var(--ink)}

/* pipeline */
#view-method .mx-pipe{list-style:none; padding:0; margin:8px 0 4px; display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; counter-reset:none}
#view-method .mx-pipe li{margin:0}
#view-method .mx-pipe a{display:flex; gap:8px; align-items:center; height:100%; box-sizing:border-box; padding:8px 0; text-decoration:none;
  color:inherit; border-top:2px solid var(--ink)}
#view-method .mx-pipe a:hover{border-color:var(--rule-dk); background:var(--panel-2)}
#view-method .mx-n{flex:0 0 22px; height:22px; line-height:22px; text-align:center; font-size:12px; font-weight:800;
  background:var(--ink); color:var(--panel)}
#view-method .mx-st{display:flex; flex-direction:column; gap:3px; min-width:0}
#view-method .mx-st b{font-size:13px; color:var(--ink)}
#view-method .mx-st span{font-size:12.5px; color:var(--muted); line-height:1.35}

/* collapsibles */
#view-method .mx-d{border:1px solid var(--rule); background:var(--paper); margin:8px 0 12px; padding:0 12px}
#view-method .mx-d summary{cursor:pointer; padding:9px 0; font-weight:700; font-size:13px; color:var(--ink-2); list-style:none}
#view-method .mx-d summary::-webkit-details-marker{display:none}
#view-method .mx-d summary::before{content:"+"; display:inline-block; width:16px; color:var(--accent); font-weight:800}
#view-method .mx-d[open] summary::before{content:"\2212"}
#view-method .mx-d[open]{padding-bottom:6px}
#view-method .mx-d ul{padding-left:18px; margin:0 0 6px}
#view-method .mx-d li{margin:4px 0}

/* game-rating callout */
#view-method .mx-callout{border-left:3px solid var(--accent); background:var(--panel-2); padding:10px 14px; margin:6px 0 10px}
#view-method .mx-callout p{margin:6px 0}
#view-method .mx-tip{font-size:13px}
#view-method .mx-chip{display:inline-block; padding:1px 7px; margin:2px 1px; font-size:12px; font-weight:700; color:#fff; white-space:nowrap}
#view-method .mx-r{background:var(--r-red)} #view-method .mx-o{background:var(--r-org)}
#view-method .mx-g{background:var(--r-grn)} #view-method .mx-bg{background:var(--r-brt)}
#view-method .mx-b{background:var(--r-blu)}

/* scoreboard */
#view-method .mx-board{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:8px; margin:10px 0 12px}
#view-method .mx-card{border-top:2px solid var(--ink); padding:8px 0}
#view-method .mx-card .k{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700}
#view-method .mx-card .v{font-size:22px; font-weight:700; font-family:var(--mono); color:var(--ink); margin:4px 0 2px; font-variant-numeric:tabular-nums}
#view-method .mx-card .v small{font-size:12px; font-weight:400; color:var(--muted)}
#view-method .mx-card .s{font-size:12px; color:var(--muted); line-height:1.35}

/* glossary */
#view-method .mx-gloss{margin:6px 0 0; display:grid; grid-template-columns:170px 1fr; border-top:1px solid var(--rule)}
#view-method .mx-gloss dt,#view-method .mx-gloss dd{margin:0; padding:8px 0; border-bottom:1px solid var(--rule); font-size:13.5px}
#view-method .mx-gloss dt{font-weight:700; color:var(--ink); padding-right:12px}
#view-method .mx-gloss dd{color:var(--ink-2)}

#view-method .mx-src{color:var(--muted-2); font-size:12.5px; margin-top:22px}

@media (max-width:640px){
  #view-method .prose{padding:16px 14px}
  #view-method .mx-pipe{grid-template-columns:1fr}
  #view-method .mx-acro-row{grid-template-columns:28px 1fr; row-gap:2px}
  #view-method .mx-line{grid-column:2}
  #view-method .mx-gloss{grid-template-columns:1fr}
  #view-method .mx-gloss dt{border-bottom:0; padding-bottom:0}
  #view-method .mx-gloss dd{padding-top:2px}
}