/* Several accounts per network: the colour marks, the "All accounts" screen, grouping in the sidebar and the composer. */

:root {
  --ac-green: #2F7D4F; --ac-teal: #1F7A78; --ac-blue: #3563A8; --ac-violet: #6E4FA3;
  --ac-rose: #A8445E; --ac-amber: #A86A12; --ac-sand: #8C7A55; --ac-slate: #5A6872;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ac-green: #6FC28E; --ac-teal: #5DC2BE; --ac-blue: #8AB0EA; --ac-violet: #B49BE0;
    --ac-rose: #E89AAE; --ac-amber: #E3B05B; --ac-sand: #CDBB92; --ac-slate: #A9B6BF;
  }
}
:root[data-theme="dark"] {
  --ac-green: #6FC28E; --ac-teal: #5DC2BE; --ac-blue: #8AB0EA; --ac-violet: #B49BE0;
  --ac-rose: #E89AAE; --ac-amber: #E3B05B; --ac-sand: #CDBB92; --ac-slate: #A9B6BF;
}
[data-c="green"] { --c: var(--ac-green); } [data-c="teal"] { --c: var(--ac-teal); }
[data-c="blue"] { --c: var(--ac-blue); } [data-c="violet"] { --c: var(--ac-violet); }
[data-c="rose"] { --c: var(--ac-rose); } [data-c="amber"] { --c: var(--ac-amber); }
[data-c="sand"] { --c: var(--ac-sand); } [data-c="slate"] { --c: var(--ac-slate); }

.adot { display: inline-block; vertical-align: 0.05em; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--c, var(--text-3)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c, transparent) 18%, transparent); }
.adot.lg { width: 12px; height: 12px; }
.topic-tag { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* colour picker */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  appearance: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-strong); cursor: pointer; padding: 0;
  display: grid; place-items: center; background: var(--surface); color: var(--text-2);
  transition: transform 90ms ease-out, box-shadow var(--t-fast) ease;
}
.swatch[data-c] { background: var(--c); border-color: transparent; color: var(--bg); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--c, var(--accent-text)); }
.swatch:active { transform: scale(0.94); }
.swatch:focus-visible { border-radius: 50%; }
.swatch .ic { width: 14px; height: 14px; stroke-width: 2.6; }

/* sidebar groups */
.nav-net { display: grid; gap: 1px; }
.nav-net + .nav-net { margin-top: 6px; }
.nav-net-head {
  appearance: none; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 28px; padding: 0 10px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-3); cursor: pointer; font-size: 0.75rem; font-weight: 600; text-align: left;
}
.nav-net-head:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.nav-net-head .ic { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
.nav-net-head[aria-expanded="false"] .ic { transform: rotate(-90deg); }
.nav-net-head .num { margin-left: auto; font-weight: 550; }
.nav-net .nav-item .adot { margin-left: -2px; }

/* "All accounts" screen */
.acc-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acc-filters .input.search { flex: 1 1 220px; max-width: 320px; }
.nets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.net { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; }
.net-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.net-head h2 { flex: 1 1 auto; display: flex; align-items: baseline; gap: 10px; }
.net-head h2 .num { font-family: var(--font); font-size: 0.8125rem; font-weight: 550; color: var(--text-3); }
.acc-row { gap: 12px; padding: 12px 14px 12px 16px; }
.acc-row .grow { min-width: 0; }
.acc-row .item-meta { display: block; overflow: hidden; text-overflow: ellipsis; }
.net .card, .net .list { min-width: 0; }
.acc-row .item-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.acc-row .item-title > span:not(.adot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-row .open { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; text-align: left; color: inherit; font: inherit; cursor: pointer; min-width: 0; display: block; width: 100%; }
.acc-row .open::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.acc-row .open:focus-visible { outline: none; }
.acc-row:has(.open:focus-visible) { box-shadow: inset 0 0 0 2px var(--ring); }
.acc-row:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.acc-row .row-actions { position: relative; z-index: 1; }
.acc-q { font-size: 0.8125rem; color: var(--text-2); white-space: nowrap; }
.net-empty { padding: 16px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.net-empty p { flex: 1 1 220px; color: var(--text-2); font-size: 0.875rem; }

/* account page: siblings in the same network */
.siblings { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.siblings .chip .adot { margin-left: 2px; }

/* composer: accounts grouped by network, topics as one-tap selections */
.acc-pick { display: grid; gap: 12px; }
.acc-pick-net { display: grid; gap: 8px; }
.acc-pick-title { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; color: var(--text-3); }
.acc-pick-title .btn { margin-left: auto; }
.acc-pick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.acc-pick-topics .label { font-size: 0.75rem; font-weight: 600; color: var(--text-3); margin-right: 2px; }
.acc-chip .adot { margin-left: 2px; }

@media (max-width: 640px) {
  .acc-row { flex-wrap: wrap; row-gap: 6px; }
  .acc-row > .grow { flex: 1 1 0; }
  .acc-row .row-actions { flex-basis: 100%; justify-content: flex-end; }
  .acc-row .item-meta { white-space: normal; }
  .acc-filters .input.search { max-width: none; }
}

.acc-title { display: flex; align-items: center; gap: 12px; }
.acc-title .adot.lg { width: 14px; height: 14px; }
.add-steps { display: grid; gap: 14px; }
.another-hint { padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 10px; }
.another-hint p { color: var(--text-2); font-size: 0.875rem; line-height: 1.5; }
.added-list { display: grid; gap: 8px; }
.added-list li { display: flex; align-items: center; gap: 10px; }
.nav-net-items { display: grid; gap: 1px; padding-left: 8px; }
.nav-net-items[hidden] { display: none; }
.nav-net-head .pglyph { --pg: 18px; border-radius: 6px; }