/*
 * Org structures: the switcher on the Organization page, unit cards, the structure chart,
 * the people picker in the drawers, and the team chips on the People list.
 */

.cw-ost{
	--ost-ink:var(--ink,#1d2327);
	--ost-muted:var(--muted,#646970);
	--ost-line:var(--line,#e2e4e7);
	--ost-soft:var(--soft,#f2f2f5);
	--ost-card:var(--card,var(--white,#fff));
	--ost-a:var(--accent,#6c4ef5);
	min-width:0;
}

.cw-ost__note{ margin:0 0 12px; padding:8px 12px; border-radius:10px; background:color-mix(in srgb,var(--ost-a) 10%,transparent); font-size:14px; }

/* the switcher */
.cw-ost__tabs{
	display:flex; gap:4px; margin:0 0 16px; padding:4px;
	border:1px solid var(--ost-line); border-radius:12px; background:var(--ost-card);
	overflow-x:auto; scrollbar-width:none; max-width:100%;
}
.cw-ost__tabs::-webkit-scrollbar{ display:none; }
.cw-ost__tab{
	display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
	padding:8px 14px; border-radius:9px; font-size:14px; font-weight:500;
	color:var(--ost-muted); text-decoration:none; white-space:nowrap;
}
.cw-ost__tab:hover{ color:var(--ost-ink); background:var(--ost-soft); }
.cw-ost__tab.is-on{ color:var(--ost-ink); background:var(--ost-soft); box-shadow:inset 0 0 0 1px var(--ost-line); }
.cw-ost__tab--add{ margin-left:auto; color:var(--ost-a); }
.cw-ost__tabn{ min-width:20px; padding:1px 6px; border-radius:99px; background:var(--ost-line); font-size:12px; text-align:center; color:var(--ost-ink); }
.cw-ost__main{ font-style:normal; font-size:11px; padding:1px 6px; border-radius:99px; color:var(--ost-a); background:color-mix(in srgb,var(--ost-a) 12%,transparent); }

/* head of a structure */
.cw-ost__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin:0 0 14px; }
.cw-ost__sum{ margin:0; font-size:14px; color:var(--ost-ink); }
.cw-ost__views{ display:inline-flex; padding:3px; border:1px solid var(--ost-line); border-radius:10px; background:var(--ost-card); }
.cw-ost__view{ padding:5px 12px; border-radius:7px; font-size:13px; color:var(--ost-muted); text-decoration:none; }
.cw-ost__view.is-on{ background:var(--ost-soft); color:var(--ost-ink); font-weight:600; }

/* grid of unit cards */
.cw-ost__grid{ list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr)); }
.cw-ost__grid > li{ margin:0; min-width:0; }
.cw-ost__card{
	position:relative; display:flex; flex-direction:column; gap:12px; height:100%; box-sizing:border-box;
	padding:16px; border:1px solid var(--ost-line); border-radius:14px; background:var(--ost-card);
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.cw-ost__card::before{ content:""; position:absolute; inset:0 0 auto; height:3px; border-radius:14px 14px 0 0; background:hsl(var(--h) 70% 58%); }
.cw-ost__top{ display:flex; align-items:center; gap:8px; min-width:0; }
.cw-ost__dot{ width:10px; height:10px; border-radius:3px; flex:0 0 auto; background:hsl(var(--h) 70% 58%); }
.cw-ost__name{ margin:0; font-size:16px; font-weight:600; line-height:1.3; flex:1 1 auto; min-width:0; overflow-wrap:anywhere; }
.cw-ost__n{ flex:0 0 auto; font-size:12px; color:var(--ost-muted); }
.cw-ost__parent{ margin:-6px 0 0; font-size:12px; color:var(--ost-muted); }
.cw-ost__lead{ display:flex; align-items:center; gap:10px; min-width:0; }
.cw-ost__lead > span:last-child{ display:flex; flex-direction:column; min-width:0; font-size:14px; }
.cw-ost__lead small{ font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--ost-muted); }
.cw-ost__lead a{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cw-ost__people{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; flex-wrap:wrap; }
.cw-ost__stack{ display:inline-flex; padding-left:6px; }
.cw-ost__stack .cw-ost__av{ width:30px; height:30px; margin-left:-6px; font-size:11px; box-shadow:0 0 0 2px var(--ost-card); }
.cw-ost__acts{ display:inline-flex; gap:6px; }
.cw-ost__btn{ padding:5px 10px; border:1px solid var(--ost-line); border-radius:8px; background:var(--ost-card); color:var(--ost-ink); font:inherit; font-size:13px; cursor:pointer; }
.cw-ost__btn:hover{ background:var(--ost-soft); }

.cw-ost__av{
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:36px; height:36px; border-radius:50%; font-size:12px; font-weight:600;
	background:hsl(var(--h,250) 70% 92%) center/cover no-repeat; color:hsl(var(--h,250) 45% 32%);
}
.cw-ost__av.is-none{ background:var(--ost-soft); color:var(--ost-muted); }
.cw-ost__av.is-more{ background:var(--ost-soft); color:var(--ost-ink); }

.cw-ost__empty{ padding:36px 20px; text-align:center; border:1px dashed var(--ost-line); border-radius:14px; background:var(--ost-card); }
.cw-ost__empty p{ color:var(--ost-muted); margin:6px 0 14px; }

/* chart of units */
.cw-ost__chart{ overflow:auto; max-width:100%; padding:20px 8px 24px; border:1px solid var(--ost-line); border-radius:14px; background:var(--ost-soft); }
.cw-ost__tree, .cw-ost__tree ul{ list-style:none; margin:0; padding:0; display:flex; justify-content:center; }
.cw-ost__tree{ min-width:max-content; margin:0 auto; }
.cw-ost__tree li{ position:relative; display:flex; flex-direction:column; align-items:center; padding:18px 8px 0; }
.cw-ost__tree > li{ padding-top:0; }
.cw-ost__tree ul{ position:relative; padding-top:18px; }
.cw-ost__tree ul::before{ content:""; position:absolute; top:0; left:50%; height:18px; border-left:1px solid var(--ost-muted); opacity:.5; }
.cw-ost__tree ul > li::before, .cw-ost__tree ul > li::after{ content:""; position:absolute; top:0; width:50%; height:18px; border-top:1px solid var(--ost-muted); opacity:.5; }
.cw-ost__tree ul > li::before{ right:50%; }
.cw-ost__tree ul > li::after{ left:50%; border-left:1px solid var(--ost-muted); }
.cw-ost__tree ul > li:first-child::before, .cw-ost__tree ul > li:last-child::after{ border-top:0; }
.cw-ost__tree ul > li:only-child::after{ border-top:0; }
.cw-ost__tree ul > li:only-child::before{ display:none; }
.cw-ost__root{ display:flex; flex-direction:column; align-items:center; padding:10px 18px; border-radius:12px; background:var(--ost-ink); color:var(--ost-card); font-weight:600; font-size:14px; }
.cw-ost__root small{ font-weight:400; opacity:.75; font-size:12px; }
.cw-ost__tree ul{ align-items:flex-start; }
.cw-ost__card.is-small{ height:auto; width:220px; gap:10px; padding:14px; }

/* drawers */
.cw-ost__colors{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; padding:0; border:0; }
.cw-ost__colors legend{ width:100%; margin-bottom:6px; font-weight:600; font-size:14px; }
.cw-ost__colors label{ position:relative; cursor:pointer; }
.cw-ost__colors input{ position:absolute; opacity:0; }
.cw-ost__colors span{ display:block; width:26px; height:26px; border-radius:8px; background:hsl(var(--h) 70% 58%); }
.cw-ost__colors input:checked + span{ box-shadow:0 0 0 2px var(--ost-card,#fff),0 0 0 4px hsl(var(--h) 70% 45%); }
.cw-ost__colors input:focus-visible + span{ outline:2px solid var(--ost-a); outline-offset:3px; }
.cw-ost__pick{ border:1px solid var(--line,#e2e4e7); border-radius:12px; overflow:hidden; }
.cw-ost__pickq{ display:block; width:100%; box-sizing:border-box; border:0 !important; border-bottom:1px solid var(--line,#e2e4e7) !important; border-radius:0 !important; padding:10px 12px; }
.cw-ost__pickn{ margin:0; padding:6px 12px; font-size:12px; color:var(--muted,#646970); }
.cw-ost__pick ul{ list-style:none; margin:0; padding:0 4px 4px; max-height:320px; overflow:auto; }
.cw-ost__pick li{ margin:0; }
.cw-ost__pick label{ display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:14px; }
.cw-ost__pick label:hover{ background:var(--soft,#f2f2f5); }
.cw-ost__pick .cw-ost__av{ width:28px; height:28px; font-size:11px; }
.cw-ost__save{ margin:16px 0 0; }
.cw-ost__del{ margin:18px 0 0; padding-top:14px; border-top:1px solid var(--line,#e2e4e7); }
.cw-ost__delst{ border-top:0; text-align:right; }
.cw-ost__danger{ border:0; background:none; padding:0; color:#c0392b; font:inherit; font-size:14px; cursor:pointer; text-decoration:underline; }

/* People list: chips and filter */
.cw-ost-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.cw-ost-chip{ display:inline-block; padding:1px 8px; border-radius:99px; font-size:12px; line-height:1.6; text-decoration:none; background:hsl(var(--h) 70% 93%); color:hsl(var(--h) 45% 30%); }
.cw-ost-filterwrap{ margin:0 0 10px; }
.cw-ost-filter{ max-width:100%; }
.cw-person.is-ost-off{ display:none !important; }

[data-theme="dark"] .cw-ost__av:not(.is-none):not(.is-more){ background-color:hsl(var(--h,250) 35% 24%); color:hsl(var(--h,250) 80% 86%); }
[data-theme="dark"] .cw-ost-chip{ background:hsl(var(--h) 35% 22%); color:hsl(var(--h) 80% 85%); }
[data-theme="dark"] .cw-ost__root{ background:var(--ost-card); color:var(--ost-ink); border:1px solid var(--ost-line); }

@media (max-width:600px){
	.cw-ost__head{ align-items:flex-start; }
	.cw-ost__card{ padding:14px; }
}