/* ============ PEOPLE ============
   The Circle board (pc-), the person detail overlay (pd-) and the relationship
   tree (pt-). White on black throughout: state is material — opacity, stroke
   weight, glow radius, fill against outline — and never colour.

   Two text triads, deliberately split: the board sits on the canvas
   photograph and keeps --text-*; every glass surface (the detail shell and
   the two popovers) declares the panel triad --wear-* so children inherit the
   same warm off-white the rest of the app uses.

   Everything is scoped to .people-circle-widget or .pd-overlay; the one
   reduced-motion block lives at the end of this file. */

/* the edge-fade lengths only animate once registered; where @property is
   unsupported the mask cuts exactly as it does today */
@property --pd-tf { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pd-bf { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pt-tf { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --pt-bf { syntax: "<length>"; inherits: false; initial-value: 0px; }

/* ---------------------------------------------------------------- board -- */

.people-circle-widget {
  position: absolute;
  isolation: isolate;
  width: 1360px;
  height: 760px;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  pointer-events: none;
  font-family: inherit;
}

.people-circle-widget .pc-node,
.people-circle-widget .pc-cluster-label,
.people-circle-widget .pc-card {
  pointer-events: auto;
}

.people-circle-widget .pc-cluster-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.5;
  white-space: nowrap;
  /* the handle for the whole cluster, so it says so */
  cursor: grab;
  transition: color var(--wl-fast) var(--wl-ease), opacity var(--wl-fast) var(--wl-ease);
}
.people-circle-widget .pc-cluster-label:hover,
.people-circle-widget .pc-cluster-label:focus-visible {
  color: var(--text-primary);
  opacity: 1;
}
.people-circle-widget .pc-cluster-label:focus { outline: none; }
/* the same hard outline the nodes use, so a focus ring is never read as a glow */
.people-circle-widget .pc-cluster-label:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 3px;
  border-radius: 4px;
}
.people-circle-widget .pc-cluster-label.is-grabbing { cursor: grabbing; }

.people-circle-widget .pc-node {
  --pc-size: 64px;          /* one diameter, for everyone */
  --pc-breath-delay: 0s;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 132px;             /* unchanged — "Your Work-Partner" needs all of it on one line */
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  text-align: center;
  cursor: pointer;
  /* named rather than restated, so the group-move rule can compose with it.
     A second copy that drifted would knock every avatar in a cluster sideways
     the instant a drag began. */
  --pc-center: translate(-50%, calc(var(--pc-size) / -2));
  transform: var(--pc-center);
}

.people-circle-widget .pc-ring {
  position: relative;
  box-sizing: border-box;
  /* the stroke hugs the avatar: no annulus, so the ring box IS the avatar box */
  width: var(--pc-size);
  height: var(--pc-size);
  border-radius: 50%;
  /* the 1px hairline the rest of the app uses, plus the lift that separates a
     light disc from the canvas photograph underneath it */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 30px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow var(--wl-base) var(--wl-ease),
    transform var(--wl-base) var(--wl-ease);
}

/* the ambient breath is a glow layer, so nothing about the avatar moves */
.people-circle-widget .pc-ring::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.12);
  opacity: 0.45;
  animation: pcRingBreathe 7.5s ease-in-out var(--pc-breath-delay) alternate infinite;
  pointer-events: none;
}
@keyframes pcRingBreathe { from { opacity: 0.32; } to { opacity: 1; } }

.people-circle-widget .pc-avatar {
  display: block;
  width: var(--pc-size);
  height: var(--pc-size);
  border-radius: 50%;
  object-fit: cover;
  filter: brightness(0.98);
  transition: filter var(--wl-base) var(--wl-ease);
}

/* Ahead of :hover deliberately. Same specificity, so source order decides, and
   with this rule below it hovering a favourite changed nothing but the scale. */
.people-circle-widget .pc-node.is-favorite .pc-ring {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.20),
    0 0 22px rgba(255, 255, 255, 0.12),
    0 10px 30px rgba(0, 0, 0, 0.3);
}

.people-circle-widget .pc-node:hover .pc-ring {
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 26px rgba(255, 255, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.3);
}
.people-circle-widget .pc-node:hover .pc-avatar { filter: brightness(1.08); }
/* the focus ring is a hard outline, so it can never be read as a hover glow */
.people-circle-widget .pc-node:focus { outline: none; }
.people-circle-widget .pc-node:focus-visible { outline: none; }
.people-circle-widget .pc-node:focus-visible .pc-ring {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 3px;
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.22),
    0 0 26px rgba(255, 255, 255, 0.16),
    0 10px 30px rgba(0, 0, 0, 0.3);
}
.people-circle-widget .pc-node:focus-visible .pc-avatar { filter: brightness(1.08); }

.people-circle-widget .pc-star-mark {
  position: absolute;
  /* seats the star's inner corner on the ring's edge, so it reads as pinned to
     the disc rather than floating beside it */
  top: -3px;
  right: -3px;
  /* above .pc-ring::after, whose breath would otherwise wash over the points */
  z-index: 2;
  display: none;
  width: 14px;
  height: 14px;
  color: var(--text-primary);
  /* The mark hangs off the disc onto the canvas photograph, which is bright in
     places. The white bloom is what makes it read as light rather than as a
     sticker; the dark one keeps its five points from dissolving into a pale
     background. */
  filter:
    drop-shadow(0 0 5px rgba(255, 255, 255, 0.5))
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}
.people-circle-widget .pc-star-mark svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
  animation: pcStarPulse 4.8s ease-in-out var(--pc-breath-delay, 0s) infinite;
}

