/* Lineup's team chart (chart.js), for both pages. The avatar, chips and the
   older nested chart (.tree) read the page's own Set A tokens (--card,
   --line, --blue, --blue-050, --muted, --shadow) and --wire, the colour of
   the lines between cards. The org chart (.org-wrap, LUChart.orgHTML) has
   its own --lu-* colours: light here, dark under [data-theme="dark"] (the
   editor; the trade partner page is always light). */

/* initials */
.av{--h:#0057b8;flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--h);color:#fff;font-weight:700;font-size:14px;letter-spacing:.02em}
.av.lg{width:58px;height:58px;font-size:19px}
.av.sm{width:30px;height:30px;font-size:11.5px}
.av.anon{background:var(--line);color:var(--muted)}

.chip{display:inline-block;background:var(--blue-050);color:var(--blue);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.chip.me{background:var(--blue);color:var(--btn-ink)}

/* the chart: nested lists joined by lines */
.tbox{overflow-x:auto;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;container-type:inline-size}
.tree,.tree ul{margin:0;padding:0;list-style:none}
.tree{display:flex;justify-content:center;min-width:max-content;margin:0 auto}
.tree ul{display:flex;justify-content:center;padding-top:22px;position:relative}
.tree li{position:relative;padding:22px 6px 0;display:flex;flex-direction:column;align-items:center}
.tree>li{padding-top:0}
.tree li::before,.tree li::after{content:"";position:absolute;top:0;right:50%;width:50%;height:22px;border-top:2px solid var(--wire)}
.tree li::after{right:auto;left:50%;border-left:2px solid var(--wire)}
.tree li:only-child::before,.tree li:only-child::after{display:none}
.tree li:only-child{padding-top:0}
.tree ul>li:only-child{padding-top:0}
.tree li:first-child::before,.tree li:last-child::after{border:0}
.tree li:last-child::before{border-right:2px solid var(--wire);border-radius:0 7px 0 0}
.tree li:first-child::after{border-radius:7px 0 0 0}
.tree ul::before{content:"";position:absolute;top:0;left:50%;height:22px;border-left:2px solid var(--wire)}
.tree>li::before,.tree>li::after{display:none}
.nwrap{position:relative}

.tnode{--d:0;position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:172px;padding:10px 8px 9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);color:inherit;text-align:center;font:inherit}
button.tnode{cursor:pointer}
button.tnode:hover,.tnode[role=button]:hover{border-color:var(--blue)}
.tnode .who{display:contents}
.tnode .nm{font-weight:700;font-size:13.5px;line-height:1.2}
.tnode .tt{font-size:12px;color:var(--muted);line-height:1.25}
.tnode .tbadge{font-size:11px;font-weight:700;color:var(--amber-ink);background:var(--amber-bg);border-radius:20px;padding:1px 8px}
.tnode .tchips{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:3px}
.tnode .tchips .chip{font-size:11px;padding:1px 8px}
.tnode .more{font-size:11px;color:var(--muted);font-weight:600;padding:1px 2px}
.tnode.away{border-style:dashed}
.tree.dim .tnode:not(.path){filter:opacity(.45)}
.tree.dim .tnode.path{border:2px solid var(--blue)}
.tnode.sel{border:2px solid var(--blue);box-shadow:0 0 0 3px var(--blue-050)}
.tnode.drop-ok{border:2px dashed var(--good);background:var(--blue-050)}
.tnode.dragging{opacity:.4}
.fold{position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);z-index:2;border:1px solid var(--line);background:var(--card);border-radius:20px;
  font:inherit;font-size:11px;font-weight:700;color:var(--blue);padding:1px 8px;min-height:22px;cursor:pointer}
.fold::after{content:"";position:absolute;inset:-10px -6px}

@keyframes lu-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes lu-fade{from{opacity:0}to{opacity:1}}
.tree.anim .tnode{animation:lu-rise .3s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 90ms)}
.tree.anim li::before,.tree.anim li::after,.tree.anim ul::before{animation:lu-fade .25s both}
@media (prefers-reduced-motion: reduce){
  .tree *,.tree *::before,.tree *::after{animation:none!important;transition:none!important}
}

