/* period-home.css — Accrual Periods analytics home (showView('periods')).
 * Owned by workbook-owner. Light theme; uses design tokens (var(--token)) per
 * tokens.css. Prefix: .ph-*  ·  Loaded after chat.css. */

/* ── Page shell (mirrors .orgchart-page / .access-page display pattern) ── */
/* White canvas to match the in-workbook overview dashboard (not the tan page canvas). */
.period-page { flex: 1; display: none; flex-direction: column; overflow: hidden; background: var(--color-surface-0); }
.period-page.active { display: flex; }
.ph-scroll { flex: 1; overflow: auto; padding: var(--space-9) var(--space-11) var(--space-13); }
.ph-wrap { max-width: 1180px; margin: 0 auto; }

/* ── Header ── */
.ph-head { margin-bottom: var(--space-8); }
.ph-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .5px;
  text-transform: uppercase; color: var(--color-brand-500); margin-bottom: var(--space-2); }
.ph-title { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--color-text-strong);
  line-height: var(--leading-tight); }
.ph-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }

/* ── Section scaffolding ── */
.ph-section { margin-top: var(--space-10); }
.ph-section-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-5); }
.ph-section-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ph-section-note { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ph-card { background: var(--color-surface-0); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-subtle); }

/* ── Portfolio KPI strip ── */
.ph-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.ph-kpi { padding: var(--space-7) var(--space-7) var(--space-6); }
.ph-kpi-lbl { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.ph-kpi-val { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-text-strong);
  line-height: var(--leading-solid); margin-top: var(--space-3); letter-spacing: -.5px; }
.ph-kpi-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.ph-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs);
  font-weight: var(--weight-semibold); padding: 1px var(--space-2); border-radius: var(--radius-pill); }
.ph-delta.up   { color: var(--color-success); background: var(--bg-success); }
.ph-delta.down { color: var(--color-danger);  background: var(--bg-danger); }
.ph-delta.flat { color: var(--color-text-subtle); background: var(--color-surface-1); }
.ph-delta-note { font-size: var(--text-xs2); color: var(--color-text-subtle); }

/* ── Ongoing-period debrief hero (top of page; whole card = shortcut to live workbook) ── */
.ph-hero { padding: var(--space-7) var(--space-8); cursor: pointer;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.ph-hero:hover { box-shadow: var(--shadow-raised); border-color: var(--color-border-strong); transform: translateY(-1px); }
.ph-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-5); }
.ph-hero-id { display: flex; flex-direction: column; gap: var(--space-2); }
.ph-hero-month { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-text-strong); letter-spacing: -.3px; }
.ph-hero-sub { font-size: var(--text-xs); color: var(--color-text-subtle); }
.ph-hero-open { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap;
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-brand-500); }
.ph-hero:hover .ph-hero-open { text-decoration: underline; }
.ph-hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-7); }
.ph-hero-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.ph-hero-stat-lbl { font-size: var(--text-xs); color: var(--color-text-muted); font-weight: var(--weight-medium); }
.ph-hero-stat-val { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--color-text-strong);
  line-height: var(--leading-solid); letter-spacing: -.5px; }
.ph-hero-stat-foot { display: flex; align-items: center; gap: var(--space-2); }
.ph-hero-foot { display: flex; align-items: center; gap: var(--space-5); margin-top: var(--space-7); }
.ph-hero-foot .ph-mix { flex: 1; height: 12px; }

/* ── Two trend charts side by side ── */
.ph-charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }

/* ── Charts ── */
.ph-chart-card { padding: var(--space-7); }
.ph-chart-hd { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); }
.ph-chart-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ph-chart-legend { display: flex; gap: var(--space-5); font-size: var(--text-xs); color: var(--color-text-muted); }
.ph-leg { display: inline-flex; align-items: center; gap: var(--space-2); }
.ph-leg-swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.ph-leg-swatch.dash { background: repeating-linear-gradient(90deg, var(--color-warning) 0 4px, transparent 4px 7px); }
.ph-chart-wrap { position: relative; }

/* ── Period list ── */
.ph-periods { display: flex; flex-direction: column; gap: var(--space-3); }
.ph-period { display: grid; grid-template-columns: 184px 1fr repeat(4, 104px) 92px;
  align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-7);
  cursor: pointer; transition: box-shadow var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); }
.ph-period:hover { box-shadow: var(--shadow-raised); border-color: var(--color-border-strong); transform: translateY(-1px); }
.ph-period-id { display: flex; flex-direction: column; gap: var(--space-2); }
.ph-period-month { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ph-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-xs2); font-weight: var(--weight-semibold); padding: 2px var(--space-3);
  border-radius: var(--radius-pill); text-transform: uppercase; letter-spacing: .3px; }
.ph-badge.live   { color: var(--color-brand-500); background: var(--bg-info-strong); }
.ph-badge.closed { color: var(--color-text-muted); background: var(--color-surface-2); }
.ph-badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.ph-badge.live .ph-badge-dot { background: var(--color-brand-500); animation: ph-pulse 1.8s ease-in-out infinite; }
@keyframes ph-pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }

.ph-mix { display: flex; height: 10px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--color-surface-2); }
.ph-mix-seg { height: 100%; }
.ph-metric { display: flex; flex-direction: column; gap: 2px; }
.ph-metric-val { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ph-metric-lbl { font-size: var(--text-xs2); color: var(--color-text-subtle); }
.ph-metric-delta { font-size: var(--text-xs2); font-weight: var(--weight-semibold); }
.ph-metric-delta.up { color: var(--color-success); }
.ph-metric-delta.down { color: var(--color-danger); }

.ph-health { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
  font-weight: var(--weight-semibold); padding: 3px var(--space-3); border-radius: var(--radius-pill); justify-self: start; }
.ph-health.ontrack { color: var(--color-success); background: var(--bg-success); }
.ph-health.watch   { color: var(--color-warning); background: var(--bg-warning); }
.ph-health.risk    { color: var(--color-danger);  background: var(--bg-danger); }

/* ── Period-over-period detail ── */
.ph-detail-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-5); }
.ph-dcard { padding: var(--space-7); }
.ph-dcard-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text-strong); margin-bottom: var(--space-1); }
.ph-dcard-sub { font-size: var(--text-xs); color: var(--color-text-subtle); margin-bottom: var(--space-5); }

/* retro-style ranked rows (slowest vendors / owners / recurring blocked) */
.ph-rank { display: flex; flex-direction: column; gap: var(--space-4); }
.ph-rank-row { display: grid; grid-template-columns: 18px 1fr 56px; align-items: center; gap: var(--space-4); }
.ph-rank-n { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-subtle); text-align: center; }
.ph-rank-body { min-width: 0; }
.ph-rank-name { font-size: var(--text-sm); color: var(--color-text-strong); font-weight: var(--weight-medium);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-rank-meta { font-size: var(--text-xs2); color: var(--color-text-subtle); margin-top: 2px; }
.ph-rank-bar { height: 6px; border-radius: var(--radius-pill); background: var(--color-surface-2); margin-top: var(--space-3); overflow: hidden; }
.ph-rank-fill { height: 100%; border-radius: var(--radius-pill); background: var(--color-brand-500); }
.ph-rank-fill.warn { background: var(--color-warning); }
.ph-rank-fill.danger { background: var(--color-danger); }
.ph-rank-val { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); text-align: right; }

.ph-blocked-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-4);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-surface-1); }
.ph-blocked-row:last-child { border-bottom: none; }
.ph-blocked-po { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-strong); }
.ph-blocked-sup { font-size: var(--text-xs2); color: var(--color-text-subtle); margin-top: 2px; }
.ph-streak { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-danger);
  background: var(--bg-danger); padding: 2px var(--space-3); border-radius: var(--radius-pill); white-space: nowrap; }

/* team load vs speed scatter */
.ph-sc-legend { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.ph-sc-leg { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs);
  color: var(--color-text-muted); cursor: default; }
.ph-sc-leg:hover { color: var(--color-text-strong); }
.ph-sc-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ph-scatter-legend { font-size: var(--text-xs2); color: var(--color-text-subtle); margin-top: var(--space-3); }

/* tooltip shared by ph charts */
.ph-tip { position: absolute; pointer-events: none; background: var(--color-text-strong); color: var(--color-pure-white);
  font-size: var(--text-xs); border-radius: var(--radius-control); padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-raised); white-space: nowrap; z-index: 30; transform: translate(-50%, -100%); }
.ph-tip-row { display: flex; justify-content: space-between; gap: var(--space-5); }
.ph-tip-k { color: rgba(255,255,255,.7); }

/* ── Read-only closed-period banner (injected into #shellView) ── */
.ph-ro-banner { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-7);
  background: var(--bg-warning); border-bottom: 1px solid var(--bg-warning-strong); flex-shrink: 0; font-size: var(--text-sm); }
.ph-ro-ico { color: var(--color-warning); display: flex; }
.ph-ro-txt { color: var(--color-text); }
.ph-ro-txt b { color: var(--color-text-strong); }
.ph-ro-stats { color: var(--color-text-muted); font-size: var(--text-xs); }
.ph-ro-back { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2);
  border: 1px solid var(--color-border-strong); background: var(--color-surface-0); color: var(--color-text);
  font-size: var(--text-xs); font-weight: var(--weight-medium); padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control); cursor: pointer; }
.ph-ro-back:hover { background: var(--color-surface-1); border-color: var(--color-text-subtle); }
/* While viewing a closed period: freeze the live workbook's edit affordances */
body.ph-ro #fbar { opacity: .5; pointer-events: none; }
body.ph-ro #tbody { pointer-events: none; }

/* ── Breadcrumb period selector (leaf crumb → dropdown of periods) ── */
.bc-period { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; }
.bc-period-chev { color: var(--color-text-subtle); flex-shrink: 0; }
.bc-period:hover .bc-period-chev { color: var(--color-text); }
.bc-period-menu { position: fixed; z-index: 800; display: none; min-width: 226px;
  background: var(--color-surface-0); border: 1px solid var(--color-border); border-radius: var(--radius-card);
  box-shadow: var(--shadow-raised); padding: var(--space-1); font-size: var(--text-sm); }
.bc-period-menu.open { display: block; }
.bc-pm-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control); cursor: pointer; color: var(--color-text-strong); }
.bc-pm-item:hover { background: var(--color-surface-2); }
.bc-pm-item.on { color: var(--color-brand-500); font-weight: var(--weight-semibold); }
.bc-pm-check { width: 12px; flex-shrink: 0; color: var(--color-brand-500); font-size: var(--text-xs); }
.bc-pm-label { flex: 1; white-space: nowrap; }
.bc-pm-live { font-size: var(--text-xs2); font-weight: var(--weight-semibold); text-transform: uppercase;
  letter-spacing: .3px; color: var(--color-brand-500); background: var(--bg-info-strong);
  padding: 1px var(--space-3); border-radius: var(--radius-pill); }