/* The glint: a four-point flash of light thrown across the star. It runs off
   the same random per-node delay the rings breathe on, so a board of
   favourites twinkles instead of blinking in step, and it is dark for most of
   the cycle — a star that sparkles continuously is a warning light. */
.people-circle-widget .pc-star-mark::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: #fff;
  clip-path: polygon(
    50% 0%, 55% 45%, 100% 50%, 55% 55%,
    50% 100%, 45% 55%, 0% 50%, 45% 45%);
  opacity: 0;
  pointer-events: none;
  animation: pcStarSpark 4.8s ease-in-out var(--pc-breath-delay, 0s) infinite;
}

@keyframes pcStarPulse {
  0%, 56%, 100% { transform: scale(1); }
  64% { transform: scale(1.25); }
  76% { transform: scale(1); }
}
@keyframes pcStarSpark {
  0%, 56%, 100% { opacity: 0; transform: scale(0.35) rotate(0deg); }
  64% { opacity: 0.85; transform: scale(1) rotate(22deg); }
  76% { opacity: 0; transform: scale(1.4) rotate(40deg); }
}
.people-circle-widget .pc-node.is-favorite .pc-star-mark { display: block; }

.people-circle-widget .pc-node.is-dormant .pc-avatar { filter: grayscale(0.35) brightness(0.7); }
.people-circle-widget .pc-node.is-dormant .pc-ring::after { box-shadow: 0 0 14px rgba(255, 255, 255, 0.04); }
.people-circle-widget .pc-node.is-dormant .pc-name { opacity: 0.7; }

.people-circle-widget .pc-name {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.people-circle-widget .pc-relation {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.people-circle-widget .pc-dormant {
  margin-top: 4px;
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--text-muted);
}

/* ----------------------------------------------------- moving a person -- */
/* The cluster regions. Invisible until a person is being moved: the boundary
   is a fact about the board, not decoration on it. The .wg-ghost vocabulary —
   a very low fill plus a 1px inset hairline, and no blur, which three
   400x450 regions could not afford behind the rings sitting inside them.
   Never interactive: the drop target is worked out from the pointer position
   in JS rather than by a hit test, so the region under the node in hand can
   never steal the pointer from it. */

.people-circle-widget .pc-zone {
  position: absolute;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--wl-base) var(--wl-ease),
    background var(--wl-fast) var(--wl-ease),
    box-shadow var(--wl-fast) var(--wl-ease);
}
/* hovering the handle shows you what you are about to pick up. Declared above
   the .is-moving rules on purpose: once a drag is under way every region is
   fully up, and a stale preview must not hold one of them at half strength. */
.people-circle-widget .pc-zone.is-previewing { opacity: 0.55; }

.people-circle-widget.is-moving .pc-zone { opacity: 1; }
.people-circle-widget.is-moving .pc-zone.is-over {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
/* the region in hand during a group move — the same weight as .is-over, but a
   different mode, so the two never appear together */
.people-circle-widget.is-moving .pc-zone.is-dragging {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.20);
}

/* the label of the region you are about to drop into steps forward with it */
.people-circle-widget .pc-cluster-label.is-target {
  color: var(--text-primary);
  opacity: 1;
}

/* where the person was picked up from, so a move always has a visible origin */
.people-circle-widget .pc-ghost {
  position: absolute;
  width: 74px;
  height: 74px;
  margin-left: -37px;
  margin-top: -37px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.02);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.people-circle-widget .pc-ghost[hidden] { display: none; }

/* The node in hand: lifted above everything, and lit like a hover that is
   held. Below the :hover and :focus-visible rings deliberately — the two
   carry the same specificity, so source order is what lets the held state
   outrank a pointer merely passing over. */
.people-circle-widget .pc-node.is-moving {
  z-index: 30;
  cursor: grabbing;
  /* it must follow the pointer without lag, so position is never animated
     while it is held */
  transition: none;
}
.people-circle-widget .pc-node.is-moving .pc-ring {
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.24),
    0 0 30px rgba(255, 255, 255, 0.20),
    0 18px 44px rgba(0, 0, 0, 0.45);
}
.people-circle-widget .pc-node.is-moving .pc-avatar { filter: brightness(1.08); }

/* a refused drop travels back to where it started */
.people-circle-widget .pc-node.is-returning {
  transition: left var(--wl-base) var(--wl-ease), top var(--wl-base) var(--wl-ease);
}

/* ----------------------------------------------------- moving a cluster -- */
/* A group in motion is carried by two custom properties on the board, so one
   write moves the region, the label and every avatar in it at once — no
   wrapper element, no per-node loop, and no layout, because a transform does
   not invalidate one. The offset is in the board's own unscaled pixels: a
   transform on a child of the board is applied in the board's local space.

   The centring transforms are COMPOSED WITH, never replaced. */

.people-circle-widget .pc-zone.is-group-moving {
  transform: translate3d(var(--pc-gx, 0px), var(--pc-gy, 0px), 0);
}
.people-circle-widget .pc-cluster-label.is-group-moving {
  transform: translate(-50%, -50%)
             translate3d(var(--pc-gx, 0px), var(--pc-gy, 0px), 0);
}
.people-circle-widget .pc-node.is-group-moving {
  transform: var(--pc-center)
             translate3d(var(--pc-gx, 0px), var(--pc-gy, 0px), 0);
  transition: none;
}

