/* Kin OS — Human Resources screens.
 *
 * The only structural job this file has is to keep the three layers visibly three layers:
 *
 *     Person
 *     └── Work Agreement(s)          the contractual parent
 *         └── Engagement(s)          what the person actually does, possibly several at once
 *
 * Flattening them would make the UI simpler and the business wrong. When an action is blocked
 * it is nearly always because of which layer it belongs to, so the layers have to be legible
 * before the message can make sense.
 */

/* ---- Person header — on the page, not in a box (P7.1 §4, §26) ------------------------------ */

/* ONE IDENTITY BLOCK, CLOSED BY THE RECORD'S AREAS (P40-107 rework). Portrait, then the name with
 * its reference and status, then the summary facts directly under the name, with the actions
 * beside it. The head's own hairline is gone: the record tabs' stronger rule is the one line
 * between who this is and which part of the record is open, where two rules about 70px apart
 * used to frame the tabs as a strip floating between them. */
.kin-person-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    flex-wrap: wrap;
    padding: var(--space-4) 0 0;
    margin-bottom: var(--space-4);
}

.kin-person-identity { flex: 1 1 280px; min-width: 0; }

.kin-person-identity > .kin-page-meta { margin-top: var(--space-2); }

.kin-person-name {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-1);
}

.kin-person-name h1 { font-size: var(--text-xl); letter-spacing: -0.02em; }

.kin-person-known { color: var(--brand-muted); font-size: var(--text-sm); }

/* The Person's fact grids inside cards. It was also the head's facts until P40-107 moved those
   into the identity as a meta row, so it no longer carries a flex basis or alignment that only
   meant anything as a head flex child. */
.kin-person-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-4);
    margin: 0;
    /* A query container, for the .kin-fact-wide reset below. */
    container-type: inline-size;
}

/* THE SAME LIST, WRITTEN STRAIGHT INTO A CARD, STILL NEEDS THE CARD'S INSET
 * (P15 §spacing-rhythm#1).
 *
 * This class was written for the header, where the facts sit on the page ground and correctly
 * have no padding — and then reused for the two fact cards on the Personal area, where it is a
 * direct child of .kin-card. patterns.css §21 made a card inset its own direct content whatever
 * it is, but the grouped selector there names the SHARED classes and this is an HR one, so it
 * belongs here rather than in the shared sheet. Without it, measured at 1600px: the labels
 * start 16px left of the card title, and the facts touch the head's bottom hairline and the
 * foot's top hairline with nothing between them — the flush-field defect Jakes reported as
 * "Date of Birth sitting too close to the edge of its container", on the page he has commented
 * on most, while the Photograph card beside them was correct because it wraps a body. */
/* REMOVED IN P19-201, and the removal is the evidence the foundation works. This was the seventh
 * entry in patterns.css's hand-maintained inset list, kept here because the class is an HR one.
 * The card now insets whatever it is given, so a dl of person facts is inset for the same reason
 * a form grid is, and HR no longer has to know that a shared list exists. */

/* THE ACTIONS COLUMN RESERVES ITS WIDEST STATE, so the header does not change height between
 * areas (P15 §spacing-rhythm#5).
 *
 * patterns.css states the intent — "the header above them says who you are looking at and stays
 * put" — and it did not. On Personal the actions are Edit and Make Inactive and measure 185px,
 * which squeezes the fact grid to three columns and two rows; on Agreements and Setup they are
 * 122px, the facts fit four columns in one row, and the whole header is 16px shorter. Every tab
 * click moved the tab strip and everything under it.
 *
 * The fix is not the header's height, it is the facts' WIDTH: reserve the widest actions state
 * and the fact grid is handed the same width on all three areas, so it resolves to the same
 * number of columns and the header cannot change. 12rem clears the measured 185px with room for
 * a brand whose typeface sets those two labels wider. KD-230 is untouched — the Edit still
 * renders on Personal only. */
.kin-person-actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    /* Level with the title, where every page head keeps its actions (P40-107 rework). */
    align-self: flex-start;
    justify-content: flex-end;
    min-width: 12rem;
}

