/* ============================================================
   BUREAU OF LOST TIMELINES — ORG CHART SHEET (org.html)

   Another sheet of the same file: the roster is drawn like the rest of
   the dossier — ink surface, paper type, a coloured spine that carries
   the clearance level, and no glow. Phosphor is reserved for terminals
   that are supposed to look like terminals; a structure chart is paper
   work, so its hierarchy is stamp red at the top and hairline grey at
   the bottom.

   LOAD ORDER: css/tokens.css, css/style.css, then this sheet.
   ============================================================ */

.org-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-7);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
  color: var(--paper-dim);
  letter-spacing: var(--tr-mono);
}

/* ---------- NUMBERING NOTE: a sealed margin comment ---------- */
.org-note {
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--line-red);
  border-radius: var(--r-2);
  background: var(--ink-1) var(--fibre);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--paper-dim);
  max-width: var(--maxw-narrow);
}

.org-note strong {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert);
  margin-bottom: var(--s-1);
}

/* ---------- LEGEND: clearance spine colours ---------- */
.marker-legend .dot.c5 { background: var(--alert); }
.marker-legend .dot.c4 { background: var(--folklore); }
.marker-legend .dot.c3 { background: var(--cat-places); }
.marker-legend .dot.c2 { background: var(--cat-timeline); }
.marker-legend .dot.c1 { background: var(--muted-strong); }
.marker-legend .dot.c0 { background: var(--line-strong); }

/* ---------- LEVELS AND CONNECTORS ---------- */
.org-level {
  display: flex;
  justify-content: center;
}

.org-connector,
.org-connector-multi {
  width: 2px;
  height: 28px;
  margin: 0 auto;
  background: var(--line-strong);
  position: relative;
}

.org-connector-multi::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(92%, var(--maxw));
  height: 1px;
  background: var(--line);
}

/* ---------- NODES: one record card per division ---------- */
.org-node {
  display: block;
  position: relative;
  min-width: 220px;
  max-width: 320px;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + var(--spine));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--ink-1) var(--fibre);
  box-shadow: var(--shadow-1), var(--shadow-inset);
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease),
              background var(--dur-2) var(--ease),
              transform var(--dur-2) var(--ease);
}

/* the spine is what says which level this desk sits at. The .level-* classes
   below are deliberately not scoped to .org-node: js/org.js puts the same class
   on an accordion row, so a division can't be red in the chart and grey in the
   roster underneath it. */
.org-node::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--spine);
  border-radius: var(--r-2) 0 0 var(--r-2);
  background: var(--node-spine, var(--line-strong));
}

.org-node:hover,
.org-node:focus-visible {
  border-color: var(--line-strong);
  background: var(--ink-2) var(--fibre);
  transform: translateY(-2px);
}

.org-node:focus-visible {
  outline: 1px solid var(--alert-bright);
  outline-offset: 2px;
}

.org-node:active { transform: translateY(0); }

.level-c0 { --node-spine: var(--line-strong); }
.level-c1 { --node-spine: var(--muted-strong); }
.level-c2 { --node-spine: var(--cat-timeline); }
.level-c3 { --node-spine: var(--cat-places); }
.level-c4 { --node-spine: var(--folklore); }
.level-c5 { --node-spine: var(--alert); }
.level-owner { --node-spine: var(--alert-deep); }
.level-dept00 { --node-spine: var(--gold); }

.org-node.level-dept00 {
  min-width: 300px;
  border-color: rgba(217, 164, 65, 0.32);
}

.org-node.level-owner {
  min-width: 260px;
  border-color: var(--alert-deep);
  background: linear-gradient(var(--alert-wash), var(--alert-wash)), var(--ink-1);
}

.node-rank {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  color: var(--node-spine, var(--muted));
  margin-bottom: var(--s-1);
}

.node-name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-flat);
  color: var(--paper-bright);
  margin-bottom: 2px;
}

.node-my {
  font-family: var(--font-my);
  font-size: var(--fs-body);
  color: var(--paper-dim);
  margin-bottom: var(--s-2);
}

.node-sub {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--muted);
  line-height: 1.5;
}

.node-status {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--muted-strong);
  border-top: 1px solid var(--line-hair);
  padding-top: var(--s-2);
  margin-top: var(--s-2);
  text-align: right;
}

/* ---------- GRID ---------- */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
  /* no border here: .org-connector-multi already draws the rail this grid hangs off */
  padding-top: var(--s-4);
}

.org-grid .org-node {
  max-width: none;
  width: 100%;
}

/* ---------- SECTIONS ---------- */
.org-section {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

.org-section h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  letter-spacing: var(--tr-flat);
  color: var(--paper-bright);
  margin-bottom: var(--s-2);
}

