/* orgtree.css — styles for orgtree.xml, matching the SPSCC site brand
 *
 * Layout: the top cards stack in the center; the VP row is a swipeable tab
 * strip; the open VP's team hangs below it as a vertical tree whose deeper
 * teams expand in place. orgtree.js keeps exactly one tab open and drives
 * the keyboard navigation and swipe hints.
 */
@import url("https://use.typekit.net/vhn6ljx.css");
@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap");

:root {
  --font:        "forma-djr-display", system-ui, sans-serif;
  --font-sans:   "Barlow", Arial, Helvetica, sans-serif;
  --card-width:  11rem;
  --gap:         1.5rem;
  --connector:   1.65rem;
  --radius:      0;

  --tab-width:   8.5rem;
  --tab-title-h: 2.75rem;
  --tab-name-h:  1.6rem;

  --spscc-blue:       #0051ba;
  --spscc-light-blue: #ddebff;

  --color-bg:     #fff;
  --color-card:   #fff;
  --color-border: #111;
  --color-title:  #24282b;
  --color-name:   var(--spscc-blue);
  --color-line:   #000;
  --tab-bg:       #e9eef5;
  --tab-ring:     #ffa300;
}

/* Wider screens: full-size cards and tabs */
@media (min-width: 40rem) {
  :root {
    --card-width:  12rem;
    --tab-width:   10rem;
    --tab-title-h: 3.1rem;
    --tab-name-h:  1.8rem;
  }
}

/* ── Root ─────────────────────────────────────────────────────────── */

/* Keep the scrollbar's space reserved so opening a team that makes the
   page scroll doesn't shift the centered layout sideways */
html {
  scrollbar-gutter: stable;
}

body {
  margin: 0;
}

OrgTree {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.35;
  padding: 1rem;
  background: var(--color-bg);
}

@media (min-width: 40rem) {
  OrgTree {
    padding: clamp(1.5rem, 3vw, 3rem);
  }
}

/* Top cards sit centered; the card holding the tab strip spans the full
   width and is the containing block for the team panels */
OrgTree > position {
  align-self: center;
}

OrgTree > position:has(> ExecutiveTeam) {
  align-self: stretch;
  position: relative;
}

/* ── Teams — vertical trees, hidden until their toggle is checked ──── */

Division,
Department,
WorkUnit {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--gap) / 2);
  padding-inline-start: 1rem;
  padding-block-start: var(--connector);

  /* Spine via background — reliable on auto-height containers. It hangs
     from the parent card's left edge (not its center) to save width. */
  background-image: linear-gradient(var(--color-line), var(--color-line));
  background-size: 2px 100%;
  background-repeat: no-repeat;
  background-position: 1rem 0;
}

.team-toggle:checked ~ Division,
.team-toggle:checked ~ Department,
.team-toggle:checked ~ WorkUnit {
  display: flex;
}

/* members is a transparent pass-through */
members {
  display: contents;
}

/* ── Position nodes ───────────────────────────────────────────────── */

position {
  display: inline-flex;
  flex-direction: column;
  align-items: center;

  /* Flex order: title(1) → name(2) → toggle label(3) → team(4) */
  &::before { order: 1; }
  & > .name { order: 2; }
  & > label { order: 3; }
  & > Division,
  & > ExecutiveTeam,
  & > Department,
  & > WorkUnit { order: 4; }
}

/* Team members: horizontal connector from the spine to the card */
Division > position,
Department > members > position,
WorkUnit > members > position {
  align-items: flex-start;
  padding-inline-start: var(--connector);
  position: relative;
  z-index: 1;
  background-image: linear-gradient(to right, var(--color-line), var(--color-line));
  background-size: var(--connector) 2px;
  background-repeat: no-repeat;
  background-position: 0 1rem;
}

/* Last member: cover the spine below its connector */
Division > position:last-child,
Department > members > position:last-child,
WorkUnit > members > position:last-child {
  background-image:
    linear-gradient(var(--color-bg), var(--color-bg)),
    linear-gradient(to right, var(--color-line), var(--color-line));
  background-size: 2px calc(100% - 1rem), var(--connector) 2px;
  background-position: 0 1rem, 0 1rem;
}

/* Card top — title, bold */
position::before {
  content: attr(Title);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--card-width);
  min-block-size: 3.45rem;
  box-sizing: border-box;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.12;
  text-align: center;
  padding: 0.82rem 0.9rem 0.58rem;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-top: 6px solid var(--spscc-blue);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--color-title);
  word-break: break-word;
}

/* Card bottom — name, normal weight (rendered as a link to the directory) */
position > .name {
  display: block;
  inline-size: var(--card-width);
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
  letter-spacing: 0.015em;
  text-align: center;
  padding: 0.36rem 0.9rem 0.9rem;
  background: var(--color-card);
  border: 2px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  color: var(--color-name);
  text-decoration: none;
  word-break: break-word;
}