/* An address needs more than a 130px column, and wrapping a street name mid-word to fit one is
 * how a fact grid stops being readable. Two columns where there is room and the whole row where
 * there is not, rather than a fixed width that would be wrong at one of the two sizes. */
.kin-fact-wide { grid-column: span 2; }

/* And "where there is not" has to include a grid that has resolved to a single column, or the
   span forces an implicit second track and the facts after it are squeezed into it — the same
   defect as .kin-field-2 in patterns.css, measured on the same phone width. 276px = two 130px
   minimums plus the 16px gap declared above. */
@container (width < 276px) {
    .kin-person-facts > .kin-fact-wide { grid-column: auto; }
}

/* Addresses are written as lines and read as lines. A single string with commas would be shorter
 * and would make somebody parse a street from a city. */
.kin-address {
    display: flex;
    flex-direction: column;
}

/* ---- Work Agreement ------------------------------------------------------------------------
 * The accent rule down the left edge is what makes an agreement read as a container rather
 * than as another card in a stack. Its colour follows the agreement's own status, so a Person
 * with a Draft, an Ended and an Active agreement is legible without reading a single pill. */

.kin-agreement {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--agreement-rule, var(--brand-line-strong));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
    /* The head's tinted band is clipped by the container's own corners rather than each
       child rounding itself to match. */
    overflow: hidden;
}

.kin-agreement[data-status="active"]    { --agreement-rule: var(--status-active-ink); }
.kin-agreement[data-status="scheduled"] { --agreement-rule: var(--status-scheduled-ink); }
.kin-agreement[data-status="draft"]     { --agreement-rule: var(--status-draft-line); }
.kin-agreement[data-status="ended"]     { --agreement-rule: var(--status-ended-line); }
.kin-agreement[data-status="cancelled"] { --agreement-rule: var(--status-cancelled-line); }

/* ---- The record a link selected (P40-117, D16) ---------------------------------------------
 * A Work Agreement or Engagement the Audit Trail linked to reads as "this one": a ring round the
 * agreement, or round the Engagement's card with its head tinted, in the brand's own "this one"
 * colours. It takes focus without a focus ring (kin-attention), because it is the place the
 * reader was brought to and not a control. */
.kin-agreement.kin-record-selected {
    box-shadow: 0 0 0 2px var(--brand-signal), var(--shadow-sm);
}

.kin-engagement.kin-record-selected {
    box-shadow: 0 0 0 2px var(--brand-signal);
}

.kin-engagement.kin-record-selected > .kin-engagement-head {
    background: var(--brand-selected);
}

/* Forced colours (Windows High Contrast) drop backgrounds and shadows, which were the whole mark,
 * and kin-attention removes the focus outline. An outline in the system's highlight colour keeps
 * the selected record visible there; it outranks kin-attention's rule by specificity. */
@media (forced-colors: active) {
    section.kin-agreement.kin-record-selected,
    article.kin-engagement.kin-record-selected {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

.kin-agreement-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--brand-line);
    background: var(--brand-soft);
}

.kin-agreement-title {
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
}

.kin-agreement-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

.kin-agreement-meta .kin-dot { opacity: 0.45; }

.kin-agreement-spacer { flex: 1 1 auto; }

.kin-agreement-body { padding: var(--space-4); }