/* a displaced cluster travels, so the board is seen reorganising itself */
.people-circle-widget .pc-zone.is-settling,
.people-circle-widget .pc-cluster-label.is-settling,
.people-circle-widget .pc-node.is-settling {
  transition: left var(--wl-base) var(--wl-ease), top var(--wl-base) var(--wl-ease);
}

/* ----------------------------------------------------------- hover card -- */
/* The one surface in the app that lies directly on a photograph, so it gets its
   own recipe rather than the shared panel tint — see the note on the background
   below. It sizes to what it holds and stops where .atmos-tip stops. The board
   is a fixed-px, transform-scaled layer, so these widths are fixed px too: a vw
   width would track the browser window while the board stayed at 1360px. */

.people-circle-widget .pc-card {
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  position: absolute;
  z-index: 20;
  width: max-content;
  min-width: 208px;
  max-width: 268px;
  /* the header strip runs edge to edge, so the rows carry the insets. Never
     add overflow: hidden here — the tail's visible half lives outside this
     box and clipping it detaches the card from the person it describes. */
  padding: 0;
  /* 20px on a 90px-tall card lets the corner eat the content */
  border-radius: var(--radius-sm);
  /* the top nav's material, value for value: .control-nav, styles.css:4263.
     Only the radius differs, because a 999px pill cannot hold a multi-row
     card. Everything below is that bar's recipe verbatim. */
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, rgba(24, 27, 25, 0.6), rgba(14, 17, 16, 0.5));
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  color: var(--wear-primary);
}
.people-circle-widget .pc-card[hidden] { display: none; }
/* The relation is the card's title bar rather than a note under the name: a
   band across the top with the star at its far end, held by a hairline and
   nothing else. No fill: it would need overflow hidden to follow the radius,
   which would clip the tail away. */
.people-circle-widget .pc-card-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 8px 5px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* the name leads the body now instead of sharing a line with the relation */
.people-circle-widget .pc-card-name {
  margin: 10px 13px 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.people-circle-widget .pc-card-star {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  /* the strip's own padding places it */
  margin: 0;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--wear-muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.people-circle-widget .pc-card-star svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* a disc appears under it rather than the icon growing — what .icon-btn does,
   and it does not make the glyph jitter */
.people-circle-widget .pc-card-star:hover {
  color: var(--wear-secondary);
  background: rgba(255, 255, 255, 0.06);
}
.people-circle-widget .pc-card-star:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}
.people-circle-widget .pc-card-star.is-on { color: var(--wear-primary); }
.people-circle-widget .pc-card-star.is-on svg { fill: currentColor; stroke: currentColor; }

.people-circle-widget .pc-card-relation {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--wear-muted);
}
.people-circle-widget .pc-card-line {
  margin: 6px 13px 0;
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
.people-circle-widget .pc-card-meta {
  margin: 3px 13px 11px;
  font-size: 10.5px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}
/* a person with no upcoming event must not have their only remaining line
   jammed against the name */
.people-circle-widget .pc-card-name + .pc-card-meta { margin-top: 6px; }

/* ---------------------------------------------- the shared popover tail -- */
/* one recipe, the .atmos-tip arrow, used by both People popovers */

.people-circle-widget .pc-card-arrow,
.pd-overlay .pt-moment-arrow {
  position: absolute;
  width: 9px;
  height: 9px;
  background: inherit;
  border: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
}
/* popover to the right of its anchor — tail on the left edge, pointing left */
.people-circle-widget .pc-card[data-side="right"] .pc-card-arrow,
.pd-overlay .pt-moment[data-side="right"] .pt-moment-arrow {
  left: -5px;
  border-right: none;
  border-top: none;
}
/* popover to the left — tail on the right edge, pointing right */
.people-circle-widget .pc-card[data-side="left"] .pc-card-arrow,
.pd-overlay .pt-moment[data-side="left"] .pt-moment-arrow {
  right: -5px;
  border-left: none;
  border-bottom: none;
}
/* popover below — tail on the top edge, pointing up */
.people-circle-widget .pc-card[data-side="below"] .pc-card-arrow,
.pd-overlay .pt-moment[data-side="below"] .pt-moment-arrow {
  top: -5px;
  border-right: none;
  border-bottom: none;
}

/* People-only, after the shared block so .pt-moment never sees it. The tree's
   popover keeps the shared 0.12 border; this card's rim is the top nav's 0.08,
   so its tail has to match. The z-index keeps it under the card's text. The
   tail's own 9px size stays in the shared block above. */
.people-circle-widget .pc-card-arrow {
  border-color: rgba(255, 255, 255, 0.08);
  z-index: -1;
}

/* one shared entrance set for both popovers, 140ms, matching .atmos-tip */
.people-circle-widget .pc-card.is-appearing[data-side="right"],
.pd-overlay .pt-moment.is-appearing[data-side="right"] { animation: ptTipInLeft 140ms ease; }
.people-circle-widget .pc-card.is-appearing[data-side="left"],
.pd-overlay .pt-moment.is-appearing[data-side="left"] { animation: ptTipInRight 140ms ease; }
.people-circle-widget .pc-card.is-appearing[data-side="below"],
.pd-overlay .pt-moment.is-appearing[data-side="below"] { animation: ptTipInTop 140ms ease; }
@keyframes ptTipInLeft { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
@keyframes ptTipInRight { from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: none; } }
@keyframes ptTipInTop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------------- overlay -- */

.pd-overlay {
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  position: fixed;
  inset: 0;
  z-index: 70;
  /* the shell and the privacy line stack as one centred group; the scrim is
     absolutely positioned, so it stays out of this flow */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* half-transparent, so the 28px blur behind it is actually visible rather
     than being pure GPU cost behind an opaque fill */
  background: rgba(6, 8, 7, 0.5);
  backdrop-filter: blur(28px) saturate(120%);
  -webkit-backdrop-filter: blur(28px) saturate(120%);
  font-family: inherit;
  color: var(--wear-primary);
  transition: opacity 0.3s var(--wl-ease);
}
.pd-overlay[hidden] { display: none; }
.pd-overlay .pd-scrim { position: absolute; inset: 0; z-index: 69; }

.pd-overlay .pd-shell {
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  /* a sheet with 24px of scrim around it reads as a page, not as something
     laid over one, so the box is bounded and the overlay centres it. The
     height leaves room for the privacy line that sits below it. */
  position: relative;
  flex: 0 0 auto;
  width: min(1560px, calc(100vw - 128px));
  height: min(880px, calc(100vh - 152px));
  z-index: 70;
  display: grid;
  /* three equal content columns with a 24px gutter track carrying the rule */
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  /* one content row: Back and Close float over it, and the privacy line sits
     outside the shell entirely */
  grid-template-rows: minmax(0, 1fr);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(145deg, rgba(38, 42, 41, 0.6) 0%, rgba(26, 30, 29, 0.58) 100%);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-panel);
  color: var(--wear-primary);
  transform-origin: top center;
  transition: opacity 0.3s var(--wl-ease), transform 0.3s var(--wl-ease);
}

