/* Interactive organization chart. Every selector is scoped to .oc / .oc-* so nothing leaks into other pages. */
.oc { --oc-line: #5f7a89; --oc-accent: #087ca2; --oc-ink: #14303b; --oc-gap: 22px; margin: 2rem 0 1.25rem; color: var(--oc-ink); box-sizing: border-box; }
.oc *, .oc *::before, .oc *::after { box-sizing: border-box; }
.oc__head { display: grid; gap: .55rem; margin-bottom: 1.4rem; }
.oc__title { margin: 0; font-size: clamp(1.25rem, 3.4vw, 1.6rem); line-height: 1.25; font-weight: 700; letter-spacing: -.01em; }
.oc__intro { margin: 0; max-width: 62ch; font-size: .95rem; line-height: 1.6; color: #3d5560; }
.oc__legend { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .2rem 0 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 600; }
.oc__legend li { display: inline-flex; align-items: center; gap: .55rem; }
.oc__swatch { display: inline-block; width: 34px; height: 0; border-top: 2px solid var(--oc-line); }
.oc__swatch--dashed { border-top-style: dashed; }

/* link to the official image (only shown with the interactive chart) */
.oc__source { margin-left: .35rem; color: var(--oc-accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.oc__source:hover, .oc__source:focus-visible { color: #05566f; }

/* fallback: the official chart image, used only when the interactive chart cannot be trusted */
.oc-figure { margin: 0 0 1.25rem; }
.oc-figure a { display: block; border: 1px solid rgba(20, 48, 59, .16); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(15, 40, 60, .06), 0 6px 16px rgba(15, 40, 60, .06); }
.oc-figure img { display: block; width: 100%; height: auto; }
.oc-figure figcaption { margin-top: .6rem; font-size: .9rem; color: #3d5560; }

/* ---- cards ---- */
.oc-card { position: relative; display: grid; gap: .2rem; justify-items: center; align-content: center; min-height: 58px; padding: .75rem 1rem; border-radius: 16px; border: 1px solid rgba(20, 48, 59, .16); background: #fbe3d1; color: #4a2410; text-align: center; box-shadow: 0 1px 2px rgba(15, 40, 60, .06), 0 6px 16px rgba(15, 40, 60, .06); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease; }
.oc-card__cat { font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; opacity: .92; }
.oc-card__title { margin: 0; font-size: .98rem; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.oc-card__abbr { font-weight: 600; opacity: .92; white-space: nowrap; }
.oc-card__rel { font-size: .74rem; line-height: 1.35; opacity: .92; }
.oc-card__count { margin-top: .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .03em; padding: .1rem .55rem; border-radius: 999px; background: rgba(0, 0, 0, .1); }
.oc-card--yayasan { background: #2f5fb3; border-color: #244a8c; color: #fff; }
.oc-card--ketua { background: #3f7a2f; border-color: #2f5e23; color: #fff; }
.oc-card--senat { background: #b3261e; border-color: #8d1d17; color: #fff; }
.oc-card--waket { background: #f5c242; border-color: #cf9c12; color: #3a2a00; }
.oc-card--mutu { background: #c5e7b0; border-color: #8fbf71; color: #1d3a10; }
.oc-card--prodi { background: #f6c9a8; border-color: #d9a17a; color: #4a2410; }
.oc-card--unit { background: #fbe3d1; border-color: #e2bda2; color: #4a2410; }
.oc-card:hover { transform: translateY(-2px); border-color: var(--oc-accent); box-shadow: 0 2px 4px rgba(15, 40, 60, .08), 0 12px 26px rgba(15, 40, 60, .14); }
.oc-card:focus-visible { outline: 3px solid var(--oc-accent); outline-offset: 3px; }
.oc-card.is-active { border-color: var(--oc-accent); box-shadow: 0 0 0 3px rgba(8, 124, 162, .28), 0 12px 26px rgba(15, 40, 60, .14); }
.oc-card.is-related { border-color: var(--oc-accent); box-shadow: 0 0 0 3px rgba(8, 124, 162, .2); }
.oc.is-focusing .oc-card:not(.is-active):not(.is-related) { opacity: .5; }

/* expand / collapse toggle: a transparent button over the whole card (shown by JS only) */
.oc-toggle { position: absolute; inset: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; padding: 0; color: inherit; }
.oc-toggle[hidden] { display: none; }
.oc-toggle:focus-visible { outline: 3px solid var(--oc-accent); outline-offset: 3px; }
.oc-toggle__chev { position: absolute; right: 14px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .22s ease; }
.oc-toggle[aria-expanded="false"] .oc-toggle__chev { transform: rotate(-45deg); margin-top: -5px; }

/* ---- lines ---- */
.oc__line { display: block; border: 0 solid var(--oc-line); }
.oc__line--v { height: var(--oc-gap); width: 0; border-left-width: 2px; margin: 0 auto; }
.oc__line--h { width: 54px; height: 0; border-top-width: 2px; flex: none; }
.oc__line--coordination { border-style: dashed; }
.oc__line--command { border-style: solid; }

/* ---- tree layout ---- */
.oc__tree { display: grid; justify-items: center; }
.oc__top { display: grid; justify-items: center; width: 100%; }
.oc__top .oc-card { width: min(100%, 340px); }
.oc__chair { display: grid; grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr); align-items: center; width: 100%; }
.oc__chair > .oc-card { grid-column: 2; width: 220px; }
.oc__coord { grid-column: 3; display: flex; align-items: center; }
.oc__side { display: grid; justify-items: center; gap: .3rem; }
.oc__side .oc-card { width: 130px; min-height: 52px; }
.oc__relation { font-size: .7rem; color: #4a6370; text-align: center; max-width: 16ch; line-height: 1.3; }
.oc__branches { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; width: 100%; align-items: start; }
.oc__branches::before { content: ""; position: absolute; top: 0; left: 16.666%; right: 16.666%; border-top: 2px solid var(--oc-line); }
.oc__branch { position: relative; padding-top: var(--oc-gap); min-width: 0; }
.oc__branch::before { content: ""; position: absolute; top: 0; left: 50%; height: var(--oc-gap); border-left: 2px solid var(--oc-line); }

/* children hang from a trunk, like the official chart */
.oc__collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .26s ease; }
.oc__collapse.is-collapsed { grid-template-rows: 0fr; }
.oc__collapse-inner { min-height: 0; overflow: hidden; padding: 10px 22px 30px; margin: 0 -22px -30px; } /* room inside the clip for hover shadows and focus rings; negative margins keep the layout unchanged */
.oc__collapse.is-collapsed > .oc__collapse-inner { visibility: hidden; transition: visibility 0s .26s; }
.oc-children { list-style: none; margin: 0 0 0 18px; padding: 0; }
.oc-children > li { position: relative; padding: 5px 0 5px 24px; min-width: 0; }
.oc-children > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px solid var(--oc-line); }
.oc-children > li:first-child::before { top: -10px; }
.oc-children > li:last-child::before { bottom: 50%; }
.oc-children > li::after { content: ""; position: absolute; left: 0; top: 50%; width: 20px; border-top: 2px solid var(--oc-line); }
.oc-children .oc-card { min-height: 50px; padding: .55rem .8rem; }
.oc-children .oc-card__title { font-size: .9rem; }

@media (max-width: 899px) {
  /* Mobile: the solid trunk runs straight down from the Ketua; Senat hangs to the right on a DASHED branch,
     so it never looks like the parent of the units below. */
  .oc__chair { display: flex; flex-direction: column; align-items: center; width: min(100%, 340px); }
  .oc__chair > .oc-card { width: 100%; }
  .oc__coord { position: relative; display: flex; flex-direction: column; align-items: flex-end; width: 100%; }
  .oc__coord::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px solid var(--oc-line); }
  .oc__line--h { width: 0; height: var(--oc-gap); border-top-width: 0; border-left-width: 2px; margin-right: 64px; }
  .oc__side .oc-card { width: 130px; }
  .oc__relation { max-width: 130px; }
  .oc__branches { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 620px; margin-inline: auto; }
  .oc__branches::before { display: none; }
  .oc__branch { padding-top: 14px; }
  .oc__branch::before { height: 14px; }
  .oc__branch:first-child { padding-top: 0; }
  .oc__branch:first-child::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .oc-card, .oc-toggle__chev, .oc__collapse { transition: none; }
  .oc-card:hover { transform: none; }
}

/* V3 glass shell (dark translucent background): light text and lighter connectors; the coloured cards keep their own text colours. */
body.v3-glass .oc { --oc-line: #b4c4d0; --oc-accent: #7fe0ff; --oc-ink: #f3f7fb; }
body.v3-glass .oc__intro, body.v3-glass .oc__relation, body.v3-glass .oc-figure figcaption { color: #d6dfeb; }
body.v3-glass .oc__source { color: #8fe3ff; }
body.v3-glass .oc__source:hover, body.v3-glass .oc__source:focus-visible { color: #fff; }
body.v3-glass .oc-card:focus-visible, body.v3-glass .oc-toggle:focus-visible { outline-color: #fff; }