/* ASi Imperium, Production Readiness Review (/production-readiness-review)
   Uses the page frame from interactive-guides.css and the dark band from incident-response.css.
   No backdrop-filter; transitions on named properties only. */

.pr-areas { list-style: none; counter-reset: pr; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.pr-areas li { counter-increment: pr; position: relative; padding: 16px 18px 16px 58px; border: 1px solid var(--border); border-radius: 10px; background: var(--card-bg); display: flex; flex-direction: column; gap: 4px; }
.pr-areas li::before { content: counter(pr, decimal-leading-zero); position: absolute; left: 18px; top: 15px; font-family: var(--mono); font-size: .78rem; color: var(--accent-text); }
.pr-areas b { font-weight: 600; font-size: .95rem; }
.pr-areas span { font-size: .85rem; color: var(--text-muted); line-height: 1.5; }

.pr-verdict { border-left: 3px solid #F0B574; padding: 4px 0 4px 20px; margin: 0 0 26px; max-width: 780px; }
.pr-verdict-k { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .16em; color: #9FA3C4; margin: 0 0 6px; }
.pr-verdict-t { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.3; color: #fff; margin: 0 0 8px; }
.pr-verdict-s { color: #B9B4AA; line-height: 1.6; margin: 0; }

.pr-sev { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pr-chip { font: inherit; font-size: .85rem; cursor: pointer; border-radius: 999px; padding: 8px 14px; background: #211E19; border: 1px solid #36322B; color: #D9D4CA; display: inline-flex; gap: 8px; align-items: center; transition: border-color .2s, background-color .2s, color .2s; }
.pr-chip b { font-family: var(--mono); font-weight: 500; }
.pr-chip:hover { border-color: #C77B2E; }
.pr-chip.on { background: #2A241C; border-color: #F0B574; color: #fff; }
.pr-chip:focus-visible { outline: 2px solid #F0B574; outline-offset: 2px; }

.pr-card { background: #1C1A16; border: 1px solid #36322B; border-radius: 14px; overflow: hidden; }
.pr-row { border-top: 1px solid #36322B; }
.pr-row:first-child { border-top: 0; }
.pr-row[hidden] { display: none; }
.pr-row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr auto 18px; align-items: center; gap: 12px; padding: 16px 20px; color: #EDEAE4; transition: background-color .2s; }
.pr-row summary::-webkit-details-marker { display: none; }
.pr-row summary::after { content: "+"; font-family: var(--mono); color: #8A857C; text-align: right; }
.pr-row[open] summary::after { content: "\2212"; }
.pr-row summary:hover { background: #221F1A; }
.pr-row summary:focus-visible { outline: 2px solid #F0B574; outline-offset: -2px; }
.pr-n { font-family: var(--mono); font-size: .8rem; color: #8A857C; }
.pr-area { font-weight: 500; }
.pr-tag { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; border-radius: 999px; padding: 4px 10px; border: 1px solid; }
.pr-row p { margin: 0 20px 10px 76px; color: #C9C4BA; line-height: 1.6; font-size: .92rem; }
.pr-row p:last-child { margin-bottom: 18px; }
.pr-row p b { color: #fff; font-weight: 600; }

/* Severity colours, readable on the dark band */
.pr-crit { color: #FF8A80; border-color: #8C3B33; }
.pr-high { color: #FFB46B; border-color: #8A5A26; }
.pr-med  { color: #F2D16B; border-color: #7A6728; }
.pr-low  { color: #9FC7A8; border-color: #3E6249; }
.pr-chip.pr-crit.on { background: #3A1E1B; }
.pr-chip.pr-high.on { background: #3A2A18; }
.pr-chip.pr-med.on  { background: #343017; }
.pr-chip.pr-low.on  { background: #1E2E23; }

.pr-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; margin-top: 18px; }
.pr-plan, .pr-unknown { background: #1C1A16; border: 1px solid #36322B; border-radius: 14px; padding: 22px 24px; color: #C9C4BA; line-height: 1.6; font-size: .92rem; }
.pr-plan ol { margin: 0; padding-left: 20px; }
.pr-plan li { margin-bottom: 10px; }
.pr-plan li b { display: block; color: #fff; font-weight: 600; }
.pr-unknown ul { margin: 0 0 12px; padding-left: 18px; }
.pr-unknown li { margin-bottom: 8px; }
.pr-note { margin: 0; color: #9A958B; font-size: .85rem; }

.pr-after { margin-top: 18px; color: var(--text-muted); line-height: 1.6; max-width: 760px; }

@media (max-width: 600px) {
  .pr-row summary { grid-template-columns: 30px 1fr auto 14px; gap: 10px; padding: 14px 16px; }
  .pr-row p { margin-left: 16px; margin-right: 16px; }
}