.kin-agreement-body > h3,
.kin-engagements > h3 {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

/* EACH OF THE AGREEMENT'S OWN BLOCKS STARTS CLEAR OF THE ONE ABOVE (P40-117 cross-slice review,
   UX m10). The buttons that ended each block moved into the agreement's More actions in slice 3,
   and with them the space they made, so one block's last value ran straight into the next
   block's heading ("No" over "Reporting address"). */
.kin-agreement-body > * + h3 { margin-top: var(--space-5); }

/* THE AGREEMENT'S OWN FACTS ARE CARDS (QCR-20261104-01.02). The shared fact-card rules inset a
   group's fact list; a group that has only a sentence instead (Not recorded, Not classified) takes
   the same inset, so the sentence sits inside its box rather than against the edge. */
.kin-agreement-facts .kin-fact-group > p {
    margin: 0;
    padding: var(--card-inset);
}

/* SERVICE AND ITS TENURE EXCEPTIONS ARE ONE CARD (QCR-20261104-01.06). The exceptions part opens
   with a head band of its own, mid-card: square corners, and a rule above it as strong as the one
   below it, so it reads as the card's second section rather than as a second card. */
.kin-service-card > .kin-card-head-section {
    border-top: 1px solid var(--brand-line-strong);
    border-radius: 0;
}

.kin-agreement-count { font-size: var(--text-sm); font-weight: var(--weight-regular); color: var(--brand-muted); }

/* ---- The Engagement child set --------------------------------------------------------------
 * The agreement's body holds three headed blocks, and only one of them is a list of OTHER
 * RECORDS. Contracting party and Core or Extended are the agreement telling its own history;
 * Engagements are the children it owns. Rendered as three <h3> peers on one surface, all three
 * read alike — which is the transcript Jakes described at final P19 acceptance.
 *
 * So the child set is given the same kind of container the agreement itself is given, one level
 * further in. Same three devices, same order, deliberately: inset from its parent's content, a
 * boundary of its own, and a rule down the left edge. A container inside a container is the
 * ownership, drawn, and reusing the parent's own vocabulary is what makes the nesting read as
 * depth rather than as decoration.
 *
 * TWO THINGS IT DOES NOT COPY FROM THE PARENT.
 *
 * The left rule is neutral, never status-coloured. A child SET has no lifecycle; the Engagements
 * inside it each have one and each already carry a pill, so tinting the box would state a status
 * for a group that cannot hold one.
 *
 * There is no shadow and no tint. The surface stays the body's own, because --brand-soft is
 * already spoken for inside this region: every Engagement editor is a .kin-panel on exactly that
 * tint, and a soft panel on a soft ground is a panel nobody can see.
 *
 * THE THREE DEVICES ARE NOT THREE STATEMENTS OF ONE FACT, because each is the one that survives a
 * different condition. The inset is what reads at a glance down a page of agreements, and it is
 * the one that goes on a phone. The boundary is what closes the set, so a reader can tell where
 * one agreement's children end and the next parent begins. The rule is what stays visible when a
 * long child list runs past the point where the top border has scrolled away. */

.kin-engagements {
    margin-top: var(--space-5);
    margin-left: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--brand-line-strong);
    border-radius: var(--radius-lg);
    background: var(--brand-surface);
}

/* ---- One card per Engagement (P40-117 slice 2, C4) ----------------------------------------
 * Each Engagement is a box of its own inside the child set, so two siblings can never read as
 * one transcript: its own border, its own status rule down the left edge, its own tinted head
 * with its title, period and status, and a gap between it and the next one. The rule is the
 * Engagement's own status, which it has (the set around it has none, so the set's rule stays
 * neutral). The same devices at every width: only the head's layout changes on a phone, and
 * every boundary is declared outside any media query. */
.kin-engagement-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.kin-engagement-item { min-width: 0; }

/* NO HEAVIER THAN ITS PARENT (P40-117 slice 2 review). The card takes the agreement's own weights,
 * a hairline border and a 3px rule, and never more: a child drawn darker or thicker than the
 * agreement it belongs to reads as a peer of it, or as its superior. The gap, the tinted head and
 * the card's own status rule keep siblings apart without outweighing the agreement. */
.kin-engagement {
    background: var(--brand-surface);
    border: 1px solid var(--brand-line);
    border-left: 3px solid var(--engagement-rule, var(--brand-line-strong));
    border-radius: var(--radius);
    overflow: hidden;
}

.kin-engagement[data-status="active"]    { --engagement-rule: var(--status-active-ink); }
.kin-engagement[data-status="scheduled"] { --engagement-rule: var(--status-scheduled-ink); }
.kin-engagement[data-status="draft"]     { --engagement-rule: var(--status-draft-line); }
.kin-engagement[data-status="ended"]     { --engagement-rule: var(--status-ended-line); }
.kin-engagement[data-status="cancelled"] { --engagement-rule: var(--status-cancelled-line); }
.kin-engagement[data-status="voided"]    { --engagement-rule: var(--status-voided-line); }

/* The head reads left to right as who it is, then what can be done; the period, and whatever
 * tells it apart from a sibling, take the line under both. The markup keeps that reading order
 * (title, facts, actions) for a screen reader and the keyboard. */
