/* ---------- App shell ---------- */
body.app { overflow: hidden; height: 100vh; height: 100dvh; }
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; height: 100dvh; }
.side { display: flex; flex-direction: column; gap: 6px; padding: 18px 14px 14px; border-inline-end: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-elev), var(--bg)); overflow-y: auto; }
.side .brand { padding: 4px 8px 14px; }
.side .search-trigger { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; margin-bottom: 10px; border-radius: 10px; color: var(--text-3); font-size: 14px; background: var(--surface); border: 1px solid var(--border); transition: border-color var(--dur), color var(--dur); }
.side .search-trigger:hover { border-color: var(--border-strong); color: var(--text-2); }
.side .search-trigger svg { width: 16px; height: 16px; }
.side .search-trigger kbd { margin-inline-start: auto; }
.nav-sec { font-size: 11px; font-weight: 650; color: var(--text-3); padding: 14px 10px 6px; display: flex; align-items: center; justify-content: space-between; }
.nav-sec button { color: var(--text-3); width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; }
.nav-sec button:hover { background: var(--surface-2); color: var(--text); }
.nav-sec button svg { width: 14px; height: 14px; }
.nav a { display: flex; align-items: center; gap: 11px; height: 36px; padding: 0 10px; border-radius: 9px; color: var(--text-2); font-size: 14px; font-weight: 520; text-decoration: none !important; position: relative; transition: background var(--dur), color var(--dur); }
.nav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.active { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.nav a.active::before { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav a.active svg { color: var(--accent-ink); opacity: 1; }
.nav a .count { margin-inline-start: auto; font-size: 11.5px; font-weight: 650; color: var(--accent-contrast); background: var(--accent); border-radius: 999px; padding: 1px 7px; }
.nav a .cdot { width: 8px; height: 8px; border-radius: 3px; flex: none; margin: 0 5px; }
.nav a.sub { height: 32px; padding-inline-start: 14px; font-size: 13.5px; min-width: 0; }
.nav a.sub .lock { margin-inline-start: auto; color: var(--text-3); display: grid; }
.nav a.sub .lock svg { width: 13px; height: 13px; }
.side .foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--border); }
.side .foot .who { min-width: 0; flex: 1; text-decoration: none !important; color: var(--text); display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.side .foot .who:hover { background: var(--surface); }
.side .foot .who b { font-size: 13.5px; font-weight: 600; display: block; }
.side .foot .who small { font-size: 12px; color: var(--text-3); display: block; }

.main { min-width: 0; display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
.view { flex: 1; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; }
.view.full { overflow: hidden; }
.page { max-width: 1280px; margin: 0 auto; padding: 28px 32px 64px; animation: viewIn .35s var(--ease-out); }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } }
.page-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.page-hd h1 { font-family: var(--font-display); font-weight: 450; font-size: 34px; letter-spacing: -0.025em; font-variation-settings: "opsz" 96, "SOFT" 30; }
.page-hd .sub { color: var(--text-2); font-size: 14.5px; margin-top: 4px; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); margin-bottom: 10px; flex-wrap: wrap; }
.crumbs a, .crumbs button { color: var(--text-2); font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.crumbs a:hover, .crumbs button:hover { color: var(--text); text-decoration: none; }
.crumbs svg { width: 14px; height: 14px; }
.crumbs .cur { color: var(--text); font-weight: 550; }

.mobile-top, .bottom-nav { display: none; }

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .mobile-top { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(14px); flex: none; }
  .mobile-top .brand .wordmark { font-size: 20px; } .mobile-top .brand svg { width: 26px; height: 26px; }
  .mobile-top .right { margin-inline-start: auto; display: flex; gap: 4px; }
  .bottom-nav { display: grid; grid-template-columns: repeat(5, 1fr); flex: none; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(14px); padding-bottom: env(safe-area-inset-bottom); }
  .bottom-nav a, .bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 60px; font-size: 11.5px; font-weight: 600; color: var(--text-3); text-decoration: none !important; position: relative; }
  .bottom-nav svg { width: 22px; height: 22px; }
  .bottom-nav .active { color: var(--text); } .bottom-nav .active svg { color: var(--accent-ink); }
  .bottom-nav .count { position: absolute; top: 8px; inset-inline-start: calc(50% + 6px); font-size: 10px; background: var(--accent); color: var(--accent-contrast); border-radius: 99px; padding: 0 5px; }
  .page { padding: 20px 16px 40px; }
  .page-hd h1 { font-size: 28px; }
}
.sheet-menu { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sheet-menu a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 14px; background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 550; text-decoration: none !important; }
.sheet-menu svg { width: 22px; height: 22px; color: var(--accent-ink); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.g-main > .col > div:empty { display: none; }
/* person page: the cards flow into two equal, balanced columns (no long column beside an empty one) */
@media (min-width: 1101px) {
  .g-main.p-flow { display: block; columns: 2; column-gap: 16px; }
  .g-main.p-flow > .col { display: contents; }
  .g-main.p-flow > .col > * { break-inside: avoid; margin-bottom: 16px; }
}   /* empty async slots (#intro-asks, #investor-slot…) leave no gap */
@media (max-width: 1100px) { .g-main { grid-template-columns: minmax(0, 1fr); } .g-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Home ---------- */
.hello { font-family: var(--font-display); font-weight: 420; font-size: 40px; letter-spacing: -0.03em; line-height: 1.05; font-variation-settings: "opsz" 120, "SOFT" 40; }
.hello em { font-style: italic; color: var(--accent-ink); }
@media (max-width: 860px) { .hello { font-size: 30px; } }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 22px 0 24px; }
.stat { position: relative; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; text-decoration: none !important; color: var(--text); transition: border-color .2s, transform .3s var(--ease-out); }
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.stat .k { font-size: 12.5px; color: var(--text-2); font-weight: 550; display: flex; align-items: center; gap: 7px; }
.stat .k svg { width: 15px; height: 15px; color: var(--text-3); }
.stat .v { font-size: 30px; font-weight: 640; letter-spacing: -0.03em; margin-top: 6px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.stat .meter { height: 4px; border-radius: 4px; background: var(--surface-3); margin-top: 12px; overflow: hidden; }
.stat .meter i { display: block; height: 100%; border-radius: 4px; background: var(--c1); }
.stat.gold .meter i { background: var(--accent); }
@media (max-width: 1100px) { .stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; } .stat .v { font-size: 26px; } .stats > .stat:last-child { grid-column: span 2; } }

.person-li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); text-decoration: none !important; transition: background var(--dur); }
.person-li:hover { background: var(--surface-2); }
.person-li .nm { font-weight: 580; font-size: 14.5px; }
.person-li .meta { font-size: 13px; color: var(--text-3); }
.person-li .side-r { margin-inline-start: auto; text-align: end; font-size: 12.5px; color: var(--text-3); flex: none; }

.rateq { position: relative; min-height: 270px; }
.rate-card { position: relative; padding: 26px 22px 20px; border-radius: 18px; background: radial-gradient(400px 160px at 50% 0%, var(--accent-soft), transparent 70%), var(--surface-2); border: 1px solid var(--border); text-align: center; transition: transform .35s var(--ease-out), opacity .35s; touch-action: pan-y; user-select: none; }
.rate-card.out-l { transform: translateX(-120%) rotate(-8deg); opacity: 0; }
.rate-card.out-r { transform: translateX(120%) rotate(8deg); opacity: 0; }
.rate-card .avatar { margin: 0 auto 12px; }
.rate-card h4 { font-size: 18px; font-weight: 620; }
.rate-card .meta { color: var(--text-2); font-size: 13.5px; margin-top: 3px; }
.rate-card .stars { margin-top: 18px; justify-content: center; }
.rate-card .rate-actions { margin-top: 16px; display: flex; gap: 8px; justify-content: center; }
.rate-card .rate-actions .btn { min-width: 96px; min-height: 40px; }
@media (hover: none) { .kbd-only { display: none !important; } }
.rate-card .hint { margin-top: 14px; font-size: 12px; color: var(--text-3); display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rate-progress { font-size: 12.5px; color: var(--text-3); }

.feed-li { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.feed-li:last-child { border-bottom: 0; }
.feed-li .t { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }

/* ---------- People list ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters .search { position: relative; flex: 1 1 260px; max-width: 420px; }
.filters .search svg { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-3); pointer-events: none; }
.filters .search .input { padding-inline-start: 36px; height: 38px; }
.filters .select { max-width: 200px; flex: 0 1 auto; height: 38px; width: auto; font-size: 13.5px; padding-inline-start: 12px; border-radius: 10px; }
.filters .chip { height: 38px; padding: 0 14px; border-radius: 10px; flex: none; }
.filter-strip { display: contents; }
.list-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.list-head { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; padding: 0 18px; height: 40px; font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .02em; border-bottom: 1px solid var(--border); background: var(--bg-elev); }
.vlist { position: relative; overflow-y: auto; overflow-x: hidden; contain: strict; }
.vlist-spacer { width: 1px; }
.vlist-rows { position: absolute; inset: 0 0 auto 0; }
.vrow { position: absolute; inset-inline-start: 0; inset-inline-end: 0; top: 0; }
.vrow-skel { display: flex; align-items: center; gap: 14px; height: 100%; padding: 0 18px; }
.prow { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; height: 100%; padding: 0 18px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; color: var(--text); text-decoration: none !important; }
.prow:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.prow .who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow .who b { font-weight: 580; font-size: 14.5px; display: block; }
.prow .who small { color: var(--text-3); font-size: 12.5px; display: block; }
.prow .cell { font-size: 13.5px; color: var(--text-2); }
.prow .chans { display: flex; gap: 4px; color: var(--text-3); }
.prow .chans svg { width: 14px; height: 14px; }
.people-cols { --cols: minmax(220px, 2.2fr) minmax(120px, 1.2fr) minmax(90px, .8fr) 130px 90px 70px; }
.on-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); display: inline-block; margin-inline-end: 6px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 20%, transparent); }
.list-foot { display: flex; justify-content: space-between; padding: 10px 18px; font-size: 12.5px; color: var(--text-3); border-top: 1px solid var(--border); background: var(--bg-elev); }
@media (max-width: 1000px) { .people-cols { --cols: minmax(0, 1fr) 120px 70px; } .people-cols .c-ind, .people-cols .c-chan, .people-cols .c-last { display: none; } }
@media (max-width: 600px) {
  .people-cols { --cols: minmax(0, 1fr) auto; } .people-cols .c-loc { display: none; }
  .list-head { display: none; }
  /* search on its own row; the selects scroll sideways underneath it */
  .filters .search { flex: 1 1 100%; max-width: none; }
  .filter-strip { display: flex; gap: 6px; flex: 1 1 100%; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .filter-strip::-webkit-scrollbar { display: none; }
  .filter-strip .select { flex: none; max-width: 180px; }
  .filters-wrap { display: flex; flex-direction: column; }
  .list-card { border-radius: 14px; }
}

/* ---------- Person ---------- */
.p-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--border); background: radial-gradient(700px 240px at 0% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 70%), radial-gradient(600px 200px at 100% 0%, var(--accent-soft), transparent 70%), var(--surface); padding: 28px; }
.p-hero .top { display: flex; gap: 22px; align-items: flex-start; }
.p-hero h1 { font-family: var(--font-display); font-weight: 460; font-size: 34px; letter-spacing: -0.025em; line-height: 1.1; font-variation-settings: "opsz" 96; }
.p-hero .role { color: var(--text-2); font-size: 16px; margin-top: 4px; }
.p-hero .role b { color: var(--text); font-weight: 580; }
.p-hero .facts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.p-hero .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.p-hero .ctrl { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.p-hero .ctrl .grp { display: flex; align-items: center; gap: 10px; }
.p-hero .ctrl .lbl { font-size: 12px; color: var(--text-3); font-weight: 600; }
.toggle-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 550; color: var(--text-2); border: 1px solid var(--border); background: var(--surface-2); transition: all var(--dur); }
.toggle-btn svg { width: 15px; height: 15px; }
.toggle-btn:hover { color: var(--text); border-color: var(--border-strong); }
.toggle-btn[aria-pressed="true"] { color: var(--text); background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
.toggle-btn[aria-pressed="true"] svg { color: var(--link); }
@media (max-width: 700px) {
  .p-hero { padding: 20px 18px; border-radius: 18px; }
  .p-hero .top { flex-direction: column; gap: 14px; }
  .p-hero .actions { margin-inline-start: 0; justify-content: flex-start; }
  .p-hero h1 { font-size: 28px; }
}
.kb-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timeline { position: relative; }
.tl-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; padding: 10px 0; position: relative; }
.tl-item::before { content: ""; position: absolute; inset-inline-start: 15.5px; top: 40px; bottom: -10px; width: 1px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--ch) 16%, transparent); color: var(--ch); }
.tl-ic svg { width: 16px; height: 16px; }
.tl-body { min-width: 0; }
.tl-body .s { font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.tl-body .m { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.tl-when { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.tl-month { font-size: 11.5px; font-weight: 650; color: var(--text-3); padding: 14px 0 4px 44px; }
.news-li { display: block; padding: 12px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none !important; }
.news-li:last-child { border-bottom: 0; }
.news-li b { font-weight: 560; font-size: 14.5px; line-height: 1.4; display: block; }
.news-li:hover b { color: var(--link); }
.news-li small { color: var(--text-3); font-size: 12.5px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--text-3); } .kv dd { margin: 0; color: var(--text); text-align: end; font-variant-numeric: tabular-nums; }

/* ---------- Map ---------- */
.map-wrap { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
.map-stage { position: relative; min-height: 560px; padding: 0; overflow: hidden; }
.map-stage svg { width: 100%; height: auto; display: block; }
.map-panel { max-height: calc(100dvh - 210px); display: flex; flex-direction: column; overflow: hidden; }
.map-panel .card-bd { overflow-y: auto; }
.sun-label { font-size: 11px; font-weight: 600; fill: #fff; pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
.sun-center { font-family: var(--font-display); }
.bar-li { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 4px 12px; align-items: center; width: 100%; padding: 8px 10px; margin: 0 -10px; border-radius: 10px; text-align: start; color: var(--text); transition: background var(--dur); width: calc(100% + 20px); }
.bar-li:hover { background: var(--surface-2); }
.bar-li .nm { font-size: 14px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.bar-li .ct { text-align: end; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-2); }
.bar-li .bar { grid-column: 1 / -1; height: 6px; border-radius: 0 4px 4px 0; background: var(--surface-3); overflow: hidden; }
.bar-li .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--c1); }
.bar-li.none-li { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border-strong); border-radius: 0 0 10px 10px; }
.bar-li.none-li .nm { color: var(--text-2); }
.bar-li .hint { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); white-space: normal; line-height: 1.4; }
/* On phones the 640-unit sunburst renders at ~half size: arc labels would be ~5px, so rely on the legend + list. */
@media (max-width: 600px) { .sun-label { display: none; } .sun-center-lbl { font-size: 20px !important; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; }
.ramp { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-3); }
.ramp .r { display: flex; } .ramp .r i { width: 26px; height: 8px; } .ramp .r i:first-child { border-radius: 4px 0 0 4px; } .ramp .r i:last-child { border-radius: 0 4px 4px 0; }
.map-tip { position: fixed; z-index: 500; pointer-events: none; padding: 8px 12px; border-radius: 10px; background: var(--surface-glass); backdrop-filter: blur(12px); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); font-size: 13px; transform: translate(12px, 12px); }
.map-tip b { display: block; font-size: 13.5px; }
.country { stroke: var(--bg); stroke-width: .5px; transition: fill .2s; cursor: pointer; }
.country:hover { stroke: var(--text); stroke-width: 1px; }
.country.sel { stroke: var(--accent); stroke-width: 1.6px; }
@media (max-width: 1000px) { .map-wrap { grid-template-columns: minmax(0, 1fr); } .map-stage { min-height: 0; } .map-panel { max-height: none; } }

