/* Shared sets: everything that is about a set wears teal (#5fd4c4) and a dashed edge, so a set never reads as a space. */

/* The tree: the Shared sets label, a set's row, the dot of the server it syncs with */
.ft-label.is-sets, .ft-label.is-sets .ico { color: #5fd4c4; }
.ft-row.is-set .ft-name > .ico { color: #5fd4c4; border-radius: 6px; outline: 1px dashed color-mix(in srgb, #5fd4c4 60%, transparent); outline-offset: 2px; }
.ft-set-sv { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--accent); flex: none; vertical-align: middle; }
.ft-space-ico.is-set { color: #5fd4c4; }
.fs-differs-dot { display: inline-block; flex: none; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #e9c46a; }
.ft-item.is-dragged { opacity: .45; }
.ft-set-branch.is-drop > .ft-row { border-radius: 8px; background: color-mix(in srgb, #5fd4c4 16%, transparent); outline: 1.5px dashed #5fd4c4; outline-offset: -1px; }
.fs-droptip { position: fixed; z-index: 95; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #5fd4c4; color: #0f1513; font-size: 12.5px; font-weight: 600; white-space: nowrap; pointer-events: none; }
.fs-droptip .ico { width: 14px; height: 14px; }

/* Pages: a set's icon, its tiles (they fade in without moving: a dashed edge redrawn at fractional offsets breaks up), the Manage link */
.pv-ico.is-set { color: #5fd4c4; background: color-mix(in srgb, #5fd4c4 12%, transparent); outline: 1.5px dashed color-mix(in srgb, #5fd4c4 70%, transparent); outline-offset: -1px; }
.v2-sub.is-sets, .v2-sub.is-sets > .ico { color: #5fd4c4; }
.fs-manage { color: #9fe9df; text-transform: none; letter-spacing: 0; }
.fs-manage .ico { color: #5fd4c4; }
.pv-tile.is-set { border-style: dashed; border-color: color-mix(in srgb, #5fd4c4 50%, var(--line)); background: color-mix(in srgb, #5fd4c4 4%, var(--panel)); animation-name: fs-tile-in; }
.pv-tile.is-set > .ico { color: #5fd4c4; }
.pv-tile.is-add { border-color: var(--line-2); background: transparent; }
.pv-tile.is-add > .ico { color: var(--muted); }
@keyframes fs-tile-in { from { opacity: 0; } }
button.v2-shared-pill.is-set { border: 1px dashed color-mix(in srgb, #5fd4c4 60%, transparent); transition: background-color .4s; }
button.v2-shared-pill.is-set:hover { background: rgba(95, 212, 196, .2); }

/* Tables: the Shared column names the set (one chip per set for folded copies); a changed copy is tagged */
.g-trow.v2-group { grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1.4fr) 200px; }
.g-trow.v2-group.is-set-list { grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.6fr); }
.g-tname { min-width: 0; }
@media (min-width: 761px) { .g-trow.v2-group:not(.g-thead) { height: 46px; padding-top: 0; padding-bottom: 0; } }
.g-tname-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-sets { flex-wrap: nowrap !important; overflow: hidden; }
.g-sets > * { flex: none; }
.g-sets > .g-set:first-child { flex: 0 1 auto; min-width: 0; }
.g-set > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-set.is-more { padding: 0 7px; font-variant-numeric: tabular-nums; }
.g-sets { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.g-set { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; height: 22px; padding: 0 8px; border-radius: 11px; border: 1px dashed color-mix(in srgb, #5fd4c4 60%, transparent); background: color-mix(in srgb, #5fd4c4 8%, transparent); color: #9fe9df; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-set .ico { width: 12px; height: 12px; color: #5fd4c4; flex: none; }
.fs-differs { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 11px; background: color-mix(in srgb, #e9c46a 16%, transparent); color: #e9c46a; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fs-differs .ico { width: 12px; height: 12px; }
@media (max-width: 760px) { .g-trow.v2-group, .g-trow.v2-group.is-set-list { grid-template-columns: minmax(0, 1fr); min-width: 0; } }

/* Details: set chips, Manage, counts that are not buttons */
.dp-sets button.is-set { border-style: dashed; border-color: color-mix(in srgb, #5fd4c4 55%, var(--line)); color: #9fe9df; }
.dp-sets button.is-set .ico { color: #5fd4c4; }
.dp-counts .dp-add { border-style: dashed; color: var(--muted); }
.dp-count { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 12.5px; }
.dp-count b { color: var(--text); font-weight: 600; }
.dp-chipbtn.is-static:hover { border-color: var(--line-2); background: none; }

/* The right-click menu: a label over a set's items */
.ctx-label { padding: 6px 10px 4px; color: var(--muted); font: 600 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; }

/* The set dialogs: one width, a fixed height; the tabs, Find and New stay on top and only the list scrolls; what changes stays under it */
dialog.dlg.fs-mdlg { width: min(580px, calc(100vw - 24px)); }
dialog.dlg.fs-tall { height: min(720px, calc(100dvh - 48px)); }
.dlg-ico.is-set { background: color-mix(in srgb, #5fd4c4 14%, transparent); color: #5fd4c4; }
.fs-mtop { display: grid; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--line); flex: none; }
.fs-mbar { display: flex; gap: 10px; }
.fs-msearch { width: auto; flex: 1; }
.fs-newbtn { flex: none; height: 38px; border: 1px dashed color-mix(in srgb, #5fd4c4 60%, transparent) !important; color: #9fe9df !important; }
.fs-newbtn .ico { color: #5fd4c4; }
.fs-seg .count { background: color-mix(in srgb, #5fd4c4 16%, transparent); color: #9fe9df; }
.fs-mbody { gap: 10px; }
.fs-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 28px; margin-top: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fs-mhead:first-child { margin-top: 0; }
.fs-mhead small { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.fs-mdlg .agent { padding: 12px 14px; }
.fs-mdlg .prop-ico { width: 32px; height: 32px; }
.prop-ico.is-set { background: color-mix(in srgb, #5fd4c4 12%, transparent); color: #5fd4c4; }
.prop-ico .ico { width: 17px; height: 17px; }
.fs-mdlg .person-main small .ft-set-sv { margin: 0 2px 1px 0; }
.fs-foot-note { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.fs-foot-note .ico { width: 14px; height: 14px; flex: none; }
.fs-pick { width: 100%; text-align: left; transition: background-color .4s; }
.fs-pick:hover { background: var(--hover); }
.fs-pick[disabled] { opacity: .55; cursor: default; }
.fs-pick > .ico:last-child { width: 18px; height: 18px; flex: none; color: #5fd4c4; opacity: 0; transition: opacity .3s; }
.fs-pick.is-on { background: color-mix(in srgb, #5fd4c4 12%, transparent); }
.fs-pick.is-on > .ico:last-child { opacity: 1; }
.fs-pick .prop-ico:not(.is-set) { background: var(--hover-strong); color: var(--muted); }
.fs-pick b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fs-pick em { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 9px; font-style: normal; font-size: 11px; font-weight: 600; }
.fs-now { background: var(--hover-strong); color: var(--text-2); }
.fs-warn { background: color-mix(in srgb, #e9c46a 14%, transparent); color: #e9c46a; }
.list-card .rows > .fs-newset { border-top: 0; }
.fs-newset { display: grid; gap: 14px; padding: 2px 14px 16px 60px; background: color-mix(in srgb, #5fd4c4 12%, transparent); }
.fs-nfield, .fs-newset .field { display: grid; gap: 6px; }
.fs-newset .fs-nfield > span, .fs-newset .field > span { color: var(--muted); font-size: 11.5px; }
.fs-newset small { color: var(--muted); font-size: 12px; }
.fs-newset .dp-counts { margin: 0; }
.fs-newset .dp-counts button i { display: inline-grid; margin-left: 4px; opacity: .7; }
.fs-newset .dp-counts button i .ico { width: 11px; height: 11px; }
.fs-newset .is-lock { opacity: .8; cursor: default; }
.fs-newset .dp-add.is-on { border-style: solid; color: var(--text); }
.fs-addlist { display: grid; gap: 1px; max-height: 180px; overflow-y: auto; padding: 4px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel); }
.fs-mfoot { display: grid; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); flex: none; }
.fs-mfoot:empty { display: none; }
.fs-keep { display: flex; align-items: center; gap: 14px; }
.fs-changes { display: grid; gap: 8px; margin: 0; padding: 10px 14px; list-style: none; border-radius: 10px; background: var(--hover); }
.fs-changes li { display: flex; gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.45; }
.fs-changes .ico { width: 16px; height: 16px; flex: none; margin-top: 1px; color: #5fd4c4; }
.fs-spacelist { display: grid; gap: 1px; max-height: 300px; overflow-y: auto; padding: 4px; border-radius: 10px; border: 1px solid var(--line-2); }
.fs-spacelist .pick-row > .switch { display: block; flex: none; margin-left: auto; width: 32px; height: 18px; border-radius: 9px; }
.fs-spacelist .pick-row > .switch span { display: block; top: 2px; left: 2px; width: 14px; height: 14px; }
.fs-spacelist .pick-row > .switch[aria-checked="true"] span { transform: translateX(14px); }
.fs-spacelist .pick-row > .switch[aria-checked="true"] { background: #5fd4c4; }
.fs-pickbox > .field { padding-top: 16px; }
.fs-hint { color: var(--muted); font-size: 12px; }

/* The set dialogs wear the sets' teal, not the app's purple */
.fs-teal .btn-primary, .is-set-page .btn-primary { background: #5fd4c4; border-color: #5fd4c4; color: #0f1513; }
.fs-teal .btn-primary .ico, .is-set-page .btn-primary .ico { color: #0f1513; }
.fs-teal .switch[aria-checked="true"] { background: #5fd4c4; }
.fs-teal .field input:focus, .fs-teal .search:focus-within { border-color: #5fd4c4; box-shadow: 0 0 0 3px color-mix(in srgb, #5fd4c4 25%, transparent); }
.fs-teal .v2-type.is-on { border-color: #5fd4c4; }

@media (max-width: 760px) {
	.fs-newset { padding-left: 14px; }
	.fs-mbar .fs-newbtn span:last-child { display: none; }
	.fs-mfoot .fs-changes li:nth-child(n+3) { display: none; }
}