.pd-overlay.is-entering { animation: pdOverlayIn var(--wl-base) ease; }
.pd-overlay.is-entering .pd-shell { animation: pdShellIn 0.3s var(--wl-ease); }
@keyframes pdOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pdShellIn {
  from { opacity: 0; transform: scale(0.985) translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* the exit every other panel in the app performs: scale away and lift */
.pd-overlay.is-closing { opacity: 0; pointer-events: none; }
.pd-overlay.is-closing .pd-shell {
  opacity: 0;
  transform: scale(0.94) translateY(-10px);
}

/* --------------------------------------------------------- header band -- */

/* Both controls float over the content: there is no band to hold them, so they
   carry the same translucent disc .pd-close already had. Without it they would
   have to read against the portrait photograph. */
.pd-overlay .pd-back {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 72;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px 0 12px;
  border: none;
  border-radius: 999px;
  background: rgb(111 111 111 / 20%);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
  transition: background 0.15s ease, color 0.15s ease;
}
.pd-overlay .pd-back[hidden] { display: none; }
.pd-overlay .pd-back:hover { color: var(--wear-primary); background: rgb(131 131 131 / 26%); }
.pd-overlay .pd-back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}
.pd-overlay .pd-back-chev { display: inline-flex; }
.pd-overlay .pd-back svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the shared .icon-btn, not a fourth close-button recipe */
.pd-overlay .pd-close {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 72;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 999px;
  border: none;
  box-shadow: none;
  background: rgb(111 111 111 / 20%);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  color: var(--wear-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.pd-overlay .pd-close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd-overlay .pd-close:hover { color: var(--wear-primary); background: rgb(131 131 131 / 26%); }
.pd-overlay .pd-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* -------------------------------------------------- the line beneath it -- */
/* outside the shell, sitting on the scrim: a caption for the modal rather than
   a band inside it. pointer-events stay off so a click here hits the scrim. */

.pd-overlay .pd-foot {
  flex: 0 0 auto;
  z-index: 72;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0 32px;
  font-size: 11px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  pointer-events: none;
}
.pd-overlay .pd-lock {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pd-overlay .pd-spark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ------------------------------------------------------------- dividers -- */
/* solid, full-height, one in each gutter — placed by the grid, so they can
   never drift away from the column edge they belong to */

.pd-overlay .pd-divider {
  grid-row: 1;
  justify-self: center;
  width: 1px;
  height: 100%;
  background: var(--border-softer);
  pointer-events: none;
}
/* no rule on the left: the photo runs to the edge of the facts column, so its
   own hard edge is the separator */
.pd-overlay .pd-divider--left { display: none; }
.pd-overlay .pd-divider--right { grid-column: 4; }

/* ---------------------------------------------------- left: the portrait -- */

.pd-overlay .pd-portrait {
  grid-column: 1 / 3;
  grid-row: 1;
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.pd-overlay .pd-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the Pexels frames are face-cropped, so a wide short window must not take
     its 50% slice through the forehead */
  object-position: 50% 30%;
  filter: brightness(0.92);
}
.pd-overlay .pd-portrait-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8, 10, 9, 0.95) 0%, rgba(8, 10, 9, 0.55) 30%, transparent 62%);
}
.pd-overlay .pd-identity {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 104px;
}
.pd-overlay .pd-name {
  margin: 0;
  /* 52px is the largest size that keeps "Work-Partner" on one line in the
     408px portrait column the bounded shell leaves */
  font-size: clamp(32px, 3vw, 52px);
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1;
  overflow-wrap: anywhere;
  color: var(--wear-primary);
}
.pd-overlay .pd-meta {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
/* the .acct-chip status pill: bordered, sentence case, never uppercase */
.pd-overlay .pd-chip {
  display: inline-flex;
  align-items: center;
  height: 19px;
  margin-top: 16px;
  padding: 0 9px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9.5px;
  font-size: 10.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  opacity: 0.75;
  white-space: nowrap;
}
.pd-overlay .pd-chip.is-dormant { border-style: dashed; }

.pd-overlay .pd-remember-wrap {
  position: absolute;
  left: 40px;
  right: 40px;
  bottom: 40px;
}
/* a quiet line under a hairline. The glass pill was a control; this is a
   sentence, so there is no ring, no glow and nothing to click. */
.pd-overlay .pd-remember-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
/* the remember field that used to own this is gone, but .pt-plan-ack in the
   plan composer still animates with it */
@keyframes pdAckIn { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------ middle: the facts -- */

.pd-overlay .pd-facts {
  grid-column: 3;
  grid-row: 1;
  position: relative;
  min-width: 0;
  display: flex;
  /* was a row flex with a single child; it now stacks the scroller above the
     pinned action bar */
  flex-direction: column;
  padding: 36px 40px 32px;
}
.pd-overlay .pd-facts-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  --pd-tf: 0px;
  --pd-bf: 0px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pd-tf), #000 calc(100% - var(--pd-bf)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pd-tf), #000 calc(100% - var(--pd-bf)), transparent 100%);
  transition: --pd-tf var(--wl-fast) ease, --pd-bf var(--wl-fast) ease;
}
.pd-overlay .pd-facts-scroll::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pd-overlay .pd-facts-scroll.is-fade-top { --pd-tf: 24px; }
.pd-overlay .pd-facts-scroll.is-fade-bottom { --pd-bf: 24px; }

/* the .atmos-pl primitive: a compact clickable row in a scrolling list, spaced
   by a gap rather than a hairline so the rounded tint owns its own edges */
.pd-overlay .pd-facts-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pd-overlay .pd-fact {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 12px;
  border-radius: 10px;
  background: none;
  border: 0;
  text-align: left;
  /* the interactive rows are buttons and the static ones divs; without this the
     buttons take the UA font and the two stop matching */
  font-family: inherit;
  cursor: pointer;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease;
}
.pd-overlay .pd-fact:hover { background: rgba(255, 255, 255, 0.05); }
.pd-overlay .pd-fact:hover .pd-fact-label { color: var(--wear-secondary); }
.pd-overlay .pd-fact:hover .pd-fact-value { color: var(--wear-primary); }
.pd-overlay .pd-fact:focus { outline: none; }
.pd-overlay .pd-fact:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: -2px;
  background: rgba(255, 255, 255, 0.05);
}
.pd-overlay .pd-fact:focus-visible .pd-fact-label { color: var(--wear-secondary); }
.pd-overlay .pd-fact:focus-visible .pd-fact-value { color: var(--wear-primary); }
/* an opened row sits a step above hover, and carries the accent bar the app
   uses elsewhere to mark the current item */
