/* p2: P5-P7 «After the hackathon» (p2.js). Scoped by #slide-p2 and p2- ids.
   Type: Onest for words, IBM Plex Mono for dates; the prototype is the pill's cyan (#1fc3f2), built facts the pill's
   green (#3ddc97); dark glass plates as the pill and the v2 S4 plate; the data gradient only for meeting words. */

/* ---- P5 the timeline: SVG line (screen space, projected from the floor) + pinned node cards */
#p2-tl { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
#p2-tl path { fill: none; stroke-linecap: round; }
#p2-tl-shadow { stroke: rgba(10, 12, 30, 0.42); stroke-width: 14; filter: url(#p2-halo); }
#p2-tl-past { stroke: #f4f3ef; stroke-width: 6; }
#p2-tl-next { stroke: #1fc3f2; stroke-width: 6; stroke-dasharray: 14 11; }
#p2-tl-spark { stroke: #3ddc97; stroke-width: 6; }
.p2-drop { stroke-width: 3; stroke-dasharray: 6 7; }
.p2-drop.p2-built { stroke: rgba(244, 243, 239, 0.95); }
.p2-drop.p2-prototype { stroke: #1fc3f2; }
.p2-dropend { fill: rgba(12, 16, 32, 0.55); stroke-width: 3; }
.p2-dropend.p2-built { stroke: #f4f3ef; }
.p2-dropend.p2-prototype { stroke: #1fc3f2; }

.p2-node { position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; }
.p2-ndot { position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  background: var(--dot); border: 4px solid #f4f3ef; box-shadow: 0 0 0 3px rgba(12, 16, 32, 0.5), 0 0 18px var(--dot); }
.p2-built { --dot: #3ddc97; }
.p2-prototype { --dot: #1fc3f2; }
.p2-ncard { position: absolute; left: 0; top: 0; box-sizing: border-box; padding: 16px 22px 18px; border-radius: 16px; white-space: nowrap;
  background: rgba(14, 18, 38, 0.84); border: 1px solid rgba(160, 170, 220, 0.26);
  box-shadow: 0 18px 40px -18px rgba(8, 10, 30, 0.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.p2-ncard::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg);
  background: rgba(14, 18, 38, 0.84); border-right: 1px solid rgba(160, 170, 220, 0.26); border-bottom: 1px solid rgba(160, 170, 220, 0.26); }
.p2-below .p2-ncard::after { bottom: auto; top: -9px; border: 0; border-left: 1px solid rgba(160, 170, 220, 0.26); border-top: 1px solid rgba(160, 170, 220, 0.26); }
/* revision 1: three nodes, each card larger than before (date 28, title 40, line 28, tag 22 px) */
.p2-ntop { font: 500 28px/1 'IBM Plex Mono', monospace; letter-spacing: 0.04em; color: var(--dot); }
.p2-ntitle { margin-top: 10px; font: 620 40px/1.08 'Onest', sans-serif; letter-spacing: -0.015em; color: #f4f3ef; }
.p2-ntitle + .p2-ntitle { margin-top: 4px; }
.p2-nsub { margin-top: 9px; font: 500 28px/1.1 'Onest', sans-serif; color: #c4c8dc; }
.p2-ntag { display: inline-block; margin-top: 12px; padding: 6px 13px 5px; border-radius: 13px; border: 1.5px dashed #1fc3f2;
  font: 500 22px/1 'IBM Plex Mono', monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #1fc3f2; }
.p2-prototype .p2-ncard { border-color: rgba(31, 195, 242, 0.55); }

/* ---- P6-P7: her screen's card, enlarged in a callout under her desk (a leader from her monitor) */
#p2-lead { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
#p2-lead-path { fill: none; stroke: #1fc3f2; stroke-width: 3; stroke-dasharray: 7 6; stroke-linecap: round; }
#p2-lead-dot { fill: #ffffff; stroke: #1fc3f2; stroke-width: 3; opacity: 0; }
#p2-call { position: absolute; left: 0; top: 0; width: 760px; transform-origin: 50% 0; visibility: hidden; }
#p2-call-card { box-sizing: border-box; padding: 22px 30px 24px; border-radius: 22px; background: #ffffff;
  box-shadow: 0 26px 50px -22px rgba(6, 8, 24, 0.75); outline: 3px dashed #1fc3f2; outline-offset: -8px; }
.p2-c-row { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
.p2-c-row + .p2-c-row { margin-top: 14px; }
.p2-c-env { flex: none; width: 46px; height: 34px; fill: none; stroke: #0b86bd; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.p2-c-to { font: 500 38px/1 'Onest', sans-serif; letter-spacing: -0.01em; color: #59607f; }
.p2-c-to b { font-weight: 680; color: #1d2240; }
.p2-c-time { margin-left: auto; font: 500 30px/1 'IBM Plex Mono', monospace; color: #59607f; }
.p2-c-due { font: 500 34px/1 'Onest', sans-serif; color: #59607f; }
.p2-c-due b { font-weight: 760; color: #1d2240; }
.p2-c-dates { margin-left: auto; display: flex; align-items: center; gap: 12px; font: 500 32px/1 'IBM Plex Mono', monospace; }
#p2-c-old { position: relative; padding: 9px 14px 8px; border-radius: 12px; background: #eef0f6; color: #1d2240; }
#p2-c-old.p2-struck { color: #8a90ab; }
#p2-c-old i { position: absolute; left: 8px; right: 8px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: #ff7a66;
  transform-origin: 0 50%; transform: scaleX(0); }
#p2-c-arr { color: #59607f; opacity: 0; }
#p2-c-new { padding: 9px 14px 8px; border-radius: 12px; background: #0b86bd; color: #ffffff; opacity: 0; }
.p2-c-q { padding-left: 18px; border-left: 6px solid #1fc3f2; }
.p2-c-quote { font: 500 34px/1.1 'Onest', sans-serif; letter-spacing: -0.01em; color: #1d2240; }
.p2-c-quote b { font-weight: 720; color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(90deg, #6c5cff, #3e86ff 50%, #1fc3f2); }
.p2-c-ref { padding: 7px 12px 6px; border-radius: 10px; background: #dcf4fc; font: 500 26px/1 'IBM Plex Mono', monospace; color: #0b86bd; }
#p2-c-reply { position: relative; display: inline-flex; align-items: center; margin: -6px 0 0 34px; padding: 16px 30px 18px; border-radius: 26px;
  background: #1d2240; box-shadow: 0 16px 34px -14px rgba(6, 8, 24, 0.7); visibility: hidden; }
#p2-c-reply::before { content: ""; position: absolute; left: 30px; top: -14px; border-style: solid; border-width: 0 0 16px 18px;
  border-color: transparent transparent #1d2240 transparent; }
#p2-c-typing { display: flex; gap: 12px; padding: 8px 4px; }
#p2-c-typing i { display: block; width: 14px; height: 14px; border-radius: 50%; background: #1fc3f2; }
#p2-c-rtxt { font: 650 38px/1 'Onest', sans-serif; letter-spacing: -0.01em; color: #ffffff; }

/* P7: the deadline chip over the rack */
#p2-chip { position: absolute; display: flex; align-items: baseline; gap: 14px; padding: 14px 22px; border-radius: 16px;
  background: #ffffff; white-space: nowrap; transform-origin: 50% 100%; visibility: hidden;
  box-shadow: 0 16px 34px -14px rgba(12, 14, 40, 0.55), inset 0 0 0 2px rgba(31, 195, 242, 0.6);
  font: 500 40px/1 'IBM Plex Mono', monospace; color: #1d2240; }
#p2-chip-old { position: relative; }
#p2-chip-old i { position: absolute; left: -4px; right: -4px; top: 50%; height: 4px; margin-top: -1px; border-radius: 2px;
  background: #ff7a66; transform-origin: 0 50%; transform: scaleX(0); }
#p2-chip-arr { color: #8a90ab; opacity: 0; }
#p2-chip-new { color: #0b86bd; opacity: 0; }

/* P7: the chair note, pinned to its arc, then above the table */
#p2-note { position: absolute; display: flex; align-items: center; gap: 14px; padding: 13px 20px 13px 22px; border-radius: 15px;
  background: #ffffff; white-space: nowrap; transform-origin: 50% 100%; visibility: hidden;
  box-shadow: 0 16px 34px -14px rgba(12, 14, 40, 0.55); outline: 2.5px dashed #1fc3f2; outline-offset: -5px; }
#p2-note-to { font: 600 34px/1 'Onest', sans-serif; letter-spacing: -0.01em; color: #1d2240; }
#p2-note-sep { width: 2px; height: 30px; background: #c9eef9; }
#p2-note-d { font: 500 34px/1 'IBM Plex Mono', monospace; color: #0b86bd; }