/*
 * Reporting lines (module R, docs/PHASE2.md §18.3; design A-31…A-33, D-30, D-31):
 *   .level-tag      "L2" — 10.5px/700 mono on the page background, radius 5px
 *   .org-tabs       Site detail Overview | Org chart (A-32; underline tabs as A-21's)
 *   .org-toolbar    the view toggle (Chart | List, List | Org chart) and the legend
 *   .org-dot        the credential dot (sage OK, ochre expiring, brick expired or missing)
 *   .org-chart      the chart frame (sideways scroll inside it on narrow screens), the tree with its
 *                   connectors (.org-branch), the nodes (.org-node, 200px) and "No manager yet"
 *   .org-card       the selected person's side card (280px; under the chart on phones)
 *   .org-list       A-32 List: everyone with Reports to, Direct reports and Change manager
 */
@layer components {
  .level-tag {
    display: inline-flex;
    flex: none;
    align-items: center;
    padding: 3px 6px;
    border-radius: 5px;
    background: var(--color-bg);
    color: var(--color-neutral-800);
    font: 700 10.5px/1.2 var(--font-mono);
  }

  /* --- Tabs ------------------------------------------------------------------------------ */
  .org-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid var(--color-divider);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .org-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1.5px;
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--color-neutral-700);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }
  .org-tabs__tab:hover { color: var(--color-text); }
  .org-tabs__tab.is-active {
    border-bottom-color: var(--color-blue);
    color: var(--color-text);
    font-weight: 700;
  }

  /* --- Toolbar and legend ------------------------------------------------------------------ */
  .org-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .org-toolbar__spacer { flex: 1; }
  .org-toolbar__toggle .segmented__item {
    height: 34px;
    padding: 0 16px;
    font-size: 13.5px;
    font-weight: 600;
  }
  .org-toolbar__toggle .segmented__item.is-active { font-weight: 700; }

  .org-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--color-neutral-800);
    font-size: 12.5px;
  }
  .org-legend__item { display: flex; align-items: center; gap: 6px; }

  .org-dot {
    width: 9px;
    height: 9px;
    flex: none;
    border-radius: 50%;
    background: var(--color-neutral-500);
  }
  .org-dot--ok { background: var(--color-accent-2-600); }
  .org-dot--warn { background: var(--color-warn); }
  .org-dot--err { background: var(--color-err); }

  /* --- Chart --------------------------------------------------------------------------------- */
  .org-chart__layout {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  /* The frame scrolls sideways when the tree is wider than it (phones, small laptops); the canvas
     centres the tree when it fits. */
  .org-chart__frame {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    padding: 28px 0;
    border-radius: var(--radius-card);
    background: var(--color-bg);
    box-shadow: inset 0 0 0 1.5px var(--color-divider);
    overscroll-behavior-x: contain;
  }
  .org-chart__frame:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--color-divider), var(--ring); }
  .org-chart__frame .empty { padding: 20px 24px; }

  .org-chart__canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: max-content;
    min-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
  }

  /* Several Directors sit side by side; so do the people with no manager yet. */
  .org-chart__roots {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 40px;
  }
  .org-chart__roots--unassigned { flex-wrap: wrap; gap: 16px; max-width: 880px; }

  .org-chart__unassigned {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1.5px dashed var(--color-divider);
    align-self: stretch;
  }
  .org-chart__group {
    margin: 0;
    color: var(--color-neutral-700);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* A branch: the person's node, then their reports in a row 18px + 18px below. */
  .org-branch {
    --org-line: var(--color-neutral-500);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .org-branch__reports {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 18px;
  }
  /* The line down from the person to the row of their reports. */
  .org-branch__reports::before {
    content: "";
    position: absolute;
    top: -18px;
    left: calc(50% - 1px);
    width: 2px;
    height: 18px;
    background: var(--org-line);
  }
  /* Each report: its part of the line across the row, and a stub down to its node. */
  .org-branch:not(.org-branch--root) { padding-top: 18px; }
  .org-branch:not(.org-branch--root)::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    right: -8px;
    border-top: 2px solid var(--org-line);
  }
  .org-branch.org-branch--first::before { left: 50%; }
  .org-branch.org-branch--last::before { right: 50%; }
  .org-branch.org-branch--only::before { display: none; }
  .org-branch:not(.org-branch--root)::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 1px);
    width: 2px;
    height: 18px;
    background: var(--org-line);
  }

  .org-node {
    position: relative;
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 20px;
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: box-shadow var(--motion-fast) var(--ease-standard);
  }
  .org-node:hover { color: var(--color-text); box-shadow: 0 0 0 2px var(--color-divider); }
  .org-node.is-selected { box-shadow: 0 0 0 2px var(--color-blue); }
  .org-node:focus-visible { outline: none; box-shadow: var(--ring), 0 0 0 4px var(--color-bg); }
  .org-node--director { background: var(--color-accent-2-100); }

  .org-node__head { display: flex; align-items: center; gap: 9px; }
  .org-node__head .avatar { font-size: 12.5px; }
  .org-node__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .org-node__name {
    overflow: hidden;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .org-node__role { color: var(--color-neutral-700); font-size: 11.5px; line-height: 1.45; }

  .org-node__status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 700;
  }
  .org-node__status .org-dot { width: 8px; height: 8px; }
  .org-node__status--ok { color: var(--color-accent-2-800); }
  .org-node__status--ok .org-dot { background: var(--color-accent-2-600); }
  .org-node__status--warn { color: var(--color-warn-text); }
  .org-node__status--warn .org-dot { background: var(--color-warn); }
  .org-node__status--err { color: var(--color-err-text); }
  .org-node__status--err .org-dot { background: var(--color-err); }

  /* --- Side card ----------------------------------------------------------------------------- */
  .org-chart__aside { width: 280px; flex: none; }
  .org-chart__aside[hidden] { display: none; }

  .org-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px;
    border-radius: var(--radius-card);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
  }
  .org-card[hidden] { display: none; }
  .org-card__head { display: flex; align-items: center; gap: 10px; }
  .org-card__head .avatar { font-size: 12.5px; }
  .org-card__who { min-width: 0; display: flex; flex-direction: column; }
  .org-card__name { font-weight: 700; }
  .org-card__role { color: var(--color-neutral-700); font-size: 12.5px; }

  .org-card__facts { display: flex; flex-direction: column; margin: 0; }
  .org-card__fact {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--color-hairline);
    font-size: 14px;
  }
  .org-card__fact dt { color: var(--color-neutral-700); }
  .org-card__fact dd { margin: 0; font-weight: 700; text-align: right; }

  .org-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .org-card__profile {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 6px;
    color: var(--color-blue);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
  }
  .org-card__profile:hover { color: var(--color-blue-deep); }

  /* --- A-32 List ----------------------------------------------------------------------------- */
  .org-list { --list-cols: minmax(0, 1.5fr) minmax(0, 1fr) 70px minmax(0, 1fr) minmax(0, 1.3fr) 150px; }
  .org-list__person { min-width: 0; display: flex; align-items: center; gap: 12px; }
  .org-list__who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .org-list__name { font-size: 14.5px; font-weight: 700; }
  .org-list__name a { color: var(--color-text); text-decoration: none; }
  .org-list__name a:hover { text-decoration: underline; }
  .org-list__who { align-items: flex-start; }
  .org-list__flag { font-size: 11.5px; }
  .org-list__director { font-weight: 700; }
  .org-list__manager.is-none,
  .org-list__top { color: var(--color-neutral-700); }
  .org-list__label { color: var(--color-neutral-700); font-weight: 600; }
  .org-list__label::after { content: " "; }

  @media (max-width: 1199px) {
    .org-list { --list-cols: minmax(0, 1.4fr) minmax(0, 1fr) 56px minmax(0, 1fr) 140px; }
    .org-list__reports, .org-list .list-header > :nth-child(5) { display: none; }
  }

  @media (max-width: 1023px) {
    .org-chart__layout { flex-direction: column; align-items: stretch; }
    .org-chart__aside { width: auto; }
  }

  /* Phones: the chart scrolls sideways inside its frame and the side card follows it; List rows
     are cards. */
  @media (max-width: 767px) {
    .org-toolbar { gap: 10px; }
    .org-toolbar__spacer { display: none; }
    .org-legend { flex: 1 1 100%; gap: 8px 14px; }
    .org-chart__frame { padding: 20px 0; border-radius: 22px; }
    .org-chart__canvas { padding: 0 16px; }
    .org-chart__roots { gap: 24px; }
    .org-node { width: 184px; }
    /* Scrolled into view above the tab bar. */
    .org-card { scroll-margin: 16px 0 96px; }

    .org-list .list-row {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 6px 10px;
    }
    .org-list__person { grid-column: 1 / -1; }
    .org-list__job { grid-column: 1; }
    .org-list__level { grid-column: 2; justify-self: end; }
    .org-list__manager, .org-list__reports { grid-column: 1 / -1; display: block; font-size: 13px; }
    .org-list__end { grid-column: 1 / -1; justify-content: flex-start; }
    .org-list__end .btn { padding-left: 0; }
  }
}