.org-section h2 .my {
  display: block;
  font-family: var(--font-my);
  font-size: var(--fs-body);
  letter-spacing: 0;
  color: var(--muted-strong);
  margin-top: var(--s-1);
}

.org-section-note {
  max-width: var(--maxw-narrow);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--muted-strong);
  margin-bottom: var(--s-4);
}

/* ---------- CLEARANCE TABLE ---------- */
.org-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--ink-1);
}

.org-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-label);
  min-width: 620px;
}

.org-table th {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  text-align: left;
  color: var(--muted);
  background: var(--ink-2);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.org-table td {
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line-hair);
  color: var(--paper-dim);
  vertical-align: top;
}

.org-table tr:last-child td { border-bottom: none; }
.org-table tbody tr:hover td { background: var(--ink-2); }

/* the Myanmar column is the only one that needs the Padauk stack */
.org-table td:nth-child(3) {
  font-family: var(--font-my);
  font-size: var(--fs-body);
  color: var(--paper);
}

.org-table td:last-child {
  font-family: var(--font-mono);
  color: var(--muted-strong);
  letter-spacing: var(--tr-mono);
}

.org-table .lvl-0,
.org-table .lvl-1,
.org-table .lvl-2,
.org-table .lvl-3,
.org-table .lvl-4,
.org-table .lvl-5 {
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.org-table .lvl-0 { color: var(--muted); }
.org-table .lvl-1 { color: var(--muted-strong); }
.org-table .lvl-2 { color: var(--cat-timeline); }
.org-table .lvl-3 { color: var(--cat-places); }
.org-table .lvl-4 { color: var(--folklore); }
.org-table .lvl-5 { color: var(--alert-bright); }

/* ---------- INFORMATION FLOW ----------
   The working chains that used to be a hardcoded strip of eight boxes are drawn
   by js/caseflow.js and styled by css/caseflow.css, which loads after this sheet:
   a route the reader can click through, with a real clearance state on every step,
   cannot be written out by hand and stay true to the eleven offices. */

/* ---------- SUB-UNIT ACCORDION ---------- */
.org-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.acc-item {
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--ink-1);
  overflow: hidden;
}

.acc-header {
  /* a real <button>: the roster opens by keyboard as well as by mouse */
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  border: 0;
  border-left: var(--spine) solid var(--node-spine, var(--line-strong));
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.acc-header:hover { background: var(--ink-2); }

.acc-header:focus-visible {
  outline: 1px solid var(--alert-bright);
  outline-offset: -3px;
}

.acc-item.open .acc-header { background: var(--ink-2); }

.acc-header-left {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  align-items: baseline;
  min-width: 0;
}

.acc-dept {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--node-spine, var(--muted));
  flex: none;
}

.acc-title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-flat);
  color: var(--paper-bright);
}

.acc-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  color: var(--muted-strong);
}

.acc-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  flex: none;
}

.acc-toggle {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--alert);
  flex: none;
  transition: transform var(--dur-2) var(--ease);
}

.acc-item.open .acc-toggle { transform: rotate(45deg); }

.acc-body {
  display: none;
  padding: var(--s-1) var(--s-3) var(--s-3);
  border-top: 1px solid var(--line-hair);
}

.acc-item.open .acc-body { display: block; }

.acc-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px var(--s-3);
  align-items: baseline;
  padding: var(--s-1) 0;
  border-bottom: 1px solid var(--line-hair);
  font-size: var(--fs-label);
}

.acc-sub:last-child { border-bottom: none; }

.acc-sub-id {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--muted);
  flex: none;
  min-width: 56px;
}

.acc-sub-name {
  color: var(--paper);
  flex: 1 1 200px;
}

.acc-sub-desc {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  color: var(--muted-strong);
  flex: 1 1 100%;
}

@media (min-width: 640px) {
  .acc-sub-desc { flex: 0 1 auto; text-align: right; }
}

/* ---------- FOOTER STATS ---------- */
.org-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-3);
}

.stat-box {
  border: 1px solid var(--line);
  border-top: var(--spine) solid var(--alert-deep);
  border-radius: var(--r-2);
  background: var(--ink-1) var(--fibre);
  padding: var(--s-4) var(--s-3);
  text-align: center;
}

.stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--paper-bright);
}

.stat-lbl {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: var(--s-1);
}

/* ---------- NARROW SHEETS ---------- */
@media (max-width: 600px) {
  .org-node,
  .org-node.level-owner,
  .org-node.level-dept00 {
    min-width: 0;
    max-width: 100%;
  }

  .org-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .org-node,
  .acc-header,
  .acc-toggle { transition: none; }
  .org-node:hover,
  .org-node:focus-visible { transform: none; }
}