.pd-overlay .pd-fact.is-open { background: rgba(255, 255, 255, 0.08); }
.pd-overlay .pd-fact.is-open::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: var(--wear-primary);
}
.pd-overlay .pd-fact.is-open .pd-fact-label { color: var(--wear-secondary); }
.pd-overlay .pd-fact.is-open .pd-fact-value { color: var(--wear-primary); }

.pd-overlay .pd-fact-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-overlay .pd-fact-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wear-muted);
  transition: color 0.15s ease;
}
.pd-overlay .pd-fact-dash { color: var(--wear-muted); }
.pd-overlay .pd-fact-value {
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
  transition: color 0.15s ease;
}
.pd-overlay .pd-fact-detail {
  display: block;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.3s var(--wl-ease), opacity 0.3s var(--wl-ease);
}
.pd-overlay .pd-fact-detail[hidden] { display: none; }
.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail { opacity: 1; }
/* the panel that used to sit permanently in this column, now arriving on hover.
   The 10px gap is a margin, not padding, and only measures into scrollHeight
   because .pd-fact-detail has overflow: hidden and so will not let this margin
   collapse out of it. Remove that overflow and every panel opens 10px short. */
.pd-overlay .pd-fact-detail-text {
  /* the beam below resolves its offset-path against its containing block, so
     without this the nearest positioned ancestor is .pd-fact and the light
     would orbit the whole row instead of the panel */
  position: relative;
  display: block;
  margin-top: 10px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
  /* it settles down as the row's height opens: two motions, one curve, one
     duration */
  transform: translateY(-4px);
  transition: transform 0.3s var(--wl-ease);
}
.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text { transform: none; }
.pd-overlay .pd-fact-detail-src {
  display: block;
  margin-top: 10px;
  text-align: right;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}

/* A lit stretch of the panel's border, travelling: current in a wire. The
   offset-path follows the element's own rounded border box, corners included,
   at constant speed — an angular sweep masked into a ring cannot, since at this
   panel's 4.5:1 ratio it races the short edges and crawls the long ones, and
   the visible arc reads as a smudge. Nothing exists until a row opens, so no
   animation is ever running on the other rows. */
.pd-overlay .pd-fact-detail-text::before,
.pd-overlay .pd-fact-detail-text::after { content: none; }