/* a large team: rows of up to six cards (fewer when the chart is narrower) in a box hung from its manager,
   with no line to each card (chart.js marks the list .grid) */
@media (min-width:701px){
  .tree ul.grid{flex-wrap:wrap;width:max-content;max-width:min(calc(6 * 184px + 28px), calc(100cqw - 24px));gap:14px 0;margin-top:22px;padding:16px 8px;
    border:2px solid var(--wire);border-radius:14px}
  .tree ul.grid::before{top:-24px;height:22px}
  .tree ul.grid>li{padding-top:0}
  .tree ul.grid>li::before,.tree ul.grid>li::after{display:none}
}

/* phone: the chart becomes an indented list down the page */
@media (max-width:700px){
  .tree,.tree ul{display:block;min-width:0}
  .tree ul{padding:0 0 0 22px;position:relative}
  .tree ul::before{display:none}
  .tree li{display:block;padding:8px 0 0 0}
  .tree>li,.tree ul>li:only-child{padding-top:8px}
  .tree>li{padding-top:0}
  .tree li::before{display:block!important;content:"";position:absolute;left:-12px;top:0;width:10px;height:30px;border:0;border-left:2px solid var(--wire);border-bottom:2px solid var(--wire);border-radius:0 0 0 7px}
  .tree li::after{display:block!important;content:"";position:absolute;left:-12px;top:0;bottom:0;width:0;height:auto;border:0;border-left:2px solid var(--wire);border-radius:0}
  .tree li:last-child::after{display:none!important}
  .tree>li::before,.tree>li::after{display:none!important}
  .tnode{width:100%;flex-direction:row;text-align:left;gap:10px;padding:8px 10px;min-height:56px}
  .tnode .who{display:flex;flex-direction:column;min-width:0;flex:1}
  .tnode .tchips{justify-content:flex-start}
  .nwrap{display:flex;gap:6px;align-items:center}
  .nwrap .tnode{flex:1;width:auto;min-width:0}
  .fold{position:static;transform:none;flex:none;min-height:40px;padding:4px 10px;font-size:12px}
  .tbox{overflow:visible}
}
@media print{ .fold{display:none!important} .tnode{box-shadow:none;break-inside:avoid} }
.tnode.open{background:#fffaf0;border:1.5px dashed #e0a12e}
[data-theme="dark"] .tnode.open{background:#2a2410;border-color:#a8812d}

/* ============================================================
   The region's org chart (LUChart.orgHTML): root, columns, rail lists.
   Never wider than its container: columns share the width (4 across at
   most), stack under 900px and become an indented list under 700px,
   measured on the chart's own box (container queries).
   ============================================================ */
.org-wrap,.lu-legend{
  --lu-card:#fff; --lu-ink:#1a2433; --lu-muted:#5b6b7f; --lu-line:#dde4ed; --lu-wire:#b3c0d0;
  --lu-shadow:0 1px 2px rgba(10,37,64,.06),0 4px 14px rgba(10,37,64,.06);
  --lu-shadow-up:0 2px 4px rgba(10,37,64,.08),0 10px 26px rgba(10,37,64,.12);
  --lu-blue:#0057b8; --lu-blue-050:#eaf2fc;
  --lu-navy:#0a3d5c; --lu-reg:#0057b8; --lu-teal:#0f8b8d; --lu-slate:#7d8fa5; --lu-amber:#e0a12e;
  --lu-open-bg:#fffaf0; --lu-open-line:#e0a12e; --lu-open-ink:#8a5a00;
  --lu-team-line:#4f86cc; --lu-team-bg:rgba(0,87,184,.035); --lu-team-ink:#0057b8;
  --lu-dot:#0057b8; --lu-gap:22px; --lu-drop:#1a8f57;
}
[data-theme="dark"] .org-wrap,[data-theme="dark"] .lu-legend{
  --lu-card:#19212e; --lu-ink:#e7ecf4; --lu-muted:#9aa7ba; --lu-line:#2a3547; --lu-wire:#3b5578;
  --lu-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --lu-shadow-up:0 2px 4px rgba(0,0,0,.5),0 10px 26px rgba(0,0,0,.45);
  --lu-blue:#5aa0f0; --lu-blue-050:#18293f;
  --lu-navy:#8fb4e3; --lu-reg:#5aa0f0; --lu-teal:#3cc0c2; --lu-slate:#6f8299; --lu-amber:#e0a44a;
  --lu-open-bg:#2a2410; --lu-open-line:#a8812d; --lu-open-ink:#e9b866;
  --lu-team-line:#5a8fd0; --lu-team-bg:rgba(90,160,240,.05); --lu-team-ink:#79b3f6;
  --lu-dot:#79b3f6; --lu-drop:#3ecb86;
}
.org-wrap{container:luorg / inline-size;max-width:100%;min-width:0;color:var(--lu-ink)}
.org{position:relative;padding:2px 0 6px}
.org ul,.org li{margin:0;padding:0;list-style:none}

/* a card: colour bar down the left by tier */
.oc-card{--lu-bar:var(--lu-slate);position:relative;display:flex;align-items:center;gap:9px;width:100%;min-width:0;margin:0;
  padding:8px 11px 8px 15px;background:var(--lu-card);color:var(--lu-ink);border:1px solid var(--lu-line);border-radius:10px;
  box-shadow:var(--lu-shadow);text-align:left;font:inherit;line-height:1.3;overflow:hidden;
  transition:border-color .15s,box-shadow .2s,translate .2s,filter .25s}
.oc-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--lu-bar)}
.oc-card.t-top{--lu-bar:var(--lu-navy)}
.oc-card.t-reg{--lu-bar:var(--lu-reg)}
.oc-card.t-teal{--lu-bar:var(--lu-teal)}
.oc-card.t-staff{--lu-bar:var(--lu-slate)}
.oc-card.t-open{--lu-bar:var(--lu-amber)}
button.oc-card,.oc-card[role=button]{cursor:pointer}
button.oc-card:hover,.oc-card[role=button]:hover{border-color:var(--lu-blue);box-shadow:var(--lu-shadow-up);translate:0 -1px}
.oc-card:focus-visible{outline:2px solid var(--lu-blue);outline-offset:2px}
.oc-card .who{display:flex;flex-direction:column;min-width:0;flex:1}
.oc-card .nm{font-weight:700;font-size:13.5px;overflow-wrap:anywhere}
.oc-card .tt{font-size:12px;color:var(--lu-muted);overflow-wrap:anywhere}
.oc-card .im{font-size:12px;font-style:italic;color:var(--lu-open-ink);margin-top:1px}
.oc-card .tbadge{align-self:flex-start;font-size:11px;font-weight:700;color:var(--amber-ink,#7a5b00);background:var(--amber-bg,#fff4d6);border-radius:20px;padding:1px 8px;margin-top:2px}
.oc-card .tchips{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.oc-card .tchips .chip{font-size:11px;padding:1px 8px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-card .more{font-size:11px;color:var(--lu-muted);font-weight:600;padding:1px 2px}
.oc-card .av.sm{width:28px;height:28px;font-size:11px}
.oc-card .av.anon{background:var(--lu-line);color:var(--lu-muted)}
.oc-card.k-big{flex-direction:column;justify-content:center;text-align:center;padding:12px 14px 12px 18px;gap:2px;min-height:62px}
.oc-card.k-big .who{align-items:center}
.oc-card.k-big .nm{font-size:15px}
.oc-card.k-big .tt{font-size:12.5px}
.oc-card.k-big .tchips{justify-content:center}
.oc-card.k-big::before{width:5px}
.oc-card.k-mid{justify-content:center;text-align:center}
.oc-card.k-mid .who{align-items:center;flex:0 1 auto}
.oc-card.k-mid .tchips{justify-content:center}
.oc-card.hid .nm{color:var(--lu-muted);font-weight:600}
.oc-card.open{background:var(--lu-open-bg);border:1.5px dashed var(--lu-open-line);box-shadow:none}
.oc-card.open .nm{color:var(--lu-open-ink)}
.oc-card.sel{border:2px solid var(--lu-blue);box-shadow:0 0 0 3px var(--lu-blue-050),var(--lu-shadow)}
.org.dim .oc-card:not(.path){filter:opacity(.42)}
.org.dim .oc-card.path{border-color:var(--lu-blue);box-shadow:0 0 0 2px var(--lu-blue-050),var(--lu-shadow-up)}
.org.lit .oc-card.buys{border-color:var(--lu-blue)}
.oc-card.drop-ok{outline:2px dashed var(--lu-drop);outline-offset:2px;background:var(--lu-blue-050)}
.oc-card.dragging{filter:opacity(.4)}

/* root, then the bar across, then a line down into each column */
.oc-root{position:relative;display:flex;justify-content:center}
.oc-root.has-cols{padding-bottom:22px}
.oc-root .oc-card{width:min(300px,100%)}
.oc-root.has-cols::after{content:"";position:absolute;left:50%;bottom:0;height:22px;border-left:1.5px solid var(--lu-wire)}
.oc-cols{display:grid;grid-template-columns:repeat(var(--n),minmax(0,380px));justify-content:center;gap:26px var(--lu-gap);align-items:start}
.oc-col{position:relative;min-width:0;display:flex;flex-direction:column;transition:filter .3s}
.oc-head{position:relative}
.has-top>.oc-col{padding-top:22px}
.has-top>.oc-col::after{content:"";position:absolute;left:50%;top:0;height:22px;border-left:1.5px solid var(--lu-wire)}
.has-top>.oc-col::before{content:"";position:absolute;top:0;left:calc(var(--lu-gap) / -2);right:calc(var(--lu-gap) / -2);border-top:1.5px solid var(--lu-wire)}
.has-top>.oc-col.oc-first::before{left:50%}
.has-top>.oc-col.oc-last::before{right:50%}
.has-top>.oc-col.oc-first.oc-last::before{display:none}
.oc-col.oc-dimcol{filter:opacity(.55) saturate(.7)}
.oc-col.oc-dimcol:hover,.oc-col.oc-dimcol:focus-within{filter:none}

/* a single report drawn beneath, on a short line */
.oc-under{position:relative;display:flex;flex-direction:column;padding-top:14px}
.oc-under::before{content:"";position:absolute;left:50%;top:0;height:14px;border-left:1.5px solid var(--lu-wire)}

/* the rail list: a line down the left, a tick to each card */
.org .oc-rail{position:relative;padding-left:26px}
.org .oc-rail>li{position:relative;padding-top:8px}
.org .oc-rail>li::before{content:"";position:absolute;left:-14px;top:0;bottom:0;border-left:1.5px solid var(--lu-wire)}
.org .oc-rail>li:last-child::before{display:none}
.oc-row{position:relative}
.oc-row::before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:1.5px solid var(--lu-wire)}
.oc-rail>li:last-child>.oc-row::after{content:"";position:absolute;left:-14px;top:-8px;bottom:50%;border-left:1.5px solid var(--lu-wire)}

/* a team in a dotted box, a covering group under a caption */
.oc-team{border:1.5px dotted var(--lu-team-line);border-radius:12px;padding:8px 8px 9px;background:var(--lu-team-bg)}
.oc-cap{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--lu-team-ink);margin:0 0 6px 3px}
.oc-mem{display:flex;flex-direction:column;gap:6px}
.oc-cover{margin-top:16px;padding-top:12px;border-top:1px dashed var(--lu-wire)}
.oc-cover .oc-cap{color:var(--lu-muted)}
.oc-extra{margin-top:16px;min-width:0}

/* dotted-line reports (LUChart.drawDotted) */
@keyframes lu-fade-in{from{opacity:0}to{opacity:1}}
.oc-dots{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;animation:lu-fade-in .5s .25s both}
.oc-dl{fill:none;stroke:var(--lu-dot);stroke-width:1.5;stroke-dasharray:1.5 4;stroke-linecap:round;stroke-linejoin:round;opacity:.85}

/* the legend */
.lu-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;font-size:12px;color:var(--lu-muted)}
.lu-legend .lg{display:inline-flex;align-items:center;gap:7px}
.lu-legend .sw{display:inline-block;width:22px;height:14px;border-radius:4px}
.lu-legend .sw.open{background:var(--lu-open-bg);border:1.5px dashed var(--lu-open-line)}
.lu-legend .sw.team{background:var(--lu-team-bg);border:1.5px dotted var(--lu-team-line)}
.lu-legend .sw.dot{height:0;border-radius:0;border-top:2px dotted var(--lu-dot)}

/* rising in: root, columns 60 ms apart, rows 30 ms (the --t chart.js writes) */
@keyframes lu-rise-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.org.anim .oc-card,.org.anim .oc-cap{animation:lu-rise-in .42s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--t,0ms)}
.org.anim .oc-root::after,.org.anim .oc-col::before,.org.anim .oc-col::after,.org.anim .oc-under::before,
.org.anim .oc-rail>li::before,.org.anim .oc-row::before,.org.anim .oc-row::after,.org.anim .oc-team{animation:lu-fade-in .5s .12s both}
@media (prefers-reduced-motion: reduce){
  .org-wrap *,.org-wrap *::before,.org-wrap *::after{animation:none!important;transition:none!important}
  button.oc-card:hover,.oc-card[role=button]:hover{translate:none}
}

