/* WO-MAPMOG-PORT-005: Info (help) full view. --v-* tokens and full-view.css parts only.
   Live lane batch2 (founder: "UI quality degrades when maximized ... look at how neatly
   the themes are presented in minimized view ... the second it expands, we lose those nice
   UI elements"): the big view now uses the SAME look as the small "About MapMog" card --
   the .pc-rl numbered rule list, Warned/Removed .pc-chip pills, pill legal links and a
   .pc-cred map-data row -- laid out as a grid of rounded cards (same recipe as
   full-settings.css's .pc-fs-main), never one long stretched column of plain text rows. */
.pi-body { flex-direction: row; }
.pi-panels { flex: 1; min-width: 0; overflow: auto; padding: 18px 22px; }
.pi-panel[hidden] { display: none; }
.pi-cap { font: 700 12px/1.3 var(--v-font); letter-spacing: .08em; color: var(--v-mut); margin: 14px 0 8px; }
.pi-cap:first-child { margin-top: 0; }
.pi-ol { margin: 0 0 12px; padding-left: 22px; color: var(--v-ink); font: 500 15px/1.6 var(--v-font); }
.pi-note { margin: 0 0 10px; color: var(--v-ink); font: 500 15px/1.5 var(--v-font); }
.pi-note:last-child { margin-bottom: 0; }
.pi-links { display: flex; gap: 10px; margin: 0; flex-wrap: wrap; }
.pi-link { color: var(--v-acc); font: 600 14px/1.4 var(--v-font); }

/* Card shell: every section (or sub-block of one) looks like the small card's .pc-psec
   grown into a rounded box -- border + --v-surf2 fill + radius, same tokens as
   full-settings.css's .pc-fs-set / .pc-fs-danger. */
.pi-steps, .pi-faq, .pi-new, .pi-contact,
.pi-rule-block, .pi-enf-block, .pi-legal-block, .pi-credits {
  border: 1px solid var(--v-line); border-radius: 16px; background: var(--v-surf2);
  padding: 16px 18px; margin: 0 0 16px;
}
.pi-steps:last-child, .pi-faq:last-child, .pi-new:last-child, .pi-contact:last-child { margin-bottom: 0; }

/* The Rules pane is one <section> (the gate reads exactly one per pane) whose content is
   a grid of those cards, not a stretched column. */
.pi-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-content: start; }
.pi-rule-block, .pi-enf-block, .pi-legal-block, .pi-credits { margin: 0; }
.pi-credits, .pi-rules > .pi-cap { grid-column: 1 / -1; }
.pi-rules > .pi-cap { margin: 0 0 -6px; }

/* Numbered rules: same grid-of-list-items recipe as the small card's .pc-rl. */
.pi-rule-list { display: grid; gap: 6.5px; margin: 0; padding-left: 22px; font: 500 15px/1.45 var(--v-font); color: var(--v-ink); }

/* Warned/Removed chips: same pill recipe as the small card's .pc-chip. */
.pc-enf { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font: 500 15px/1.4 var(--v-font); color: var(--v-ink); }
.pc-chip { font: 700 13px/1.3 var(--v-font); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.pc-chip-warn { background: #fff1cc; color: #8a5a00; }
.pc-chip-bad { background: #ffe0dc; color: #b3261e; }

/* Legal links: pill buttons, same recipe as the small card's .pc-legal-footer-link. */
.pi-pill {
  border: 1px solid var(--v-line); border-radius: 999px; padding: 5px 14px;
  text-decoration: none;
}

/* Map credit row: same recipe as the small card's .pc-cred. */
.pc-cred { display: flex; gap: 10px; align-items: flex-start; font: 500 15px/1.45 var(--v-font); color: var(--v-ink); flex-wrap: wrap; }

/* FAQ: tidy expandable cards (each its own rounded row), not a bordered-bottom stretched list. */
.pi-faq { display: flex; flex-direction: column; gap: 10px; }
.pi-qa { border: 1px solid var(--v-line); border-radius: 12px; background: var(--v-surf); overflow: hidden; }
.pi-q {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; text-align: left;
  background: transparent; border: 0; color: var(--v-ink); font: 600 15px/1.4 var(--v-font); cursor: pointer;
}
.pi-q::after { content: "+"; margin-left: auto; color: var(--v-mut); font-weight: 700; }
.pi-q[aria-expanded="true"] { color: var(--v-acc); }
.pi-q[aria-expanded="true"]::after { content: "\2212"; color: var(--v-acc); }
.pi-a { padding: 0 14px 14px; color: var(--v-ink); font: 500 14px/1.5 var(--v-font); }
.pi-a[hidden] { display: none; }

@media (max-width: 600px) {
  .pi-body { flex-direction: column; }
  .pi-tabs.pc-full-rail {
    flex-direction: row; flex-wrap: wrap; min-width: 0; flex: none; overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--v-line); padding: 10px 12px;
  }
  .pi-tab { flex: none; white-space: nowrap; padding: 8px 10px; }
  .pi-panels { padding: 14px 16px; width: 100%; box-sizing: border-box; }
  .pi-note, .pi-link { overflow-wrap: anywhere; }
  .pi-rules { grid-template-columns: 1fr; }
}
.pi-panel + .pi-panel { margin-top: 22px; }