/* 3.2.1 people2: status dots on the avatar edge, your card (flyout and /me), hover cards, last seen, work location,
   permission groups and role tiers with room to breathe, and the org chart's connectors (dotted lines, extra managers,
   lines that stop at card borders). Tokens from app.css only. */

/* ------------------------------------------------------------------ status dots
   The dot's centre sits on the avatar circle's edge at 45 degrees (bottom right): 50% + 50% x cos 45 = 85.355% of
   the avatar box, half inside the picture, half outside. Its ring is the colour behind it (--ring). Sizes come from
   dot_style(size) in routes_v321_people2.py; the defaults suit a 32 px avatar. */
.ux-av > .ux-dot:not(.inline) {
  --d: 12px; --r: 2px; --bw: 4px; --bh: 2px; --hw: 2px;
  position: absolute; width: var(--d); height: var(--d); border-width: var(--r); border-style: solid;
  border-color: var(--ring, var(--surface));
  left: calc(85.3553% - var(--d) / 2); top: calc(85.3553% - var(--d) / 2); right: auto; bottom: auto; }
.sidebar .ux-av > .ux-dot:not(.inline) { --ring: var(--side-bg); }
span.ux-dot.inline { --bw: 6px; --bh: 2px; --hw: 2px; width: 10px; height: 10px; }
/* Do not disturb: the bar is drawn inside the ring; the inner box and the bar are both even, so it is centred */
.ux-dot.ux-dot-dnd { background-image: linear-gradient(#fff, #fff); background-size: var(--bw) var(--bh); background-position: center;
  background-repeat: no-repeat; background-origin: padding-box; }
.ux-dot.ux-dot-away { background: var(--ring, var(--surface)); box-shadow: inset 0 0 0 var(--hw) #D97706; }
span.ux-dot.inline.ux-dot-away { background: transparent; box-shadow: inset 0 0 0 2px #D97706; }
.ux-dot.ux-dot-offline { background: var(--ring, var(--surface)); box-shadow: inset 0 0 0 var(--hw) var(--faint); }
span.ux-dot.inline.ux-dot-offline { background: transparent; box-shadow: inset 0 0 0 2px var(--faint); }
.pp-hero .ux-dot:not(.inline) { --ring: var(--surface); }
.ux-av .avatar, .ux-av img.avatar { margin: 0; }

/* initials are always centred in their circle, whatever a parent rule says about spans (HR record header, lists) */
body span.avatar[class] { display: inline-grid; place-items: center; justify-content: center; align-content: center;
  text-align: center; line-height: 1; padding: 0; flex-direction: row; }
.hr-rec-who > span:not(.avatar) { display: flex; flex-direction: column; }

/* ------------------------------------------------------------------ last seen and work location */
.ux-last-seen { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; color: var(--muted); white-space: nowrap; }
.ux-last-seen time { color: inherit; }
.ux-sep { color: var(--faint); }
.pf-loc, .hc-loc { display: block; color: var(--text-2); font-size: 13px; margin: 0; }
/* cards in the directory are narrow: last seen goes on its own line */
.dir-presence .ux-last-seen { display: flex; justify-content: center; width: 100%; margin-left: 0; }
.dir-presence .ux-sep { display: none; }

/* ------------------------------------------------------------------ your card in the side panel */
.side-me { position: relative; }
.side-me-av { flex: none; }
.side-me[aria-expanded="true"] { background: var(--side-hover); }
.side-me:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.topbar-me { display: none; }
@media (max-width: 900px) {
  .topbar-me { display: inline-grid; place-items: center; order: 4; flex: none; width: var(--tap); height: var(--tap); border-radius: 50%;
    color: inherit; text-decoration: none; }
  .topbar-me:hover { text-decoration: none; }
  .topbar-me:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
}

/* ------------------------------------------------------------------ the card itself (flyout and /me) */
.mf { display: grid; gap: var(--s3); min-width: 0; }
.mf-who { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.mf-av { flex: none; }
.mf-id { display: grid; gap: 2px; min-width: 0; }
.mf-name { font: 700 18px/1.25 var(--font-display); margin: 0; overflow-wrap: anywhere; }
.mf-job { color: var(--text-2); font-size: 13.5px; }
.mf-mail { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.mf-eid { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.mf-eid .eid { font: 600 12.5px/1 var(--font-mono, ui-monospace, monospace); color: var(--text); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.mf-copy { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border: 1px solid var(--control-border);
  border-radius: 8px; background: var(--surface); color: var(--text-2); font: 600 12px/1 var(--font); cursor: pointer; }
.mf-copy:hover { border-color: var(--accent); color: var(--accent-text); }
.mf-copy:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mf-now { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s3); font-size: 13.5px; color: var(--text-2);
  padding: var(--s2) var(--s3); background: var(--surface-2); border-radius: var(--r-sm); }
.mf-loc-now { display: inline-flex; align-items: center; gap: 4px; }
.mf-menu { display: grid; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.mf-sec + .mf-sec { border-top: 1px solid var(--border); }
.mf-row { list-style: none; display: flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 6px var(--s3); cursor: pointer; }
.mf-row::-webkit-details-marker { display: none; }
.mf-row:hover { background: var(--surface-2); }
.mf-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mf-row-ic { display: inline-grid; place-items: center; width: 20px; color: var(--text-2); flex: none; }
.mf-row-dot { margin: 0 5px; }
.mf-row-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mf-row-k { font-weight: 600; font-size: 14px; }
.mf-row-v { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-chev { color: var(--muted); display: inline-flex; transition: transform .15s; flex: none; }
.mf-sec[open] > .mf-row .mf-chev { transform: rotate(90deg); }
.mf-sec[open] > .mf-row { background: var(--surface-2); }
.mf-body { display: grid; gap: var(--s3); padding: var(--s3); border-top: 1px solid var(--border); margin: 0; }
.mf-choices { display: grid; gap: 4px; }
.mf-choice { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 36px; padding: 0 var(--s3); text-align: left;
  border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--text); font: 500 13.5px/1.2 var(--font); cursor: pointer; }
.mf-choice .ux-dot.inline { margin-right: 2px; }
.mf-choice:hover { background: var(--surface-2); border-color: var(--border); }
.mf-choice:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.mf-choice[aria-pressed="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent-text); font-weight: 600; }
.mf-choice-on { color: var(--accent-text); font-weight: 600; }
.mf-tick { margin-left: auto; display: inline-flex; }
.mf-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.mf-fields .field, .mf-body > .field { margin: 0; }
.mf-hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.mf-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.mf-where { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.mf-where legend { width: 100%; margin-bottom: 6px; padding: 0; }
.mf-radio { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 var(--s3); border: 1px solid var(--control-border);
  border-radius: 999px; font-size: 13px; cursor: pointer; }
.mf-radio input { margin: 0; accent-color: var(--accent); }
.mf-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.mf-radio:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.mf-links { display: grid; gap: 2px; padding-top: var(--s2); border-top: 1px solid var(--border); }
.mf-link { display: flex; align-items: center; gap: var(--s3); width: 100%; min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--text); font: 500 14px/1.2 var(--font); text-align: left; text-decoration: none; cursor: pointer; }
.mf-link:hover { background: var(--surface-2); text-decoration: none; }
.mf-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.mf-signout { margin: 0; }
.mf-page .card-body { padding: var(--s5); }
.mf-page .mf { max-width: 640px; }

/* the flyout: a dialog above your card in the side panel; a bottom sheet on phones */
.mf-pop { position: fixed; z-index: 70; left: calc(var(--s3) + var(--safe-left, 0px)); bottom: var(--s4); width: min(380px, calc(100vw - 2 * var(--s3)));
  max-height: calc(100vh - 2 * var(--s4)); overflow: auto; overscroll-behavior: contain; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-pop); padding: var(--s4); --ring: var(--surface); }
.mf-pop[hidden] { display: none; }
.mf-pop:focus { outline: none; }
.mf-pop-close { position: absolute; top: var(--s2); right: var(--s2); width: 36px; height: 36px; display: inline-grid; place-items: center;
  border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.mf-pop-close:hover { background: var(--surface-2); color: var(--text); }
.mf-pop-close:focus-visible { outline: 2px solid var(--focus-ring); }
.mf-pop .mf-who { padding-right: 36px; }
.mf-pop-loading { padding: var(--s6) 0; text-align: center; color: var(--muted); }
.mf-scrim { position: fixed; inset: 0; z-index: 69; background: rgba(21, 16, 42, .28); }
.mf-scrim[hidden] { display: none; }
@media (min-width: 901px) { .mf-scrim { background: transparent; } }
@media (max-width: 900px) {
  .mf-pop { left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; border-radius: var(--r-xl) var(--r-xl) 0 0; border-bottom: 0;
    padding: var(--s5) calc(var(--s4) + var(--safe-left, 0px)) calc(var(--s5) + var(--safe-bottom, 0px)); }
  .mf-pop::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: var(--border-strong); }
  .mf-row { min-height: var(--tap, 48px); }
  .mf-choice, .mf-link { min-height: var(--tap, 44px); }
}
@media (prefers-reduced-motion: no-preference) {
  .mf-pop:not([hidden]) { animation: mf-in .14s ease-out; }
  @keyframes mf-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}

/* ------------------------------------------------------------------ hover cards */
.hc-pop { position: absolute; z-index: 65; width: 300px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s4); --ring: var(--surface); }
.hc-pop[hidden] { display: none; }
.hc { display: grid; gap: var(--s2); }
.hc-top { display: flex; gap: var(--s3); align-items: center; min-width: 0; }
.hc-av { flex: none; }
.hc-id { display: grid; gap: 1px; min-width: 0; }
.hc-name { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.hc-job { font-size: 13px; color: var(--text-2); }
.hc-dept { font-size: 12.5px; color: var(--muted); }
.hc-status { margin: 0; font-size: 13px; color: var(--text-2); }
.hc-actions { display: flex; gap: var(--s2); flex-wrap: wrap; padding-top: var(--s2); border-top: 1px solid var(--border); }

/* ------------------------------------------------------------------ permission groups: the label is a header inside
   its box (never on the border), rows keep their padding, groups keep a clear gap */
.perm-group { border: 1px solid var(--border); border-radius: var(--r); padding: 0 var(--s4) var(--s2); margin: 0; min-width: 0;
  background: var(--surface); overflow: hidden; }
.perm-group > legend { float: left; box-sizing: border-box; width: calc(100% + 2 * var(--s4)); margin: 0 calc(var(--s4) * -1) var(--s2);
  padding: var(--s3) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--border);
  font: 600 11.5px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); }
.perm-group > legend + * { clear: both; }
.perm-group + .perm-group { margin-top: var(--s4); }
.perm-group.rb-cat { padding: 0; }
.perm-group.rb-cat > legend { width: 100%; margin: 0; }
.perm-group.rb-cat > .rb-perm { padding: 10px var(--s4); border-top: 1px solid var(--border); }
.perm-group.rb-cat > legend + .rb-perm { border-top: 0; }
.perm-group[disabled] > legend { color: var(--muted); }

/* ------------------------------------------------------------------ role hierarchy: room between and around the tiers */
.rb-tiers { gap: var(--s6); padding: var(--s5); }
.rb-tier + .rb-tier::before { left: calc(var(--s6) / -2); transform: translate(-50%, -50%); width: var(--s6); text-align: center; }
@media (max-width: 600px) {
  .rb-tiers { gap: var(--s6); padding: var(--s4); }
  .rb-tier + .rb-tier::before { left: 50%; top: calc(var(--s6) / -2); transform: translate(-50%, -50%); }
}

/* directory: the status in words (with last seen when Offline) under the title */
.dir-presence, .pp-presence { display: block; font-size: 12px; color: var(--muted); line-height: 1.35; }
.dir-presence .ux-status-line, .pp-presence .ux-status-line { justify-content: center; }
.pp-presence .ux-status-line { justify-content: flex-start; }
.pf-loc { margin-top: 2px; font-size: 13px; color: var(--text-2); }

/* ------------------------------------------------------------------ org chart connectors
   Tree lines end on a card's border and the next ones start from its bottom border: nothing is drawn inside or under a
   card (open positions are see-through, so a line under one would show). Stacked leaves get short links between cards
   instead of one long spine behind them. */
.oc-card.vacancy { background: color-mix(in srgb, var(--surface) 72%, var(--surface-2)); }
.oc-children.stacked::before { bottom: auto; height: var(--gap); }
.oc-children.stacked > .oc-node + .oc-node::before { display: block; content: ""; position: absolute; left: 50%; right: auto; top: -10px;
  width: 0; height: 10px; border: 0; border-left: 1.5px solid var(--line); border-radius: 0; }
.oc-children.stacked > .oc-node.oc-sec + .oc-node::before, .oc-children.stacked > .oc-node + .oc-node.oc-sec::before { border-left-color: var(--accent); }
@media (max-width: 700px) {
  .oc-children.stacked > .oc-node + .oc-node::before { left: -12px; top: 34px; width: 20px; height: 0; border-left: 0; border-top: 1.5px solid var(--line); }
}

/* routed lines: additional line managers (solid violet) and dotted-line managers (dotted teal) */
.oc-frame { --dotted: #0E7490; }
:root[data-theme="dark"] .oc-frame { --dotted: #22D3EE; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .oc-frame { --dotted: #22D3EE; } }
/* above the tree (so a line can be pointed at) but it never crosses a card, so nothing is covered */
.oc-canvas > svg.oc-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.oc-conn .oc-line { fill: none; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.oc-conn.line .oc-line { stroke: var(--accent); opacity: .75; }
.oc-conn.dotted .oc-line { stroke: var(--dotted); stroke-width: 2; stroke-dasharray: 0.5 6; opacity: .95; }
.oc-line-end.line { fill: var(--accent); }
.oc-line-end.dotted { fill: var(--dotted); }
.oc-line-hit { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: help; }
.oc-conn.hl .oc-line { stroke-width: 2.8; opacity: 1; }
.oc-conn.dotted.hl .oc-line { stroke-width: 3; }
.oc-line-tip { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 8px)); max-width: 280px; padding: 6px 10px;
  border-radius: 8px; background: var(--night, #15102A); color: #fff; font: 600 12px/1.35 var(--font); box-shadow: var(--shadow-2);
  pointer-events: none; white-space: normal; text-align: center; }
.oc-line-tip[hidden] { display: none; }
.oc-legend-line.dotted { border-top: 2px dotted var(--dotted, #0E7490); width: 26px; }
.oc-legend-line.extra { border-top: 2px solid var(--accent); width: 26px; }
.oc-legend-line.solid { border-top: 2px solid var(--border-strong); width: 26px; }
.oc-legend { --dotted: #0E7490; }
:root[data-theme="dark"] .oc-legend { --dotted: #22D3EE; }
@media (prefers-color-scheme: dark) { :root[data-theme="system"] .oc-legend { --dotted: #22D3EE; } }
.oc-legend-key { font-weight: 600; color: var(--text-2); }
.oc-legend-tip { flex-basis: 100%; }
.oc-dotted-line { border-top: 2px dotted var(--dotted, #0E7490); width: 18px; }
.oc-dotted-note { color: var(--muted); }

/* HR record: add a manager */
.hr-add-mgr { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--s2); font-size: 12.5px; font-weight: 600; min-height: 24px; white-space: nowrap; }
.hr-add-mgr-card { margin-bottom: var(--s4); }

/* ------------------------------------------------------------------ fixes found by the spacing audit (scripts/shots.py) */
.hr-week { gap: var(--s2); }
.hr-days { gap: var(--s2); }
.cal-people-list { padding: var(--s2); }

/* Bordered fieldsets: the legend sits inside the box, at the top, never on its border (spacing audit: label-on-border).
   Floated, it is an ordinary first line; in flex and grid fieldsets it takes the whole first row. */
.cu-consent > legend, .cu-products > legend, .gov-att > legend, .su-fieldset > legend, .tk-intake > legend,
.cl-links-edit > legend, .cl-status > legend {
  float: left; width: 100%; flex: 0 0 100%; grid-column: 1 / -1; margin: 0 0 var(--s2); padding: 0; }
.cu-consent > legend + *, .cu-products > legend + *, .gov-att > legend + *, .su-fieldset > legend + *, .tk-intake > legend + *,
.cl-links-edit > legend + *, .cl-status > legend + * { clear: both; }
.su-fieldset > legend { margin-bottom: 0; }
ul.kd-people-list { gap: var(--s2); }
fieldset.ux-status-choices { gap: var(--s2); }
.oc-unit-row { margin: var(--s2) 0; }
.nt-group > .nt-tree { padding-top: var(--s2); }