/* ============================================================
   CAREER TREE — vertical top-down site tree
   Reuses public-info-theme tokens for the hero, then draws the
   tree with pure CSS rails and elbows (no SVG, no layout JS).
   ============================================================ */

/* Hero furniture (breadcrumb, doc hero, stats panel, note card) comes from
   public-info-theme.css, which the view links alongside this file. It is not
   @imported here because that would make the two stylesheets load in series. */

/* ---- toolbar ---- */
.icg-tree-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:24px}
.icg-tree-tools{display:flex;gap:8px}
.icg-tree-btn{font:inherit;font-family:var(--f-data);font-size:11px;font-weight:600;
  letter-spacing:.04em;color:var(--ink-2);cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;
  transition:border-color .16s ease,color .16s ease,background .16s ease}
.icg-tree-btn:hover{border-color:rgba(27,63,196,.4);color:var(--blue);background:var(--blue-soft)}

/* ---- tree frame ---- */
.icg-tree{
  --rail:#dcd9d0;          /* connector colour */
  --rail-in:26px;          /* how far each level indents */
  --elbow:18px;            /* horizontal elbow length */
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:22px 24px 26px;
  box-shadow:0 1px 2px rgba(19,27,46,.04),0 22px 44px -34px rgba(19,27,46,.5);
}

.icg-tree ul{list-style:none;margin:0;padding:0}

/* ---- node box ---- */
.icg-tree-node{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:11px;
  padding:10px 13px;text-decoration:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  transition:border-color .16s ease,box-shadow .18s ease,transform .16s ease;
}
.icg-tree-node:hover{
  border-color:#cfd6ea;transform:translateX(2px);
  box-shadow:0 2px 4px rgba(19,27,46,.04),0 12px 22px -16px rgba(19,27,46,.45);
}
/* Left colour strip is what makes the four tiers readable at a glance. */
.icg-tree-node::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;
  background:var(--tier,transparent);
}