/* under 900px: the columns stack, hung from the root on a rail */
@container luorg (max-width: 900px){
  .oc-root{justify-content:flex-start}
  .oc-root.has-cols{padding-bottom:0}
  .oc-root.has-cols::after{display:none}
  .oc-cols{display:block}
  .oc-cols.has-top{padding-left:26px}
  .oc-col{max-width:640px}
  .has-top>.oc-col{padding-top:16px}
  .has-top>.oc-col::before,.has-top>.oc-col.oc-first::before,.has-top>.oc-col.oc-last::before{display:block;left:-14px;right:auto;top:0;bottom:0;border-top:0;border-left:1.5px solid var(--lu-wire)}
  .has-top>.oc-col:last-child::before{display:none}
  .has-top>.oc-col::after{display:none}
  .has-top>.oc-col>.oc-head::before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:1.5px solid var(--lu-wire)}
  .has-top>.oc-col:last-child>.oc-head::after{content:"";position:absolute;left:-14px;top:-16px;bottom:50%;border-left:1.5px solid var(--lu-wire)}
  .oc-cols:not(.has-top)>.oc-col+.oc-col{margin-top:22px}
}

/* under 700px: one indented list down the page */
@container luorg (max-width: 700px){
  .oc-root .oc-card{width:100%}
  .oc-col{max-width:none}
  .oc-card.k-big,.oc-card.k-mid{flex-direction:row;justify-content:flex-start;text-align:left;padding:9px 11px 9px 15px;gap:9px;min-height:48px}
  .oc-card.k-big .who,.oc-card.k-mid .who{align-items:flex-start;flex:1}
  .oc-card.k-big .nm{font-size:14px}
  .oc-card.k-big .tchips,.oc-card.k-mid .tchips{justify-content:flex-start}
  .oc-card{min-height:44px}
  .oc-under{padding:8px 0 0 26px}
  .oc-under::before{display:none}
  .oc-under>.oc-head::before{content:"";position:absolute;left:-14px;top:50%;width:14px;border-top:1.5px solid var(--lu-wire)}
  .oc-under>.oc-head::after{content:"";position:absolute;left:-14px;top:-8px;bottom:50%;border-left:1.5px solid var(--lu-wire)}
  .org .oc-rail{padding-left:22px}
  .org .oc-rail>li::before,.oc-row::before,.oc-rail>li:last-child>.oc-row::after{left:-12px}
  .oc-row::before{width:12px}
  .oc-dots{display:none}
}
@media print{
  .oc-card{box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .oc-team,.oc-cover{break-inside:avoid}
  /* drawn at screen width, so they would miss on paper; the team box and key still say it */
  .oc-dots{display:none}
}