.kin-engagement-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--brand-line);
    background: var(--brand-soft);
}

.kin-engagement-heading {
    order: 1;
    flex: 1 1 16rem;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.kin-engagement-title {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.kin-engagement-actions {
    order: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

.kin-engagement-meta {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

.kin-engagement-body { padding: var(--space-3) var(--space-4) var(--space-4); }

.kin-engagement-facts { margin: 0; }

.kin-engagement-hint { margin: 0 0 var(--space-2); }

.kin-engagement-client { margin-top: var(--space-3); }

/* The ended billing periods a reader may remove on purpose (CRM-057, P40-118), listed in the
 * removal dialog: one line each, the Client Engagement and its dates, then Choose, wrapping on a
 * narrow dialog. */
.kin-engagement-recorded-periods {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
}

.kin-engagement-recorded-periods > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

.kin-engagement-toggle { margin-top: var(--space-3); }

.kin-engagement-more { margin-top: var(--space-2); }

/* A record that never happened recedes without disappearing, as its agreement does. */
.kin-engagement[data-status="voided"] > .kin-engagement-body { background: var(--status-voided-bg); }

/* ---- A record's historical changes (P40-117 slice 2) ---------------------------------------
 * The dialog names the record first, then lists what happened, newest first, in the history list
 * the rest of the page uses: what happened, what part of the record it is about, why, and the two
 * kinds of date apart. Each list is labelled by a small heading of the dialog's own, so a screen
 * reader can move between the dated events and the undated ones. */
.kin-history-record { margin-bottom: var(--space-4); }

.kin-history-timeline { margin-top: 0; }

.kin-history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.kin-history-group {
    margin: var(--space-5) 0 var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--brand-muted);
}

/* The inherited-value marker. Payroll Company is the reason this exists: an Engagement has no
   payroll company of its own — not a read-only field, no column at all — so the screen has to
   say where the value came from rather than imply the Engagement holds one (ENG-005). */
.kin-inherited {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    color: var(--brand-muted);
}

.kin-inherited em { font-style: normal; font-size: var(--text-xs); opacity: 0.8; }

/* Simultaneous engagements are normal, not an edge case. The overlap marker makes the fact
   visible instead of leaving the reader to compare dates. */
.kin-concurrent {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: var(--text-xs);
    color: var(--brand-muted);
}

/* ---- Roster ------------------------------------------------------------------------------------- */

.kin-roster-count { font-size: var(--text-sm); color: var(--brand-muted); }

.kin-roster-name { display: flex; flex-direction: column; gap: 1px; }
/* The name's link is the row's one way in, styled by the shared .kin-row-link (P40-107 rework). */
.kin-roster-known { font-size: var(--text-xs); color: var(--brand-muted); }

/* Search-before-create is a rule, not a layout accident: the create form is reachable from the
   roster and states what the search found, so adding a duplicate Person takes a deliberate
   decision. */
.kin-create-guard {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--brand-wash);
    font-size: var(--text-sm);
    color: var(--brand-ink);
    margin-bottom: var(--space-5);
}

.kin-create-guard svg { flex: none; margin-top: 2px; color: var(--brand-accent-ink); }

/* ---- Profile ------------------------------------------------------------------------------ */

.kin-profile-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.kin-profile-avatar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--paper-0);
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
}

