/* The person panel, the event glimpse and Messages (DECISION-4 §11, §12,
   §15; the approved mock visual-3/panel.css), on the app's tokens.
   The panel sits outside the page's own layout: fixed to the right of the
   content column, so it opens over any list without the page knowing.
   ≥1341 px: a 440 px column, the content column narrows to make room.
   761–1340: it overlays the list. ≤760: a full-screen sheet with ‹ Back. */

/* --radius-panel: the open side's corners, very slight (owner, 30 Oct: "maybe
   a slight curve on the top an dbottom on the left side might help, very
   slight"). Docked, the left two only; floating, all four, never rounder. */
:root { --w-panel: 440px; --radius-panel: 8px; }

.pn[hidden] { display: none; }
.pn {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 30;
  width: var(--w-panel); overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border-left: 1px solid var(--line);
  border-radius: var(--radius-panel) 0 0 var(--radius-panel);
}
@media (min-width: 1341px) {
  body:has(#who-panel.is-open) .content-col { padding-right: var(--w-panel); }
}
@media (max-width: 1340px) and (min-width: 761px) {
  /* Edge, shadow and the scrim behind: app.css's panel layer. */
  .pn { top: 8px; right: 8px; bottom: 8px; border-radius: var(--radius-panel); }
  .pn-bar { border-radius: var(--radius-panel) var(--radius-panel) 0 0; }
}

/* The docked Send goes outlined while the panel is open: the panel's own
   button is the one filled one on screen (DECISION-4 §12). */
body:has(#who-panel.is-open) .content-col .btn-primary:not(.pn .btn-primary) {
  background: var(--surface); border-color: var(--line-strong); color: var(--ink);
}
@media (hover: hover) { body:has(#who-panel.is-open) .content-col .btn-primary:not(.pn .btn-primary):hover { background: var(--hover); border-color: var(--ink); } }

/* the bar: ‹ back (375 and a stacked glimpse), ↑ ↓ ✕ */
.pn-bar {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-2);
  min-height: 52px; padding: 0 var(--space-3) 0 var(--space-5);
  background: var(--surface); border-bottom: 1px solid var(--line);
  border-radius: var(--radius-panel) 0 0 0;
}
.pn-back { display: none; align-items: center; gap: 4px; min-height: var(--control-h-touch);
  font-size: var(--fs-control); font-weight: 500; color: var(--accent-text); text-decoration: none; }
.pn-back.is-stacked { display: inline-flex; }
@media (hover: hover) { .pn-back:hover { text-decoration: underline; text-underline-offset: 3px; } }
.pn-nav { display: flex; gap: 2px; margin-left: auto; }
.pn-btn { display: inline-grid; place-items: center; width: var(--control-h-touch); height: var(--control-h-touch);
  border-radius: var(--radius-control); color: var(--text-2); }
@media (hover: hover) { a.pn-btn:hover { background: var(--hover); color: var(--ink); } }
.pn-btn.is-off { color: var(--line-strong); opacity: .5; }
.pn-ic { width: 18px; height: 18px; flex: none; }
.pn-ic-up { transform: rotate(180deg); }
.pn-ic-left { transform: rotate(180deg); }

/* The body starts a block gap under the bar. The role is the bar's last
   line (redesign, 30 Oct: the pinned header is the layer's title block) and
   carries no margin of its own (a -6px pull, spacing audit). */
.pn-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--gap-block) var(--space-5) var(--space-7); }
.pn-name { margin: 0; font-size: var(--fs-pn-title); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pn-role { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
/* CHA-1049: how current the role is, quiet after it ("as of Oct 2026"). */
.pn-asof { margin-left: var(--space-1); font-size: 13px; color: var(--text-3); white-space: nowrap; }

/* label · value, one fact a line; at 375 the label sits above its value */
.pn-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-2);
  align-items: baseline; margin: var(--space-1) 0 0; padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--line); }
/* With no role line the facts open the body, under the bar's own rule: one
   rule under the header, not two 28 px apart (QA 29 Oct). */
.pn-body > .pn-facts:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.pn-fact { display: contents; }
.pn-fact dt { max-width: 150px; }
.pn-fact dt { font-size: var(--fs-meta); line-height: 1.45; color: var(--text-3); }
.pn-fact dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--text-2); min-width: 0; }
/* The event's own words, with no label (owner, 30 Oct: "In their words" removed everywhere). */
.pn-fact-words > dd { grid-column: 1 / -1; }
.pn-fact strong, .pn-event { font-weight: 500; color: var(--ink); }
.pn-event { text-decoration: none; background: linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 100% 1px no-repeat; }
@media (hover: hover) { .pn-event:hover { color: var(--accent-text); background-image: linear-gradient(var(--accent), var(--accent)); } }
.pn-words { font-style: normal; }

