/* Styles for the GitHub Pages site (landing, docs, planner chrome). Builds on app.css tokens. */
.site { max-width: 1100px; margin: 0 auto; padding: 24px 16px 60px; }
/* Combat-log pages opt into a full-browser-width, 150%-scaled layout so the dense
   per-encounter tables and the combat review read comfortably on big screens. */
.site.wide-2x { max-width: none; zoom: 1.5; }
.hero2 { display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 20px 0 10px; }
.herologo { width: 120px; height: 120px; }
.hero2 h1 { font-family: var(--display); color: var(--gold); letter-spacing: 2px; font-size: 40px; margin: 0 0 6px; }
.lead { font-size: 17px; max-width: 60ch; margin: 0 0 14px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.cta .btn { padding: 10px 18px; font-size: 15px; }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; }
.scard { border: 1px solid var(--frame); border-radius: 10px; padding: 16px 18px; background: linear-gradient(180deg, var(--card-a), var(--card-b)); }
.scard h3 { font-family: var(--display); letter-spacing: .6px; margin: 0 0 8px; color: var(--gold); font-size: 17px; }
.shots h2, .dl h2 { font-family: var(--display); color: var(--gold); letter-spacing: 1px; margin: 32px 0 14px; }
.shotgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.shotgrid img { width: 100%; border: 1px solid var(--frame); border-radius: 8px; display: block; }
.dlrow { display: flex; flex-wrap: wrap; gap: 10px; }
.sitefoot { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
/* planner page chrome */
.srvbar { max-width: 1100px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--line-soft); }
.srvbar .lbl { color: var(--muted); font-weight: 600; }
.plannerwrap { max-width: 1240px; margin: 0 auto; padding: 16px; }
.doc2 { max-width: 820px; } .doc2 h2 { font-family: var(--display); color: var(--gold); letter-spacing: .8px; margin: 26px 0 10px; }
.doc2 h3 { margin: 18px 0 6px; } .doc2 li { margin: 3px 0; }
.pagetitle { font-family: var(--display); color: var(--gold); letter-spacing: 1px; margin: 8px 0 14px; }
.pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.pcard { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: var(--panel2); }
@media (max-width: 900px) { .cards3, .shotgrid { grid-template-columns: 1fr; } .hero2 { grid-template-columns: 1fr; } .herologo { width: 84px; height: 84px; } }

/* Small breathing room around expandable information panels. */
details { margin-block:2px; }
details > summary { padding-block:2px; }
details[open] > summary { margin-bottom:2px; }

/* Daily-active-meters count in the top-right header (Pages site only). */
.topbar .dau {
  font-size: 12px; font-weight: 600; color: #4bbf87;
  white-space: nowrap; margin-right: 4px; letter-spacing: .2px;
}
@media (max-width: 640px) { .topbar .dau { display: none; } }


/* Parse (WCL-style percentile colours), shared with the combat review's player table. */
.parse{display:inline-block;min-width:2.4em;padding:1px 7px;border-radius:999px;font-weight:700;font-variant-numeric:tabular-nums;text-align:center;color:var(--q);border:1px solid color-mix(in srgb,var(--q) 55%,transparent);background:color-mix(in srgb,var(--q) 14%,transparent)}
.parse.provisional{opacity:.6;font-weight:600}
.q-grey{--q:#8a8f9c}.q-green{--q:#1eff00}.q-blue{--q:#3d8bff}.q-purple{--q:#b04cf2}.q-orange{--q:#ff8000}.q-pink{--q:#e268a8}.q-gold{--q:#e5cc80}.q-none{--q:#6b7080}