/* ================================================
   FOR THE COLLECTIVE SELF - planning.css
   Planning portfolio page. Loads after style.css and
   only uses its tokens (--bg, --surface, --accent, --sage ...).
   Each project is a "sheet": drawing on the left,
   a plan-set title block on the right.
   ================================================ */

.pp { padding-top: 64px; }
.pp section { padding-block: clamp(3rem, 7vw, 5.5rem); border-top: 1px solid var(--border); }
.pp section:first-of-type { border-top: 0; }
.pp-eyebrow {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.pp-mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

/* --- intro --- */
.pp-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.pp-intro h1 {
  font-family: var(--font-display); font-weight: 600; line-height: 1.08;
  font-size: clamp(2.4rem, 5.5vw, 4rem); margin: 0.75rem 0 1.25rem; text-wrap: balance;
}
.pp-intro h1 em { font-style: italic; color: var(--sage); }
.pp-lede { font-size: 1.125rem; color: var(--text-muted); max-width: 36em; }
.pp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--border-mid); }
.pp-facts div { padding: 0.85rem 1rem 0.85rem 0; border-bottom: 1px solid var(--border); min-width: 0; }
.pp-facts div:nth-child(even) { padding-left: 1rem; border-left: 1px solid var(--border); }
.pp-facts dt { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pp-facts dd { font-weight: 600; font-size: 0.9375rem; line-height: 1.4; }
.pp-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.pp-note { margin-top: 1.25rem; font-size: 0.875rem; color: var(--text-muted); display: flex; gap: 0.6rem; align-items: baseline; }
.pp-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

.pp-plate { background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--r-sm); padding: 0.6rem; }
.pp-plate figcaption { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; padding: 0.6rem 0.2rem 0.1rem; }
.pp-cap { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
.pp-scale { display: inline-flex; align-items: center; color: var(--text-muted); }
.pp-scale svg { width: 120px; height: 24px; }

/* --- section heads --- */
.pp-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem 3rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.pp-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.1; }
.pp-head p { color: var(--text-muted); max-width: 38em; font-size: 0.9375rem; }
.pp-group { display: flex; align-items: center; gap: 1rem; margin: 3.5rem 0 1.5rem; }
.pp-group:first-child { margin-top: 0; }
.pp-group h3 { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.35rem; white-space: nowrap; }
.pp-group::after { content: ""; flex: 1; height: 1px; background: var(--border-mid); }

/* --- sheets --- */
.pp-sheets { display: grid; gap: 1.75rem; }
.pp-sheet {
  display: grid; grid-template-columns: minmax(0, 1fr) 270px;
  background: var(--surface); border: 1px solid var(--border-mid); border-radius: var(--r-sm); overflow: hidden;
}
.pp-draw { padding: clamp(1.1rem, 2.6vw, 1.9rem); display: grid; gap: 1.1rem; align-content: start; min-width: 0; }
.pp-draw h4 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 2.4vw, 1.7rem); line-height: 1.15; }
.pp-draw p { max-width: 64ch; }
.pp-points { display: grid; gap: 0.35rem; max-width: 64ch; }
.pp-points li { position: relative; padding-left: 1.1rem; }
.pp-points li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 6px; height: 6px; background: var(--sage); border-radius: 1px; }