.icg-tree-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-size:15px;font-family:"Segoe UI Emoji","Apple Color Emoji",var(--f-body);
  background:#f7f6f2;border:1px solid var(--line-2);
}
.icg-tree-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.icg-tree-title{
  font-family:var(--f-display);font-size:14px;font-weight:700;letter-spacing:-.017em;
  color:var(--ink);line-height:1.3;overflow-wrap:anywhere;
}
.icg-tree-copy small{
  font-size:12px;line-height:1.45;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.icg-tree-badge{
  flex:0 0 auto;font-family:var(--f-data);font-size:9.5px;font-weight:600;letter-spacing:.03em;
  color:var(--muted);background:#f7f6f2;border:1px solid var(--line-2);border-radius:20px;
  padding:4px 9px;white-space:nowrap;
}
.icg-tree-node:hover .icg-tree-title{color:var(--blue)}

/* ---- tiers ---- */
.icg-tree-node--root{
  --tier:linear-gradient(180deg,#2b56e8,#16309b);
  padding:15px 17px;border-radius:15px;
  background:linear-gradient(180deg,#fff,#fbfaf7);
  box-shadow:0 1px 2px rgba(19,27,46,.04),0 16px 30px -22px rgba(27,63,196,.6);
}
.icg-tree-node--root .icg-tree-ico{width:40px;height:40px;font-size:19px;border-radius:12px;
  background:var(--blue-soft);border-color:rgba(27,63,196,.2)}
.icg-tree-node--root .icg-tree-title{font-size:17px}
.icg-tree-node--root .icg-tree-badge{background:var(--blue-soft);color:var(--blue);
  border-color:rgba(27,63,196,.22)}

.icg-tree-node--branch{--tier:var(--blue);padding:12px 15px}
.icg-tree-node--branch .icg-tree-title{font-size:15.5px}
.icg-tree-node--branch .icg-tree-ico{width:34px;height:34px;font-size:16px;
  background:var(--blue-soft);border-color:rgba(27,63,196,.18)}
.icg-tree-node--branch .icg-tree-badge{color:var(--blue);background:var(--blue-soft);
  border-color:rgba(27,63,196,.2)}

.icg-tree-node--group{--tier:var(--verify,#12a37a)}
.icg-tree-node--group .icg-tree-title{font-size:14px}

.icg-tree-node--leaf{--tier:var(--line);background:#fdfdfb}
.icg-tree-node--leaf .icg-tree-title{font-weight:600;font-size:13.2px}
.icg-tree-node--leaf .icg-tree-ico{width:26px;height:26px;font-size:13px;border-radius:8px}

/* ---- rails and elbows: the vertical structure ----
   Each child list carries one continuous rail ("spine") down its left edge, and every
   item draws a short elbow from that rail across to its own box.

   The elbow lives on the node itself, so top:50% is the exact centre of the box no
   matter which tier it is or how tall the text wraps. The spine deliberately runs the
   full height of the child list rather than being cut at the last elbow: cutting it
   requires knowing the last node's height in CSS, which is not knowable here, and the
   continuous spine reads as intentional structure. */
.icg-tree-kids{position:relative;margin:9px 0 0;padding-left:var(--rail-in)}
.icg-tree-kids::before{
  content:"";position:absolute;left:0;top:-9px;bottom:0;width:1.5px;background:var(--rail);
  border-radius:1px;
}
.icg-tree-kids--top{margin-top:14px}
.icg-tree-kids--top::before{top:-14px}

.icg-tree-item{position:relative;margin-bottom:9px}
.icg-tree-item:last-child{margin-bottom:0}

/* elbow, measured from the centre of the node box it points at */
.icg-tree-item > .icg-tree-node::after,
.icg-tree-item > .icg-tree-more > summary::after{
  content:"";position:absolute;left:calc(var(--rail-in) * -1);top:50%;
  width:var(--elbow);height:1.5px;background:var(--rail);
}

/* Leaf grids: many small boxes side by side instead of one very tall column. */
.icg-tree-kids--grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.icg-tree-kids--grid > .icg-tree-item{margin-bottom:0}
/* Only the first column sits against the spine, so elbows elsewhere would point at
   empty space. Dropping them all keeps the grid honest. */
.icg-tree-kids--grid > .icg-tree-item > .icg-tree-node::after{display:none}

/* ---- expander ---- */
.icg-tree-more{margin:9px 0 0}
.icg-tree-more > summary{
  position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;padding:7px 12px;border-radius:9px;
  font-family:var(--f-data);font-size:10.5px;font-weight:600;letter-spacing:.04em;
  color:var(--blue);background:var(--blue-soft);border:1px solid rgba(27,63,196,.2);
  transition:background .16s ease,border-color .16s ease;
}
.icg-tree-more > summary::-webkit-details-marker{display:none}
.icg-tree-more > summary:hover{background:#e4eaff;border-color:rgba(27,63,196,.35)}
.icg-tree-more-mark{
  position:relative;width:9px;height:9px;flex:0 0 auto;
}
.icg-tree-more-mark::before,.icg-tree-more-mark::after{
  content:"";position:absolute;background:currentColor;border-radius:1px;
}
.icg-tree-more-mark::before{left:0;top:4px;width:9px;height:1.5px}
.icg-tree-more-mark::after{left:4px;top:0;width:1.5px;height:9px;transition:opacity .18s ease}
.icg-tree-more[open] > summary .icg-tree-more-mark::after{opacity:0}
.icg-tree-more[open] > summary{margin-bottom:2px}
/* The expander sits inside a list item, so it needs the same elbow treatment. */
.icg-tree-more > summary{margin-left:0}

.icg-tree-stamp{margin:7px 0 0;font-family:var(--f-data);font-size:10.5px;color:var(--muted)}

/* ---- note card (local, so this page does not need directory-theme.css) ---- */
.icg-tree-note{display:grid;gap:6px;margin:18px 0 0;padding:18px 20px;
  background:var(--blue-soft);border:1px solid rgba(27,63,196,.2);border-radius:14px}
.icg-tree-note strong{font-family:var(--f-display);font-size:14.5px;font-weight:700;
  letter-spacing:-.018em;color:var(--ink)}
.icg-tree-note span{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
.icg-tree-note a{justify-self:start;margin-top:3px;font-family:var(--f-data);font-size:11px;
  font-weight:600;color:var(--blue);text-decoration:none;
  border-bottom:1px solid rgba(27,63,196,.32);padding-bottom:1px}
.icg-tree-note a:hover{border-color:var(--blue)}

/* ---- legend ---- */
.icg-tree-legend{display:flex;flex-wrap:wrap;gap:16px;margin:18px 0 0;padding:0 4px}
.icg-tree-legend span{display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.05em;color:var(--muted)}
.icg-tree-legend i{width:12px;height:3px;border-radius:2px;flex:0 0 auto}
.icg-tree-legend i.is-root{background:linear-gradient(90deg,#2b56e8,#16309b)}
.icg-tree-legend i.is-branch{background:var(--blue)}
.icg-tree-legend i.is-group{background:var(--verify,#12a37a)}
.icg-tree-legend i.is-leaf{background:var(--line)}

/* ---- responsive ---- */
@media (max-width:1080px){
  .icg-tree{--rail-in:22px;--elbow:15px;padding:18px 18px 22px}
  .icg-tree-kids--grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
}
@media (max-width:640px){
  .icg-tree{--rail-in:15px;--elbow:10px;padding:14px 12px 18px;border-radius:16px}
  .icg-tree-kids--grid{grid-template-columns:1fr}
  .icg-tree-bar{align-items:flex-start}
  .icg-tree-tools{width:100%}
  .icg-tree-btn{flex:1}
  /* Summaries are dropped on small screens: the title has to win the space. */
  .icg-tree-copy small{display:none}
  .icg-tree-node{padding:9px 10px;gap:9px}
  .icg-tree-node--root{padding:13px 13px}
  .icg-tree-badge{font-size:9px;padding:3px 7px}
}

@media (prefers-reduced-motion:reduce){
  .icg-tree-node,.icg-tree-btn,.icg-tree-more > summary{transition:none}
  .icg-tree-node:hover{transform:none}
}

@media print{
  .icg-tree-tools,.icg-ai{display:none}
  .icg-tree{box-shadow:none}
  .icg-tree-more[open] > summary{display:none}
}