/* ---------- Sphere ---------- */
.sphere-view { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(1200px 800px at 50% 50%, #0E2A52 0%, #071530 55%, #040C1C 100%); }
:root[data-theme="light"] .sphere-view { background: radial-gradient(1200px 800px at 50% 50%, #FFFFFF 0%, #F3EFE6 60%, #E7E1D3 100%); }
.sphere-canvas { position: absolute; inset: 0; }
.sphere-top { position: absolute; top: 16px; inset-inline-start: 16px; inset-inline-end: 16px; display: flex; gap: 10px; align-items: center; z-index: 5; pointer-events: none; }
.sphere-top > * { pointer-events: auto; }
.glass { background: var(--surface-glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-md); }
.sphere-search { position: relative; width: min(340px, 100%); }
.sphere-search .input { height: 42px; padding-inline-start: 38px; background: var(--surface-glass); backdrop-filter: blur(16px); border-radius: 12px; }
.sphere-search > svg { position: absolute; z-index: 1; inset-inline-start: 12px; top: 13px; width: 16px; height: 16px; color: var(--text-3); }
.sphere-search .results { position: absolute; top: 48px; inset-inline-start: 0; inset-inline-end: 0; max-height: 340px; overflow-y: auto; padding: 6px; }
.sphere-rail { position: absolute; inset-inline-start: 16px; top: 72px; bottom: 16px; width: 260px; z-index: 4; padding: 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; }
.sphere-rail h5 { margin: 0 0 8px; font-size: 11px; font-weight: 650; color: var(--text-3); }
.sphere-rail .seg { width: 100%; flex-wrap: wrap; }
.sphere-rail .seg button { flex: 1; padding: 0 8px; }
.sphere-legend { display: flex; flex-direction: column; gap: 2px; }
.sphere-legend button { display: flex; align-items: center; gap: 9px; padding: 5px 8px; margin: 0 -8px; border-radius: 8px; font-size: 13px; color: var(--text-2); text-align: start; }
.sphere-legend button:hover { background: var(--surface-2); color: var(--text); }
.sphere-legend button.off { opacity: .4; }
.sphere-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.sphere-legend .n { margin-inline-start: auto; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.sphere-stats { position: absolute; inset-inline-end: 16px; bottom: 16px; z-index: 4; padding: 10px 14px; font-size: 12.5px; color: var(--text-2); display: flex; gap: 14px; align-items: center; }
.sphere-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.sphere-tip { position: absolute; z-index: 6; pointer-events: none; padding: 10px 12px; min-width: 180px; max-width: 280px; display: flex; gap: 10px; align-items: center; transform: translate(14px, 14px); }
.sphere-tip b { font-size: 13.5px; display: block; } .sphere-tip small { font-size: 12px; color: var(--text-2); display: block; }
.drawer { position: absolute; top: 16px; inset-inline-end: 16px; bottom: 16px; width: 360px; z-index: 7; padding: 22px; overflow-y: auto; transform: translateX(calc(100% + 24px)); transition: transform .4s var(--ease-out); }
.drawer.open { transform: none; }
.drawer .x { position: absolute; top: 12px; inset-inline-end: 12px; }
.sphere-loading { position: absolute; inset: 0; display: grid; place-items: center; z-index: 3; color: var(--text-2); font-size: 14px; }
.sphere-loading .col { align-items: center; }
.sphere-busy { background: color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter: blur(2px); }
.rail-toggle { display: none; }
/* Sphere "Losing touch" mode: Reconnect panel (right) + the actionable last-contact block in the drawer */
.mode-help { font-size: 12px; line-height: 1.5; margin-top: 8px; }
.mode-help .gold { color: var(--accent-ink); font-weight: 600; }
.rc-toggle { gap: 6px; padding: 0 12px; }
.rc-toggle .rc-n:empty { display: none; }
.rc-toggle .rc-n { font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent-ink); }
.sphere-rc { position: absolute; top: 72px; inset-inline-end: 16px; bottom: 64px; width: 340px; z-index: 5; display: flex; flex-direction: column; padding: 14px 14px 8px; transform: translateX(calc(100% + 24px)); transition: transform .35s var(--ease-out); }
.sphere-rc.open { transform: none; }
.sphere-rc[hidden] { display: none; }
.rc-hd { display: flex; align-items: flex-start; gap: 8px; padding: 0 2px 10px; border-bottom: 1px solid var(--border); }
.rc-hd h5 { margin: 0; font-size: 11px; font-weight: 650; color: var(--text-3); }
.rc-hd .rc-count { color: var(--accent-ink); margin-inline-start: 4px; }
.rc-hd small { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 3px; }
.rc-list { overflow-y: auto; flex: 1; padding: 6px 12px 4px; margin: 0 -12px; overscroll-behavior: contain; }
.rc-li { gap: 6px; padding: 7px 10px; }
.rc-li .rc-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: start; color: inherit; padding: 0; background: none; border: 0; cursor: pointer; }
.rc-li .nm, .rc-li .meta { display: block; }
.rc-li .nm { font-size: 14px; }
.rc-li .meta { font-size: 12.5px; }
.rc-li .rc-acts { display: flex; gap: 2px; flex: none; }
.rc-li .rc-acts .btn-icon { width: 32px; height: 32px; }
.rc-li.rc-gone { background: var(--surface-2); }
.rc-node { width: 100%; border: 0; background: none; cursor: pointer; text-align: start; font: inherit; }
.rc-node .side-r { display: inline-flex; align-items: center; gap: 0; font-size: 12px; max-width: 34%; white-space: nowrap; }
.rc-node .avatar { flex: none; }
.rc-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); margin-inline-end: 7px; vertical-align: 1px; }
.rc-more { font-size: 12px; padding: 8px 2px 4px; }
.rc-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.rc-card.fading { background: radial-gradient(360px 140px at 0% 0%, var(--accent-soft), transparent 75%), var(--surface-2); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.rc-when { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14.5px; }
.rc-when b { font-weight: 600; }
.rc-said { font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; }
.rc-said b { color: var(--text); font-weight: 600; }
.rc-links, .rc-marks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rc-marks .dim { font-size: 12.5px; }
@media (max-width: 860px) {
  .sphere-rail { top: auto; bottom: 0; inset-inline-start: 0; inset-inline-end: 0; width: auto; max-height: 55%; border-radius: 18px 18px 0 0; transform: translateY(105%); transition: transform .35s var(--ease-out); }
  .sphere-rail.open { transform: none; }
  .rail-toggle { display: inline-flex; }
  .drawer { top: auto; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; width: auto; max-height: 70%; border-radius: 20px 20px 0 0; transform: translateY(105%); }
  .drawer.open { transform: none; }
  .sphere-stats { display: none; }
  .sphere-search { flex: 1; }
  .sphere-top > .grow { display: none; }
  .sphere-rc { top: auto; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; width: auto; max-height: 58%; border-radius: 18px 18px 0 0; padding: 14px 16px 8px; transform: translateY(105%); }
  .sphere-rc.open { transform: none; }
  .rc-list { padding: 6px 16px calc(6px + env(safe-area-inset-bottom)); margin: 0 -16px; }
  .sphere-view.rc-on .sphere-canvas { top: 64px; bottom: 56%; } /* the sphere sits between the top bar and the list sheet */
}

/* ---------- Circles ---------- */
.circle-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; text-decoration: none !important; color: var(--text); }
.circle-card .hd { display: flex; align-items: center; gap: 12px; }
.circle-card .glyph { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px; flex: none; }
.circle-card h3 { font-size: 17px; font-weight: 620; }
.circle-card.sel { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow-gold); }
.circle-card .cb-unread { background: var(--accent); color: var(--accent-contrast); border-radius: 999px; }
.cb-unread[hidden], .cb-pill[hidden], .cb-earlier[hidden], .cb-empty[hidden], #cmore[hidden] { display: none; }
.circles-tools { margin-bottom: 16px; align-items: center; }
.circles-tools .input { flex: 1 1 240px; max-width: 360px; }
.circles-tools .select { width: auto; }
/* one circle on screen (#/circles/:id): header with the way back */
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); text-decoration: none; margin-bottom: 12px; }
.back-link:hover { color: var(--text); }
.back-link svg { width: 15px; height: 15px; }
.circle-hd { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.circle-hd .glyph { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 21px; flex: none; }
.circle-hd h1 { font-family: var(--font-display); font-weight: 450; font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
.circle-hd-meta { font-size: 13px; margin-top: 4px; align-items: center; }
@media (max-width: 860px) { .circle-hd h1 { font-size: 24px; } }
/* circle message board (views/circle-board.js) */
.cb-card .card-bd { padding-top: 8px; }
.cboard { position: relative; display: flex; flex-direction: column; gap: 10px; }
.cb-scroll { height: 260px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 4px; }
.cboard.tall .cb-scroll { height: min(62vh, 640px); }
.cb-earlier { text-align: center; padding: 4px 0 8px; }
.cb-empty { text-align: center; padding: 72px 12px; font-size: 14px; margin: 0; }
.cb-msg { display: flex; gap: 10px; padding: 8px 6px; border-radius: 10px; }
.cb-msg:hover { background: var(--surface-2); }
.cb-main { flex: 1; min-width: 0; }
.cb-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; }
.cb-meta b { font-weight: 620; }
.cb-meta time, .cb-edited { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.cb-acts { margin-inline-start: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s; }
.cb-msg:hover .cb-acts, .cb-msg:focus-within .cb-acts { opacity: 1; }
@media (hover: none) { .cb-acts { opacity: 1; } }
.cb-acts .btn-icon { width: 26px; height: 26px; }
.cb-acts svg { width: 14px; height: 14px; }
.cb-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; }
.cb-body a { color: var(--link); text-decoration: underline; }
.cb-gone { color: var(--text-3); font-style: italic; }
:root[lang="he"] .cb-gone { font-style: normal; }
.cb-edit { margin-top: 4px; }
.cb-edit textarea { width: 100%; resize: vertical; min-height: 64px; }
.cb-pill { position: absolute; inset-inline-start: 50%; transform: translateX(-50%); bottom: 64px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; background: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
[dir="rtl"] .cb-pill { transform: translateX(50%); }
.cb-pill svg { width: 14px; height: 14px; }
.cb-compose { display: flex; gap: 8px; align-items: flex-end; border-top: 1px solid var(--border); padding-top: 10px; }
.cb-compose textarea { flex: 1; resize: none; min-height: 38px; max-height: 200px; line-height: 1.4; padding-top: 8px; padding-bottom: 8px; }
.cb-compose .btn { height: 38px; }
.cb-modal .modal-bd { padding-top: 4px; }
.overlap { padding: 22px; border-radius: 18px; background: radial-gradient(500px 200px at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); border: 1px solid var(--border); }
.overlap .big { font-family: var(--font-display); font-size: 28px; font-weight: 450; letter-spacing: -0.02em; line-height: 1.2; font-variation-settings: "opsz" 72; }
.overlap .big b { color: var(--accent-ink); font-weight: 520; }
.overlap-side { padding: 18px; }
.overlap-side .big { font-size: 21px; margin-top: 0; }
.page > .cb-card { display: none; } /* the board waits until the circle detail places it in the right column */
@media (max-width: 600px) { .overlap-side { padding: 16px; } .overlap-side .big { font-size: 19px; } .g-circle .card-hd { flex-wrap: wrap; row-gap: 8px; } }
.member-li { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.member-li:last-child { border-bottom: 0; }
.member-li b { font-size: 14px; font-weight: 580; display: block; } .member-li small { font-size: 12.5px; color: var(--text-3); display: block; }
.card-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.card-row:last-child { border-bottom: 0; }
.card-row .nm { font-weight: 580; font-size: 14.5px; color: var(--text); }
.card-row .meta { font-size: 13px; color: var(--text-3); }
.card-row .kb { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.owners-line { align-items: center; flex-wrap: nowrap; min-width: 0; gap: 8px; }
.owner-stack { display: inline-flex; align-items: center; flex: none; }
.owner-stack .os-av { display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); }
.owner-stack .os-av + .os-av { margin-inline-start: -7px; }
.owner-stack .os-av[data-band="strong"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--accent); }
.owner-stack .os-av[data-band="medium"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px color-mix(in srgb, var(--accent) 45%, transparent); }
.owner-stack .os-more { margin-inline-start: 4px; font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.path-line { font-size: 12.5px; color: var(--text-2); min-width: 0; }

/* Circle network (views/circle-network.js) */
.cnet { display: flex; flex-direction: column; gap: 10px; }
.cnet-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cnet-find { position: relative; margin: 0; flex: 1 1 260px; min-width: 0; }
.cnet-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cnet-seg-l { align-self: center; font-size: 12px; padding: 0 4px 0 8px; }
.cnet-msel { position: relative; }
#cn-mbtn { max-width: 220px; }
#cn-mbtn.is-on { border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: var(--blue-soft); }
#cn-mbtn svg { width: 14px; height: 14px; flex: none; }
.cnet-mpop { position: absolute; z-index: 6; inset-inline-end: 0; top: calc(100% + 4px); width: min(320px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 8px; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 6px; margin: 0; }
.cnet-mpop .search { max-width: none; flex: none; }
.cnet-mlist { max-height: 340px; overflow: auto; display: flex; flex-direction: column; }
.cnet-mrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; text-align: start; font-size: 13.5px; color: var(--text); }
.cnet-mrow:hover, .cnet-mrow:focus-visible { background: var(--surface-2); }
.cnet-mrow .num { font-size: 12px; flex: none; }
.cnet-mrow .num b { color: var(--text); font-weight: 600; }
.cnet-mchk { width: 16px; height: 16px; flex: none; border-radius: 4px; border: 1.5px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; }
.cnet-mchk svg { width: 12px; height: 12px; opacity: 0; color: #fff; }
.cnet-mrow[aria-checked="true"] .cnet-mchk { background: var(--blue); border-color: var(--blue); }
.cnet-mrow[aria-checked="true"] .cnet-mchk svg { opacity: 1; }
.cnet-find .search { flex: 1 1 100%; }
.cnet-results { position: absolute; z-index: 5; inset-inline-start: 0; inset-inline-end: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-md); box-shadow: var(--shadow-md); padding: 4px; max-height: 320px; overflow: auto; }
.cnet-results button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: 8px; text-align: start; font-size: 13.5px; color: var(--text); }
.cnet-results button:hover, .cnet-results button:focus-visible { background: var(--surface-2); }
.cnet-results b { font-weight: 580; }
.cnet-chips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.cnet-chips .chip { flex: none; height: 28px; }
.cnet-stage { position: relative; height: 560px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(420px 300px at 50% 50%, var(--accent-soft), transparent 70%), var(--surface-2); }
.cnet-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.cnet-gl { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.cnet-gl[hidden], .cnet-stage canvas[hidden] { display: none; }
.cnet-load { position: absolute; inset: 0; }
.cnet-zoom { position: absolute; inset-inline-end: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; }
.cnet-zoom .btn { background: var(--surface); }
.cnet-zoom svg { width: 16px; height: 16px; }
.cnet-tip { position: absolute; z-index: 4; pointer-events: none; display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 8px; font-size: 12px; color: var(--text-2);
  background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); max-width: 260px; }
.cnet-tip b { color: var(--text); font-weight: 600; font-size: 12.5px; }
.cnet-note { position: absolute; inset-inline-start: 12px; top: 10px; font-size: 12px; pointer-events: none; max-width: calc(100% - 70px); }
.cnet-card { position: absolute; inset-inline-start: 10px; bottom: 10px; width: min(360px, calc(100% - 20px)); padding: 14px 14px 12px; border-radius: var(--r-md);
  background: var(--surface-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); }
.cnet-card .cnet-x { position: absolute; inset-inline-end: 6px; top: 6px; }
.cnet-card .cnet-head { padding-inline-end: 28px; }
.cnet-card.is-list { top: 10px; display: flex; flex-direction: column; }
.cnet-h { font-size: 11.5px; font-weight: 600; color: var(--text-3); margin: 12px 0 4px; }
.cnet-asks { display: flex; flex-direction: column; gap: 2px; }
.cnet-ask { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 13.5px; }
.cnet-ask .btn { flex: none; }
.cnet-ask.is-me { margin-bottom: 2px; }
.cnet-via { display: block; font-size: 11.5px; color: var(--text-3); line-height: 1.3; }
.cnet-more { padding-inline-start: 4px; padding-inline-end: 4px; }
.cnet-plist { flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0 -6px; }
.cnet-prow { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.cnet-prow:hover, .cnet-prow:focus-visible { background: var(--surface-2); }
.cnet-prow .btn { flex: none; }
.cnet-orgdot { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 650; font-size: 14px; }
.cnet-orgdot.xs { width: 24px; height: 24px; font-size: 10px; }
.cnet-orgdot svg { width: 18px; height: 18px; }
.cnet-kb { font-size: 13px; color: var(--text-2); margin-top: 10px; line-height: 1.45; }
.cnet-path { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; color: var(--text-2); margin-top: 6px; }
.cnet-path svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.cnet-path b { color: var(--accent-ink); font-weight: 600; }
.cnet-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; }
.cnet-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cnet-legend i { display: inline-block; }
.cnet-legend .lg-me { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.cnet-legend .lg-owner { width: 12px; height: 12px; border-radius: 50%; background: var(--c1); }
.cnet-legend .lg-inv { width: 16px; height: 2px; background: var(--accent); }
.cnet-legend .lg-tie { width: 16px; height: 2px; background: var(--text-3); }
.cnet-legend .lg-org { width: 14px; height: 14px; border-radius: 50%; background: var(--c2); }
.cnet-legend .lg-link { width: 16px; height: 4px; border-radius: 2px; background: var(--c1); opacity: .6; }
/* full screen: the Fullscreen API on .cnet, or a fixed overlay where it's missing (iPhone Safari) */
.cnet.is-full { position: fixed; inset: 0; z-index: 1000; background: var(--bg); padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.cnet.is-full .cnet-stage { flex: 1 1 auto; height: auto; min-height: 0; }
.cnet:fullscreen { width: 100%; height: 100%; }
html.cnet-noscroll, html.cnet-noscroll body { overflow: hidden; }
#cnetview[hidden], #clistview[hidden] { display: none; }
@media (max-width: 600px) {
  .cnet-stage { height: 440px; }
  .cnet-card { inset-inline-start: 6px; inset-inline-end: 6px; bottom: 6px; width: auto; }
  .cnet-card.is-list { top: auto; max-height: 64%; }
  .cnet-tools { width: 100%; justify-content: space-between; }
  .cnet-seg-l, .cnet-tools .seg svg { display: none; }
  .cnet-tools .seg button { padding: 0 10px; }
  #cn-mbtn { max-width: 150px; }
  .cnet-mpop { inset-inline-start: auto; inset-inline-end: 0; }
  .cnet-stage { height: 500px; }
  .cnet-card { padding: 12px 12px 10px; }
  .cnet-card .avatar:not(.xs) { --s: 36px; }
}

/* ---------- Intros ---------- */
.intro-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.intro-card .path { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.intro-card .path svg.arr { width: 16px; height: 16px; color: var(--text-3); }
.intro-card .msg { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 1.55; border-inline-start: 3px solid var(--accent); }
.status-badge[data-s="pending"] { background: var(--accent-soft); color: var(--accent-ink); }
.status-badge[data-s="accepted"] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.status-badge[data-s="details_shared"] { background: var(--blue-soft); color: var(--link); }
.status-badge[data-s="declined"] { background: var(--surface-3); color: var(--text-3); }

/* ---------- Clean phone ---------- */
.clean-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.clean-num { padding: 24px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; text-align: start; transition: border-color .2s, box-shadow .2s; }
.clean-num[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 55%, transparent); box-shadow: var(--glow-gold); }
.clean-num .v { font-size: 46px; font-weight: 640; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 6px; }
.clean-num .k { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); font-size: 14px; }
.clean-num .k svg { width: 18px; height: 18px; }
.split-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; margin: 18px 0 6px; }
.split-bar i { display: block; height: 100%; }
.howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.howto div { padding: 16px; border-radius: 14px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.howto b { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }
@media (max-width: 700px) { .clean-hero, .howto { grid-template-columns: minmax(0, 1fr); } .clean-num .v { font-size: 38px; } }

/* ---------- Settings ---------- */
.set-sec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--border); }
.set-sec:first-of-type { padding-top: 4px; }
.set-sec h3 { font-size: 16px; font-weight: 620; }
.set-sec .d { color: var(--text-2); font-size: 13.5px; margin-top: 6px; line-height: 1.55; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.toggle-row:last-child { border-bottom: 0; }
.toggle-row b { font-weight: 580; font-size: 14.5px; display: block; } .toggle-row small { color: var(--text-3); font-size: 13px; display: block; }
.token-li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.token-li:last-child { border-bottom: 0; }
.token-li .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-2); flex: none; }
.token-li .ic svg { width: 17px; height: 17px; }
.token-li b { font-weight: 580; font-size: 14px; display: block; } .token-li small { color: var(--text-3); font-size: 12.5px; display: block; }
@media (max-width: 860px) { .set-sec { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.org-glyph { width: 20px; height: 20px; border-radius: 6px; display: inline-grid; place-items: center; flex: none; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.map-stage.geo { min-height: 0; }
.clean-cols { --cols: minmax(0, 2fr) minmax(0, 1fr) 130px 110px; }
@media (max-width: 1000px) { .clean-cols { --cols: minmax(0, 1fr) auto; } .clean-cols .c-ind, .clean-cols .c-last { display: none; } }
@media (min-width: 861px) { .sphere-canvas { inset-inline-start: 140px; inset-inline-end: -140px; } }
@media (min-width: 861px) { .sphere-view.rc-on .sphere-canvas { inset-inline-start: 0; inset-inline-end: 80px; } } /* centered between the rail and the Reconnect panel */

.card-hd { flex-wrap: wrap; row-gap: 4px; }
@media (max-width: 600px) { .card-hd > .dim { flex-basis: 100%; } .hide-sm { display: none !important; } }
@media (pointer: coarse) { .kbd-hint, [data-cmdk] kbd { display: none; } }

/* Person: conversations summary */
.conv + .conv { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.conv-hd { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conv-hd .tl-ic { width: 28px; height: 28px; flex: none; }
.conv-hd b { font-weight: 600; }
.conv-hd .dim { font-size: 13px; }
.conv-when { margin-inline-start: auto; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.conv-lines { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 0 38px; }
.conv-line { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 14px; }
.conv-line .who { font-weight: 600; color: var(--text-2); }
.conv-line.me .who { color: var(--accent); }
.conv-line .txt { overflow-wrap: anywhere; }
.conv-line .t { font-size: 12px; color: var(--text-3); }
@media (max-width: 640px) { .conv-hd { flex-wrap: wrap; } .conv-when { margin-inline-start: 38px; width: 100%; } .conv-lines { margin-inline-start: 0; } }
/* Map panel title is "Name · N people": inline text, so long names wrap naturally instead of splitting into two flex columns. */
.map-panel #ptitle { display: block; line-height: 1.3; }
.p-hero h1 { overflow-wrap: anywhere; } /* contacts named by a long email address */

/* =====================================================================
   Tidy up · This week · Org pages · Trip planner · Smart lists (2026-10-10)
   ===================================================================== */
/* ---------- Tidy hub ---------- */
.tidy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tidy-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; min-height: 230px; }
.tidy-card.hero { background: radial-gradient(420px 180px at 0% 0%, var(--blue-soft), transparent 70%), var(--surface); }
.tidy-card.hero.gold { background: radial-gradient(420px 180px at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); }
.tc-hd { display: flex; align-items: center; gap: 10px; }
.tc-hd h3 { font-size: 15px; font-weight: 620; }
.tc-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--link); flex: none; }
.tc-ic svg { width: 17px; height: 17px; }
.tc-ic.gold, .gold .tc-ic { color: var(--accent-ink); background: var(--accent-soft); }
.tc-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tc-big b { font-size: 34px; font-weight: 650; letter-spacing: -0.03em; line-height: 1.05; }
.tc-big span { color: var(--text-2); font-size: 13.5px; }
.tc-text { color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.tc-text b { color: var(--text); font-weight: 600; }
.tc-cta { margin-top: auto; padding-top: 6px; }
.tc-prog { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1100px) { .tidy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .tidy-grid { grid-template-columns: minmax(0, 1fr); } .tidy-card { min-height: 0; } }

/* ---------- Focus sessions (name / rate) ---------- */
.tidy-page { max-width: 760px; }
.tidy-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tidy-hd h1 { font-family: var(--font-display); font-weight: 450; font-size: 32px; letter-spacing: -0.025em; font-variation-settings: "opsz" 96; }
.tidy-stage { position: relative; }
.tidy-session { padding: 22px 24px 16px; transition: transform .2s var(--ease), opacity .2s var(--ease); touch-action: pan-y; outline: none; }
.tidy-session.out-l { transform: translateX(-60px) rotate(-2deg); opacity: 0; }
.tidy-session.out-r { transform: translateX(60px) rotate(2deg); opacity: 0; }
.tidy-done { text-align: center; padding: 34px 24px 28px; position: relative; overflow: hidden; }
.tidy-done h2 { font-family: var(--font-display); font-weight: 460; font-size: 28px; letter-spacing: -0.02em; margin-top: 8px; }
.tidy-done .muted { margin-top: 6px; }
.done-ic { width: 64px; height: 64px; border-radius: 20px; margin: 10px auto 0; display: grid; place-items: center; background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.done-ic.gold { background: var(--accent-soft); color: var(--accent-ink); }
.done-ic svg { width: 30px; height: 30px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -10px; inset-inline-start: calc(var(--i) * 5.5% + 2%); width: 7px; height: 12px; border-radius: 2px; opacity: 0;
  background: hsl(calc(var(--i) * 47deg + 40deg) 75% 60%); animation: confetti 1.6s calc(var(--i) * 45ms) var(--ease-out) forwards; }
@keyframes confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(260px) rotate(calc(var(--i) * 70deg)); } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } .tidy-session { transition: none; } }

.nq-prog { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--text-3); margin-bottom: 18px; }
.nq-prog b { color: var(--text-2); font-variant-numeric: tabular-nums; }
.nq-prog .bar { flex: 1; height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; min-width: 60px; }
.nq-prog .bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blue), var(--good)); border-radius: 5px; transition: width .4s var(--ease-out); }
.nq-top { display: flex; align-items: center; gap: 14px; }
.nq-av { --av: linear-gradient(140deg, var(--surface-3), var(--surface-2)); color: var(--text-2); }
.nq-av svg { width: 24px; height: 24px; }
.nq-num { font-size: 24px; font-weight: 640; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.2; }
.nq-sub { color: var(--text-2); font-size: 13.5px; margin-top: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; }
.nq-sub svg { width: 13px; height: 13px; vertical-align: -2px; margin-inline-end: 3px; }
.nq-sub .sep { margin: 0 6px; color: var(--text-3); }
.nq-acts { display: flex; gap: 6px; flex: none; align-self: flex-start; }
.nq-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.nq-facts .chip { height: 26px; font-size: 12.5px; }
.nq-facts .ch { display: inline-grid; color: var(--ch); } .nq-facts .ch svg { width: 13px; height: 13px; }
.nq-sec { margin-top: 18px; }
.nq-sec h5 { font-size: 11px; font-weight: 650; color: var(--text-3); margin: 0 0 8px; }
.nq-lines { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); }
.nq-lines .conv-line .t { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.nq-lines .conv-line .txt { overflow-wrap: anywhere; }
.nq-groups { display: flex; flex-wrap: wrap; gap: 6px; }
.nq-groups .chip { max-width: 100%; } .nq-groups .chip .num { font-size: 11.5px; margin-inline-start: 2px; }
.nq-form { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.nq-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.nq-sugg .lbl { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--accent-ink); margin-inline-end: 2px; }
.nq-sugg .lbl svg { width: 14px; height: 14px; }
.nq-sugg .sugg { height: 30px; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--text); }
.nq-sugg .sugg small { color: var(--text-3); font-size: 11.5px; font-weight: 500; }
.nq-inputs { display: flex; gap: 8px; }
.nq-inputs .input { height: 46px; font-size: 15px; }
.nq-co { width: 210px; flex: none; }
.nq-foot { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 12px; }
.nq-foot kbd { margin-inline-start: 2px; }
@media (max-width: 600px) {
  .tidy-session { padding: 18px 16px 12px; }
  .nq-num { font-size: 20px; }
  .nq-top { flex-wrap: wrap; } .nq-acts { width: 100%; order: 3; }
  .nq-inputs { flex-wrap: wrap; } .nq-co { width: auto; flex: 1 1 60%; } .nq-inputs .btn { flex: 1 1 30%; }
  .nq-foot kbd { display: none; }
  .tidy-hd h1 { font-size: 26px; }
}