position > a.name {
  color: var(--spscc-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

position > a.name:hover,
position > a.name:focus-visible {
  color: #003f91;
  text-decoration-thickness: 2px;
}

position[depth="2"]::before,
position[depth="3"]::before,
position[depth="4"]::before,
position[depth="5"]::before,
position[depth="6"]::before {
  border-top-color: #0072cf;
}

OrgTree > position::before {
  font-size: 0.94rem;
  border-top-width: 8px;
}


/* ── Accordion ────────────────────────────────────────────────────── */

.team-toggle {
  display: none;
}

/* Flatten bottom of name card when toggle label follows */
position:has(> .team-toggle) > .name {
  border-radius: 0;
  border-bottom-color: transparent;
  padding-top: 0.4rem;
  padding-bottom: 1rem;
}

/* Toggle button — third section of card */
position:has(> .team-toggle) > label {
  display: block;
  inline-size: var(--card-width);
  box-sizing: border-box;
  border: 2px solid var(--spscc-blue);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--spscc-blue);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  padding: 0.78rem 0.9rem 0.8rem;
  cursor: pointer;
  user-select: none;

  &::after { content: "+  show team"; }

  &:hover {
    background: #003f91;
    border-color: #003f91;
  }
}

.team-toggle:checked ~ label {
  background: #54575a;
  border-color: #54575a;
  &::after { content: "−  hide team"; }
}


/* ── Keyboard focus (orgtree.js) ──────────────────────────────────── */

/* An outline on position would wrap its whole expanded subtree, so the
   focus ring is drawn inside the card pieces instead: title, name, toggle.
   The toggle bar keeps its own fill so its white text stays legible. */
position:focus {
  outline: none;
}

position:focus-visible::before,
position:focus-visible > .name {
  background: var(--spscc-light-blue);
}

position:focus-visible::before,
position:focus-visible > .name,
position:focus-visible > .team-toggle ~ label {
  box-shadow:
    inset  4px 0 0 var(--spscc-blue),
    inset -4px 0 0 var(--spscc-blue);
}

position:focus-visible:not(:has(> .team-toggle)) > .name,
position:focus-visible > .team-toggle ~ label {
  box-shadow:
    inset  4px 0 0 var(--spscc-blue),
    inset -4px 0 0 var(--spscc-blue),
    inset 0 -4px 0 var(--spscc-blue);
}


/* ── VP row as tabs ───────────────────────────────────────────────── */

/* The strip scrolls sideways when the tabs don't fit. Each team panel is
   positioned against the strip's parent card (not the strip) so the
   strip's horizontal scroll doesn't clip it. */
ExecutiveTeam {
  display: flex;
  align-self: stretch;
  flex-wrap: nowrap;
  justify-content: safe center;  /* centered when every tab fits, else start */
  align-items: flex-end;
  gap: 0.25rem;
  margin-block-start: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;  /* the clipped tab at the edge signals "swipe" */
  scroll-snap-type: x proximity;
  border-block-end: 3px solid var(--spscc-blue);

  /* Swipe hints: a fade + chevron pinned to each edge of the strip. They
     take no room (negative margin) and let taps through. orgtree.js adds
     .more-left / .more-right; without it, neither shows. */
  &::before, &::after {
    position: sticky;
    z-index: 3;
    flex: 0 0 2.25rem;
    align-self: stretch;
    display: flex;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--spscc-blue);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
  }

  &::before {
    content: '‹';
    inset-inline-start: 0;
    margin-inline-end: calc(-2.25rem - 0.25rem);
    justify-content: flex-start;
    background: linear-gradient(to right, var(--color-bg) 35%, transparent);
  }

  &::after {
    content: '›';
    inset-inline-end: 0;
    margin-inline-start: calc(-2.25rem - 0.25rem);
    justify-content: flex-end;
    background: linear-gradient(to left, var(--color-bg) 35%, transparent);
  }

  &.more-left::before,
  &.more-right::after { opacity: 1; }
}