/* THE AXIS FLIPS HERE AND THE ROW-SHAPED DECLARATIONS ABOVE DO NOT (Bugs 3209019234).
 *
 * flex-direction: column re-reads every child's flex-basis as a HEIGHT and every align-* as
 * HORIZONTAL. The head's children were sized for the row, so both meanings changed under them
 * and neither declaration is wrong where it is written.
 *
 * MEASURED IN THE LIVE DOM at 375x812, commit 3c28526: .kin-person-facts came out width 0,
 * height 420, while still declaring a 130px grid track. The 420 is its own row flex-basis read
 * as a height.
 *
 * THE ZERO IS THE QUERY CONTAINER ABOVE MEETING A SHRINK-TO-FIT BOX, and the two are only
 * incompatible in the column. container-type: inline-size applies size containment in the
 * inline axis: the contents deliberately do not contribute to the width, because that is what
 * makes the .kin-fact-wide container query answerable. In the row that is free, since the
 * width came from flex-basis. In the column the width comes from align-self, which was
 * center - shrink-to-fit - so the box had to size itself from contents it is contained from
 * reading, and resolved to nothing. The 130px track is minmax(130px, 1fr) hitting its own
 * minimum against a zero available width, which is why the facts then laid out outside their
 * own container.
 *
 * The head grew to 897px on an 812px screen: 72 portrait + the identity's 280px basis + the
 * facts' 420px basis + the actions + the gaps. Nothing overlapped and nothing was lost, which
 * is why it read as a page that wanted a screen and a half of scrolling to reach the tabs
 * rather than as a broken box - and why no guard could see it. The guards read source; a
 * zero-width flex child only exists in a browser.
 *
 * THE ROW RULES STAY AS THEY ARE. This block neutralises the two flex-bases that only mean
 * anything as widths, and stretches the fact grid so it has a width to divide into tracks.
 * Scoped to the head's own children because .kin-person-facts is also the two fact cards on
 * the Personal area, where it is a block child of .kin-card and has no flex context at all. */
@media (max-width: 860px) {
    .kin-person-head { flex-direction: column; gap: var(--space-4); }
    .kin-person-head > .kin-person-identity { flex: 0 1 auto; }
    .kin-agreement-head { align-items: flex-start; }
}

/* ---- The Person's photograph (close-out §6) ------------------------------------------------
 *
 * A portrait beside the identity, not above the facts: its job is to say "this is who you are
 * looking at", which is a property of the name rather than a fact about their work.
 *
 * ONE SHAPE FOR BOTH STATES. A photograph and a pair of initials occupy exactly the same box, so
 * a Person gaining or losing one never moves the heading beside it. The initials treatment is the
 * profile avatar's, at a larger size — the same device the rail and the profile page use, so a
 * reader recognises it. */
.kin-person-portrait {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    /* A square with rounded corners, like a canvas, not a circle (QCR-20261104-01.04, Jakes's
       third round). Same width and height, so a photograph crops the same way it did. */
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--brand-ink);
    color: var(--paper-0);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    letter-spacing: 0.02em;
}

/* THE HEAD'S PORTRAIT IS LARGER, AND IS WHERE THE PHOTOGRAPH IS CHANGED (QCR-20261104-01.04,
 * Jakes 4 Nov 2026, after BambooHR's profile photo). 136px beside the name, 96px once the head
 * stacks. The Edit control sits on the lower edge of the frame: shown on hover, on keyboard focus,
 * and always on a screen with no hover, so it is never only discoverable by a mouse. */
.kin-person-portrait-wrap {
    position: relative;
    flex: none;
    line-height: 0;
}

.kin-person-portrait-wrap > .kin-person-portrait {
    width: 136px;
    height: 136px;
    border-radius: var(--radius-xl);
    font-size: 2.6rem;
}

.kin-portrait-edit {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--paper-0);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-ink) 82%, transparent);
    color: var(--paper-0);
    font: inherit;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-fast) var(--ease);
}

.kin-person-portrait-wrap:hover > .kin-portrait-edit,
.kin-portrait-edit:focus-visible {
    opacity: 1;
}

.kin-portrait-edit:focus-visible {
    outline: 2px solid var(--brand-accent-ink);
    outline-offset: 2px;
}

@media (hover: none) {
    .kin-portrait-edit { opacity: 1; }
}

@media (max-width: 860px) {
    .kin-person-portrait-wrap > .kin-person-portrait {
        width: 96px;
        height: 96px;
        font-size: var(--text-lg);
    }
}

/* ---- The organogram chart (QCR-20261104-01.07) -----------------------------------------------
 *
 * THE SAME READ AS THE TABLES, DRAWN AS A TREE. Managers above, this Person in the middle, direct
 * reports below, joined by lines in the strong rule colour. The lines are each row's own pseudo
 * elements (the classic list-tree technique), so a row of any length joins up without measuring
 * anything in script. A row wider than the card scrolls inside it rather than wrapping, because a
 * wrapped row would break its own lines. */