/* rate session */
.prog-ring { transform: rotate(-90deg); flex: none; }
.prog-ring circle { fill: none; stroke-width: 5; }
.prog-ring .trk { stroke: var(--surface-3); }
.prog-ring .val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset .5s var(--ease-out); }
.rs-top { display: flex; align-items: center; gap: 10px; }
.rs-count b { font-size: 22px; font-weight: 650; } .rs-count span { color: var(--text-3); font-size: 14px; margin-inline-start: 2px; }
.rs-person { text-align: center; margin-top: 6px; }
.rs-person .avatar { margin: 0 auto 12px; }
.rs-person h2 { font-family: var(--font-display); font-weight: 460; font-size: 28px; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; }
.rs-role { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.rs-q { text-align: center; color: var(--text-3); font-size: 13.5px; margin-top: 22px; }
.rs-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.rs-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px 12px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); transition: transform .12s var(--ease), border-color .15s, background .15s; min-height: 92px; }
.rs-tile:hover { transform: translateY(-2px); border-color: var(--border-strong); color: var(--text); }
.rs-tile .e { font-size: 26px; line-height: 1; height: 28px; display: grid; place-items: center; }
.rs-tile .dots { font-size: 9px; letter-spacing: 2px; color: var(--text-3); }
.rs-tile .l { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.2; }
.rs-tile kbd { position: absolute; top: 6px; inset-inline-end: 6px; min-width: 18px; height: 18px; font-size: 10.5px; }
.rs-tile[data-r="5"]:hover, .rs-tile[data-r="5"].picked { background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.rs-tile[data-r="4"]:hover, .rs-tile[data-r="4"].picked { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.rs-tile[data-r="1"]:hover, .rs-tile[data-r="1"].picked { background: color-mix(in srgb, var(--aegean-300) 14%, var(--surface-2)); border-color: color-mix(in srgb, var(--aegean-300) 45%, transparent); }
.rs-tile.picked { transform: scale(.97); }
@media (max-width: 600px) { .rs-tiles { gap: 5px; } .rs-tile { min-height: 78px; padding: 10px 2px; } .rs-tile .l { font-size: 11.5px; } .rs-tile kbd { display: none; } .rs-person h2 { font-size: 24px; } }

/* junk review */
.junk-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; margin: 0 -8px; }
.junk-li { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.junk-li:hover { background: var(--surface-2); }
.junk-li input { width: 16px; height: 16px; accent-color: var(--blue); flex: none; }
.junk-li b { display: block; font-weight: 560; font-size: 14px; } .junk-li small { display: block; color: var(--text-3); font-size: 12.5px; }

/* ---------- Home: This week + Tidy ---------- */
.week-seg { width: 100%; }
.week-seg button { flex: 1; justify-content: center; }
.week-seg .n { font-size: 11.5px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-inline-start: 2px; }
.rhythm { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); margin-top: 3px; }
.rhythm .bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.rhythm .bars i { width: 3px; border-radius: 1px; background: var(--border-strong); }
.rhythm .bars i.on { background: var(--warn); }
.tidy-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); text-decoration: none !important; }
.tidy-row:hover { background: var(--surface-2); }
.tidy-row b { display: block; font-weight: 580; font-size: 14.5px; } .tidy-row small { display: block; color: var(--text-3); font-size: 12.5px; }
.tidy-row > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.mini-bar { width: 54px; height: 5px; border-radius: 5px; background: var(--surface-3); overflow: hidden; flex: none; }
.mini-bar i { display: block; height: 100%; min-width: 3px; background: var(--good); border-radius: 5px; }
.mini-bar.gold i { background: var(--accent); }
@media (max-width: 600px) { .week-seg button { padding: 0 6px; font-size: 12.5px; } .week-seg button svg { display: none; } .mini-bar { display: none; } }