.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::before,
.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::after {
  content: "";
  position: absolute;
  pointer-events: none;
  offset-path: border-box;
  /* the line that makes this a lit stretch of the border rather than a dot
     passing it: the bar turns to lie along the path, so it is horizontal on the
     top and bottom edges and vertical on the sides */
  offset-rotate: auto;
  animation: pdBeamOrbit 3.6s linear infinite;
}
/* The lit stretch. Symmetric falloff to fully transparent at both ends, so it
   has no hard tips — and so the part that overhangs as the bar rotates through
   a 14px corner is the dim part, reading as a small sparkle rather than a
   spike. 44px is the balance: longer and that overhang becomes a visible
   diagonal, shorter and it stops reading as a line and goes back to a dot.
   Keep the peak at 50%, or the bright end lands on the overhang. */
.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::after {
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(0.4px);
}
/* the light that stretch throws onto what is around it. Same phase as the
   segment, so it sits under it rather than trailing behind it. */
.pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::before {
  width: 60px;
  height: 7px;
  border-radius: 7px;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.34) 50%,
    rgba(255, 255, 255, 0) 100%);
  filter: blur(5px);
}
@keyframes pdBeamOrbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}
/* without offset-path both dots would sit in the panel's top-left corner,
   which is worse than no effect at all */
@supports not (offset-path: border-box) {
  .pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::before,
  .pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::after { content: none; }
}

/* while a row is open the panel is the highlight; leaving the row's hover tint
   under it stacks two light fills and the panel loses its edge */
.pd-overlay .pd-fact[aria-expanded="true"] { background: none; }

/* a row with nothing to open must not pretend otherwise */
.pd-overlay .pd-fact.is-static { cursor: default; }
.pd-overlay .pd-fact.is-static:hover { background: none; }

.pd-overlay .pd-learn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 26px 0 0;
  font-size: 11.5px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}
.pd-overlay .pd-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  /* never shrinks, never scrolls: the facts move behind it */
  flex: 0 0 auto;
  margin-top: 0;
  padding-top: 16px;
  padding-bottom: 0;
  border-top: 1px solid var(--border-soft);
}

/* The five visual tokens below are the shared widget body-button recipe from
   styles.css:20163 (primary) and :20256 (secondary), copied rather than joined
   to those selector lists so this stays one file. Shape, size and padding are
   the overlay's own, which is what the shared rule leaves to each caller. */
.pd-overlay .pd-btn-primary,
.pd-overlay .pd-btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease,
              box-shadow 0.15s ease, opacity 0.15s ease;
}
.pd-overlay .pd-btn-primary {
  font-weight: 500;
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.14);
}
.pd-overlay .pd-btn-primary:hover {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.32), inset 0 0 14px rgba(255, 255, 255, 0.2);
}
.pd-overlay .pd-btn-secondary {
  font-weight: 500;
  color: rgb(255 255 255 / 60%);
  background: transparent;
  border: 1px solid rgb(255 255 255 / 12%);
  box-shadow: none;
}
.pd-overlay .pd-btn-secondary:hover { opacity: 0.85; }
.pd-overlay .pd-btn-primary:active,
.pd-overlay .pd-btn-secondary:active { transform: translateY(1px) scale(0.99); }
.pd-overlay .pd-btn-primary:disabled,
.pd-overlay .pd-btn-secondary:disabled { opacity: 0.55; pointer-events: none; }
.pd-overlay .pd-btn-primary:focus-visible,
.pd-overlay .pd-btn-secondary:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* --------------------------------------------------- right: three modes -- */

.pd-overlay .pd-right {
  grid-column: 5;
  grid-row: 1;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 32px;
}
.pd-overlay .pd-right-slot {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.pd-overlay .pd-right-slot.is-entering { animation: pdModeIn var(--wl-base) var(--wl-ease); }
.pd-overlay .pd-right-slot.is-leaving { animation: pdModeOut 0.2s var(--wl-ease) forwards; }
@keyframes pdModeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pdModeOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(6px); } }

/* ----------------------------------------------------------------- tree -- */

/* the drawing is centred and the annotations fan to both sides, two each, so
   each side reserves half of what one stacked column used to need */
.pd-overlay .pt-tree {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
/* 60% leaves 20% either side: an 8px leader gap plus a note of 26% of the box
   always fits, at every column width this panel can reach */
.pd-overlay .pt-box,
.pd-overlay .pt-stage {
  width: 60%;
  max-width: 340px;
}
.pd-overlay .pt-box {
  position: relative;
  aspect-ratio: 3 / 4;
}
.pd-overlay .pt-art {
  position: absolute;
  inset: 0;
}
/* the artwork is an alpha mask of light: no plate, no tint, no filter behind
   it, and `contain` so the 3:4 frame is never stretched */
.pd-overlay .pt-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pd-overlay .pt-branches,
.pd-overlay .pt-leaders {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--wear-primary);
}
/* the moments are the one interactive thing in the drawing, so they carry the
   full panel light and a glow the printed canopy does not have */
.pd-overlay .pt-branch {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.7));
  animation: ptMomentPulse 4.5s ease-in-out alternate infinite;
  transition: stroke-width 0.2s ease, filter 0.2s ease;
}
.pd-overlay .pt-branch-node {
  fill: currentColor;
  stroke: none;
  r: 3.4;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.85));
  animation: ptMomentPulse 4.5s ease-in-out alternate infinite;
  transition: r 0.15s ease, filter 0.2s ease;
}
.pd-overlay .pt-branch.is-active { stroke-width: 2.8; }
/* the node swells under the pointer, so a moment announces itself as something
   you can open before you ever land one */