.kin-view-switch { display: inline-flex; gap: var(--space-1); }
.kin-view-switch > .kin-btn[aria-pressed="true"] {
    background: var(--brand-ink);
    border-color: var(--brand-ink);
    color: var(--paper-0);
}

.kin-orgchart {
    --orgchart-line: var(--brand-line-strong);
    --orgchart-gap: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* As wide as its widest row and never narrower than the card, so every row is centred on the
       same line and the joining lines meet; the scroll wrapper around it takes the overflow. */
    width: max-content;
    min-width: 100%;
    padding: var(--space-2) 0;
}

.kin-orgchart-scroll { overflow-x: auto; }

.kin-orgchart-above {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    padding-bottom: var(--orgchart-gap);
    font-size: var(--text-sm);
}

.kin-orgchart-above::after,
.kin-orgchart-managers::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    height: var(--orgchart-gap);
    border-left: 1px solid var(--orgchart-line);
}

.kin-orgchart-above-level {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--brand-muted);
}

.kin-orgchart-none {
    margin: 0;
    padding-bottom: var(--orgchart-gap);
    font-size: var(--text-sm);
    color: var(--brand-muted);
}

.kin-orgchart-self + .kin-orgchart-none { padding: var(--orgchart-gap) 0 0; }

.kin-orgchart-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 11.5rem;
    padding: var(--space-3);
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-lg);
    background: var(--brand-surface);
    box-shadow: var(--shadow-sm);
    color: var(--brand-ink);
    text-align: center;
    text-decoration: none;
}

a.kin-orgchart-card:is(:hover, :focus-visible) { border-color: var(--brand-accent-ink); }

.kin-orgchart-self {
    border: 2px solid var(--brand-accent-ink);
    background: var(--brand-head);
}

.kin-orgchart-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-1);
    border-radius: 50%;
    background: var(--brand-ink);
    color: var(--paper-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

.kin-orgchart-name {
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    overflow-wrap: anywhere;
}

.kin-orgchart-role {
    font-size: var(--text-sm);
    color: var(--brand-muted);
    overflow-wrap: anywhere;
}

/* THE TWO ROWS THAT BRANCH. Each item draws half of the bar on each side of its own centre and a
 * stem down (managers) or up (reports) at that centre; the end items drop the outer half, so the
 * bar runs from the first card's centre to the last's, and a single card is joined by its stem. */
.kin-orgchart-managers,
.kin-orgchart-reports {
    position: relative;
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kin-orgchart-managers { padding-bottom: var(--orgchart-gap); }
.kin-orgchart-reports { padding-top: var(--orgchart-gap); }

.kin-orgchart-reports::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    height: var(--orgchart-gap);
    border-left: 1px solid var(--orgchart-line);
}

.kin-orgchart-managers > li { position: relative; padding: 0 var(--space-2) var(--orgchart-gap); }
.kin-orgchart-reports > li { position: relative; padding: var(--orgchart-gap) var(--space-2) 0; }

.kin-orgchart-managers > li::before,
.kin-orgchart-managers > li::after,
.kin-orgchart-reports > li::before,
.kin-orgchart-reports > li::after {
    content: "";
    position: absolute;
    width: 50%;
    height: var(--orgchart-gap);
}

.kin-orgchart-managers > li::before,
.kin-orgchart-managers > li::after { bottom: 0; border-bottom: 1px solid var(--orgchart-line); }
.kin-orgchart-reports > li::before,
.kin-orgchart-reports > li::after { top: 0; border-top: 1px solid var(--orgchart-line); }

.kin-orgchart-managers > li::before,
.kin-orgchart-reports > li::before { right: 50%; }

.kin-orgchart-managers > li::after,
.kin-orgchart-reports > li::after { left: 50%; border-left: 1px solid var(--orgchart-line); }

.kin-orgchart-managers > li:first-child::before,
.kin-orgchart-managers > li:last-child::after { border-bottom: 0; }
.kin-orgchart-reports > li:first-child::before,
.kin-orgchart-reports > li:last-child::after { border-top: 0; }

/* object-fit is what stops a portrait or a landscape photo being squashed into the frame: it
 * crops to the centre instead, which is where a face is. */
.kin-person-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* COMPACT (P40-107). The card was a 120px second copy of the portrait beside a column of buttons,
 * 224px tall for one picture and two actions. The base 72px portrait, the two buttons side by
 * side and the file note on its own line under them say the same in about two thirds of the
 * height. */
.kin-photo-edit {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex-wrap: wrap;
}

.kin-photo-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}