/* ---------- Org page ---------- */
.org-mark { width: 84px; height: 84px; border-radius: 22px; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-size: 40px; font-weight: 500;
  color: var(--accent-contrast); background: linear-gradient(140deg, var(--gold-300), var(--gold) 60%, color-mix(in srgb, var(--gold) 70%, black)); box-shadow: var(--shadow-md); }
.org-hero h1 { overflow-wrap: anywhere; }
.org-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.org-stats .os { display: flex; flex-direction: column; gap: 2px; }
.org-stats .k { font-size: 12px; color: var(--text-3); font-weight: 600; }
.org-stats b { font-size: 26px; font-weight: 640; letter-spacing: -0.02em; }
.org-stats .s { font-size: 12.5px; color: var(--text-2); }
.org-filter { position: relative; display: block; width: 190px; }
.org-filter svg { position: absolute; inset-inline-start: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); }
.org-filter .input { padding-inline-start: 30px; }
.org-li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 0 -12px; border-radius: 12px; color: var(--text); text-decoration: none !important; min-width: 0; }
.org-li:hover { background: var(--surface-2); }
.org-li .nm { font-weight: 580; font-size: 14.5px; } .org-li .meta { font-size: 13px; color: var(--text-3); }
.org-li-r { display: flex; align-items: center; gap: 12px; flex: none; font-size: 12.5px; color: var(--text-3); }
.org-li-r .when { width: 64px; text-align: end; font-variant-numeric: tabular-nums; }
.org-li-r .when.fresh { color: var(--good); font-weight: 600; }
.org-li-r .chans { display: flex; gap: 3px; width: 64px; justify-content: flex-end; } .org-li-r .chans svg { width: 13px; height: 13px; }
.org-li-r .why { color: var(--text-2); font-weight: 550; white-space: nowrap; }
.kb-inline { color: var(--link); white-space: nowrap; } .kb-inline svg { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-inline-end: 3px; }
.ask-li { margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.org-link { color: inherit; } .org-link:hover b { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .org-mark { width: 64px; height: 64px; font-size: 30px; border-radius: 18px; }
  .org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-li-r .chans, .org-li-r .stars-wrap { display: none; }
  .org-filter { width: 130px; }
  .card-hd:has(.org-filter) { flex-wrap: wrap; }
}

/* ---------- Trip planner ---------- */
.trip-q { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; }
.trip-q .input { height: 46px; font-size: 15px; }
.trip-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--blue-soft); color: var(--link); flex: none; }
.trip-ic svg { width: 20px; height: 20px; }
.trip-quick { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.trip-quick .lbl { font-size: 12px; font-weight: 600; color: var(--text-3); margin-inline-end: 4px; white-space: nowrap; flex: none; }
.trip-quick .chip .num { font-size: 11.5px; }
.trip-sum { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: radial-gradient(500px 160px at 0% 0%, var(--blue-soft), transparent 70%), var(--surface); }
.trip-flag { font-size: 44px; line-height: 1; }
.trip-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.trip-note svg { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.trip-sum h2 { font-family: var(--font-display); font-weight: 460; font-size: 26px; letter-spacing: -0.02em; }
.trip-sum p { color: var(--text-2); font-size: 14px; margin-top: 2px; } .trip-sum b { color: var(--text); }
@media (max-width: 600px) {
  .trip-q { flex-wrap: wrap; padding: 12px; } .trip-q label { flex: 1 1 calc(100% - 56px); } .trip-q .btn { width: 100%; }
  .trip-sum { flex-wrap: wrap; } .trip-flag { font-size: 34px; }
  .trip-quick { flex-wrap: nowrap; overflow-x: auto; margin: 12px -16px 0; padding: 0 16px 2px; scrollbar-width: none; } .trip-quick .chip { flex: none; }
}

/* ---------- People: smart chips + Lists menu ---------- */
.smart-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; }
.smart-chip svg { width: 13px; height: 13px; opacity: .7; }
.smart-chip:hover svg { opacity: 1; }
.pop-wrap { position: relative; }
.menu-pop { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); z-index: 60; width: 300px; max-height: min(70vh, 560px); overflow-y: auto; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); }
.menu-pop button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; text-align: start; color: var(--text); }
.menu-pop button:hover { background: var(--surface-2); }
.menu-pop button > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.menu-pop b { display: block; font-weight: 560; font-size: 13.5px; } .menu-pop small { display: block; color: var(--text-3); font-size: 12px; }
.mp-sec { font-size: 11px; font-weight: 650; color: var(--text-3); padding: 10px 10px 4px; }
.mp-view { display: flex; align-items: center; } .mp-view .x { width: 30px; flex: none; justify-content: center; padding: 6px; }
.mp-empty { font-size: 12.5px; color: var(--text-3); padding: 4px 10px 8px; }
@media (max-width: 600px) { .menu-pop { position: fixed; inset-inline-start: 12px; inset-inline-end: 12px; top: 120px; width: auto; } }

/* ---------- Clean phone: restore ---------- */
.clean-hero.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.clean-hero .clean-num { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
@media (max-width: 900px) { .clean-hero.three { grid-template-columns: minmax(0, 1fr); } }
.restore-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 18px; font-size: 13.5px; color: var(--text-2); background: var(--blue-soft); border-bottom: 1px solid var(--border); }
.restore-note svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--link); }
.pin-btn { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; margin-inline-start: 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-2); border: 1px solid var(--border-strong); vertical-align: 1px; }
.pin-btn svg { width: 11px; height: 11px; }
.pin-btn:hover { color: var(--text); }
.pin-btn.on { color: var(--link); background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }

/* Clean phone: live job progress */
.job-card b { display: inline-flex; align-items: center; gap: 8px; }
.job-card b svg { width: 18px; height: 18px; color: var(--accent); }
.job-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.job-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--link)); border-radius: 99px; transition: width .6s var(--ease-out); }

