/* SPDX-License-Identifier: MIT
 *
 * Copied from hire4real/static/css/components/parent-subsidiary.css (MIT, same author),
 * 2026-10-04, 286 lines. Colour tokens replaced per doctrine 8.
 *
 * Here it is a parent row and its members in the data table (SL_05C Part A).
 * Their class names, geometry, transitions and breakpoints are kept as they are; their header and
 * notes follow this one unchanged, except that a colour value a note quotes is elided as [colour]
 * (doctrine 8 reaches comments too).
 *
 * DIVERGES FROM hire4real/static/css/components/parent-subsidiary.css: drops their
 *   `.percentile-badge` rule (4 lines): a printed percentile is a league-table rank, and this site
 *   never prints one (Part E, operator ruling 2026-10-01).
 *
 * DIVERGES FROM hire4real/static/css/components/parent-subsidiary.css: keeps Stone Lane's own
 *   markup classes .data-table, .expand-toggle__caret - our member rows are styled by data
 *   attributes the server writes (data-member, data-expanded), so those rules stay beside theirs.
 */
/* parent-subsidiary.css (NIGHT_36)
   --------------------------------
   Styles for the corporate hierarchy UI: parent rows with ▶ expand
   toggles, subsidiary sub-rows with tree lines, and the subsidiary
   count badge shown next to parent employer names.
*/

.data-table__row--parent {
  font-weight: 600;
}
.data-table__row--parent:hover {
  background: var(--surface);
}
.data-table__row--expanded {
  background: var(--surface-2);
}

.data-table__row--subsidiary {
  background: var(--surface-2);
  font-weight: 400;
  font-size: 13px;
}
.data-table__row--subsidiary:hover {
  background: var(--surface);
}
.data-table__row--subsidiary td:nth-child(2) {
  padding-left: 44px;
}

.tree-line {
  color: var(--ink-2);
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 12px;
  margin-right: 8px;
  user-select: none;
  opacity: 0.55;
}

/* NIGHT_85F T5 — re-themed as a subtle neutral caret (was a green-hover pill whose
   ▶ glyph read as a "play button" / bruised-purple arrow on the light card fill).
   Neutral tokens only: no green/blue/purple accent in either theme. Border dropped
   (transparent) so it reads as a caret hint, not a button. */
.expand-toggle {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 10px;
  margin-right: 8px;
  padding: 2px 4px;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}
.expand-toggle svg {
  transition: transform 0.15s ease;
}
.expand-toggle:hover {
  color: var(--ink);
}
.expand-toggle:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 2px;
}
/* Disclosure widget: caret opens downward when the sub-rows are expanded
   (parent-subsidiary.js flips aria-expanded on the button). */
.expand-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.subsidiary-badge {
  display: inline-block;
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 400;
  margin-left: 8px;
  background: var(--surface);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  vertical-align: middle;
}

.subsidiary-count-badge {
  display: inline-block;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  margin-left: 10px;
  font-weight: 500;
}

.sub-rank {
  font-size: 11px;
  color: var(--ink-2);
}

.employer-subsidiaries {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}
.employer-subsidiaries h3 {
  font-size: 1.125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}
.employer-subsidiaries .section-subtitle {
  color: var(--ink-2);
  font-size: 0.875rem;
  margin: 0.25rem 0 1rem;
}

.employer-parent-breadcrumb {
  color: var(--ink-2);
  font-size: 0.875rem;
  margin: 0.5rem 0 1rem;
  padding: 0.5rem 0.875rem;
  background: var(--surface-2);
  border-left: 3px solid var(--earth);
  border-radius: 4px;
}
.employer-parent-breadcrumb a {
  color: var(--earth);
  font-weight: 500;
}
.employer-parent-breadcrumb a:hover {
  text-decoration: underline;
}
.breadcrumb-fein {
  color: var(--ink-2);
  font-size: 0.75rem;
  margin-left: 0.5rem;
}

.chart-entity-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.chart-entity-toggle .entity-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
/* R93e / R71 — THE ACTIVE TOGGLE IS A LOCATION, NOT A CALL TO ACTION.
   This wore CTA green, which on this site means "the thing to click": the
   button already clicked is the one thing that is not. R71 settled the
   general case ("location tint is neutral, never CTA green") and this
   surface was still green. Neutral tokens now, so it reads as where-you-are
   and the submit green stays unique to the submit. */