.pn-label { display: block; margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.3; font-weight: 500;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.pn-note-form { display: grid; gap: var(--space-2); }
.pn .pn-save { justify-self: start; font-size: var(--fs-meta); }
.pn-note, .pn-msg, .pn-input {
  width: 100%; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--surface); font: inherit; font-size: var(--fs-field); line-height: 1.5; color: var(--ink);
}
.pn-input { height: var(--control-h-touch); padding: 0 12px; }
.pn-note { border-color: var(--line); min-height: 64px; }
.pn-note::placeholder { color: var(--text-3); }
.pn-note:focus, .pn-msg:focus, .pn-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pn-msg { background: var(--hover); border-color: var(--line); }
.pn-note-text, .pn-sent { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); white-space: pre-line; }
.pn-sent { padding: 10px 12px; border-radius: 10px; background: var(--hover); border: 1px solid var(--line); }
/* The action sits 24 under the facts (the body's 12 gap and this 12), as a
   form's actions do. */
.pn-act { padding-top: var(--space-3); }
.pn-act .btn, .pn-send .btn { height: var(--control-h-touch); padding: 0 20px; font-size: var(--fs-control); }
.pn-act form { margin: 0; }
.pn-ask, .pn-ask-form { display: flex; flex-direction: column; gap: var(--space-2); }
.pn-ask { padding-top: var(--space-3); border-top: 1px solid var(--line); margin-top: var(--space-2); }
.pn-ask .pn-label:first-child { margin-top: 0; }
.pn-state { margin: 0; font-size: var(--fs-meta); color: var(--text-2); }
.pn-send { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.pn-send .btn { display: inline-flex; align-items: center; gap: 6px; }
.pn-meta { margin: 0; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
.pn-answer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.pn-answer .pn-label { margin: 0; }
.pn-yes { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* the glimpse: held lines, then hosts and their words, one quiet link last */
.pn-hosts { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.pn-lines { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.pn-foot { margin: var(--space-3) 0 0; }
.pn .pn-out { font-size: var(--fs-meta); font-weight: 400; color: var(--text-3); }
@media (hover: hover) { .pn .pn-out:hover { color: var(--ink); } }

/* ---------------------------------------------------------------- Messages */
.host-messages { max-width: calc(var(--w-rows) + 2 * var(--pad-page-side)); }
.msg-gmail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-card);
  background: var(--surface); color: var(--text-2); }
.msg-gmail p { margin: 0; }
.msg-gmail b { font-weight: 500; color: var(--ink); }
.msg-fail { color: var(--warn); font-weight: 500; }
.msg-untracked { margin: var(--space-3) 0 0; font-size: var(--fs-meta); color: var(--text-3); }
/* A second one-line note under "Copied notes aren't tracked here", 8 under
   it, not 32. */
.msg-empty { margin: var(--space-2) 0 0; color: var(--text-2); }
.msg-list section { margin-top: var(--space-5); }
.msg-list ul { margin: 0; padding: 0; list-style: none; }
.msg-head { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-1);
  font-size: 13px; line-height: 1.3; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); }
.msg-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.msg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: 2px; align-items: center;
  min-height: var(--row-min-sm); padding: 10px 0; border-top: 1px solid var(--line); }