/* ---------- Circle focus (create/edit modal pickers, circle page box) ---------- */
.focus-modal .modal-ft { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--border); padding-top: 14px; z-index: 2; }
.focus-details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.focus-details > summary { list-style: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer; border-radius: 14px; }
.focus-details > summary::-webkit-details-marker { display: none; }
.focus-details > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.focus-details > summary > svg { width: 18px; height: 18px; flex: none; color: var(--accent-ink); margin-top: 1px; }
.focus-details > summary > svg:last-child { color: var(--text-3); transition: transform var(--dur) var(--ease); }
.focus-details[open] > summary > svg:last-child { transform: rotate(180deg); }
.focus-details > summary small { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 2px; font-weight: 400; }
.focus-details > .focus-ed { padding: 0 14px 14px; }
.focus-ed { display: flex; flex-direction: column; gap: 14px; }
.focus-intro { font-size: 13px; }
.msel { position: relative; }
.msel-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 42px; padding: 5px 8px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border-strong); cursor: text; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.msel-box:hover { border-color: color-mix(in srgb, var(--text) 26%, transparent); }
.msel.open .msel-box, .msel-box:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.msel-chips { display: contents; }
.msel-input { flex: 1 1 120px; min-width: 100px; height: 30px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 14px; padding: 0 4px; }
.msel-input::placeholder { color: var(--text-3); }
.msel-chip { height: 28px; max-width: 100%; padding: 0 2px 0 9px; background: var(--accent-soft); color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.msel-chip > svg { color: var(--accent-ink); }
.msel-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--text-2); flex: none; }
.msel-x:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); }
.msel-x svg { width: 12px; height: 12px; }
.msel-pop { margin-top: 4px; max-height: 232px; overflow: auto; overscroll-behavior: contain; border-radius: var(--r-md); background: var(--bg-elev); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md); padding: 4px; }
.msel-opt { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 8px; font-size: 13.5px; cursor: pointer; color: var(--text); }
.msel-opt small { color: var(--text-3); font-size: 12px; }
.msel-opt.act, .msel-opt:hover { background: var(--blue-soft); }
.msel-opt.hdr { font-weight: 620; margin-top: 4px; }
.msel-opt.hdr:first-child { margin-top: 0; }
.msel-opt:not(.hdr) { padding-inline-start: 14px; }
.msel-opt .num { font-size: 12px; flex: none; }
.msel-ck { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--border-strong); flex: none; color: var(--accent-contrast); }
.msel-opt[aria-selected="true"] .msel-ck { background: var(--accent); border-color: var(--accent); }
.msel-ck svg { width: 12px; height: 12px; stroke-width: 3; }
.msel-pre { display: inline-flex; flex: none; color: var(--text-2); font-size: 16px; line-height: 1; }
.msel-grp { font-size: 11.5px; color: var(--text-3); padding: 8px 8px 2px; }
.msel-empty { padding: 10px; font-size: 13px; color: var(--text-3); }
.focus-preview { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--text); font-size: 13.5px; }
.focus-preview b { color: var(--accent-ink); font-weight: 650; }
.focus-preview .fp-ic { color: var(--accent-ink); display: inline-flex; }
.focus-preview.zero { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.focus-box .fb-hd, .focus-box > .row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.focus-box .fb-ic { width: 20px; height: 20px; color: var(--accent-ink); flex: none; margin-top: 2px; }
.focus-box:not(.empty-focus) { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: radial-gradient(420px 160px at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); }
.focus-box .fb-note { font-size: 12.5px; margin-top: 12px; }
.focus-groups { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.focus-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.focus-k { font-size: 12px; font-weight: 600; color: var(--text-3); min-width: 92px; }
.focus-vals { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.focus-chip { max-width: 100%; background: var(--surface-2); color: var(--text); }
.focus-chip > svg { color: var(--accent-ink); }
.focus-or, .focus-and { font-size: 11.5px; color: var(--text-3); font-style: italic; }
.focus-and { padding-inline-start: 2px; }
.focus-line { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--accent-ink); min-width: 0; }
@media (max-width: 560px) {
  .focus-group { flex-direction: column; align-items: stretch; gap: 6px; }
  .focus-k { min-width: 0; }
  .focus-box .fb-hd, .focus-box > .row { grid-template-columns: 20px minmax(0, 1fr); }
  .focus-box .fb-hd .btn, .focus-box > .row .btn { grid-column: 2; justify-self: start; }
  .focus-details > summary small { display: none; }
  .msel-pop { max-height: 200px; }
}
.msel-input:focus, .msel-input:focus-visible { outline: none; box-shadow: none; border: 0; }

/* Settings: plan */
.plus-list { list-style: none; padding: 0; margin: 12px 0 10px; display: grid; gap: 6px; font-size: 14px; }
.plus-list li { display: flex; gap: 8px; align-items: flex-start; }
.plus-list svg { width: 16px; height: 16px; color: var(--good); flex: none; margin-top: 2px; }

/* ---------- Enrichment (person page drawer, Enriched badges, Tidy up review) ---------- */
.enr-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; margin-inline-start: 8px; vertical-align: 2px;
  border-radius: var(--r-full); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft);
  color: var(--accent-ink); font: 600 11.5px/1 var(--font-ui); cursor: pointer; white-space: nowrap; }
.enr-badge svg { width: 12px; height: 12px; }
.enr-badge:hover { border-color: var(--accent); }
.facts .enr-badge { margin-inline-start: 0; vertical-align: 0; height: 28px; }
.p-hero .extra-roles { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; margin-top: 2px; }
.chip-junk { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.enr-wait { display: flex; align-items: center; gap: 12px; padding: 26px 4px; color: var(--text-2); }
.enr-empty { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; }
.enr-empty > svg { width: 22px; height: 22px; flex: none; color: var(--text-3); margin-top: 2px; }
.enr-empty p { font-size: 13.5px; margin-top: 2px; }
.enr-cand { border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px; background: var(--surface-2); }
.enr-cand .badge { flex: none; }
.enr-src { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12.5px; color: var(--link); word-break: break-all; }
.enr-src svg { width: 14px; height: 14px; flex: none; }
.enr-h { font: 600 12px/1 var(--font-ui); color: var(--text-3); margin: 18px 0 8px; }
.enr-list { display: flex; flex-direction: column; }
.enr-row { display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.enr-row:first-child { border-top: 0; }
.enr-f { font-size: 12.5px; color: var(--text-3); font-weight: 550; }
.enr-v { min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.enr-v small { display: block; font-size: 12px; margin-top: 2px; }
.enr-v small a { color: var(--link); }
.enr-a { display: flex; gap: 6px; justify-content: flex-end; }
.enr-ev { margin-top: 14px; font-size: 13px; }
.enr-ev summary { cursor: pointer; color: var(--text-2); font-weight: 550; }
.enr-ev a { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); color: inherit; }
.enr-ev a b { color: var(--link); font-weight: 600; font-size: 12.5px; }
.enr-ev a span { font-size: 12.5px; overflow-wrap: anywhere; }
.enr-budget { font-size: 12.5px; margin-top: 14px; }
.enr-person { padding: 12px 16px; margin-bottom: 12px; }
.enr-ph { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; }
.enr-ph a { color: inherit; }
.role-row .input { min-width: 0; flex: 1; }
@media (max-width: 600px) {
  .enr-row { grid-template-columns: 1fr auto; }
  .enr-f { grid-column: 1 / -1; margin-bottom: -6px; }
  .enr-person { padding: 10px 12px; }
  .enr-badge { margin-inline-start: 4px; }
}
.enr-cand > .row { flex-wrap: wrap; }
.enr-cand > .row > .badge { order: 3; margin-inline-start: 52px; }
@media (min-width: 601px) { .enr-cand > .row > .badge { order: 0; margin-inline-start: 0; } }

.enr-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; vertical-align: middle; border: 1px solid var(--border); }

/* ---------- Inline own ratings in lists (owner-private) ---------- */
.my-stars { flex: none; display: inline-flex; align-items: center; margin-inline-start: 8px; }
.my-stars .stars button { width: 20px; height: 20px; }
.my-stars .stars button svg { width: 15px; height: 15px; }
.not-mine { flex: none; font-size: 12px; color: var(--text-3); white-space: nowrap; margin-inline-start: 8px; }
.list-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.seg.seg-sm button { height: 26px; padding: 0 9px; font-size: 12.5px; }
.start-circle-bar { margin: 0 0 12px; }
.start-circle-bar .btn { max-width: 100%; }
.cmdk-item { cursor: pointer; }
.cmdk-item .my-stars { margin-inline-start: 4px; }
@media (max-width: 700px) {
  .org-li-r .stars-wrap { display: inline-flex; }
  .org-li-r .when, .org-li-r .why { display: none; }
  .my-stars .stars button, .org-li-r .stars button { width: 18px; height: 22px; }
  .my-stars .stars button svg, .org-li-r .stars button svg { width: 13px; height: 13px; }
  .my-stars .stars button .emo, .org-li-r .stars button .emo { font-size: 13px; }
  .not-mine { display: none; }
}

/* ---------- Invites ---------- */
.inv-steps { display: flex; gap: 6px; margin-bottom: 18px; }
.inv-steps i { height: 4px; flex: 1; border-radius: 4px; background: var(--surface-3); }
.inv-steps i.on { background: var(--accent); }
.inv-form textarea.input { height: auto; min-height: 64px; padding-top: 9px; padding-bottom: 9px; resize: vertical; line-height: 1.45; }
.inv-form .hint.bad { color: var(--bad); }
.inv-preview { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: 13px; color: var(--text-2); line-height: 1.45; }
.inv-preview svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.inv-focus { margin-bottom: 14px; }
.inv-li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.inv-li:last-child { border-bottom: 0; }
.inv-li .grow { min-width: 0; }
.inv-li small { display: block; font-size: 12px; color: var(--text-3); }
.inv-li .btn { flex: none; }
.welcome-card { padding: 24px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: radial-gradient(600px 220px at 0% 0%, var(--accent-soft), transparent 70%), var(--surface); }
.welcome-card h2 { font-family: var(--font-display); font-size: 28px; font-weight: 450; letter-spacing: -0.02em; line-height: 1.2; }
.welcome-card .lead { color: var(--text-2); font-size: 15px; margin-top: 8px; max-width: 62ch; }
.welcome-card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.welcome-steps { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.welcome-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; color: var(--text-2); }
.welcome-steps li b { color: var(--text); display: block; font-weight: 600; }
.welcome-steps .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 13px; }
.focus-rate-card .card-bd { display: flex; flex-direction: column; gap: 10px; }
.focus-rate-card .x { margin-inline-start: auto; }
@media (max-width: 600px) { .welcome-card { padding: 18px; } .welcome-card h2 { font-size: 23px; } }
.p-hero .actions .start-circle-bar { margin: 0; }