.pd-overlay .pt-branch-node.is-active { r: 4.6; }
.pd-overlay .pt-branch.is-active,
.pd-overlay .pt-branch-node.is-active {
  filter: drop-shadow(0 0 14px #fff);
}
/* the delay is set per branch, negative and staggered, so the six never pulse
   in step */
@keyframes ptMomentPulse { from { opacity: 0.82; } to { opacity: 1; } }

/* the hit targets live inside the SVG, so they cannot desync from the geometry
   however the viewBox is letterboxed */
.pd-overlay .pt-hits {
  position: absolute;
  inset: 0;
}
.pd-overlay .pt-moment-hit {
  fill: transparent;
  stroke: none;
  cursor: pointer;
}
.pd-overlay .pt-moment-hit:focus { outline: none; }
/* an SVG shape does not render `outline` reliably, so the ring is a stroke */
.pd-overlay .pt-moment-hit:focus-visible {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
}

.pd-overlay .pt-leader {
  fill: none;
  stroke: currentColor;
  opacity: 0.22;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.pd-overlay .pt-note {
  position: absolute;
  width: min(92px, 26%);
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  pointer-events: none;
}
.pd-overlay .pt-note[data-side="right"] { left: calc(100% + 8px); }
.pd-overlay .pt-note[data-side="left"] { right: calc(100% + 8px); text-align: right; }
.pd-overlay .pt-note-text {
  display: block;
  animation: ptNoteIn 0.3s var(--wl-ease) both;
}
@keyframes ptNoteIn { from { opacity: 0; } to { opacity: 1; } }

.pd-overlay .pt-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  box-sizing: border-box;
}
.pd-overlay .pt-stage-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wear-muted);
}
.pd-overlay .pt-stage-noun {
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}

/* moment popover — the .atmos-tip surface and type, tail included */
.pd-overlay .pt-moment {
  --wear-primary: rgba(243, 242, 238, 0.94);
  --wear-secondary: rgba(223, 222, 216, 0.8);
  --wear-muted: rgba(159, 159, 159, 0.62);
  position: absolute;
  z-index: 73;
  width: 240px;
  padding: 14px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(145deg, rgba(38, 42, 41, 0.92) 0%, rgba(26, 30, 29, 0.9) 100%);
  backdrop-filter: blur(26px) saturate(135%);
  -webkit-backdrop-filter: blur(26px) saturate(135%);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
  color: var(--wear-primary);
  pointer-events: none;
}
.pd-overlay .pt-moment[hidden] { display: none; }
.pd-overlay .pt-moment-glyph {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--wear-muted);
}
.pd-overlay .pt-moment-when {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--wear-muted);
}
.pd-overlay .pt-moment-title {
  margin: 8px 22px 0 0;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.pd-overlay .pt-moment-detail {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}

/* ------------------------------------------------------------ messenger -- */
/* held to the .msg-* widget already in styles.css, bubble for bubble */

.pd-overlay .pt-msg {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-overlay .pt-msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.pd-overlay .pt-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}
.pd-overlay .pt-msg-who {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.pd-overlay .pt-msg-sub {
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}
.pd-overlay .pt-msg-thread {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  --pt-tf: 0px;
  --pt-bf: 0px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pt-tf), #000 calc(100% - var(--pt-bf)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--pt-tf), #000 calc(100% - var(--pt-bf)), transparent 100%);
  transition: --pt-tf var(--wl-fast) ease, --pt-bf var(--wl-fast) ease;
}
.pd-overlay .pt-msg-thread::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pd-overlay .pt-msg-thread.is-fade-top { --pt-tf: 24px; }
.pd-overlay .pt-msg-thread.is-fade-bottom { --pt-bf: 24px; }
.pd-overlay .pt-msg-thread:focus { outline: none; }
.pd-overlay .pt-msg-thread:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
  border-radius: 8px;
}

.pd-overlay .pt-msg-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pd-overlay .pt-msg-row[data-from="them"] { align-items: flex-start; }
.pd-overlay .pt-msg-row[data-from="you"] { align-items: flex-end; }
.pd-overlay .pt-msg-bubble {
  max-width: 78%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  border: 1px solid transparent;
}
.pd-overlay .pt-msg-row[data-from="them"] .pt-msg-bubble {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-left-radius: 4px;
}
/* "mine" is a solid fill read against the 5% tint of "theirs" — no glow, that
   recipe belongs to buttons and a bubble is not pressable */
.pd-overlay .pt-msg-row[data-from="you"] .pt-msg-bubble {
  background: rgb(111 111 111 / 20%);
  border-bottom-right-radius: 4px;
}
.pd-overlay .pt-msg-time {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
}

.pd-overlay .pt-msg-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 5%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.pd-overlay .pt-msg-compose:focus-within {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.pd-overlay .pt-msg-compose.is-empty { animation: ptShake var(--wl-base) ease; }
@keyframes ptShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.pd-overlay .pt-msg-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 0;
  background: none;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
}
.pd-overlay .pt-msg-input::placeholder { color: var(--wear-primary); opacity: 0.4; }
/* the shared .icon-btn again, sized down to sit inside the pill */
.pd-overlay .pt-msg-send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: none;
  box-shadow: none;
  background: rgb(111 111 111 / 20%);
  backdrop-filter: blur(18px) saturate(112%);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  color: var(--wear-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pd-overlay .pt-msg-send svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pd-overlay .pt-msg-send:hover { background: rgb(131 131 131 / 26%); }
.pd-overlay .pt-msg-send:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}

