/* C12W-0734 slice 2: the portal renderer's styles (portal-view.js; boards CX2 and CX3, the dark night surface, PO-6).
   Colors, spacing, radius and shadows are tokens only; type sizes follow site.css. No motion: the dashboard has no
   ambient effect, so nothing here needs the three off-switches beyond what site.css already applies. */
.pv { display: grid; gap: var(--space-6); font-variant-numeric: tabular-nums; }
.pv-head { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) { .pv-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pv-head-main { display: grid; gap: var(--space-2); }
.pv-eyebrow { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-blue-light); }
.pv-client { margin: 0; font-size: 1.0625rem; color: var(--snow-300); }
.pv-title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 5vw, 3rem); line-height: 0.98; text-transform: uppercase; letter-spacing: 0.006em; overflow-wrap: anywhere; }
.pv-stamp { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--snow-300); }
.pv-closed { margin: 0; width: fit-content; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--status-neutral-bg); color: var(--status-neutral-ink); font-size: 0.8125rem; font-weight: 600; }
.pv-welcome { padding: var(--space-5); display: grid; gap: var(--space-3); }
.pv-welcome-text { margin: 0; font-size: 1.125rem; line-height: 1.55; }

.pv-nav { border-top: 1px solid var(--glass-hairline); border-bottom: 1px solid var(--glass-hairline); }
.pv-nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); font-size: 0.9375rem; font-weight: 600; }
.pv-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--snow-100); text-decoration: none; }
.pv-nav a:hover, .pv-nav a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--brand-blue-light); }

.pv-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 960px) {
  .pv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pv-grid > #pv-overview, .pv-grid > #pv-timeline, .pv-grid > .pv-changed:has(> #pv-overview), .pv-grid > .pv-changed:has(> #pv-timeline) { grid-column: 1 / -1; }
}
.pv-card { padding: var(--space-5); display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
@media (min-width: 960px) { .pv-card { padding: var(--space-6); } }
.pv-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.pv-h2 { margin: 0; font-size: 1.3125rem; line-height: 1.3; font-weight: 600; }
.pv-h3 { margin: 0; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.pv-note { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--snow-300); overflow-wrap: anywhere; }
.pv-line { margin: 0; font-size: 0.9375rem; line-height: 1.55; overflow-wrap: anywhere; }
.pv-strong { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
.pv-label { margin: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--snow-300); }
.pv-ok { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--teal-300); }
.pv-risk { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--ruby-300); }
.pv-fresh { margin: 0; font-size: 0.8125rem; color: var(--snow-300); }

.pv-cols { display: grid; gap: var(--space-5); }
@media (min-width: 720px) { .pv-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pv-col { display: grid; gap: var(--space-2); align-content: start; }
.pv-phase { margin: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.pv-num { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; line-height: 1; color: var(--brand-violet-light); }
.pv-phase-name { font-size: 1.375rem; font-weight: 700; }

.pv-legend { border-top: 1px solid var(--night-line); padding-top: var(--space-3); }
.pv-legend summary, .pv-more summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-size: 0.9375rem; font-weight: 600; }
.pv-legend dl { margin: var(--space-3) 0 0; display: grid; gap: var(--space-2) var(--space-4); font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 720px) { .pv-legend dl { grid-template-columns: max-content minmax(0, 1fr); } }
.pv-legend dd { margin: 0; color: var(--snow-300); }

.pv-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); }
@media (min-width: 720px) { .pv-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pv-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.pv-step { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); border: 1px solid var(--night-line-strong); border-radius: var(--radius-md); background: var(--night-800); min-width: 0; }
.pv-step.is-current { border-color: var(--brand-blue-light); background: var(--night-700); }
.pv-step.is-out { background: transparent; }
.pv-gate-rule { margin: 0; padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--glass-border); background: var(--glass-fill-strong); font-size: 0.9375rem; line-height: 1.55; }
.pv-gate-rule strong { color: var(--teal-300); }