/* ---------- Asks (024): "Can you talk to Jim about this?" ---------- */
.ask-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 16px; }
.ask-card.flash { animation: askFlash 1.6s var(--ease); }
@keyframes askFlash { 0%, 40% { box-shadow: var(--glow-gold); } 100% { box-shadow: none; } }
.ask-hd { display: flex; align-items: flex-start; gap: 12px; }
.ask-q { font-size: 15px; line-height: 1.45; }
.ask-hd .meta { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.ask-badge { flex: none; }
.ask-badge[data-s="asked"] { background: var(--accent-soft); color: var(--accent-ink); }
.ask-badge[data-s="on_it"] { background: var(--blue-soft); color: var(--link); }
.ask-badge[data-s="shared"], .ask-badge[data-s="done"] { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.ask-badge[data-s="declined"], .ask-badge[data-s="withdrawn"] { background: var(--surface-3); color: var(--text-3); }
.ask-card .msg { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); color: var(--text-2); font-size: 14px; line-height: 1.55; border-inline-start: 3px solid var(--accent); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); }
.ask-hint svg { margin-top: 2px; color: var(--accent-ink); }
.ask-note { font-size: 14px; color: var(--text-2); }
.ask-tiny { font-size: 12.5px; }
.ask-foot { font-size: 13px; text-align: center; display: flex; gap: 6px; align-items: center; justify-content: center; }
.linklike { color: var(--link); font: inherit; padding: 0; background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ask-pdf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-elev); }
.ask-pdf > svg { color: var(--bad); }
.ask-pdf .nm { display: block; font-weight: 580; color: var(--text); font-size: 14px; }
.ask-pdf small { display: block; font-size: 12.5px; color: var(--text-3); }
/* helper: pick people (open asks) */
.ask-pick { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-elev); }
.ask-pick-hd { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.ask-search { position: relative; display: block; }
.ask-search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-3); pointer-events: none; }
.ask-search .input { padding-inline-start: 32px; width: 100%; }
.ask-cands { max-height: 340px; overflow: auto; margin: 0 -4px; padding: 0 4px; }
.ask-cand { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 10px; cursor: pointer; }
.ask-cand:hover { background: var(--surface-2); }
.ask-cand input { width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.ask-cand b { display: block; font-size: 14px; font-weight: 580; } .ask-cand small { display: block; font-size: 12.5px; color: var(--text-3); }
.ask-cand.hinted { background: var(--accent-soft); }
.ask-cand-r { flex: none; }
.ask-pick-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
/* helper: share rows */
.ask-items { display: flex; flex-direction: column; gap: 10px; }
.ask-items-hd { display: flex; justify-content: space-between; font-size: 14px; }
.ask-item { border: 1px solid var(--border); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.ask-item.is-sent { background: color-mix(in srgb, var(--good) 5%, var(--surface)); border-color: color-mix(in srgb, var(--good) 30%, var(--border)); }
.ask-item-hd { display: flex; align-items: center; gap: 10px; }
.ask-item-hd b { display: block; font-size: 14.5px; font-weight: 600; } .ask-item-hd small { display: block; font-size: 12.5px; color: var(--text-3); }
.ask-sent { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--good); flex: none; }
.ask-msg summary { cursor: pointer; font-size: 13px; font-weight: 550; color: var(--text-2); list-style: none; }
.ask-msg summary::-webkit-details-marker { display: none; }
.ask-msg[open] summary .dim { display: none; }
.ask-msg .textarea { margin-top: 8px; min-height: 120px; font-size: 14px; }
.ask-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.btn-share { --h: 42px; height: var(--h); justify-content: center; gap: 7px; border-radius: 11px; font-size: 13.5px; font-weight: 600; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); text-decoration: none; padding: 0 10px; }
.btn-share:hover { border-color: var(--border-strong); background: var(--surface-3); }
.btn-share.wa svg { color: #25D366; } .btn-share.sms svg { color: #34C759; } .btn-share.mail svg { color: var(--accent-ink); }
.ask-mark { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 13px; flex-wrap: wrap; }
.ask-mark.nudge { justify-content: space-between; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); }
.ask-mark.nudge > span { color: var(--accent-ink); font-weight: 600; }
.ask-ft { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--border); padding-top: 12px; }
/* requester: status steps */
.ask-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding: 0; counter-reset: s; }
.ask-steps li { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-3); }
.ask-steps i { height: 4px; border-radius: 4px; background: var(--surface-3); }
.ask-steps li.done i { background: var(--good); } .ask-steps li.cur i { background: var(--accent); }
.ask-steps li.done span, .ask-steps li.cur span { color: var(--text); font-weight: 580; }
.ask-shared { display: flex; flex-direction: column; gap: 8px; }
.ask-shared .chip small { margin-inline-start: 2px; }
/* requester: entry points */
.ask-mini { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: var(--r-full); font-size: 12.5px; font-weight: 600; background: var(--accent-soft); color: var(--accent-ink); flex: none; cursor: pointer; white-space: nowrap; }
.ask-mini:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.ask-mini svg { width: 14px; height: 14px; }
.start-circle-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.member-li .ask-open-btn { flex: none; }
.ask-modal .form-err { color: var(--bad); font-size: 13.5px; min-height: 0; }
.ask-modal .form-err:empty { display: none; }
.ask-helpers { display: flex; flex-direction: column; gap: 8px; }
.ask-helpers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); max-height: 220px; overflow: auto; }
.ask-helper { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); }
.ask-helper:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ask-helper input { accent-color: var(--accent); }
.ask-helper b { font-weight: 580; font-size: 14px; display: block; } .ask-helper small { display: block; font-size: 12px; color: var(--text-3); }
.ask-helper .band-word { font-size: 12.5px; width: 52px; }
.ask-one { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; }
.ask-drop { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px dashed var(--border-strong); border-radius: 12px; cursor: pointer; }
.ask-drop:hover, .ask-drop:focus-within { border-color: var(--accent); }
.ask-drop > svg { color: var(--accent-ink); }
.ask-drop b { display: block; font-size: 14px; font-weight: 580; overflow-wrap: anywhere; } .ask-drop small { display: block; font-size: 12.5px; color: var(--text-3); }
.ask-drop small.bad { color: var(--bad); }
.ask-modal .modal-ft .btn-primary { min-width: 0; max-width: 100%; }
.ask-modal code { font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.ask-focus .focus-ed { gap: 12px; }
@media (max-width: 600px) {
  .ask-card { padding: 14px; gap: 12px; }
  .ask-hd .avatar { --s: 36px; }
  .ask-share { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-share .btn-share:last-child:nth-child(odd) { grid-column: span 2; }
  .ask-steps { font-size: 11.5px; }
  .ask-pdf { flex-wrap: wrap; }
  .asks-page .page-hd .seg { width: 100%; } .asks-page .page-hd .seg button { flex: 1; justify-content: center; }
  .ask-helpers-grid { grid-template-columns: minmax(0, 1fr); }
  .member-li .ask-open-btn span { display: none; }
}

/* ---------- Invites over WhatsApp / iMessage, group link ---------- */
.phone-row { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 8px; }
.inv-tabs { margin-bottom: 16px; }
.inv-tabs button[data-itab="msg"] svg { color: #25D366; }
.inv-sec { padding: 14px 0 16px; border-bottom: 1px solid var(--border); }
.inv-sec:first-child { padding-top: 0; }
.inv-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.inv-sec h4 { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 620; margin: 0 0 4px; }
.inv-sec h4 svg { width: 16px; height: 16px; color: var(--accent-ink); }
.inv-sec > p { font-size: 13px; color: var(--text-2); margin: 0 0 12px; line-height: 1.45; }
.pi-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 10px; }
.pi-ready { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); margin: 6px 0 10px; }
.pi-ready svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); }
.share-block .share-text { height: auto; min-height: 66px; padding-top: 9px; padding-bottom: 9px; resize: vertical; line-height: 1.45; font-size: 14px; }
.inv-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
.inv-share .btn-share { min-width: 0; white-space: nowrap; }
.inv-share .btn-share svg { width: 17px; height: 17px; flex: none; }
.inv-ctas { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-ctas .btn svg { width: 15px; height: 15px; }
.inv-ctas [data-invite="msg"] svg { color: #fff; }
.gl-share > summary { list-style: none; display: inline-flex; }
.gl-share > summary::-webkit-details-marker { display: none; }
.gl-share > summary svg { color: #25D366; }
@media (max-width: 560px) {
  .pi-grid { grid-template-columns: 1fr; }
  .inv-share { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-ctas .btn { flex: 1; justify-content: center; }
}

/* ---------- Company workspace console (#/workspace) + "What I share" (Settings) ---------- */
.ws-sub { color: var(--text-2); margin-inline-start: 8px; }
.ws-page .page-hd .sub { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.ws-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ws-stats .stat:hover { transform: none; }
.ws-of { font-size: 15px; font-weight: 500; color: var(--text-3); letter-spacing: 0; }
.ws-v { font-size: 22px !important; }
.ws-small { font-size: 12.5px; color: var(--text-3); margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-warn { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 12px; margin-bottom: 10px; font-size: 14px;
  background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.ws-warn svg { color: var(--warn); }
.ws-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 112px minmax(0, 1.1fr) minmax(0, .9fr) 92px; gap: 14px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.ws-row:last-child { border-bottom: 0; }
.ws-row.ws-head { height: 40px; padding-top: 0; padding-bottom: 0; }
.ws-row b { font-size: 14px; font-weight: 580; display: block; }
.ws-row small, .ws-cell small { display: block; font-size: 12px; color: var(--text-3); }
.ws-row small svg { display: inline; vertical-align: -1px; }
.ws-act { text-align: end; }
.ws-dom { padding: 12px 0; border-bottom: 1px solid var(--border); }
.ws-dom:first-child { padding-top: 0; }
.ws-txt { margin-top: 10px; padding: 12px; border-radius: 10px; background: var(--bg-elev); border: 1px solid var(--border); display: grid; gap: 6px; }
.ws-kv { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.ws-kv span { color: var(--text-3); font-size: 12px; font-weight: 600; }
.ws-kv code { font-family: var(--font-mono); font-size: 12.5px; background: var(--surface-2); padding: 4px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-err { font-size: 12px; color: var(--bad); }
.ws-plans { gap: 12px; }
.ws-plan { padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elev); }
.ws-price { font-size: 20px; font-weight: 650; letter-spacing: -0.02em; } .ws-price small { font-size: 12px; color: var(--text-3); font-weight: 500; margin-inline-start: 2px; }
.ws-bullets { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.ws-bullets li { display: flex; gap: 8px; } .ws-bullets svg { color: var(--good); margin-top: 3px; }
.ws-create h3 { font-size: 18px; font-weight: 620; margin-bottom: 8px; } .ws-create p { line-height: 1.6; }
.share-li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.share-li:last-child { border-bottom: 0; }
.share-li b { font-size: 14px; font-weight: 560; display: block; } .share-li small { font-size: 12.5px; color: var(--text-3); display: block; }
@media (max-width: 1100px) { .ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-stats > .stat:last-child { grid-column: auto; } }
@media (max-width: 760px) {
  .ws-row.ws-head { display: none; }
  .ws-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who role" "via act" "last act"; row-gap: 6px; padding: 12px 14px; }
  .ws-row > :nth-child(1) { grid-area: who; } .ws-row > :nth-child(2) { grid-area: role; justify-self: end; }
  .ws-row > :nth-child(3) { grid-area: via; } .ws-row > :nth-child(4) { grid-area: last; } .ws-row > :nth-child(5) { grid-area: act; align-self: center; }
  .ws-cell { font-size: 12.5px; color: var(--text-2); display: flex; gap: 6px; flex-wrap: wrap; }
  .ws-cell::before { content: attr(data-label) ":"; color: var(--text-3); }
  .ws-cell small { display: inline; }
}
@media (max-width: 600px) { .ws-stats .stat .v { font-size: 24px; } .ws-v { font-size: 18px !important; } }
@media (max-width: 600px) { .ws-page .toggle-row { flex-wrap: wrap; } .ws-page .toggle-row > div:first-child { flex: 1 1 220px; } }
/* workspace tabs + connectors (enterprise step 2) */
.ws-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 6px 0 20px; overflow-x: auto; scrollbar-width: none; }
.ws-tabs button { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; font-size: 14px; font-weight: 560; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.ws-tabs button:hover { color: var(--text); }
.ws-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.cx-intro { font-size: 14px; line-height: 1.6; max-width: 820px; margin-bottom: 16px; }
.cx-grid { gap: 14px; align-items: start; }
.cx { padding: 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cx-hd { display: flex; gap: 12px; align-items: center; }
.cx-hd h3 { font-size: 16px; font-weight: 620; }
.cx-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); flex: none; }
.cx-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12.5px; margin-top: 3px; }
.cx-reads { font-size: 13.5px; gap: 8px; }
.cx-note { font-size: 12.5px; line-height: 1.5; }
.cx-err { margin: 0; font-size: 13px; align-items: flex-start; } .cx-err svg { margin-top: 2px; }
.cx-err span { overflow-wrap: anywhere; }
.cx-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cx-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--border); min-width: 0; }
.cx-stats b { display: block; font-size: 20px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cx-stats span { display: block; font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-kv { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 10px; font-size: 13px; margin: 0; }
.cx-kv dt { color: var(--text-3); } .cx-kv dd { margin: 0; color: var(--text-2); min-width: 0; }
.cx-cust { border-top: 1px solid var(--border); padding-top: 12px; }
.cx-cust .label { margin-bottom: 6px; }
.cx-cust-li { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; min-width: 0; }
.cx-cust-li b { font-weight: 580; }
.cx-cust-li .num { white-space: nowrap; font-size: 12px; }
.cx-actions { border-top: 1px solid var(--border); padding-top: 12px; }
.cx-danger { color: var(--bad) !important; }
.cx-dir { margin-top: 12px; }
.cx-dir-hd { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.cx-dir-li { display: flex; gap: 10px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--border); cursor: pointer; min-width: 0; }
.cx-dir-li:last-child { border-bottom: 0; }
.cx-dir-li b { font-size: 14px; font-weight: 560; display: block; } .cx-dir-li small { display: block; font-size: 12.5px; color: var(--text-3); }
.cx-mail { font-size: 12.5px; max-width: 40%; }
.cx-check { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-elev); }
.cx-check.ok svg { color: var(--good); } .cx-check.bad svg { color: var(--bad); margin-top: 2px; }
.cx-check small { display: block; color: var(--text-2); font-size: 12.5px; margin-top: 2px; }
.cx-check code { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-3); overflow-wrap: anywhere; }
.cx-file { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 12px; cursor: pointer; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.cx-file:hover { border-color: var(--accent); color: var(--text); }
.cx-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cx-file > span { display: flex; gap: 8px; align-items: center; min-width: 0; } .cx-file #gkeyname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 10px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.cx-steps b { color: var(--text); font-weight: 600; }
.cx-scopes { display: flex; gap: 10px; align-items: flex-start; margin-top: 6px; }
.cx-scopes code { flex: 1; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; }
.spinner-xs { width: 12px; height: 12px; border-width: 2px; display: inline-block; vertical-align: -2px; }
.co-card .card-bd { display: flex; flex-direction: column; gap: 10px; }
.co-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-person .kb-dept { color: var(--text-3); font-weight: 500; }
@media (max-width: 1100px) { .cx-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .cx { padding: 14px; }
  .cx-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx-kv { grid-template-columns: 80px minmax(0, 1fr); }
  .cx-cust-li { flex-wrap: wrap; row-gap: 0; } .cx-cust-li .grow { flex-basis: 100%; }
  .cx-dir-hd, .cx-dir-li { padding-inline-start: 14px; padding-inline-end: 14px; }
  .cx-mail { display: none; }
  .cx-scopes { flex-direction: column; } .cx-scopes .btn { align-self: flex-start; }
}


/* Person page: "Remove photo" on the avatar (owner only) */
.av-wrap { position: relative; flex: none; }
.av-remove { position: absolute; inset-inline-end: -4px; top: -4px; width: 26px; height: 26px; border-radius: 50%; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; opacity: 0; transition: opacity .15s, color .15s;
  box-shadow: 0 1px 4px rgb(0 0 0 / .12); }
.av-remove svg { width: 14px; height: 14px; }
.av-wrap:hover .av-remove, .av-remove:focus-visible { opacity: 1; }
.av-remove:hover { color: var(--bad); }
@media (hover: none) { .av-remove { opacity: 1; } }

/* Person: retired old work emails (collapsed line under the contact details) */
.old-emails { margin-top: 10px; font-size: 12.5px; }
.old-emails > summary { cursor: pointer; color: var(--text-3); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.old-emails > summary::-webkit-details-marker { display: none; }
.old-emails > summary::before { content: ""; width: 6px; height: 6px; border-inline-end: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform .2s var(--ease); }
.old-emails[open] > summary::before { transform: rotate(45deg); }
.old-emails > summary:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
.old-emails > p { margin: 6px 0 4px; }
.old-email { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 4px 0; border-top: 1px solid var(--border); }
.old-email > .truncate { min-width: 0; max-width: 100%; }
.old-email > .btn { margin-inline-start: auto; padding: 2px 8px; font-size: 12px; }

/* language switch next to the theme button (sidebar footer, phone top bar) */
.lang-toggle .flag { width: 22px; height: 16px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); display: block; }

/* person card career rows: a long title (one truncated line) must not widen the grid track past the card (RTL showed it) */
.career > li { min-width: 0; }
.career-li > .btn { flex: none; }

/* swipe left to archive (js/swipe.js) */
.swipe-bg { position: absolute; inset-inline: 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding-inline-end: 18px; background: color-mix(in srgb, var(--bad, #e5484d) 55%, transparent); color: #fff; font-weight: 600;
  border-radius: 12px; pointer-events: none; transition: background .15s; }
.swipe-bg.armed { background: var(--bad, #e5484d); }
.swipe-bg svg { width: 18px; height: 18px; }
.swiping { position: relative; z-index: 1; background: var(--surface, inherit); touch-action: pan-y; }
.swiped { display: flex; align-items: center; gap: 10px; opacity: .85; }
.swiped svg { width: 16px; height: 16px; vertical-align: -3px; }

/* Service providers (062): business card, private rating, circle list (js/views/provider-card.js, providers.js) */
.pv-card .pv-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 16px; }
.pv-trades { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-desc { font-size: 13.5px; margin: 8px 0 0; }
.pv-rate-hd { display: flex; gap: 8px; align-items: center; }
.pv-rate { display: grid; gap: 6px; margin-top: 8px; }
.pv-rate-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pv-rate-row .lbl { font-size: 13.5px; color: var(--text-2); }
.pv-rate .stars button { width: 26px; height: 26px; }
.pv-note { font-size: 12.5px; margin: 4px 0 0; }
.pv-avg button { width: 16px; height: 16px; cursor: default; }
.pv-avg button svg { width: 13px; height: 13px; }
.pv-agg { display: inline-flex; align-items: center; gap: 6px; }
.pv-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 6px; font-size: 13.5px; }
.pv-row-name { color: inherit; text-decoration: none; font-size: 15.5px; }
.pv-dims { margin-top: 6px; font-size: 13px; }
.pv-dims summary { cursor: pointer; }
.pv-dim { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 2px 0; }
.pv-search { margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.pv-search .label { margin: 4px 0; }
.pv-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pv-filters .search { flex: 1 1 220px; }
.pv-trade-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pv-trade { cursor: pointer; gap: 6px; }
.pv-trade input { margin: 0; }
.pv-status { margin: 0 0 8px; font-size: 14px; }
.pv-status.good { color: var(--good, #1baf7a); }
.pv-status svg { width: 15px; height: 15px; vertical-align: -3px; }
.pv-upd { color: inherit; text-decoration: none; font-size: 14px; padding: 4px 0; }
.pv-upd:hover { text-decoration: underline; }

/* ---------- Contacts file import (views/contact-import.js) + Recently deleted ---------- */
.toast-act { margin-inline-start: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--bg) 40%, transparent); background: transparent; color: var(--bg); font: inherit; font-weight: 650; cursor: pointer; }
.toast-act:hover { background: color-mix(in srgb, var(--bg) 15%, transparent); }
.imp-drop { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 18px; border: 2px dashed var(--border-strong); border-radius: 16px; background: var(--surface-2); text-align: center; cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); }
.imp-drop > svg { width: 30px; height: 30px; color: var(--accent); }
.imp-drop.over, .imp-drop:hover, .imp-drop:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)); outline: none; }
.imp-hints { font-size: 12.5px; margin: 14px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; }
.imp-err { display: flex; gap: 8px; align-items: flex-start; color: var(--bad); font-size: 13.5px; margin: 10px 0 0; }
.imp-err svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.imp-stage { display: flex; flex-direction: column; gap: 10px; }
.imp-stage-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.imp-bar { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.imp-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--link)); transition: width .5s var(--ease-out); background-size: 200% 100%; animation: impShine 2.2s linear infinite; }
.imp-hist .imp-bar { height: 6px; margin-top: 6px; }
@keyframes impShine { from { background-position: 0 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .imp-bar i { animation: none; transition: none; } }
.imp-file { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.imp-file svg { width: 15px; height: 15px; flex: none; }
.imp-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 12px 0; }
.imp-count { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; }
.imp-count b { font-size: 20px; }
.imp-count span { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.imp-count.good b { color: var(--good); } .imp-count.bad b { color: var(--bad); } .imp-count.warn b { color: var(--warn); }
.imp-prev-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.imp-prev-hd .badge svg { width: 12px; height: 12px; }
.imp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; max-width: 100%; }
.imp-table { border-collapse: collapse; font-size: 13px; min-width: 100%; }
.imp-table th, .imp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: start; vertical-align: top; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.imp-table th { background: var(--surface-2); position: sticky; top: 0; }
.imp-table th .select { min-width: 130px; margin-top: 6px; }
.imp-th { font-weight: 650; font-size: 12.5px; color: var(--text-2); }
.imp-table tbody tr:last-child td { border-bottom: 0; }
.imp-opt { margin-top: 12px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.imp-done { display: flex; gap: 12px; align-items: flex-start; }
.imp-done > svg { width: 26px; height: 26px; flex: none; color: var(--good); }
.imp-done.bad > svg { color: var(--bad); }
.imp-sum { margin: 0 0 12px; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14px; }
.imp-review { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.imp-rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; max-height: 220px; overflow: auto; }
.imp-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.imp-hist li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.imp-hist li:last-child { border-bottom: 0; }
.imp-hist li b { display: flex; align-items: center; gap: 6px; }
.imp-hist li b svg { width: 15px; height: 15px; flex: none; }
.del-list li.restored { opacity: .65; }
@media (max-width: 600px) {
  .imp-hist li > .row { width: 100%; justify-content: flex-start !important; }
  .imp-counts { grid-template-columns: repeat(2, 1fr); }
}

/* Eno’niva member: the small "e" mark before the name (person page) */
.p-name .member-mark { display: inline-flex; vertical-align: middle; margin-inline-end: 10px; position: relative; top: -2px; }
.p-name .member-mark svg { display: block; }

/* Company autofill (company-suggest.js) */
.co-suggest { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 30; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.35); max-height: 280px; overflow: auto; }
.co-opt { display: flex; gap: 10px; align-items: center; width: 100%; text-align: start; background: none; border: 0; color: var(--text); padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer; }
.co-opt .dim { font-size: 12.5px; }
.co-opt:hover, .co-opt[aria-selected="true"] { background: var(--surface-3); }

/* "Recently viewed" in the sidebar */
.recent-nav .recent-li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.recent-nav .recent-li .avatar { flex: none; }

/* "Add to my contacts" on circle card rows */
.card-row .add-mine { flex: none; margin-inline-start: 8px; white-space: nowrap; }
.pi-grid .co-suggest { min-width: 340px; }

/* Circle invites waiting for me (Home, server 069): floating cards in the bottom corner on desktop, a full-width banner
   at the top of Home on phones (the bottom nav and toasts own the bottom edge there) */
.inv-home { position: fixed; z-index: 900; inset-inline-end: 24px; bottom: 24px; width: min(380px, calc(100vw - 48px)); display: flex; flex-direction: column; gap: 10px; }
.inv-float { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: slideUp .28s var(--ease-out); }
.inv-float .avatar { flex: none; }
.inv-float-bd { min-width: 0; }
.inv-float-line { font-size: 14.5px; line-height: 1.4; color: var(--text); }
.inv-float-line b { font-weight: 600; }
.inv-float-meta { font-size: 13px; color: var(--text-3); margin-top: 2px; }
.inv-float-act { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 860px) {
  .inv-home { position: static; width: auto; margin-bottom: 16px; }
  .inv-float { box-shadow: var(--shadow-sm); border-color: var(--accent-soft); background: linear-gradient(0deg, var(--accent-soft), var(--accent-soft)), var(--surface); animation: none; }
}

/* "New version available" bar (app.js watchVersion) */
.new-version { position: fixed; z-index: 90; inset-inline: 0; bottom: 16px; margin-inline: auto; width: max-content; max-width: calc(100% - 32px); display: flex; gap: 14px; align-items: center; padding: 10px 12px 10px 18px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.35); font-size: 14px; }

/* Public records card: a real header (title · status · Search records), never clipped when closed */
.pr-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pr-card > summary::-webkit-details-marker { display: none; }
.pr-card:not([open]) > summary { border-bottom: 0; padding-bottom: 18px; }
.pr-card .pr-hd-r { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }

/* Circle "Who do we know?" search (views/circle-search.js): filters, rows with actions, multi-select bar */
.cs-filters .pop-wrap { flex: none; }
.cs-filters .chip .truncate { max-width: 160px; }
.cs-filters .menu-pop { inset-inline-end: auto; inset-inline-start: 0; }
.cs-pop { width: 320px; }
.cs-pop-search { position: relative; display: block; margin: 2px 2px 6px; }
.cs-pop-search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.cs-pop-search .input { padding-inline-start: 30px; width: 100%; }
.cs-pop button[aria-selected="true"] { background: var(--blue-soft); }
.cs-pop .num { font-size: 12px; }
.cs-member { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; cursor: pointer; font-size: 13.5px; }
.cs-member:hover { background: var(--surface-2); }
.cs-member input { flex: none; }
.cs-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 2px 0 6px; font-size: 13px; border-bottom: 1px solid var(--border); }
.cs-head .cs-sphere { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; }
.cs-check { display: inline-flex; align-items: center; gap: 8px; flex: none; cursor: pointer; }
.cs-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.cs-all { color: var(--text-2); }
.cs-row { flex-wrap: wrap; row-gap: 8px; }
.cs-row.sel { background: color-mix(in srgb, var(--blue-soft) 55%, transparent); margin-inline: -8px; padding-inline: 8px; border-radius: 10px; }
.cs-who { display: flex; align-items: center; gap: 12px; flex: 1 1 260px; min-width: 0; color: inherit; text-decoration: none; }
.cs-who:hover .nm { text-decoration: underline; }
.cs-who .nm, .cs-who .meta { display: block; }
.cs-mine { font-size: 11px; vertical-align: 1px; }
.cs-kb { margin-top: 0; align-items: center; flex: 0 1 auto; }
.cs-kb-l { font-size: 12.5px; }
.cs-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: none; margin-inline-start: auto; }
.cs-acts .add-mine { margin-inline-start: 0; }
.cs-ask { white-space: nowrap; }
.cs-menu { width: 260px; }
.cs-band { font-size: 12px; }
.cs-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; padding: 10px 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); }
.cs-bar > b { margin-inline-end: auto; font-size: 13.5px; }
@media (max-width: 600px) {
  .cs-kb { flex: 1 1 100%; padding-inline-start: 28px; }
  .cs-acts { flex: 1 1 100%; padding-inline-start: 28px; margin-inline-start: 0; }
  .cs-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .cs-bar > b { flex: 1 1 100%; }
}
/* several person asks in one step (ask-flow.js askPeopleBatch) */
.ab-groups { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.ab-li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ab-li:last-child { border-bottom: 0; }
.ab-li small { display: block; color: var(--text-3); font-size: 12px; }
.ab-via { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; }
.ab-via .select { height: 32px; }
.ab-res { margin: 6px 0 0; padding-inline-start: 18px; font-size: 13.5px; display: flex; flex-direction: column; gap: 4px; }

/* Contact details in the person hero (phones / emails with their call · WhatsApp · email · copy actions) */
.hero-contact { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 12px; }
.hero-contact .hc-row { min-width: 0; max-width: 100%; }
/* the value and its buttons stay on one line; a long email truncates instead of pushing the buttons below */
.hero-contact .ct-row { flex-wrap: nowrap; gap: 8px; }
.hero-contact .ct-row + .ct-row { margin-top: 0; }
.hero-contact .ct-val { font-size: 15px; color: var(--text); white-space: nowrap; flex: none; max-width: min(420px, 100%); overflow: hidden; text-overflow: ellipsis; }
.ct-lead { display: inline-flex; align-items: center; gap: 8px; }
.ct-lead svg { width: 17px; height: 17px; flex: none; color: var(--text-2); }
.ct-lead:hover svg { color: var(--accent-ink); }
.hero-contact .ct-acts { opacity: .85; }

/* circle network search: people not drawn on the map (weaker ties) */
.cnet-offmap { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.cnet-offmap:hover { background: var(--surface-3); }
/* Person lists (views/lists.js, list-picker.js) */
.list-li { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.list-li:last-child { border-bottom: 0; }
.list-li:hover b { text-decoration: underline; }
.list-li b { display: block; font-weight: 580; font-size: 14.5px; }
.list-li small { display: block; color: var(--text-3); font-size: 12.5px; }
.list-li > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.list-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.list-ic svg { width: 17px; height: 17px; }
.list-desc { margin-top: 6px; color: var(--text-2); font-size: 14px; max-width: 70ch; white-space: pre-wrap; }
.cs-note { color: var(--text-2); display: flex !important; align-items: center; gap: 4px; }
.ph-row .avatar { opacity: .6; }
.ph-row .nm { color: var(--text-2); }
.lp-list { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.lp-li { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); text-align: start; color: var(--text); background: var(--surface); }
.lp-li:hover { border-color: var(--border-strong); background: var(--surface-2); }
.lp-li > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.lp-li b { display: block; font-weight: 560; font-size: 14px; } .lp-li small { display: block; color: var(--text-3); font-size: 12px; }
.lp-new { display: flex; gap: 8px; } .lp-new .input { flex: 1; min-width: 0; }
.sh-opts { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.sh-opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 9px; cursor: pointer; font-size: 14px; }
.sh-opt:hover { background: var(--surface-2); }
.sh-opt .num { font-size: 12px; }
.sh-search { position: relative; display: block; margin-bottom: 6px; }
.sh-search svg { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.sh-search .input { padding-inline-start: 30px; width: 100%; }
.list-share-li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.list-share-li a { color: inherit; text-decoration: none; } .list-share-li a:hover b { text-decoration: underline; }
.menu-pop a.mp-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 9px; color: var(--text); text-decoration: none; }
.menu-pop a.mp-link:hover { background: var(--surface-2); }
.menu-pop a.mp-link > svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
/* People select mode */
.p-check { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); display: inline-grid; place-items: center; flex: none; color: var(--accent-ink); }
.p-check svg { width: 14px; height: 14px; }
.prow.sel { background: color-mix(in srgb, var(--blue-soft) 55%, transparent); }
.prow.sel .p-check { background: var(--accent-soft); border-color: var(--accent); }
.p-bar { position: fixed; bottom: 16px; inset-inline: 16px; max-width: 760px; margin: 0 auto; z-index: 40; }
@media (min-width: 861px) { .p-bar { inset-inline-start: calc(248px + 24px); } }
@media (max-width: 860px) { .p-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 860px) { .cs-bar { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }

/* a circle's lists in the sidebar, under the circle */
.nav a.sub.sub-list { padding-inline-start: 52px; font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.nav .sub-list svg { width: 14px; height: 14px; flex: none; opacity: .8; }

/* +/− before a circle that has lists (sidebar) */
.nav .cl-row { position: relative; display: flex; flex-direction: column; }
.nav .cl-tog { position: absolute; inset-inline-start: 6px; top: 7px; width: 18px; height: 18px; border: 0; border-radius: 5px; background: transparent; color: var(--text-3); font: 600 14px/18px var(--font-ui); cursor: pointer; padding: 0; z-index: 1; }
.nav .cl-tog:hover { background: var(--surface-3); color: var(--text); }

/* room for the +/− column when any circle has lists: every circle shifts the same, dots stay aligned */
.nav.nav-tog a.circle-link { padding-inline-start: 30px; }

/* circle description under the name (circle page header) */
.circle-desc { margin: 6px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.5; white-space: pre-line; max-width: 760px; }
.circle-desc-edit { margin-top: 6px; padding-inline: 6px; }

/* contact permission was left unticked: a banner that stays until closed (connected-accounts.js) */
.scope-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: color-mix(in srgb, var(--warn, #e0a33a) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn, #e0a33a) 45%, transparent); }
.scope-banner > svg { width: 20px; height: 20px; flex: none; color: var(--warn, #e0a33a); margin-top: 2px; }
.scope-banner p { margin: 4px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }

/* People rows: delete (hide) at the start of the row; quiet until hover on desktop */
.prow .p-del { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); cursor: pointer; padding: 0; opacity: .45; }
.prow .p-del svg { width: 15px; height: 15px; }
.prow:hover .p-del, .prow .p-del:focus-visible { opacity: 1; }
.prow .p-del:hover { background: color-mix(in srgb, var(--bad, #e5484d) 16%, transparent); color: var(--bad, #e5484d); }
@media (hover: none) { .prow .p-del { opacity: .8; } }
.p-b-delete:hover { color: var(--bad, #e5484d); }
/* a Hebrew description on an English page lines up with the title (left), still reads right-to-left */
:root:not([dir="rtl"]) .circle-desc { text-align: left; }
:root[dir="rtl"] .circle-desc { text-align: right; }

/* home header: Connect your AI + search */
.home-tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.home-search { min-width: 260px; justify-content: flex-start; color: var(--text-3); }
@media (max-width: 600px) { .home-tools { width: 100%; } .home-tools > * { flex: 1 1 auto; } .home-search { min-width: 0; } }
/* Connect your AI modal */
.ai-tabs { width: 100%; }
.ai-tabs button { flex: 1; justify-content: center; }
.ai-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; line-height: 1.45; }
.ai-ex { margin: 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--text-2); }

/* circle "Who do we know?": filters folded behind a sliders button (founder 2026-10-19) */
.cs-filters { flex-wrap: wrap; }
.cs-filters .search { max-width: none; }
.cs-ftog { position: relative; width: 38px; height: 38px; flex: none; }
.cs-ftog[aria-expanded="true"] { background: var(--blue-soft); border-color: var(--blue); }
.cs-fn { position: absolute; top: -6px; inset-inline-end: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gold); color: var(--navy, #061328); font-size: 11px; font-weight: 650; line-height: 18px; text-align: center; }
.cs-filters .cs-panel { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; margin: 0; padding: 12px; overflow: visible; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.cs-filters .cs-panel[hidden] { display: none; }
@media (max-width: 600px) { .cs-filters .cs-panel .select { flex: 1 1 140px; max-width: none; } }
/* circle page: Invite people + Group link beside the title, same height (founder 2026-10-19) */
#chd.has-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: start; margin-bottom: 20px; }
#chd.has-side > .back-link, #chd.has-side > .circle-hd { grid-column: 1; }
#chd.has-side > .circle-hd { margin-bottom: 0; }
.chd-side { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 320px); gap: 16px; }
.chd-side > .card { display: flex; flex-direction: column; margin: 0; }
.chd-side > .card > .card-bd { flex: 1; font-size: 13.5px; }
.chd-side .card-bd p { font-size: 13px !important; line-height: 1.45; }
.chd-side #invites { max-height: 76px; overflow: auto; }
@media (max-width: 1250px) {
  #chd.has-side { grid-template-columns: minmax(0, 1fr); }
  .chd-side { grid-column: 1; grid-row: auto; margin-top: 16px; grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; }
}
@media (max-width: 600px) { .chd-side { grid-template-columns: minmax(0, 1fr); } }
/* circle page: "Together you know…" folded small under the title */
.overlap.overlap-hd { padding: 0; margin-top: 12px; background: none; border: 0; border-radius: 0; }
.overlap-hd .big { font-family: inherit; font-size: 14.5px; font-weight: 450; letter-spacing: 0; line-height: 1.4; color: var(--text-2); margin: 0; }
.overlap-hd .big b { font-weight: 650; }
.overlap-hd > .row { margin-top: 6px !important; gap: 4px 14px !important; font-size: 13px !important; }
.overlap-hd > .row:last-child { margin-top: 10px !important; gap: 8px !important; }

/* "Bring your contacts" (bring-contacts.js): option tiles + the bar for members with no contacts yet */
.bring-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.bring-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); text-decoration: none; text-align: start; font: inherit; cursor: pointer; }
.bring-opt:hover { border-color: var(--border-strong, var(--border)); background: var(--surface); }
.bring-opt > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent-ink); }
.bring-opt b { display: block; font-size: 14.5px; }
.bring-opt small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-3); line-height: 1.4; }
.bring-opt.primary { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--surface-2)); }
.bring-note { font-size: 12.5px; margin: 10px 0 0; line-height: 1.45; }
.bring-bar { display: flex; gap: 12px; align-items: center; padding: 12px 14px; margin-bottom: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); font-size: 14px; color: var(--text-2); }
.bring-bar > svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
.bring-bar b { color: var(--text); }
@media (max-width: 600px) { .bring-grid { grid-template-columns: minmax(0, 1fr); } .bring-bar { flex-wrap: wrap; } .bring-bar .grow { flex-basis: calc(100% - 60px); } }

/* "Invite your friends to Karl Friends Circle" (friends-invite.js) */
.friends-card { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); }
.fc-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.fc-ic svg { width: 18px; height: 18px; }

/* upload window: "How to get your contacts file" (contact-import.js) */
.imp-how { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px; }
.imp-how-t { font-weight: 600; font-size: 14px; margin: 10px 0 4px; color: var(--text); }
.imp-how details { border-top: 1px solid var(--border); padding: 10px 0; }
.imp-how details:first-of-type { border-top: 0; }
.imp-how summary { cursor: pointer; font-size: 14px; font-weight: 550; color: var(--text); }
.imp-how ol { margin: 8px 0 2px; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); }