.kin-photo-controls > .kin-field-hint { flex: 1 0 100%; margin: 0; }

/* The file input is visually hidden and its LABEL is the button, which is the standard way to
 * style a file picker without losing the keyboard behaviour: the label is focusable through the
 * input it names, and clicking it opens the dialogue. A div with an onclick would need script and
 * would not be reachable by keyboard. */
.kin-photo-controls label.kin-btn { cursor: pointer; }

/* ---- Entered in error, and the histories (close-out §10, §12) ------------------------------
 *
 * A VOIDED RECORD RECEDES WITHOUT DISAPPEARING. It must stay readable (the whole point of keeping
 * it is that the correction is visible) while never competing with the records that describe
 * something that actually happened, so an Engagement card entered in error takes the quiet status
 * ground (above). No strikethrough: Cancelled already uses one, and it means something different.
 *
 * The histories themselves are read in a record's historical changes since P40-117. The native
 * details below belong to the shared LifecycleHistory component, which no page draws any more
 * (DEC-P40-015 puts a record's history in that dialog, not inline); they stay keyboard-operable
 * and findable by the browser's own in-page search with no script for as long as it exists. */
.kin-history { font-size: var(--text-sm); }

.kin-history > summary {
    cursor: pointer;
    color: var(--brand-muted);
    padding: var(--space-1) 0;
}

.kin-history > summary:hover { color: var(--brand-ink); }