/* ------------------------------------------------------------ plan mode -- */

.pd-overlay .pt-plan {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
}
.pd-overlay .pt-plan-lead {
  margin: 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-secondary);
}
.pd-overlay .pt-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* the .atmos-ro__chip: state is carried by background, never by border colour */
.pd-overlay .pt-plan-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgb(255 255 255 / 12%);
  background: rgba(255, 255, 255, 0.04);
  font-family: inherit;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  cursor: pointer;
  transition: background 0.15s ease;
}
.pd-overlay .pt-plan-chip:hover { background: rgba(255, 255, 255, 0.09); }
.pd-overlay .pt-plan-chip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.25);
  outline-offset: 2px;
}
.pd-overlay .pt-plan-chip[aria-pressed="true"] { background: rgb(111 111 111 / 20%); }
/* the glass pill again, squared off to 10px because it is a multi-line field */
.pd-overlay .pt-plan-note {
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgb(255 255 255 / 30%);
  background: rgb(255 255 255 / 5%);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.05), inset 0 0 14px rgba(255, 255, 255, 0.03);
  outline: none;
  resize: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--wear-primary);
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
.pd-overlay .pt-plan-note::placeholder { color: var(--wear-primary); opacity: 0.4; }
.pd-overlay .pt-plan-note:focus {
  border-color: rgb(255 255 255 / 86%);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.05), 0 0 24px rgba(255, 255, 255, 0.12);
}
.pd-overlay .pt-plan-note.is-empty { animation: ptShake var(--wl-base) ease; }
.pd-overlay .pt-plan-keep { align-self: flex-start; }
.pd-overlay .pt-plan-ack {
  margin: 0;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--wear-muted);
  animation: pdAckIn 0.3s var(--wl-ease);
}
.pd-overlay .pt-plan-ack[hidden] { display: none; }

/* -------------------------------------------------------- narrow panels -- */
/* the shell keeps its geometry and the columns stay equal; only the gutters
   and the inner padding tighten. Nothing that carries a function is hidden
   until three columns genuinely cannot fit. */

/* The tree column narrows; it is never removed. The box reserves the width the
   annotations need, so a leader line and its label can never be clipped. */
@media (max-width: 1180px) {
  .pd-overlay .pd-shell {
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  }
  .pd-overlay .pd-right { padding: 28px 20px 24px; }
  .pd-overlay .pt-box,
  .pd-overlay .pt-stage { width: 60%; }
  .pd-overlay .pd-facts { padding-left: 28px; padding-right: 28px; }
}

/* Below this the portrait is the column that goes — it is the least functional
   of the three. The tree and the actions always stay. */
@media (max-width: 880px) {
  .pd-overlay .pd-shell {
    grid-template-columns: minmax(0, 56fr) 20px minmax(0, 44fr);
  }
  .pd-overlay .pd-portrait,
  .pd-overlay .pd-divider--left { display: none; }
  .pd-overlay .pd-facts { grid-column: 1; }
  .pd-overlay .pd-divider--right { grid-column: 2; }
  .pd-overlay .pd-right { grid-column: 3; }
  .pd-overlay .pt-box,
  .pd-overlay .pt-stage { width: 60%; }
}

/* --------------------------------------------------------- calm motion -- */
/* One block, at the end, disabling every animation and transition this
   feature introduces. */

@media (prefers-reduced-motion: reduce) {
  .people-circle-widget .pc-ring,
  .people-circle-widget .pc-ring::after,
  .people-circle-widget .pc-star-mark svg,
  .people-circle-widget .pc-star-mark::before,
  .people-circle-widget .pc-avatar,
  .people-circle-widget .pc-cluster-label,
  .people-circle-widget .pc-zone,
  .people-circle-widget .pc-node.is-moving .pc-ring,
  .people-circle-widget .pc-node.is-returning,
  .people-circle-widget .pc-zone.is-settling,
  .people-circle-widget .pc-cluster-label.is-settling,
  .people-circle-widget .pc-node.is-settling,
  .people-circle-widget .pc-card,
  .people-circle-widget .pc-card-star,
  .pd-overlay,
  .pd-overlay .pd-shell,
  .pd-overlay .pd-close,
  .pd-overlay .pd-back,
  .pd-overlay .pd-fact,
  .pd-overlay .pd-fact-label,
  .pd-overlay .pd-fact-value,
  .pd-overlay .pd-fact-detail,
  .pd-overlay .pd-facts-scroll,
  .pd-overlay .pd-right-slot,
  .pd-overlay .pd-btn-primary,
  .pd-overlay .pd-btn-secondary,
  .pd-overlay .pt-branch,
  .pd-overlay .pt-branch-node,
  .pd-overlay .pt-note-text,
  .pd-overlay .pt-moment,
  .pd-overlay .pt-msg-thread,
  .pd-overlay .pt-msg-compose,
  .pd-overlay .pt-msg-send,
  .pd-overlay .pt-plan-chip,
  .pd-overlay .pt-plan-note,
  .pd-overlay .pt-plan-ack {
    animation: none !important;
    transition: none !important;
  }
  .people-circle-widget .pc-ring::after { opacity: 0.45; }
  .pd-overlay .pt-note-text { opacity: 1; }
  /* a separate rule, not the shared list above: `animation: none` would park
     two bright dots on the panel's border, which is worse than no light */
  .pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::before,
  .pd-overlay .pd-fact[aria-expanded="true"] .pd-fact-detail-text::after { content: none; }
}