/* People: "No matches" drawn over the (empty) virtual list */
.vl-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }

/* Connect your AI: one row per assistant (ai-connect.js) */
.ai-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ai-row { padding: 12px 14px; border-top: 1px solid var(--border); }
.ai-row:first-child { border-top: 0; }
.ai-row-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-name { font-weight: 600; font-size: 14.5px; color: var(--text); }
.ai-row .btn svg { width: 13px; height: 13px; }
.ai-steps-inline { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.ai-addr { font-size: 12.5px; margin: 10px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ai-addr code { font-size: 12px; }

/* Home: "Your network" seniority × company size (network-worth.js) */
.worth-lead { margin: 0 0 12px; font-size: 15px; color: var(--text-2); }
.worth-lead b { color: var(--accent-ink); }
.worth-compare { margin: -4px 0 12px; display: grid; gap: 4px; font-size: 13.5px; color: var(--text-2); }
.worth-compare p { margin: 0; }
.worth-compare b { color: var(--accent-ink); }
.worth-scroll { overflow-x: auto; }
.worth-table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.worth-table th, .worth-table td { padding: 7px 8px; text-align: end; white-space: nowrap; border-top: 1px solid var(--border); }
.worth-table thead th { border-top: 0; color: var(--text-3); font-weight: 550; font-size: 12px; }
.worth-table tbody th { text-align: start; font-weight: 550; color: var(--text); }
.worth-table td { color: var(--text-2); }
.worth-table td.hot { color: var(--accent-ink); font-weight: 650; background: color-mix(in srgb, var(--gold) 10%, transparent); }
.worth-table tr.dim th, .worth-table tr.dim td { color: var(--text-3); }

/* person page: where a field came from (person.js srcTag) */
.src-tag { display: inline-block; margin-inline-start: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--text-3); background: color-mix(in srgb, var(--text-3) 12%, transparent); vertical-align: 2px; text-decoration: none; white-space: nowrap; }
a.src-tag:hover { color: var(--text-2); }
.chip .src-tag { margin-inline-start: 6px; vertical-align: 0; }
.li-says { font-size: 13px; margin-top: 2px; }

/* Manage page (views/manage.js) */
.manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.manage-tile { display: flex; gap: 14px; align-items: flex-start; color: inherit; text-decoration: none; transition: border-color .15s, background .15s; }
.manage-tile:hover { border-color: var(--accent); }
.manage-tile b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.manage-tile .dim { display: block; font-size: 13.5px; line-height: 1.45; }
.manage-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.manage-ic svg { width: 20px; height: 20px; }

/* Home: "Who do you want to reach?" (UI review 2026-10-21) */
.reach { margin-bottom: 20px; }
.reach h2 { font-family: var(--font-display); font-weight: 450; font-size: 22px; letter-spacing: -0.015em; margin-bottom: 12px; }
.reach-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.reach-row:focus-within { border-color: var(--accent); }
.reach-row > svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.reach-row input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); outline: none; padding: 8px 0; }
.reach .dim { font-size: 13px; margin-top: 10px; }
[dir="rtl"] .reach-row { padding: 6px 14px 6px 6px; }