.pp-tb { border-left: 1px solid var(--border-mid); display: grid; align-content: start; min-width: 0; }
.pp-tb > div { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); }
.pp-tb > div:last-child { border-bottom: 0; }
.pp-tb dt { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pp-tb dd { font-size: 0.875rem; font-weight: 600; line-height: 1.4; margin-top: 0.1rem; }
.pp-tb .pp-tb-title { background: var(--sage-dim); }
.pp-tb .pp-tb-title dd { font-family: var(--font-display); font-size: 1.05rem; }
.pp-status { display: inline-block; margin-left: 0.35rem; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.4rem; border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; vertical-align: 1px; }

.pp-fig { margin: 0; min-width: 0; }
.pp-fig img { width: 100%; border: 1px solid var(--border); border-radius: 2px; }
.pp-fig figcaption { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.45; }
.pp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pp-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.pp-trio img, .pp-pair.pp-even img { aspect-ratio: 4 / 3; object-fit: cover; }
.pp-wide img { aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 45%; }
.pp-even .pp-fig img { aspect-ratio: 1121 / 724; object-fit: cover; }

/* "not my work" credit */
.pp-ref { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 1rem; align-items: center; padding: 0.75rem; border: 1px dashed var(--border-mid); border-radius: var(--r-sm); background: var(--bg-raised); }
.pp-ref img { border-radius: 2px; filter: saturate(0.6); }
.pp-ref p { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }
.pp-ref strong { color: var(--text); }

/* interactive 3D (World Sim view-only export), loaded on click */
.pp-3d { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border: 1px solid var(--border-mid); border-radius: 2px; overflow: hidden; background: #0b1220; }
.pp-3d > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.pp-3d-ui { position: absolute; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; background: rgba(8,12,20,.35); }
.pp-3d-load { font: inherit; font-weight: 600; font-size: 0.9rem; padding: 0.7rem 1.2rem; border: 0; border-radius: var(--r-sm); background: var(--accent); color: #fff; cursor: pointer; }
.pp-3d-load:hover { filter: brightness(1.08); }
.pp-3d-full { font-size: 0.8rem; font-weight: 600; padding: 0.6rem 0.9rem; border-radius: var(--r-sm); background: rgba(17,17,16,.7); color: #fff; }
.pp-3d.is-live > img { display: none; }
.pp-3d.is-live .pp-3d-ui { inset: auto 8px 8px auto; background: none; }
.pp-3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pp-sketch { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 1.25rem; align-items: center; }
@media (max-width: 600px) { .pp-3d { aspect-ratio: 4 / 3; } }

/* before / after */
.pp-compare { position: relative; overflow: hidden; aspect-ratio: 1121 / 724; max-width: 100%; border: 1px solid var(--border); border-radius: 2px; background: var(--bg-raised); }
.pp-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pp-compare .pp-after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.pp-compare .pp-line { position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35); pointer-events: none; }
.pp-compare .pp-chip { position: absolute; top: 10px; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: rgba(17,17,16,.75); padding: 0.3rem 0.5rem; border-radius: 2px; }
.pp-compare .pp-chip.l { left: 10px; } .pp-compare .pp-chip.r { right: 10px; }
.pp-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.pp-compare input:focus-visible + .pp-focus { outline: 2px solid var(--accent); outline-offset: -2px; position: absolute; inset: 0; pointer-events: none; }
.pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* memo table + figures */
.pp-tablewrap { overflow-x: auto; }
.pp-table { border-collapse: collapse; width: 100%; min-width: 500px; font-size: 0.875rem; }
.pp-table th { text-align: left; font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--text); }
.pp-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.pp-table td:first-child { font-weight: 600; white-space: nowrap; }
.pp-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.pp-figures div { padding: 0.8rem 0.9rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pp-figures b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-figures span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.35; display: block; margin-top: 0.2rem; }

/* compact sheets (text only) */
.pp-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.pp-mini .pp-sheet { grid-template-columns: minmax(0, 1fr); }
.pp-mini .pp-tb { border-left: 0; border-top: 1px solid var(--border-mid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-mini .pp-tb > div:nth-child(odd) { border-right: 1px solid var(--border); }
.pp-mini .pp-tb .pp-tb-title { grid-column: 1 / -1; border-right: 0; }

/* --- resume --- */
.pp-resume { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); }
.pp-timeline li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 1rem; padding-block: 1.1rem; border-bottom: 1px solid var(--border); }
.pp-timeline li:first-child { border-top: 1px solid var(--text); }
.pp-when { font-size: 0.75rem; color: var(--text-muted); padding-top: 0.25rem; font-variant-numeric: tabular-nums; }
.pp-timeline h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.25; }
.pp-org { font-size: 0.875rem; color: var(--sage); font-weight: 500; margin-bottom: 0.35rem; }
.pp-timeline p { font-size: 0.9rem; max-width: 60ch; }
.pp-side > div { padding-block: 1.1rem; border-bottom: 1px solid var(--border); }
.pp-side > div:first-child { border-top: 1px solid var(--text); }
.pp-side h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.4rem; }
.pp-side p, .pp-side li { font-size: 0.9rem; }
.pp-side .tag-cluster { margin-top: 0.25rem; }