.chart-entity-toggle .entity-btn:hover {
  border-color: var(--line);
  color: var(--ink);
}
.chart-entity-toggle .entity-btn--active {
  background: transparent;
  border-color: var(--line);
  color: var(--ink);
}

/* R93e — the entity list behind the aggregate count. */
.entity-names {
  font-size: 12px;
  color: var(--ink-2);
  align-self: center;
}
.entity-names__summary {
  cursor: pointer;
  text-underline-offset: 3px;
}
.entity-names__summary:hover { text-decoration: underline; }
.entity-names__list {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
  line-height: 1.6;
  color: var(--ink-2);
}
/* The logo rides beside the name, so the row is a flex line rather than a
   bulleted item -- a marker plus a 16px logo reads as two bullets. */
.entity-names__list li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.entity-names__list img {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  object-fit: contain;
  flex: 0 0 auto;
}

@keyframes subrow-slideDown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.data-table__row--revealed {
  animation: subrow-slideDown 0.2s ease-out;
}

/* ============================================================
   NIGHT_94 (85P) — N-subsidiaries chip promoted to a <button> expander
   ------------------------------------------------------------
   T1 removed the standalone triangle glyph next to parent-employer names.
   The `N subsidiaries` chip is now the single clickable affordance and
   carries BOTH .subsidiary-badge (pill look) and .expand-toggle (JS handler).
   These rules reset native <button> chrome so the pill silhouette is
   byte-preserved, then add hover / focus-visible / pressed states in BOTH
   themes. No CSS-generated caret (::after) — the operator's "no arrows"
   directive covers CSS glyphs too; the expanded state is signalled by tint
   alone. The combined selector (specificity 0,2,0) wins deterministically
   over the single-class .subsidiary-badge / .expand-toggle rules above.
   ============================================================ */
button.subsidiary-badge {
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: inherit;
}
.subsidiary-badge.expand-toggle {
  display: inline-block;
  margin-left: 8px;
  margin-right: 0;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--surface);
  border: 1px solid var(--line);
  /* NIGHT_94: resting text bumped tertiary([colour], 3.89:1 dark) -> secondary
     ([colour] dark / [colour] light) so the now-interactive chip clears WCAG-AA
     >=4.5:1 in BOTH themes (dark 7.3:1, light 7.17:1). */
  color: var(--ink-2);
  vertical-align: middle;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* hover — bump background + border alpha (both themes) */
.subsidiary-badge.expand-toggle:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="light"] .subsidiary-badge.expand-toggle:hover {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
/* keyboard focus — non-neg #17 (a11y): 2px accent outline, offset 2px */
.subsidiary-badge.expand-toggle:focus-visible {
  outline: 2px solid var(--earth);         /* green-500 (dark) */
  outline-offset: 2px;
}
[data-theme="light"] .subsidiary-badge.expand-toggle:focus-visible {
  outline-color: var(--earth);             /* green-600 (light) — >=3:1 focus indicator vs white */
}
/* pressed / expanded — tint only, no caret glyph */
.subsidiary-badge.expand-toggle[aria-expanded="true"] {
  background: var(--surface);
  border-color: var(--earth);
  color: var(--earth);                     /* green-400 — brighter emerald on the dark tint (~8:1) */
}
[data-theme="light"] .subsidiary-badge.expand-toggle[aria-expanded="true"] {
  background: var(--earth);                /* green-700 solid fill */
  border-color: var(--earth);              /* green-800 */
  color: var(--ink);                     /* WCAG-AA white on green-700 ~5.0:1 */
}

/* ---- Stone Lane's own markup: the rules its classes need, declared in the header above. ---- */
.expand-toggle__caret { display: inline-block; font-size: 0.6rem; transition: transform 0.15s ease; }
.expand-toggle[aria-expanded="true"] .expand-toggle__caret { transform: rotate(90deg); }
.data-table tr[data-member] td,
.data-table tr[data-member] th { font-size: 0.84rem; color: var(--ink-2); background: var(--surface); }
.data-table tr[data-member] th { padding-left: 1.75rem; }
.data-table tr[data-member] td.trend { color: var(--ink); }
.data-table tr[data-member] [data-member-role] { display: block; font-size: 0.75rem; }
.data-table tr[data-expanded="true"] td,
.data-table tr[data-expanded="true"] th { border-bottom-color: transparent; }