.pv-list { margin: 0; padding: 0; list-style: none; display: grid; }
.pv-row { display: grid; gap: var(--space-1); padding: var(--space-3) 0; border-bottom: 1px solid var(--night-line); }
.pv-row:last-child { border-bottom: 0; }
.pv-row-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pv-dl { margin: 0; display: grid; gap: var(--space-1) var(--space-3); font-size: 0.9375rem; line-height: 1.5; }
@media (min-width: 480px) { .pv-dl { grid-template-columns: max-content minmax(0, 1fr); } }
.pv-dl dt { color: var(--snow-300); font-weight: 600; }
.pv-dl dd { margin: 0; overflow-wrap: anywhere; }
.pv-earlier { display: grid; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px solid var(--night-line); }
.pv-company { display: grid; gap: var(--space-1); padding-top: var(--space-3); border-top: 1px solid var(--night-line); }
.pv-company a { display: inline-flex; align-items: center; min-height: 44px; color: var(--snow-100); }

/* Admin preview only (CX17): a changed block is outlined; the client is never given an outline. */
.pv-changed { position: relative; outline: 2px dashed var(--volt-400); outline-offset: var(--space-2); border-radius: var(--radius-lg); min-width: 0; }
.pv-changed-tag { position: absolute; top: calc(-1 * var(--space-4)); right: var(--space-3); z-index: 1; padding: 0 var(--space-2); border: 1px solid var(--volt-400); border-radius: var(--radius-pill);
  background: var(--void-950); color: var(--volt-400); font-size: 0.6875rem; line-height: 1.6; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* C12W-0735 slice 1: CX1, "Your projects". One glass row per open project; columns from 720 px, stacked below (CX13). */
.pv-plist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.pv-prow { padding: var(--space-5); display: grid; gap: var(--space-4); align-items: start; min-width: 0; }
@media (min-width: 720px) { .pv-prow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pv-prow { padding: var(--space-6); grid-template-columns: 3fr 2fr 3fr 3fr 2fr; gap: var(--space-5); } }
.pv-prow-name { margin: 0; font-size: 1.375rem; font-weight: 700; overflow-wrap: anywhere; }
.pv-prow-name a { color: var(--snow-100); text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.pv-prow-name a:hover, .pv-prow-name a:focus-visible { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--brand-blue-light); }
.pv-closed-list { border-top: 1px solid var(--glass-hairline); padding-top: var(--space-2); }
.pv-closed-list a { color: var(--snow-100); }

/* C12W-0735 slice 2: What we need from you (CX6). Controls at least 44 px tall; the recorded line on the ok status colors. */
@media (min-width: 960px) { .pv-grid > #pv-needs { grid-column: 1 / -1; } }
.pv-need { gap: var(--space-2); }
.pv-choose { margin: 0; padding: 0; border: 0; display: grid; gap: var(--space-1); min-width: 0; }
.pv-choose legend { padding: 0; margin-bottom: var(--space-1); }
.pv-choice { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; font-size: 0.9375rem; line-height: 1.45; overflow-wrap: anywhere; cursor: pointer; }
.pv-choice input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: var(--brand-blue-light); }
.pv-field { font-size: 0.9375rem; font-weight: 600; }
.pv-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--night-line-strong); border-radius: var(--radius-sm);
  background: var(--night-900); color: var(--snow-100); font: inherit; font-size: 0.9375rem; line-height: 1.5; resize: vertical; }
.pv-input:focus, .pv-choice input:focus-visible { outline: 2px solid var(--brand-blue-light); outline-offset: 1px; }
.pv-actions { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pv-actions .btn { min-height: 44px; }
.pv-alert { margin: 0; font-size: 0.9375rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.pv-alert:not(:empty) { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-risk-bg); color: var(--status-risk-ink); }
.pv-recorded { display: grid; gap: var(--space-2); }
.pv-recorded-head { margin: 0; width: fit-content; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--status-ok-bg); color: var(--status-ok-ink);
  font-size: 0.9375rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.pv-recorded:focus, .pv-alert:focus, .pv-need .pv-line:focus { outline: 2px solid var(--brand-blue-light); outline-offset: var(--space-1); }