.kin-history-list {
    list-style: none;
    margin: var(--space-2) 0 var(--space-1);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Each entry is what changed on one line and why underneath, so a reader scanning for the dates
 * does not have to read the reasons, and a reader who wants a reason knows where it is. */
.kin-history-list li {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border-left: 2px solid var(--brand-line);
    padding-left: var(--space-3);
}

/* The entry that applies today takes the accent ink on its rule, beside the word Current that the
   entry already prints (P40-107 rework): which one is in force is found without reading dates. */
.kin-history-list > li.kin-current { border-left-color: var(--brand-signal); }

.kin-history-move { font-weight: var(--weight-semibold); }

/* The lifecycle history shares this treatment, because it answers the same kind of question and a
 * second visual language for "what happened to this record" would be one to learn twice. Same
 * elements in the same order: what happened, then why, then when. */
.kin-history-event { font-weight: var(--weight-semibold); }

.kin-history-detail { color: var(--brand-muted); }

/* The timestamp last and quietest. It is the least-read part of an entry and the one most likely
 * to be scanned past, so it does not compete with the event for the first glance. */
.kin-history-when {
    color: var(--brand-muted);
    font-size: var(--text-xs);
}

/* The count sits in the summary the way the tab counts do, so "3" reads as how many rather than
 * as part of the sentence. */
.kin-history-count {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 0.4em;
    border-radius: var(--radius-pill);
    background: var(--paper-2);
    color: var(--brand-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* ---- Folding a Work Agreement, and the hierarchy it makes legible (close-out §8, §9) ------
 *
 * The three levels are Person, Work Agreement, Engagement, and §8 asks for the relationship to
 * be obvious without explanatory prose. Four controlled differences do that, and no new colour:
 *
 *   1. The agreement is INSET from the page, so it reads as sitting under the Person rather than
 *      beside it.
 *   2. It keeps its status-coloured left rule, which is what makes it a container.
 *   3. Its head is the tinted band; an Engagement row is on the white body inside.
 *   4. A folded agreement loses its shadow, because a closed container should not appear to
 *      float above the open one next to it.
 *
 * Deliberately not a fifth device. §8 warns against clutter, and indentation plus a rule plus a
 * tinted head is already three statements of the same fact. */
.kin-agreement { margin-left: var(--space-4); }

.kin-agreement-folded { box-shadow: none; }

/* The toggle is chrome, so it is the quietest thing on the head - but it is a real button with a
 * real hit area, because a 12px chevron is not a target. */
.kin-agreement-toggle {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: calc(var(--space-2) * -1);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}

.kin-agreement-toggle:hover {
    background: var(--brand-hover);
    color: var(--brand-ink);
}

.kin-agreement-toggle:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 1px;
}

/* Entered in error, on an agreement's left rule. The quietest of the six, which is the point:
 * a record that never happened should not draw the eye down a page of ones that did. */
.kin-agreement[data-status="voided"] { --agreement-rule: var(--status-voided-line); }

/* And a folded agreement's head loses its bottom rule, because there is nothing under it to be
 * ruled off from. */
.kin-agreement-folded .kin-agreement-head { border-bottom: none; }

@media (max-width: 860px) {
    /* The inset is a luxury on a phone, where the page is already the width of the card. */
    .kin-agreement { margin-left: 0; }

    /* And the child set gives up the same luxury for the same reason. ONLY the indentation: the
     * boundary and the left rule are declared unconditionally above, so the narrowest screen
     * still shows a closed box inside its parent rather than a list that has rejoined the
     * transcript. Dropping either of them here would take the hierarchy away exactly where the
     * inset is no longer there to carry it. */
    .kin-engagements { margin-left: 0; padding: var(--space-3); }

    /* An Engagement card keeps its border, its rule and its tinted head on a phone; only its
     * actions move under its title and period, where there is a whole line for them, rather than
     * squeezing the title into whatever the buttons leave. */
    .kin-engagement-head { padding: var(--space-3); }
    .kin-engagement-body { padding: var(--space-3); }
    .kin-engagement-actions { order: 4; flex: 1 0 100%; justify-content: flex-start; }
}

/* ---- The edit workspace (P40-117, C5, D13) ------------------------------------------------
 *
 * One Full dialog: an index of the Person's records down the side and the section in front
 * beside it. The index is the records in their order, a Work Agreement's Engagements indented
 * under it, each entry saying its kind, its name and where it stands in words (Unsaved, Saved,
 * Could not save, Not editable), so a state is never colour alone. The entry in front carries
 * aria-current and a rule down its edge. On a narrow screen the index sits above the section and
 * scrolls within its own height, so the section is never pushed off the screen by a long list. */
.kin-workspace {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
}

.kin-workspace-index {
    flex: 0 0 17rem;
    position: sticky;
    top: 0;
    max-height: calc(100dvh - 16rem);
    overflow-y: auto;
}

.kin-workspace-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kin-workspace-entry[data-depth="1"] { padding-left: var(--space-3); }
.kin-workspace-entry[data-depth="2"] { padding-left: var(--space-6); }

.kin-workspace-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-left: 3px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--brand-ink);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.kin-workspace-tab:hover { background: var(--brand-hover); }

.kin-workspace-tab-active {
    border-color: var(--brand-line);
    border-left-color: var(--brand-accent);
    background: var(--brand-soft);
    font-weight: var(--weight-semibold);
}

.kin-workspace-tab-noun {
    flex: 1 0 100%;
    color: var(--brand-muted);
    font-size: var(--text-xs);
}

.kin-workspace-tab-name { min-width: 0; overflow-wrap: anywhere; }

.kin-workspace-sections { flex: 1 1 auto; min-width: 0; }

.kin-workspace-section { min-width: 0; }

.kin-workspace-status:empty { display: none; }

.kin-workspace-status {
    margin: 0 0 var(--space-3);
    color: var(--brand-muted);
    font-size: var(--text-sm);
}

.kin-workspace-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--brand-line);
}

.kin-workspace-section-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.kin-workspace-section-title h3 { margin: 0; overflow-wrap: anywhere; }

.kin-workspace-note {
    margin: 0 0 var(--space-3);
    color: var(--brand-muted);
    font-size: var(--text-sm);
}

@media (max-width: 860px) {
    .kin-workspace { flex-direction: column; gap: var(--space-4); }

    .kin-workspace-index {
        flex: 0 0 auto;
        position: static;
        width: 100%;
        max-height: 12rem;
    }
}