/* Tabs — flat, rounded-top, fixed height so the tap overlay can cover them */
ExecutiveTeam > position {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

ExecutiveTeam > position::before {
  display: block;
  inline-size: var(--tab-width);
  block-size: var(--tab-title-h);
  min-block-size: 0;
  overflow: hidden;
  padding: 0.5rem 0.6rem 0;
  border: none;
  border-radius: 6px 6px 0 0;
  background: var(--tab-bg);
  color: var(--color-title);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.15;
}

ExecutiveTeam > position > .name,
ExecutiveTeam > position:has(> .team-toggle) > .name {
  inline-size: var(--tab-width);
  block-size: var(--tab-name-h);
  padding: 0.1rem 0.6rem 0.4rem;
  border: none;
  border-radius: 0;
  background: var(--tab-bg);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 2;  /* name link stays tappable above the tab overlay */
}

@media (min-width: 40rem) {
  ExecutiveTeam > position::before { font-size: 0.82rem; }
  ExecutiveTeam > position > .name,
  ExecutiveTeam > position:has(> .team-toggle) > .name { font-size: 0.88rem; }
}

/* No show-team bar on a tab: the label collapses to nothing and only its
   overlay remains, stretching up over title and name as the tap target */
ExecutiveTeam > position:has(> .team-toggle) > label {
  inline-size: var(--tab-width);
  block-size: 0;
  padding: 0;
  border: none;
  position: relative;

  &::after { content: none; }

  &::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: calc(var(--tab-title-h) + var(--tab-name-h));
  }
}

ExecutiveTeam > position:has(> .team-toggle):hover::before,
ExecutiveTeam > position:has(> .team-toggle):hover > .name {
  background: #dbe3ee;
}

/* Open tab: solid brand blue, merging into the strip's bottom rule */
ExecutiveTeam > position:has(> .team-toggle:checked)::before,
ExecutiveTeam > position:has(> .team-toggle:checked) > .name {
  background: var(--spscc-blue);
  color: #fff;
}

ExecutiveTeam > position:has(> .team-toggle:checked) > a.name {
  color: #fff;
}

/* Focus on the open tab: the blue ring would vanish on blue, so use orange */
ExecutiveTeam > position:focus-visible:has(> .team-toggle:checked)::before {
  box-shadow:
    inset  3px 0 0 var(--tab-ring),
    inset -3px 0 0 var(--tab-ring),
    inset 0  3px 0 var(--tab-ring);
}

ExecutiveTeam > position:focus-visible:has(> .team-toggle:checked) > .name {
  box-shadow:
    inset  3px 0 0 var(--tab-ring),
    inset -3px 0 0 var(--tab-ring),
    inset 0 -3px 0 var(--tab-ring);
}

/* Focus on a closed tab: close the ring along the bottom of the name */
ExecutiveTeam > position:focus-visible > .name {
  box-shadow:
    inset  3px 0 0 var(--spscc-blue),
    inset -3px 0 0 var(--spscc-blue),
    inset 0 -3px 0 var(--spscc-blue);
}

/* Click feedback (orgtree.js adds .tab-tapped): the tab tips back on its
   bottom edge and settles. Title and name pivot on the same point, the
   tab's bottom center, and perspective() is taken from that origin, so they
   move as one card. */
ExecutiveTeam > position.tab-tapped::before {
  transform-origin: 50% calc(100% + var(--tab-name-h));
  animation: tab-tip 300ms ease-out;
}

ExecutiveTeam > position.tab-tapped > .name {
  transform-origin: 50% 100%;
  animation: tab-tip 300ms ease-out;
}

@keyframes tab-tip {
  0%   { transform: perspective(500px) rotateX(0deg); }
  40%  { transform: perspective(500px) rotateX(18deg); }
  100% { transform: perspective(500px) rotateX(0deg); }
}

/* ── Team panel — the open VP's Division, below the strip ─────────── */

/* Shrink-wrapped and centered with auto margins. The end inset mirrors
   spine + connector so the cards themselves sit on the center line,
   without padding that would add sideways scroll. It widens and shifts
   left as nested teams open, and pins to the left edge once it outgrows
   the centering room. The spine starts at the first card's connector. */
Division {
  --panel-top: 1.25rem;
  position: absolute;
  inset-inline: 0 calc(1rem + var(--connector));
  inset-block-start: 100%;
  inline-size: fit-content;
  margin-inline: auto;
  margin-block-end: 2rem;
  padding-block-start: var(--panel-top);
  background-position: 1rem calc(var(--panel-top) + 1rem);
}

/* Tab switch: the old team fades out, then the new one fades in.
   display transitions discretely, so a closing panel stays visible
   until its fade ends; the opening panel waits for it. */
Division {
  opacity: 0;
  transition: opacity 120ms ease-in, display 120ms allow-discrete;
}

.team-toggle:checked ~ Division {
  opacity: 1;
  transition: opacity 120ms ease-out 120ms, display 120ms allow-discrete;

  @starting-style { opacity: 0; }
}

/* Show/hide team: orgtree.js wipes the team down/up and slides the cards
   below along with it; this keeps a closing team on screen until then */
Department.team-animating,
WorkUnit.team-animating {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  Division,
  .team-toggle:checked ~ Division {
    transition: none;
  }
}