/* The Playtest page. Open and quiet: sections are separated by fading rules, not boxes. */
#section-playtest.active { display: block; overflow-y: auto; background: var(--nj-smoke), var(--nj-bg); -webkit-overflow-scrolling: touch; }
.pt { color: var(--nj-text); font: 13px/1.55 var(--nj-font-body); padding: 22px 28px; padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); max-width: 1560px; margin: 0 auto; }
.pt * { box-sizing: border-box; }
.pt-top { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin-bottom: 8px; }
.pt-top h1 { display: none; }
.pt-sub { color: var(--nj-muted); font: italic 14px/1.4 var(--nj-font-display); }
.pt-grow { flex: 1 1 auto; }
.pt-controls { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; }
.pt button, .pt select, .pt input[type="date"] { font: 12.5px var(--nj-font-body); color: var(--nj-muted); background: transparent; border: 0; border-radius: 0; padding: 7px 12px; min-height: 36px; }
.pt select, .pt input[type="date"] { color: var(--nj-text); background: rgba(9, 11, 16, 0.55); box-shadow: inset 0 0 0 1px var(--nj-line-soft); color-scheme: dark; }
.pt button { cursor: pointer; position: relative; }
.pt button:hover { color: var(--nj-gold-light); }
.pt button:active { color: var(--nj-text-strong); background: var(--nj-gold-soft); }
.pt button:disabled { opacity: .4; cursor: default; }
.pt button:focus-visible, .pt select:focus-visible, .pt input:focus-visible { outline: 1px solid var(--nj-gold-light); outline-offset: 1px; }
.pt button[aria-pressed="true"] { color: var(--nj-gold-light); background: linear-gradient(180deg, transparent, var(--nj-gold-soft)); }
.pt button[aria-pressed="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--nj-hairline); }
.pt-field { display: inline-flex; align-items: center; gap: 6px; color: var(--nj-dim); font-size: 12px; margin: 0 6px; }
.pt-status { color: var(--nj-dim); font-size: 11.5px; margin-bottom: 18px; }
/* Headline figures: one engraved strip, divided by hairlines. */
.pt-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 30px; position: relative; padding: 16px 0; background: linear-gradient(90deg, transparent, rgba(38, 43, 55, 0.5) 15%, rgba(38, 43, 55, 0.5) 85%, transparent); }
.pt-kpis::before, .pt-kpis::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--nj-hairline); }
.pt-kpis::before { top: 0; } .pt-kpis::after { bottom: 0; }
.pt-kpi { padding: 2px 20px; min-width: 0; border-left: 1px solid var(--nj-line-soft); }
.pt-kpi:first-child { border-left: 0; }
.pt-kpi .l { font-size: 11.5px; color: var(--nj-muted); }
.pt-kpi .v { font: 400 30px/1.2 var(--nj-font-display); color: var(--nj-text-strong); margin: 3px 0 2px; font-variant-numeric: lining-nums tabular-nums; }
.pt-kpi .d { font-size: 11.5px; color: var(--nj-dim); line-height: 1.4; }
.pt-up { color: var(--nj-green) !important; }
.pt-down { color: var(--nj-ember-light) !important; }
.pt-grid { display: grid; gap: 14px 44px; margin-bottom: 32px; align-items: start; }
.pt-g21 { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.pt-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pt-card { min-width: 0; margin-bottom: 8px; }
.pt-card h2 { font: 500 18px/1.3 var(--nj-font-display); color: var(--nj-gold-light); padding-bottom: 7px; position: relative; }
.pt-card h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--nj-rule); }
.pt-card .hint { color: var(--nj-dim); font-size: 12px; margin: 7px 0 12px; }
.pt-card h3 { font: 500 14px/1.3 var(--nj-font-display); color: var(--nj-gold); margin: 20px 0 6px; }
.pt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pt table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pt th { text-align: left; color: var(--nj-dim); font-weight: 400; font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--nj-line); }
.pt td { padding: 8px; border-bottom: 1px solid var(--nj-line-soft); vertical-align: top; }
.pt td b { font-weight: 500; color: var(--nj-text-strong); }
.pt .n { text-align: right; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.pt-bar { height: 2px; background: linear-gradient(90deg, var(--nj-gold), rgba(185, 162, 108, .25)); margin-top: 6px; min-width: 2px; }
.pt-bar.sink { background: linear-gradient(90deg, var(--nj-ember-light), rgba(201, 116, 92, .2)); }
/* Status is a word in a color, not a badge. */
.pt-pill { font-size: 12px; color: var(--nj-muted); white-space: nowrap; }
.pt-pill.red { color: var(--nj-ember-light); }
.pt-pill.gold { color: var(--nj-gold-light); }
.pt-pill.green { color: var(--nj-green); }
.pt-empty { color: var(--nj-dim); font: italic 13px var(--nj-font-display); padding: 12px 2px; }
/* Funnel: quest-log rows with a fine progress line. */
.pt-step { display: grid; grid-template-columns: 24px minmax(0, 1fr) 46px 52px; gap: 8px; align-items: center; padding: 8px 10px 8px 4px; position: relative; }
.pt-step + .pt-step { border-top: 1px solid var(--nj-line-soft); }
.pt-step .i { color: var(--nj-dim); font: 12px var(--nj-font-display); text-align: center; font-variant-numeric: lining-nums; }
.pt-step .name { color: var(--nj-text); overflow-wrap: anywhere; font-size: 13px; }
.pt-step .name small { color: var(--nj-dim); font-size: 11.5px; margin-left: 8px; }
.pt-track { height: 2px; background: rgba(201, 178, 124, .09); margin-top: 7px; }
.pt-track i { display: block; height: 100%; background: linear-gradient(90deg, rgba(185, 162, 108, .45), var(--nj-gold-light)); }
.pt-step .drop { text-align: right; color: var(--nj-dim); font-variant-numeric: lining-nums tabular-nums; }
.pt-step.cliff { background: linear-gradient(90deg, transparent, var(--nj-ember-soft) 25%, var(--nj-ember-soft) 75%, transparent); }
.pt-step.cliff::before, .pt-step.cliff::after { content: ''; position: absolute; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 116, 92, .55), transparent); }
.pt-step.cliff::before { top: -1px; } .pt-step.cliff::after { bottom: 0; }
.pt-step.cliff .drop { color: var(--nj-ember-light); }
.pt-step.cliff .name { color: var(--nj-text-strong); }
.pt-step.cliff .pt-track i { background: linear-gradient(90deg, rgba(201, 116, 92, .4), var(--nj-ember-light)); }
.pt-more { margin-top: 6px; }
/* Findings: the highlighted row from a quest tracker. */
.pt-finding { padding: 11px 14px; margin-bottom: 10px; position: relative; background: linear-gradient(90deg, transparent, var(--nj-surface-2) 30%, var(--nj-surface-2) 80%, transparent); }
.pt-finding::before, .pt-finding::after { content: ''; position: absolute; left: 4%; right: 4%; height: 1px; background: var(--nj-hairline); opacity: .55; }
.pt-finding::before { top: 0; } .pt-finding::after { bottom: 0; }
.pt-finding.red::before, .pt-finding.red::after { background: linear-gradient(90deg, transparent, rgba(201, 116, 92, .7), transparent); opacity: 1; }
.pt-finding.blue::before, .pt-finding.blue::after { background: linear-gradient(90deg, transparent, rgba(139, 166, 196, .55), transparent); opacity: 1; }
.pt-finding h4 { font: 500 14px/1.35 var(--nj-font-display); margin-bottom: 4px; color: var(--nj-text-strong); }
.pt-finding p { color: var(--nj-text); font-size: 12.5px; }
.pt-finding small { color: var(--nj-dim); font-size: 11.5px; display: block; margin-top: 5px; line-height: 1.45; }
/* Map */
.pt-layers { display: flex; flex-wrap: wrap; gap: 0 2px; margin-bottom: 10px; }
.pt-layers .dot { width: 6px; height: 6px; transform: rotate(45deg); display: inline-block; margin-right: 8px; vertical-align: 1px; }
.pt-map { background: radial-gradient(ellipse at center, #141823, var(--nj-bg-deep)); box-shadow: inset 0 0 0 1px var(--nj-line-soft); overflow: hidden; touch-action: pan-y; }
.pt-map svg { display: block; width: 100%; height: auto; max-height: 520px; }
.pt-map .tile { fill: transparent; stroke: rgba(201, 178, 124, .16); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.pt-map text { font-family: var(--nj-font-display); fill: var(--nj-muted); pointer-events: none; }
.pt-area { margin-top: 10px; padding: 8px 12px; background: linear-gradient(90deg, var(--nj-surface-2), transparent); }
.pt-area b { color: var(--nj-text-strong); font-weight: 500; }
.pt-stat { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--nj-line-soft); }
.pt-stat:last-child { border-bottom: 0; }
.pt-stat b { font-weight: 400; color: var(--nj-text-strong); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.pt-big { font: 400 34px/1.2 var(--nj-font-display); color: var(--nj-text-strong); font-variant-numeric: lining-nums tabular-nums; }
.pt-spark { display: block; width: 100%; height: 40px; margin: 8px 0; }
.pt-note { color: var(--nj-dim); font-size: 11.5px; margin-top: 8px; }
.pt-note b { color: var(--nj-text); font-weight: 500; }
.pt-session { cursor: pointer; }
.pt-session:hover td, .pt-session:active td { background: var(--nj-gold-soft); }
@media (pointer: coarse) { .pt button, .pt select, .pt input[type="date"] { min-height: 44px; } }
@media (max-width: 1279px) { .pt-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .pt-kpi:nth-child(3n + 1) { border-left: 0; } .pt-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 959px) {
  .pt { padding: 14px 14px 40px; }
  .pt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-kpi { padding: 2px 14px; border-left: 1px solid var(--nj-line-soft) !important; }
  .pt-kpi:nth-child(2n + 1) { border-left: 0 !important; }
  .pt-g21, .pt-g3 { grid-template-columns: minmax(0, 1fr); }
  .pt-kpi .v { font-size: 25px; }
  .pt input[type="date"], .pt select { font-size: 16px; max-width: 100%; min-width: 0; }
  .pt-field { margin: 4px 0; max-width: 100%; min-width: 0; }
  .pt-field select { flex: 1 1 auto; width: 100%; }
  .pt-step .name small { display: block; margin-left: 0; }
}