.msg-row:first-child { border-top: 0; }
.msg-name { font-size: var(--fs-title); line-height: 1.35; font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-slot { justify-self: end; margin: 0; }
.msg-date { font-size: var(--fs-meta); color: var(--text-3); white-space: nowrap; }
.msg-line { grid-column: 1 / -1; margin: 0; font-size: var(--fs-meta); line-height: 1.4; color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- 375 */
@media (max-width: 760px) {
  .pn { inset: 0; width: auto; border: 0; border-radius: 0; z-index: 60; }
  .pn-bar { border-radius: 0; }
  body:has(#who-panel.is-open) { overflow: hidden; }
  .pn-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-2); padding: 0 var(--space-2) 0 var(--pad-page-side); }
  .pn-back { display: inline-flex; grid-column: 1; grid-row: 1; }
  .pn-bar .pn-nav { grid-column: 2; grid-row: 1; margin-left: 0; justify-self: end; }
  .pn-bar .pn-head { grid-column: 1; grid-row: 2; }
  .pn-bar .pn-acts { grid-column: 2; grid-row: 2; }
  .pn-bar .pn-role { grid-column: 1 / -1; grid-row: 3; }
  .pn-x { display: none; }
  .pn-body { padding: var(--gap-block) var(--pad-page-side) var(--space-8); }
  .pn-facts { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .pn-fact dt { max-width: none; }
  .pn-fact + .pn-fact dt { margin-top: var(--space-2); }
  .pn-act .btn, .pn-send .btn-primary { width: 100%; justify-content: center; }
  .pn-send { flex-direction: column; }
  .pn-send .btn { justify-content: center; }
  .msg-gmail .btn { width: 100%; height: var(--control-h-touch); }
}

/* The header (spec C.1): ↑ ↓ and Close on the first row (‹ Back beside them
   at 375, where Close hides), then the name and the "in" mark with the X and
   Pick to their right. Close is the plain X again; Not a fit is words
   beside Pick (owner calls, 30 Oct, CHA-955). */
.pn-head { display: block; min-width: 0; }
.pn-bar .pn-head { flex: 1 1 0; padding: var(--space-2) 0; }
.pn-bar .pn-name { display: inline; margin: 0; font-size: 18px; line-height: 24px; overflow-wrap: anywhere; }
.pn-bar .pn-head .in-mark { margin-left: var(--space-2); }
/* CHA-1049 (UX fix round): the marks (LinkedIn, X, Instagram, website) are
   one group that never wraps, after the name. Each is a 44px box (the 16px
   glyph padded, no stretched ::after); the negative margins keep the boxes
   from growing the name's line and put the first glyph 8px after the name.
   In the panel the group takes its own row under the role (the grids below
   and in phone.css). */
.pn-marks { display: inline-flex; flex-wrap: nowrap; align-items: center; vertical-align: middle; margin: -14px 0 -14px -6px; white-space: nowrap; }
.pn .pn-bar .pn-head .pn-marks .in-mark { margin: 0; padding: 14px; box-sizing: content-box; vertical-align: baseline; }
.pn-marks .in-mark::after { content: none; }
.pn-marks .in-mark:focus-visible { outline-offset: -8px; border-radius: 6px; }
/* A fact's extra lines (Hosts with): a muted line and a next line. */
.pn-fact .pn-meta, .pn-fact .pn-then { display: block; }
.pn-fact .pn-meta { font-size: var(--fs-meta); }
.pn-acts { display: flex; align-items: center; gap: var(--space-2); flex: none; }
.pn-acts form { margin: 0; display: flex; }
.pn-bar .pn-nav { margin-left: 0; }
@media (min-width: 761px) {
  .pn-bar .pn-btn { width: 36px; height: 36px; }
  /* The arrows and close keep the first row; the name and the decision pair
     share the second, the pair on the right as on a Guests row (owner,
     30 Oct: "the right side control"); the name wraps, never cuts. */
  .pn-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); padding-top: var(--space-3); }
  .pn-bar .pn-nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .pn-bar .pn-head { grid-column: 1; grid-row: 2; padding: 0 0 var(--space-2); }
  .pn-bar .pn-acts { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; }
  .pn-bar .pn-role { grid-column: 1 / -1; grid-row: 3; }
  /* CHA-1049: the marks take their own row under the role, as on a phone
     (phone.css): name, role, marks at every width. */
  .pn-bar > .pn-head:has(> .pn-marks) { display: contents; }
  .pn-bar > .pn-head:has(> .pn-marks) > .pn-name { grid-column: 1; grid-row: 2; align-self: start; min-width: 0; padding: 0 0 var(--space-2); }
  .pn .pn-bar > .pn-head > .pn-marks { grid-column: 1 / -1; grid-row: 4; justify-self: start; margin: -12px 0 -4px -14px; }
}
.pn-words { display: grid; gap: var(--space-1); }
.pn-words .pn-label { margin: 0; }
.pn-bio { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-2); }
.pn-to { margin: 0; }

/* Rewrite in my voice sits under the draft; the sample opens beneath the form (K4) */
.pn-revoice { margin-top: var(--space-2); }
.pn-voice { margin-top: var(--space-3); }
.pn-voice summary { cursor: pointer; }
.pn-rooms .pn-label { margin-bottom: var(--space-1); }

/* Not a fit in the panel moves on to the next person; this line, at the top,
   takes the removal back (CHA-641). */
.pn-removed { display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; min-height: 44px; margin: 0; padding: 0 var(--space-5); border-bottom: 1px solid var(--line); background: var(--hover); color: var(--text-2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
.pn-removed .pc-removed-name { font-weight: 600; color: var(--ink); }
.pn-removed .pc-removed-sep { color: var(--text-3); white-space: pre; }
.pn-removed .pc-undo-form { margin: 0; display: inline-flex; }
@media (max-width: 760px) { .pn-removed { padding: 0 var(--pad-page-side); } }
.pn-note-error { margin: 0 0 var(--space-2); }

/* Not a fit in the panel header is words beside Pick, never an X: the X at
   the panel's top right is Close (owner calls, 30 Oct, CHA-955). The list
   row keeps its bare X (.pc-x). */
.pc-nf { position: relative; display: inline-flex; align-items: center; height: 32px; padding: 0 var(--space-1); border: 0; border-radius: var(--radius-control); background: none; color: var(--text-2); font: 500 15px/1 var(--font); white-space: nowrap; cursor: pointer; }
.pc-nf::after { content: ""; position: absolute; inset: -4px -2px; }
@media (hover: hover) { .pc-nf:hover { background: var(--hover); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.pc-nf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
@media (pointer: coarse) { .pn-bar .pc-nf { height: 44px; min-height: 44px; } }


/* The header owns its bottom space, so a person with no role line keeps Pick off the rule. */
.pn-bar { padding-bottom: var(--space-3); }
/* An event asked for over the panel that could not be opened (fix round,
   30 Oct): one quiet line, as Removed is. */
.pn-gone { margin: 0; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); background: var(--hover); color: var(--text-2); font-size: var(--fs-meta); line-height: var(--lh-meta); }
@media (max-width: 760px) { .pn-gone { padding: var(--space-3) var(--pad-page-side); } }