/* Home for a brand-new member (no contacts yet): the "Getting started" checklist only (onboarding review 2026-10-22) */
.home-new .reach, .home-new #worth-card, .home-new .g-main, .home-new #li-banner, .home-new #quote-card, .home-new #friends-slot, .home-new [data-ai-connect] { display: none !important; }
.start-card { margin-bottom: 20px; }
.start-card h2 { font-family: var(--font-display); font-weight: 450; font-size: 22px; }
.start-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.start-li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.start-li b { display: block; font-size: 15px; }
.start-li small { display: block; color: var(--text-2); font-size: 13px; margin-top: 2px; }
.start-li .grow { min-width: 180px; }
.start-ck { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: grid; place-items: center; flex: none; }
.start-li.done .start-ck { background: var(--accent); border-color: var(--accent); color: #1A1405; }
.start-li.done .start-ck svg { width: 14px; height: 14px; }
.start-li.done b { color: var(--text-2); text-decoration: line-through; text-decoration-color: var(--text-3); }
/* "Bring your contacts": one recommended way for this device, the rest folded (onboarding review 2026-10-22) */
.bring-wrap { margin-top: 14px; display: grid; gap: 10px; }
.bring-rec { font-size: 13px; color: var(--text-2); margin: 0; }
.bring-wrap > .bring-opt.primary { border-color: var(--accent); }
.bring-more summary { cursor: pointer; font-size: 14px; color: var(--text-2); padding: 6px 0; }
.bring-more .bring-grid { margin-top: 6px; }
@media (max-width: 560px) { .bring-grid { grid-template-columns: minmax(0, 1fr); } }
/* the warm-intro example on "Getting started" */
.start-ex { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 16px; padding: 14px 8px; border-radius: 14px; border: 1px dashed var(--border); }
.start-ex > svg { width: 18px; height: 18px; color: var(--text-3); margin-top: 12px; flex: none; }
:root[dir="rtl"] .start-ex > svg, [dir="rtl"] .start-ex > svg { transform: scaleX(-1); }
.ex-node { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; max-width: 120px; }
.ex-node small { font-size: 12px; color: var(--text-2); line-height: 1.3; }
.ex-dot { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 650; color: #fff; }
.ex-dot.me { background: var(--accent); color: #1A1405; }
.ex-dot.anon { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); }
.ex-dot.anon svg { width: 20px; height: 20px; }
.ex-dot.target { background: #C26A4A; }
button.src-tag { border: 0; cursor: pointer; font-family: inherit; line-height: inherit; }
@media (hover: hover) and (pointer: fine) { button.src-tag:hover { color: var(--text); } }