/* --- contact --- */
.pp-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.pp-contact h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.1; margin: 0.6rem 0 1rem; }
.pp-rows { border-top: 1px solid var(--text); }
.pp-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding-block: 0.9rem; border-bottom: 1px solid var(--border); }
.pp-row dt { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.pp-row dd { font-weight: 600; word-break: break-word; }
.pp-row a:hover { color: var(--accent); }
.pp-copy { font: inherit; font-size: 0.75rem; padding: 0.35rem 0.65rem; border: 1px solid var(--border-mid); border-radius: 2px; background: none; color: var(--text); cursor: pointer; }
.pp-copy:hover { border-color: var(--text-muted); }

/* --- title block fills its column; references sit in the space below the facts --- */
.pp-tb { display: flex; flex-direction: column; }
.pp-tb > .pp-refs { flex: 1; background: var(--bg-raised); border-top: 1px solid var(--border-mid); }
.pp-refs ul { display: grid; gap: 0.55rem; margin-top: 0.5rem; }
.pp-refs li { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--text-muted); }
.pp-refs a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-mid); text-underline-offset: 3px; }
.pp-refs a:hover { text-decoration-color: var(--accent); }
.pp-kind { display: inline-block; min-width: 3.1rem; margin-right: 0.45rem; padding: 0.1rem 0.35rem; border: 1px solid var(--border-mid); border-radius: 2px; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-align: center; color: var(--text-muted); text-decoration: none; vertical-align: 1px; }
.pp-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0.5rem 0 0.75rem; }
.pp-spec div { padding: 0.5rem 0.6rem; border: 1px solid var(--border); border-radius: 2px; background: var(--surface); }
.pp-spec b { display: block; font-family: var(--font-display); font-size: 1.2rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-spec span { display: block; font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; margin-top: 0.15rem; }
.pp-sheet-short .pp-draw { align-content: center; }

/* --- step sequence (same order as the team website's Before / After tab) --- */
.pp-stepwrap { text-align: center; margin-top: 0.75rem; }
.pp-step { display: inline-block; padding: 0.3rem 0.9rem; border-radius: 999px; background: var(--sage); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pp-presets { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.pp-preset { font: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.35rem 0.85rem; border: 1px solid var(--border-mid); border-radius: 999px; background: none; color: var(--text); cursor: pointer; }
.pp-preset:hover { border-color: var(--text-muted); background: var(--bg-raised); }

/* --- map beside a stack of field photos --- */
.pp-mapphotos { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0.75rem; align-items: start; }
.pp-photostack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.pp-photostack .pp-fig:first-child { grid-column: 1 / -1; }
.pp-photostack img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- public meetings: two meeting cards side by side --- */
.pp-meet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.pp-meet > section { padding: 1rem 1.1rem 1.1rem !important; border: 1px solid var(--border-mid) !important; border-radius: var(--r-sm); background: var(--bg); display: grid; gap: 0.75rem; align-content: start; }
.pp-meet-when { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.pp-meet h5 { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; margin-top: -0.4rem; }
.pp-meet .pp-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pp-meet-notes dt { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.6rem; }
.pp-meet-notes dt:first-child { margin-top: 0; }
.pp-meet-notes dd { font-size: 0.875rem; line-height: 1.55; margin-top: 0.15rem; }
@media (max-width: 760px) { .pp-meet { grid-template-columns: minmax(0, 1fr); } }

/* --- credits and page notice --- */
.pp-compare .pp-credit { position: absolute; left: 10px; bottom: 8px; font-size: 0.65rem; color: #fff; background: rgba(17,17,16,.6); padding: 0.15rem 0.4rem; border-radius: 2px; pointer-events: none; }
.pp-legal { padding-block: 2rem !important; }
.pp-legal p { font-size: 0.78rem; line-height: 1.6; color: var(--text-muted); max-width: 80ch; }
.pp-legal p + p { margin-top: 0.5rem; }
.pp-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* --- responsive --- */
@media (max-width: 960px) {
  .pp-intro, .pp-resume, .pp-contact, .pp-mini { grid-template-columns: minmax(0, 1fr); }
  .pp-sheet { grid-template-columns: minmax(0, 1fr); }
  .pp-tb { display: grid; border-left: 0; border-top: 1px solid var(--border-mid); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-tb > .pp-refs { grid-column: 1 / -1; }
  .pp-tb > div:nth-child(odd) { border-right: 1px solid var(--border); }
  .pp-tb .pp-tb-title { grid-column: 1 / -1; border-right: 0; }
}
@media (max-width: 600px) {
  .pp-facts, .pp-tb, .pp-mini .pp-tb { grid-template-columns: minmax(0, 1fr); }
  .pp-facts div:nth-child(even) { padding-left: 0; border-left: 0; }
  .pp-tb > div:nth-child(odd), .pp-mini .pp-tb > div:nth-child(odd) { border-right: 0; }
  .pp-pair, .pp-trio, .pp-sketch, .pp-mapphotos { grid-template-columns: minmax(0, 1fr); }
  .pp-ref { grid-template-columns: minmax(0, 1fr); }
  .pp-timeline li { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .pp-group h3 { white-space: normal; }
}