/* =========================================================
   the unified person page — org line, calendar strip, chips
   Consumed by /tools/user-admin/user.html (the person page),
   /tools/user-admin/people.html (the list) and /me/.

   Tokens only. Radii come from --r-1 / --r-soft, never a
   hardcoded value; colour and type come from
   colors_and_type.css. Major lines draw with
   var(--rule-structural, <soft default>) so the page reads
   correctly in both the working and reading registers.
   ========================================================= */

/* ── the org line under the name ─────────────────────────── */
.pp-orgline {
  margin-top: 10px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.pp-orgline a {
  color: var(--zeal-orange-digital, var(--zeal-orange));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-orgline__sep { color: var(--ink-4); }

/* ── the calendar strip ──────────────────────────────────── */
.pp-cal { padding-top: 4px; }

.pp-calstrip {
  display: grid;
  grid-template-columns: repeat(var(--pp-days, 60), minmax(6px, 1fr));
  gap: 2px;
  margin-top: 12px;
}
.pp-cell {
  height: 30px;
  border-radius: var(--r-soft);
  background: var(--surface, rgba(0, 0, 0, .04));
}
.pp-cell.is-weekend { background: var(--warm, rgba(0, 0, 0, .07)); }
.pp-cell.is-today   { outline: 2px solid var(--zeal-orange); outline-offset: -2px; }

/* the three populations. Assignment is the solid, confident one:
   it is the booking the portal actually owns. Leave is the
   attention colour because "this person is not available" is the
   fact a planner most needs to see. Outlook is quiet — it is
   somebody else's system, mirrored. */
.pp-cell.is-assignment { background: var(--accent-green, #1D9E75); }
.pp-cell.is-leave      { background: var(--accent-red, #E24B4A); }
.pp-cell.is-outlook    { background: var(--warm-grey, #DBC8B6); }

/* A private event is drawn as texture, never as a label. The
   hatch says "occupied, and that is all you get" in a way a
   colour swatch cannot. */
.pp-cell.is-private {
  background: repeating-linear-gradient(
    45deg,
    var(--warm-grey-light, #F5F0EB),
    var(--warm-grey-light, #F5F0EB) 4px,
    var(--warm-grey, #DBC8B6) 4px,
    var(--warm-grey, #DBC8B6) 6px
  );
}

.pp-callegend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 10px;
  font-family: var(--font-cd);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.pp-callegend__k { display: inline-flex; align-items: center; gap: 6px; }
.pp-sw {
  width: 14px;
  height: 9px;
  border-radius: 2px;
  display: inline-block;
  background: var(--surface, rgba(0, 0, 0, .06));
}
.pp-sw.is-assignment { background: var(--accent-green, #1D9E75); }
.pp-sw.is-leave      { background: var(--accent-red, #E24B4A); }
.pp-sw.is-outlook    { background: var(--warm-grey, #DBC8B6); }
.pp-sw.is-private {
  background: repeating-linear-gradient(
    45deg,
    var(--warm-grey-light, #F5F0EB),
    var(--warm-grey-light, #F5F0EB) 3px,
    var(--warm-grey, #DBC8B6) 3px,
    var(--warm-grey, #DBC8B6) 5px
  );
}

.pp-cal__note,
.pp-cal__degraded {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.45;
}
.pp-cal__degraded { color: var(--amber, #A66F0F); }

/* ── people-list filter chips ────────────────────────────── */
.pp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
}
.pp-chip {
  font-family: var(--font-cd);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft);
  padding: 5px 14px;
  color: var(--ink-3);
  background: var(--paper, #fff);
  cursor: pointer;
}
.pp-chip:hover { border-color: var(--rule-3, rgba(0, 0, 0, .22)); }
.pp-chip.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.pp-chip__n { opacity: .6; margin-left: 6px; }

/* ── time off panel ──────────────────────────────────────── */
.pp-h3 {
  font-family: var(--font-ex);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
  text-transform: lowercase;
  margin: 28px 0 12px;
}
.pp-tolist {
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft);
  background: var(--paper, #fff);
}
.pp-torow {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, .08));
  font-size: 14px;
}
.pp-torow:last-child { border-bottom: none; }
.pp-torow__what { font-weight: 500; min-width: 70px; }
.pp-torow__dates { color: var(--ink-2); }
.pp-torow__reason { width: 100%; font-size: 13px; color: var(--ink-3); }
.pp-torow__note {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--zeal-orange-digital, var(--zeal-orange));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── notifications feed ──────────────────────────────────── */
.pp-feed {
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft);
  background: var(--paper, #fff);
}
.pp-feed__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-structural, var(--rule-2, rgba(0, 0, 0, .14)));
  font-family: var(--font-cd);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pp-feed__head button { margin-left: auto; }
.pp-feedrow {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, .08));
}
.pp-feedrow:last-child { border-bottom: none; }
.pp-feedrow__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--zeal-orange);
  margin-top: 6px;
  flex-shrink: 0;
}
.pp-feedrow.is-read .pp-feedrow__dot {
  background: transparent;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
}
.pp-feedrow__t { font-weight: 500; margin-bottom: 2px; font-size: 14px; }
.pp-feedrow__b { color: var(--ink-2); font-size: 14px; }
.pp-feedrow__l { font-size: 13px; margin-top: 4px; }
.pp-feedrow__l a {
  color: var(--zeal-orange-digital, var(--zeal-orange));
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pp-feedrow__when {
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-4);
  white-space: nowrap;
}

/* ── doors: the actions that used to be their own screens ── */
.pp-doors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-structural, var(--rule-2, rgba(0, 0, 0, .14)));
}
.pp-consequence {
  background: var(--warm-grey-light, #F4EEE8);
  border-radius: var(--r-soft);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
  margin: 12px 0 16px;
}

@media (max-width: 720px) {
  .pp-calstrip { grid-template-columns: repeat(var(--pp-days, 60), minmax(4px, 1fr)); }
  .pp-cell { height: 22px; }
}

/* ═══════════════════════════════════════════════════════════
   the calendar, as a calendar (arc F day three, 2026-08-03)

   The .pp-calstrip above is the SUMMARY strip: coloured cells,
   no labels, a shape at a glance. It survives in exactly one
   place — the approvals overlap panel, where a shape is the
   point. Everything below is the real calendar: the planner's
   date axis, lane-packed blocks, labels on them.
   ═══════════════════════════════════════════════════════════ */
.pp-cal2 { margin-top: 10px; }
.pp-cal2__scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.pp-cal2__inner {
  min-width: 100%;
  width: calc(var(--pp-days, 60) * var(--pl-daymin, 52px));
}

/* the day axis */
.pp-cal2__axis {
  display: grid;
  grid-template-columns: repeat(var(--pp-days, 60), var(--pl-daymin, 52px));
  border-bottom: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
}
.pp-cal2__hd {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: 1px; padding: 4px 0 5px;
  font-family: var(--font-cd, sans-serif);
  line-height: 1; color: var(--ink-4, rgba(0, 0, 0, .38));
  border-left: 1px solid transparent;
}
.pp-cal2__hd b { font-size: 12px; font-weight: 500; color: var(--ink-3, rgba(0, 0, 0, .55)); }
.pp-cal2__hd i { font-size: 9px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.pp-cal2__hd.is-weekend b, .pp-cal2__hd.is-weekend i { color: var(--ink-4, rgba(0, 0, 0, .3)); }
.pp-cal2__hd.is-monthfirst { border-left-color: var(--rule-2, rgba(0, 0, 0, .14)); }
.pp-cal2__hd.is-today b {
  color: #fff; background: var(--zeal-orange, #FF5800);
  border-radius: 999px; padding: 1px 5px;
}

/* the block field */
.pp-cal2__lanes {
  display: grid;
  grid-template-columns: repeat(var(--pp-days, 60), var(--pl-daymin, 52px));
  grid-template-rows: repeat(var(--pp-lanes, 1), 26px);
  gap: 3px 0;
  padding: 6px 0 2px;
  position: relative;
}
/* weekend / today wash, drawn under the blocks.
   The negative margins bleed the wash into .pp-cal2__lanes' own
   6px/2px padding (arc F final). Without them the column spans only
   the lane rows, so every weekend stopped short of both edges and read
   as a floating block in the middle of the field rather than as column
   shading — which is exactly what it looked like. Kept as margins on
   the wash rather than by removing the container's padding, because
   that padding is what stops the blocks touching the date header. */
.pp-cal2__col {
  grid-row: 1 / -1;
  margin: -6px 0 -2px;
  pointer-events: none;
}
.pp-cal2__col.is-weekend { background: var(--warm, rgba(0, 0, 0, .045)); }
.pp-cal2__col.is-today { box-shadow: inset 1px 0 0 var(--zeal-orange, #FF5800), inset -1px 0 0 var(--zeal-orange, #FF5800); }

.pp-blk {
  display: flex; align-items: center;
  min-width: 0; height: 24px;
  padding: 0 7px; margin-right: 2px;
  border-radius: var(--r-1, 3px);
  font-size: 12px; line-height: 1;
  color: #fff; overflow: hidden;
  position: relative;
}
.pp-blk__label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.pp-blk.is-assignment { background: var(--accent-green, #1D9E75); }
.pp-blk.is-leave      { background: var(--accent-red, #E24B4A); }
.pp-blk.is-outlook    { background: var(--warm-grey, #DBC8B6); color: var(--ink-2, rgba(0, 0, 0, .72)); }
/* A private event carries no label at all — the hatch IS the whole
   statement. Nothing to read, nothing to hover, nothing to guess. */
.pp-blk.is-private {
  background: repeating-linear-gradient(45deg,
    #E8E4DC, #E8E4DC 4px, #CFC9BE 4px, #CFC9BE 7px);
  color: transparent;
}

/* ── time off, to the design ── */
.pp-records { font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, .55)); margin: 10px 0 22px; }
.pp-records b { color: var(--ink-2, rgba(0, 0, 0, .72)); font-weight: 500; }

.pp-req {
  background: var(--paper, #fff);
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft, 4px);
  padding: 20px; margin-bottom: 32px;
}
.pp-req__grid {
  display: grid; grid-template-columns: 180px 160px 160px 1fr;
  gap: 16px; align-items: end; margin-bottom: 14px;
}
.pp-req__grid .form-row { margin: 0; }
.pp-count {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; margin-bottom: 14px;
  background: var(--zeal-warm-grey-25, #F4EEE8);
  border-radius: var(--r-soft, 4px);
}
.pp-count__big {
  font-family: var(--font-ex, sans-serif); font-weight: 700;
  font-size: 19px; letter-spacing: -.03em;
}
.pp-count__why { font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, .55)); }
/* .pp-quiet styled the "Historical entry — don't notify" checkbox,
   retired with the box in the arc F coda (2026-08-05) once Vikki's
   record was in. The RPC still takes p_notify; only the everyday UI
   affordance went. Removed rather than left orphaned — dead CSS is
   how a stylesheet stops being readable. */
.pp-req__foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.pp-req__routing { font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, .55)); }

.pp-torow__meta { font-size: 13px; color: var(--ink-3, rgba(0, 0, 0, .55)); }
.pp-torow__right { margin-left: auto; display: flex; gap: 14px; align-items: baseline; }
.pp-torow__diary {
  font-size: 11px; color: var(--accent-green, #1D9E75);
  font-family: var(--font-cd, sans-serif);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.pp-torow__cancel {
  font-size: 13px; color: var(--zeal-orange-digital, #DC3C00);
  background: none; border: none; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap;
}

@media (max-width: 860px) {
  .pp-req__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .pp-torow__right { margin-left: 0; width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   the three doors (person-doors.js)
   ═══════════════════════════════════════════════════════════ */
.pd-door { display: block; }
.pd-kinds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pd-kind {
  text-align: left; cursor: pointer;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft, 4px);
  background: var(--paper, #fff); padding: 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.pd-kind.is-on {
  border-color: var(--zeal-orange, #FF5800);
  background: #FFF8F4;
  box-shadow: inset 0 0 0 1px var(--zeal-orange, #FF5800);
}
.pd-kind__t {
  font-family: var(--font-ex, sans-serif); font-weight: 700;
  font-size: 15px; letter-spacing: -.02em;
}
.pd-kind__b { font-size: 12px; color: var(--ink-3, rgba(0, 0, 0, .55)); line-height: 1.4; }

.pd-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
.pd-fields .form-row { margin: 0; }

.pd-consequence {
  background: var(--zeal-warm-grey-25, #F4EEE8);
  border-radius: var(--r-soft, 4px);
  padding: 12px 15px; margin-bottom: 16px;
  font-size: 13px; line-height: 1.45; color: var(--ink-2, rgba(0, 0, 0, .72));
}
.pd-err { color: var(--accent-red, #E24B4A); font-size: 13px; margin: 0 0 12px; }
.pd-foot { display: flex; gap: 10px; align-items: center; }

/* merge */
.pd-pair {
  display: grid; grid-template-columns: 1fr 44px 1fr;
  align-items: center; gap: 0; margin-bottom: 16px;
}
.pd-pair__side {
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft, 4px); padding: 13px;
}
.pd-pair__who { font-weight: 500; margin-bottom: 2px; }
.pd-pair__em { font-size: 12px; color: var(--ink-3, rgba(0, 0, 0, .55)); }
.pd-pair__arrow {
  text-align: center; font-family: var(--font-ex, sans-serif);
  font-weight: 700; font-size: 19px; color: var(--zeal-orange, #FF5800);
}
.pd-moves {
  border: 1px solid var(--rule-2, rgba(0, 0, 0, .14));
  border-radius: var(--r-soft, 4px); margin-bottom: 16px;
}
.pd-moves__h {
  font-family: var(--font-cd, sans-serif); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-4, rgba(0, 0, 0, .38));
  padding: 9px 15px; border-bottom: 1px solid var(--rule, rgba(0, 0, 0, .08));
}
.pd-moves__r {
  display: flex; gap: 9px; padding: 9px 15px; font-size: 13px;
  color: var(--ink-2, rgba(0, 0, 0, .72));
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, .08));
}
.pd-moves__r:last-child { border-bottom: none; }
.pd-moves__r i { color: var(--accent-green, #1D9E75); font-style: normal; font-weight: 700; }

@media (max-width: 860px) {
  .pd-kinds, .pd-fields { grid-template-columns: 1fr; }
  .pd-pair { grid-template-columns: 1fr; gap: 8px; }
  .pd-pair__arrow { transform: rotate(90deg); }
}

/* =========================================================
   Recovered from the old /me/ bundle (arc F final, 2026-08-04)
   ---------------------------------------------------------
   Day three flipped /me/ to point at this page and replaced
   me/index.html with a 129-line redirect. That page carried an
   inline <style> block, and these four rules died with it —
   while the class REFERENCES travelled into the shared
   person-page.js. Ten `mez-empty` and two `mez-cal-bar` uses
   have been styleless ever since.
   
   They come back here, under this page's own prefix, because a
   shared JS module must never depend on a class defined inside
   one host's <style> block. That is the same fault as the stats
   block, seen from the other side: one was a stylesheet the host
   forgot to link, this was a stylesheet that no longer existed.
   ========================================================= */

/* the calendar tab's toolbar row: populations on the left, view
   controls pushed right by the spacer */
.pp-calbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.pp-calbar__spacer { flex: 1; }

/* every "nothing here" and "still loading" line on this page */
.pp-empty {
  padding: 40px 14px;
  text-align: center;
  font-family: var(--font-cd);
  color: var(--ink-3);
}

/* the notification feed row's growing middle column. Without it the
   timestamp has nothing to be pushed away from, so `margin-left:auto`
   on .pp-feedrow__when did nothing. */
.pp-feedrow__body { flex: 1; min-width: 0; }

/* the time off tab's own wrapper — a named hook so the tab can be
   found in the DOM and spaced as a unit */
.pp-timeoff { display: block; }

/* ── the request-time department overlay ──────────────────────
   The approvals overlap panel, in the requester's chair. It sits
   under the request form and answers one question — who else is
   already committed across the dates you are picking.

   It is deliberately QUIETER than the approver's panel. No card,
   no border, no warning colour: this informs a request, it does
   not gate a decision, and a red box above a submit button reads
   as "don't" whatever the words say. */
.pp-ovl {
  margin: 4px 0 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, .08));
}
.pp-ovl__head {
  display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 10px;
}
.pp-ovl__t {
  font-family: var(--font-cd);
  font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2, rgba(0, 0, 0, .72));
}
.pp-ovl__sub {
  font-size: 12px; color: var(--ink-3, rgba(0, 0, 0, .55));
}

.pp-ovl__grid { display: flex; flex-direction: column; gap: 4px; }
.pp-ovl__row {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center; gap: 10px;
  min-height: 26px;
}
.pp-ovl__who {
  font-size: 13px; color: var(--ink-2, rgba(0, 0, 0, .72));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* One lane per person: a colleague's day is either committed or it
   is not, so there is nothing to stack and no lane count to compute. */
.pp-ovl__lane {
  display: grid;
  grid-auto-rows: 24px;
  grid-template-columns: repeat(var(--pp-ovl-days, 7), minmax(0, 1fr));
  position: relative;
}
.pp-ovl__col {
  grid-row: 1; height: 24px;
  border-radius: var(--r-1, 3px);
  background: var(--warm-25, #F4EEE8);
}
.pp-ovl__col.is-weekend { background: transparent; }
.pp-ovl__clear {
  font-size: 12px; color: var(--ink-4, rgba(0, 0, 0, .38));
}

.pp-ovl__foot {
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; margin-top: 12px;
  font-size: 12px; color: var(--ink-3, rgba(0, 0, 0, .55));
}
/* "asked, not yet approved" is a real third state and needs its own
   swatch — a pending request is not a booking and not nothing. */
.pp-sw.is-pending,
.pp-blk.is-pending {
  background: repeating-linear-gradient(45deg,
    #E24B4A, #E24B4A 4px, #EE8180 4px, #EE8180 7px);
}
.pp-ovl__note { margin-left: auto; font-style: italic; }

@media (max-width: 720px) {
  .pp-ovl__row { grid-template-columns: 92px 1fr auto; gap: 8px; }
  .pp-ovl__note { margin-left: 0; width: 100%; }
}

/* ── the approvals doorway ────────────────────────────────────
   A tab that navigates rather than switching panels: the queue is
   its own surface and stays that way. Styled as a tab because that
   is where people look for it, which was the whole complaint. */
.pp-tab-link {
  display: inline-flex; align-items: center; gap: 7px;
  text-decoration: none;
}
.pp-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-soft, 4px);
  background: var(--zeal-orange, #FF5800); color: #fff;
  font-family: var(--font-ex); font-size: 11px; font-weight: 700;
  line-height: 1;
}