/* ============================================================================================
   Watch — one feature, three views (Activity · Posts · Profiles) inside the dashboard shell.
   Every value here is a shell token (site/dashboard.html :root) or a multiple of 4. No new
   fonts, no new colours: --live (green) means strong fit, --warn (amber) means possible /
   attention, --blue means an interaction. The page stays white, the ink stays ink.
   ============================================================================================ */
#v-watch { --w-amber: #b45309; --w-amber-bg: #fdf4e7; --w-blue-bg: color-mix(in srgb, var(--blue) 10%, #fff); }

/* header: title, one-sentence lede, primary action on the right */
.w-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; }
.w-head h1 { margin: 0; font-size: var(--text-h1); font-weight: 500; letter-spacing: var(--track); color: var(--ink); }
.w-head .lede { margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted-fg); max-width: 60ch; line-height: 1.5; }
.w-head .w-cta { flex: none; display: flex; gap: 8px; align-items: center; padding-top: 2px; }

/* sub-navigation: Activity · Posts · Profiles */
.w-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.w-tab { height: 36px; padding: 0 12px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: inherit; font-size: var(--text-sm); color: var(--muted-fg); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.w-tab:hover { color: var(--ink); }
.w-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 500; }
.w-tab .cnt { font-family: var(--mono); font-size: var(--text-chip); color: var(--faint-fg); }
.w-tab[aria-selected="true"] .cnt { color: var(--muted-fg); }
.w-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--r-sm); }

/* stat cards: label, big number, one line of state */
.w-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.w-stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px 13px; min-width: 0; }
.w-stat .l { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--muted-fg); }
.w-stat .l svg { width: 14px; height: 14px; color: var(--faint-fg); flex: none; }
.w-stat .v { font-family: var(--mono); font-size: 26px; line-height: 1.15; margin-top: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.w-stat .v.txt { font-family: var(--font); font-size: var(--text-ui); font-weight: 500; margin-top: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-stat .s { font-size: var(--text-chip); color: var(--faint-fg); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-stat .s.pos { color: var(--live); }
@media (max-width: 1100px) { .w-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* toolbar: search + compact selects, all --pill-h, all related */
.w-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.w-bar .w-search { position: relative; flex: 1 1 220px; max-width: 320px; }
.w-bar .w-search svg { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--faint-fg); pointer-events: none; }
.w-bar .w-search input { margin: 0; height: var(--pill-h); width: 100%; padding: 0 10px 0 28px; border: 1px solid var(--input); border-radius: var(--r-md); font: inherit; font-size: var(--text-sm); background: var(--card); color: var(--ink); }
.w-bar .w-search input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.w-bar select { width: auto; flex: none; margin: 0; height: var(--pill-h); padding: 0 26px 0 10px; border: 1px solid var(--input); border-radius: var(--r-md); font: inherit; font-size: var(--text-sm); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e9099' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; appearance: none; color: var(--ink); cursor: pointer; }
.w-bar select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.w-bar select.on { border-color: var(--ink); }
.w-bar .w-sp { flex: 1; }
.w-bar .w-reset { height: var(--pill-h); padding: 0 8px; border: 0; background: none; font: inherit; font-size: var(--text-sm); color: var(--muted-fg); cursor: pointer; border-radius: var(--r-md); }
.w-bar .w-reset:hover { color: var(--ink); background: var(--accent); }
.w-bar .w-reset[hidden] { display: none !important; }
.w-seg { display: inline-flex; border: 1px solid var(--input); border-radius: var(--r-md); overflow: hidden; height: var(--pill-h); }
.w-seg button { height: 100%; padding: 0 10px; border: 0; background: var(--card); font: inherit; font-size: var(--text-sm); color: var(--muted-fg); cursor: pointer; }
.w-seg button + button { border-left: 1px solid var(--input); }
.w-seg button[aria-pressed="true"] { background: var(--accent); color: var(--ink); font-weight: 500; }

/* the list container: one bounded white panel */
.w-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; }
.w-panel .w-panelhd { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--muted-fg); }
.w-panel .w-panelhd b { font-weight: 500; color: var(--ink); }
.w-panel .w-panelhd .w-page { display: flex; align-items: center; gap: 4px; }
.w-panel .w-panelhd .w-page button { height: 24px; min-width: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); font: inherit; font-size: var(--text-chip); color: var(--ink); cursor: pointer; }
.w-panel .w-panelhd .w-page button:hover { background: var(--accent); }
.w-panel .w-panelhd .w-page button[disabled] { opacity: .35; cursor: default; }

/* ---- Activity rows: dense, one person per row, 60px, everything on two lines */
.w-row { display: grid; grid-template-columns: 36px minmax(200px, 1.4fr) 112px minmax(180px, 1.2fr) 96px 88px minmax(200px, 1.6fr) 76px;
  gap: 12px; align-items: center; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--border); cursor: pointer; text-decoration: none; color: inherit; }
.w-row:last-child { border-bottom: 0; }
.w-row:hover, .w-row:focus-visible { background: var(--sidebar); outline: none; }
.w-row.on { background: var(--sidebar); box-shadow: inset 2px 0 0 var(--ink); }
.w-row.seen { opacity: .72; }
.w-av { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); object-fit: cover; flex: none; }
.w-av.ph { display: grid; place-items: center; font-size: var(--text-xs); color: var(--muted-fg); font-weight: 500; }
.w-who { min-width: 0; }
.w-who .n { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; }
.w-who .n span { overflow: hidden; text-overflow: ellipsis; }
.w-who .n .vf { width: 14px; height: 14px; color: var(--blue); flex: none; }
.w-who .n .h { font-weight: 400; color: var(--faint-fg); flex: none; }
.w-who .r { font-size: var(--text-xs); color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.w-sig { min-width: 0; font-size: var(--text-xs); color: var(--ink); }
.w-sig .t { display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; }
.w-sig .t svg { width: 13px; height: 13px; color: var(--blue); flex: none; }
.w-sig .t span { overflow: hidden; text-overflow: ellipsis; }
.w-sig .a { color: var(--faint-fg); margin-top: 2px; white-space: nowrap; }
.w-sig .a .ev { color: var(--muted-fg); }
.w-num { font-family: var(--mono); font-size: var(--text-xs); color: var(--muted-fg); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-why { min-width: 0; font-size: var(--text-xs); color: var(--muted-fg); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-why b { font-weight: 500; color: var(--ink); }
.w-act { display: flex; justify-content: flex-end; }
.w-act .btn { height: 26px; padding: 0 10px; font-size: var(--text-chip); }

/* pills: fit / warmth / intent / status. One meaning per colour. */
.w-pill { display: inline-flex; align-items: center; gap: 5px; height: var(--chip-h); padding: 0 8px; border-radius: var(--r-sm); font-size: var(--text-chip); font-weight: 500; white-space: nowrap; background: var(--accent); color: var(--muted-fg); }
.w-pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.w-pill.strong { background: var(--live-bg); color: var(--live); }
.w-pill.possible { background: var(--w-amber-bg); color: var(--w-amber); }
.w-pill.weak { background: var(--accent); color: var(--muted-fg); }
.w-pill.unknown { background: transparent; color: var(--faint-fg); border: 1px dashed var(--border); }
.w-pill.high { background: var(--w-blue-bg); color: var(--blue); }
.w-pill.medium { background: var(--accent); color: var(--ink); }
.w-pill.low { background: transparent; color: var(--faint-fg); border: 1px solid var(--border); }
.w-pill.stated { background: var(--ink); color: #fff; }
.w-pill.maybe { background: var(--accent); color: var(--ink); }
.w-pill.co { background: var(--accent); color: var(--muted-fg); }
.w-pill.ok { background: var(--live-bg); color: var(--live); }
.w-pill.err { background: var(--danger-bg); color: var(--danger); }
.w-pill.paused { background: var(--accent); color: var(--muted-fg); }
.w-pill.removed { background: transparent; color: var(--faint-fg); border: 1px solid var(--border); }

/* ---- Posts */
.w-post { display: grid; grid-template-columns: 36px minmax(260px, 2fr) 96px 96px 120px 120px 88px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.w-post:last-child { border-bottom: 0; }
.w-post:hover { background: var(--sidebar); }
.w-post .txt { min-width: 0; }
.w-post .txt .p { font-size: var(--text-sm); color: var(--ink); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-post .txt .m { font-size: var(--text-chip); color: var(--faint-fg); margin-top: 3px; white-space: nowrap; }
.w-post .txt .m b { font-weight: 500; color: var(--muted-fg); }
.w-post .k { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.w-post .k small { display: block; font-family: var(--font); font-size: 11px; color: var(--faint-fg); margin-top: 2px; }
.w-post .k.g { color: var(--live); }
.w-post .k.a { color: var(--w-amber); }
.w-hdr { display: grid; gap: 12px; padding: 0 16px; height: 32px; align-items: center; border-bottom: 1px solid var(--border); font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-fg); }
.w-hdr span:not(:first-child):not(.l) { text-align: right; }
.w-hdr.posts { grid-template-columns: 36px minmax(260px, 2fr) 96px 96px 120px 120px 88px; }
.w-hdr.profiles { grid-template-columns: 36px minmax(200px, 1.6fr) 110px 92px 90px 100px 90px 120px 104px; }
.w-hdr.activity { grid-template-columns: 36px minmax(200px, 1.4fr) 112px minmax(180px, 1.2fr) 96px 88px minmax(200px, 1.6fr) 76px; }
.w-hdr .l { text-align: left; }

/* ---- Profiles */
.w-prof { display: grid; grid-template-columns: 36px minmax(200px, 1.6fr) 110px 92px 90px 100px 90px 120px 104px; gap: 12px; align-items: center; min-height: 56px; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.w-prof:last-child { border-bottom: 0; }
.w-prof:hover { background: var(--sidebar); }
.w-prof .k { font-family: var(--mono); font-size: var(--text-xs); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.w-prof .k.mut { color: var(--faint-fg); }
.w-prof .acts { display: flex; gap: 4px; justify-content: flex-end; }
.w-prof .acts .ib { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer; color: var(--muted-fg); }
.w-prof .acts .ib:hover { background: var(--accent); color: var(--ink); }
.w-prof .acts .ib:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.w-prof .acts .ib svg { width: 14px; height: 14px; }
.w-cats { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.w-cat { height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: none; font: inherit; font-size: var(--text-xs); color: var(--muted-fg); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.w-cat:hover { background: var(--accent); color: var(--ink); }
.w-cat[aria-pressed="true"] { background: var(--ink); color: #fff; }
.w-cat .cnt { font-family: var(--mono); font-size: 11px; opacity: .7; }

/* ---- empty states */
.w-empty { padding: 56px 24px 64px; text-align: center; }
.w-empty b { display: block; font-size: var(--text-ui); font-weight: 500; color: var(--ink); }
.w-empty p { margin: 8px auto 0; max-width: 46ch; font-size: var(--text-sm); color: var(--muted-fg); line-height: 1.6; }
.w-empty .btn { margin-top: 20px; }
.w-routes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 24px; }
.w-route { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; font: inherit; color: inherit; transition: border-color var(--t-hover) var(--ease-out); }
.w-route:hover { border-color: var(--ink); }
.w-route:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.w-route.primary { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.w-route .ic { width: 32px; height: 32px; border-radius: var(--r-md); background: var(--accent); display: grid; place-items: center; color: var(--ink); }
.w-route .ic svg { width: 16px; height: 16px; }
.w-route b { font-size: var(--text-sm); font-weight: 500; color: var(--ink); }
.w-route p { margin: 0; font-size: var(--text-xs); color: var(--muted-fg); line-height: 1.5; flex: 1; }
.w-route .go { font-size: var(--text-xs); font-weight: 500; color: var(--ink); }
.w-routes-lede { padding: 32px 24px 0; text-align: center; }
.w-routes-lede b { display: block; font-size: var(--text-ui); font-weight: 500; color: var(--ink); }
.w-routes-lede p { margin: 6px auto 0; max-width: 52ch; font-size: var(--text-sm); color: var(--muted-fg); line-height: 1.6; }
@media (max-width: 1000px) { .w-routes { grid-template-columns: 1fr; } }

/* ---- loading / error */
.w-skel { padding: 8px 16px; }
.w-skel div { height: 44px; margin: 8px 0; border-radius: var(--r-md); background: linear-gradient(90deg, var(--accent) 25%, var(--secondary) 50%, var(--accent) 75%); background-size: 200% 100%; animation: wsk 2s linear -1s infinite; }
@keyframes wsk { to { background-position: -200% 0; } }
.w-err { margin: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: var(--danger-bg); color: var(--danger); border-radius: var(--r-md); font-size: var(--text-sm); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.w-err .btn { height: 26px; }
.w-note { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sidebar); font-size: var(--text-xs); color: var(--muted-fg); display: flex; align-items: center; gap: 10px; }
.w-note b { font-weight: 500; color: var(--ink); }

/* ---- credits (isolated; the shell may adopt it later) */
.w-credits { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.w-credits .t { display: flex; justify-content: space-between; font-size: var(--text-chip); color: var(--muted-fg); }
.w-credits .t b { font-family: var(--mono); font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.w-credits .bar { height: 4px; border-radius: 2px; background: var(--accent); overflow: hidden; }
.w-credits .bar i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width var(--t-panel) var(--ease-out); }
.w-credits .bar i.warn { background: var(--w-amber); }

/* ---- drawer: temporary overlay, right side, never a third column */
.w-scrim { position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ink) 18%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--t-panel) var(--ease-out); }
.w-scrim.show { opacity: 1; pointer-events: auto; }
.w-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100vw); background: var(--card); border-left: 1px solid var(--border);
  box-shadow: var(--shadow-pop); transform: translateX(16px); opacity: 0; pointer-events: none; transition: transform var(--t-panel) var(--ease-out), opacity var(--t-panel) var(--ease-out);
  display: flex; flex-direction: column; }
.w-drawer.show { transform: none; opacity: 1; pointer-events: auto; }
.w-drawer .dh { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--border); flex: none; }
.w-drawer .dh .t { font-size: var(--text-xs); color: var(--muted-fg); text-transform: uppercase; letter-spacing: .07em; font-weight: 500; }
.w-drawer .dx { font: inherit; width: 28px; height: 28px; border: 0; background: none; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer; color: var(--muted-fg); }
.w-drawer .dx:hover { background: var(--accent); color: var(--ink); }
.w-drawer .db { flex: 1; overflow-y: auto; padding: 20px 20px 28px; }
.w-drawer .id { display: flex; gap: 14px; align-items: flex-start; }
.w-drawer .id .w-av { width: 48px; height: 48px; }
.w-drawer .id .nm { font-size: var(--text-ui); font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.w-drawer .id .nm .vf { width: 15px; height: 15px; color: var(--blue); }
.w-drawer .id .hd { font-size: var(--text-xs); color: var(--faint-fg); margin-top: 1px; }
.w-drawer .id .bio { font-size: var(--text-xs); color: var(--muted-fg); line-height: 1.5; margin-top: 8px; }
.w-drawer .id .meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--text-chip); color: var(--faint-fg); margin-top: 8px; }
.w-drawer .id .meta b { font-family: var(--mono); font-weight: 400; color: var(--ink); }
.w-drawer .sec { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.w-drawer .sec .lab { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-fg); margin-bottom: 8px; }
.w-drawer .sec ul { margin: 0; padding: 0 0 0 16px; font-size: var(--text-xs); color: var(--ink); line-height: 1.6; }
.w-drawer .sec ul.unk { color: var(--faint-fg); }
.w-drawer .sec ul.unk li::marker { color: var(--faint-fg); }
.w-drawer .sec .none { font-size: var(--text-xs); color: var(--faint-fg); }
.w-drawer .ev { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--muted); font-size: var(--text-xs); align-items: start; }
.w-drawer .ev:last-child { border-bottom: 0; }
.w-drawer .ev svg { width: 14px; height: 14px; color: var(--blue); margin-top: 1px; }
.w-drawer .ev .w { color: var(--ink); }
.w-drawer .ev .w .on { color: var(--faint-fg); }
.w-drawer .ev .q { margin-top: 4px; padding-left: 10px; border-left: 2px solid var(--border); color: var(--muted-fg); line-height: 1.5; }
.w-drawer .ev .q a { color: var(--blue); text-decoration: none; }
.w-drawer .ev .at { color: var(--faint-fg); white-space: nowrap; font-family: var(--mono); font-size: 11px; }
.w-drawer .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); flex: none; background: var(--card); }
.w-drawer .acts .btn { height: 34px; justify-content: center; }
.w-drawer .acts .btn.wide { grid-column: 1 / -1; }
.w-drawer .draft { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--sidebar); font-size: var(--text-xs); color: var(--ink); white-space: pre-wrap; line-height: 1.55; }
.w-drawer .draft-note { font-size: var(--text-chip); color: var(--faint-fg); margin-top: 6px; }
.w-drawer .tier { font-size: var(--text-xs); color: var(--muted-fg); }
.w-drawer .tier b { font-weight: 500; color: var(--ink); }

/* ---- the add / qualify sheet */
.w-sheet { position: fixed; z-index: 81; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); width: min(480px, calc(100vw - 28px)); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2xl); box-shadow: var(--shadow-pop); opacity: 0; pointer-events: none; transition: opacity var(--t-panel) var(--ease-out), transform var(--t-panel) var(--ease-out); }
.w-sheet.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.w-sheet .sh { padding: 18px 20px 0; }
.w-sheet .sh b { display: block; font-size: var(--text-ui); font-weight: 500; color: var(--ink); }
.w-sheet .sh p { margin: 4px 0 0; font-size: var(--text-xs); color: var(--muted-fg); line-height: 1.5; }
.w-sheet .sb { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 10px; }
.w-sheet label { font-size: var(--text-chip); color: var(--muted-fg); display: block; margin-bottom: 4px; }
.w-sheet input, .w-sheet select { height: var(--field-h); width: 100%; padding: 0 12px; border: 1px solid var(--input); border-radius: var(--r-lg); font: inherit; font-size: var(--text-sm); background: var(--card); color: var(--ink); }
.w-sheet input:focus, .w-sheet select:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
.w-sheet .sf { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 16px 20px 18px; }
.w-sheet .sf .cost { font-size: var(--text-chip); color: var(--faint-fg); }
.w-sheet .sf .r { display: flex; gap: 8px; }
.w-sheet .msg { font-size: var(--text-xs); color: var(--danger); min-height: 18px; }
.w-sheet .msg.ok { color: var(--live); }
.w-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px); z-index: 90; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: var(--r-md); font-size: var(--text-sm); opacity: 0; pointer-events: none; transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out); max-width: min(520px, calc(100vw - 32px)); }
.w-toast.show { opacity: 1; transform: translateX(-50%); }

/* narrow shells */
@media (max-width: 1320px) {
  .w-row .w-who .n .h { display: none; }          /* the handle moves out of the name line; it is still in the drawer */
  .w-bar .w-search { flex-basis: 180px; max-width: 220px; }
}
@media (max-width: 1120px) {
}

/* ============================================================================
   ALPACA LAYER — approved Athra visual system.
   watch.css is almost entirely token-driven, so the reskin is a token remap
   scoped to #v-watch rather than a rewrite. Every structural rule above is
   left exactly as it was: the UX, the behaviour and the markup are unchanged.
   ========================================================================== */
#v-watch{
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ink:#272725; --muted-fg:#74746F; --faint-fg:#92928D;
  --border:#E8E8E8; --card:#FFFFFF; --input:#E8E8E8; --muted:#F2F2F2;
  --accent:#F5F5F5; --secondary:#FAFAFA;
  --blue:#B6D9F7; --ring:#3585FF;
  --r-sm:6px; --r-md:9px; --r-lg:14px; --r-xl:16px; --r-2xl:18px;
  --text-h1:18px; --text-ui:12px; --text-sm:12px; --text-xs:11px; --text-chip:11px;
  --chip-h:18px; --pill-h:32px; --field-h:32px;
  --shadow-pop:0 8px 24px rgba(0,0,0,.08);
  font-family:var(--font);
}
#v-watch .w-head h1{font-size:18px;line-height:24px;font-weight:500;color:#272725}
#v-watch .w-head .lede{font-size:12px;line-height:17px;color:#74746F}
/* cards: 14px radius, hairline border, no shadow */
#v-watch .w-stat{border-radius:14px;border:1px solid #E8E8E8;background:#FFFFFF;box-shadow:none}
/* metric values in Inter, tabular — not the mono face */
#v-watch .w-stat .v{font-family:var(--font);font-size:24px;line-height:30px;font-weight:500;
  color:#272725;font-variant-numeric:tabular-nums}
#v-watch .w-stat .l{font-size:11px;line-height:15px;color:#74746F}
#v-watch .w-stat .s{font-size:11px;line-height:15px;color:#92928D}
/* raw numbers stay neutral — semantic colour is for status pills only */
#v-watch .w-stat .s.pos{color:#92928D}
#v-watch .w-post .k.g,#v-watch .w-post .k.a{color:#272725}
/* no black primary CTA anywhere in the approved system */
#v-watch .btn.primary,#v-watch .w-drawer .btn.primary{
  background:#FFFFFF;color:#272725;border:1px solid #30302D;border-radius:9px;font-weight:500;box-shadow:none}
#v-watch .btn.primary:hover{background:#FAFAFA}
#v-watch .btn{border-radius:9px;border:1px solid #E8E8E8;background:#FFFFFF;color:#30302D}
#v-watch .btn:hover{background:#FAFAFA}
#v-watch .w-panel{border-radius:14px;border:1px solid #E8E8E8;box-shadow:none}
#v-watch .w-tab[aria-selected="true"]{border-bottom-color:#272725}
/* "Stated a need" was a solid near-black chip. The approved system has no black
   fills; this is the strongest intent signal, so it reads as the accent. */
#v-watch .w-pill.stated{background:#B6D9F7;color:#272725}

/* ============================================================================
   STAGE 2 — Watch inside the canonical Athra shell.
   The content grid here is 937px, the same one Find Leads, Leads and Overview
   use, so every Watch tab shares those left/right edges.
   ========================================================================== */
#v-watch{padding:26px 0 0}
#v-watch .w-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:18px}
#v-watch .w-head h1{font-size:18px;line-height:24px;font-weight:500;color:#272725}
#v-watch .w-head .lede{font-size:12px;line-height:17px;color:#74746F;max-width:62ch}
#v-watch #w-cta{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
#v-watch #w-cta .btn{height:32px;border-radius:9px;border:1px solid #E8E8E8;
  background:#FFFFFF;color:#30302D;font-size:12px}
#v-watch #w-cta .btn.primary{height:32px;border:1px solid #30302D;border-radius:999px;
  background:#FFFFFF;color:#272725;font-weight:500}

/* tabs: quiet underline, not pills */
#v-watch .w-tabs{gap:20px;border-bottom:1px solid #E8E8E8;margin-bottom:16px}
#v-watch .w-tab{height:34px;padding:0;border-bottom:2px solid transparent;
  font-size:12px;line-height:17px;font-weight:400;color:#74746F}
#v-watch .w-tab[aria-selected="true"]{font-weight:500;color:#272725;border-bottom-color:#272725}
#v-watch .w-tab .cnt{font-family:inherit;font-size:10px;line-height:14px;color:#92928D}

/* summary cards */
#v-watch .w-stats{gap:10px;margin-bottom:14px}
#v-watch .w-stat{height:92px;padding:14px;border-radius:14px;border:1px solid #E8E8E8;
  background:#FFFFFF;box-shadow:none;display:flex;flex-direction:column}
#v-watch .w-stat .l{font-size:11px;line-height:15px;color:#74746F}
#v-watch .w-stat .v{font-family:inherit;font-size:20px;line-height:26px;font-weight:500;
  color:#272725;margin-top:auto;font-variant-numeric:tabular-nums}
#v-watch .w-stat .v.txt{font-size:14px;line-height:20px}
#v-watch .w-stat .s{font-size:11px;line-height:15px;color:#92928D;margin-top:2px}

/* filters: one shared control system, 32px, no blue fills */
#v-watch .w-bar{gap:8px;margin-bottom:10px}
#v-watch .w-bar{flex-wrap:wrap}
#v-watch .w-bar .w-search{flex:1 1 190px;max-width:210px;min-width:170px}
#v-watch .w-bar .w-search input,#v-watch .w-bar select,#v-watch .w-bar .w-seg{
  height:32px;border-radius:9px;border:1px solid #E8E8E8;background:#FFFFFF;color:#30302D;
  font-size:12px}
#v-watch .w-bar select{padding:0 22px 0 9px;max-width:190px;min-width:0}
#v-watch .w-seg{padding:1px}
#v-watch .w-seg button{height:30px;padding:0 8px;font-size:12px;border-radius:8px;
  background:transparent;color:#74746F}
#v-watch .w-seg button[aria-pressed="true"]{background:#F5F5F5;color:#272725;font-weight:500}

/* table */
#v-watch .w-panel{border-radius:14px;border:1px solid #E8E8E8;overflow:hidden}
#v-watch .w-hdr{height:34px;min-height:34px;background:#FAFAFA;border-bottom:1px solid #F2F2F2;
  font-size:10px;letter-spacing:.06em;color:#74746F}
#v-watch .w-row,#v-watch .w-post,#v-watch .w-prof{border-bottom:1px solid #F2F2F2;
  transition:background 140ms ease}
#v-watch .w-row:hover,#v-watch .w-post:hover,#v-watch .w-prof:hover{background:#FCFCFC}
#v-watch .w-row{min-height:61px}
#v-watch .w-post{min-height:69px}
#v-watch .w-prof{min-height:60px}
/* The spec's column widths total 937 on their own; this grid also carries the
   avatar column and seven gaps, so they are scaled to the same proportions to
   fit the 937px content box without a horizontal scrollbar. */
/* WATCH-UX-CONTRACT.md §tables — ONE grid per table. The header, every row and the skeleton
   read the same custom property, so they cannot drift. Fluid middle tracks, fixed numeric
   tracks, and each breakpoint drops a named column instead of squeezing all of them. */
#v-watch{
  --g-act: 36px minmax(180px,1.3fr) 118px minmax(150px,1fr) 112px 90px minmax(160px,1.4fr) 78px;
  --g-post: 36px minmax(220px,2fr) 96px 96px 92px 96px 96px 112px;
  --g-prof: 36px minmax(170px,1fr) 112px 92px 70px 100px 112px 104px 104px}
#v-watch .w-row,#v-watch .w-hdr.activity{grid-template-columns:var(--g-act);gap:8px}
#v-watch .w-post,#v-watch .w-hdr.posts{grid-template-columns:var(--g-post);gap:8px}
#v-watch .w-prof,#v-watch .w-hdr.profiles{grid-template-columns:var(--g-prof);gap:8px}
/* numeric headers sit over numeric cells: same right edge (flex header cells ignore text-align) */
#v-watch .w-hdr > span.n{justify-content:flex-end;text-align:right}
#v-watch .w-post .k,#v-watch .w-prof .k{text-align:right}


/* semantic pills, exactly as specified */
#v-watch .w-pill.strong{background:#E8F3EE;color:#0F7A55}
#v-watch .w-pill.possible{background:#FDF4E7;color:#B45309}
#v-watch .w-pill.unknown,#v-watch .w-pill.weak,#v-watch .w-pill.co{background:#F3F3F3;color:#686863}
#v-watch .w-pill.high{background:#EAF0FF;color:#2F6BFF}
#v-watch .w-pill.medium{background:#F5F5F5;color:#5D5D58}
#v-watch .w-pill.low{background:#FFFFFF;border:1px solid #E8E8E8;color:#74746F}
/* VIEW */
#v-watch .w-act .btn{height:28px;padding:0 10px;border-radius:8px;border:1px solid #E8E8E8;
  background:#FFFFFF;color:#30302D;font-size:11px}
#v-watch .w-act .btn:hover{background:#F5F5F5}
/* The spacer was taking a line of its own, so the bar rendered as three rows.
   Make it an explicit break: filters on row 1, Sort on row 2, as specified. */
#v-watch .w-bar .w-sp{flex:1 0 100%;height:0;margin:0}
#v-watch .w-bar > select:last-child{margin-left:auto;max-width:200px;min-width:150px}

/* header labels must never bleed into the next column */
#v-watch .w-hdr > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#v-watch .w-hdr{align-items:center;padding-top:0;padding-bottom:0}
/* drawer: Stage-1 intelligence architecture */
#v-watch .w-drawer{width:420px;box-shadow:-10px 0 30px rgba(0,0,0,.055);
  transition:transform 180ms cubic-bezier(.2,.8,.2,1)}
#v-watch .w-scrim{background:rgba(39,39,37,.12)}
#v-watch .w-about{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0}
#v-watch .w-about dt{font:400 11px/17px Inter,sans-serif;color:#92928D;white-space:nowrap}
#v-watch .w-about dd{margin:0;font:400 12px/17px Inter,sans-serif;color:#30302D}
#v-watch .w-about dd.unk{color:#92928D}
#v-watch .wrow-sub{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
#v-watch .w-drawer .acts .btn.primary{background:#FFFFFF;color:#272725;border:1px solid #30302D}
/* Activity's subtitle wraps to two lines and the others do not, so the tabs,
   cards and table shifted 17px when switching tabs. Reserving the header's
   height keeps every tab on the same baselines. */
#v-watch .w-head{min-height:66px;align-items:flex-start}
#v-watch .w-head > div:first-child{min-height:62px}

/* ---- WATCH TABLE POLISH -------------------------------------------------
   ONE grid definition, used by the header and every body row. The table was
   pinned to 849px of fixed tracks inside a 1172px panel, which is where the
   dead space and the WHY drift came from. */
#v-watch .w-row,#v-watch .w-hdr.activity{align-items:center}
/* WHY: header and cells share one inset, so they cannot drift apart */
#v-watch .w-hdr.activity .why,#v-watch .w-row .w-why{
  text-align:left;padding-left:12px;padding-right:12px;
  /* WHY sat 5px below every other header from an inherited offset; the whole
     header row is one centred baseline. */
  margin:0;align-self:center}
#v-watch .w-row .w-why{display:flex;align-items:center;gap:8px;min-width:0}
#v-watch .w-why .t{flex:1;min-width:0;font-size:12px;line-height:17px;color:#30302D;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#v-watch .w-why .cv{flex:none;font-size:14px;line-height:1;color:#B0B0AC;
  transition:color 140ms var(--ease-out)}
#v-watch .w-row:hover .w-why .cv{color:#74746F}
/* FOLLOWERS: numeric, so header and values share right alignment and a real
   gutter before WHY begins */
#v-watch .w-hdr.activity span:nth-child(6),#v-watch .w-row .w-num{
  text-align:right;padding-right:16px;font-variant-numeric:tabular-nums}
#v-watch .w-row .w-num{font-family:inherit;font-size:12px;color:#30302D}
/* every header label on one baseline */
#v-watch .w-hdr > span{display:flex;align-items:center;line-height:1}
#v-watch .w-hdr.activity span:nth-child(6){justify-content:flex-end}
/* the row is the affordance */
#v-watch .w-row{cursor:pointer}
#v-watch .w-act .btn{white-space:nowrap;font-size:11px;line-height:15px;font-weight:500;
  height:28px;padding:0 9px}
/* P2-6: Profiles grid was fixed tracks summing ~942px inside the 1172 panel,
   so the action icons wrapped and names truncated with room to spare. One
   scoped grid at the real width; actions get a track that fits 3 icons. */
#v-watch .w-prof, #v-watch .w-hdr.profiles{align-items:center}
#v-watch .w-prof .acts{flex-wrap:nowrap; justify-content:flex-end; gap:4px}
#v-watch .w-hdr.profiles > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- feed affordances (WATCH-UX-CONTRACT.md) */
#v-watch .w-quick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
#v-watch .w-quick button{height:28px;padding:0 11px;border-radius:999px;border:1px solid #E3E3E1;background:#FFF;font:inherit;font-size:12px;color:#272725;cursor:pointer}
#v-watch .w-quick button:hover{background:#FAFAFA}
#v-watch .w-quick button[aria-pressed="true"]{background:#F1F1F0;border-color:#30302D;color:#272725;font-weight:500}
#v-watch .w-day{padding:8px 16px 6px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:#92928D;background:#FAFAFA;border-bottom:1px solid #F2F2F2}
#v-watch .w-pill.src{background:#F1F1F0;color:#5D5D58}
#v-watch .w-post .w-act .btn{white-space:nowrap;font-size:11px;line-height:15px;font-weight:500;height:28px;padding:0 9px}

/* notes: icon sized, text beside it */
#v-watch .w-note{display:flex;align-items:flex-start;gap:8px}
#v-watch .w-note svg{width:14px;height:14px;flex:none;margin-top:2px}
#v-watch .w-note span{flex:1;min-width:0}
#v-watch .w-note .w-reset{flex:none;border:0;background:none;padding:0 6px;font:inherit;font-size:12px;color:#5D5D58;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#v-watch .w-note .w-reset:hover{color:#111111}

/* Responsive column drops live LAST on purpose: they must beat every base rule above. */
@media (max-width:1320px){
  #v-watch{--g-act: 36px minmax(160px,1.2fr) 110px minmax(130px,1fr) 104px 84px minmax(130px,1.2fr) 70px;
    --g-post: 36px minmax(180px,2fr) 84px 88px 84px 88px 88px 104px;
    --g-prof: 36px minmax(150px,1fr) 104px 88px 62px 92px 104px 92px 100px}}
@media (max-width:1120px){
  /* drop one named column per table rather than clipping the last one */
  #v-watch{--g-act: 36px minmax(160px,1.2fr) 110px minmax(130px,1fr) 104px 84px 70px;
    --g-post: 36px minmax(180px,2fr) 84px 88px 84px 88px 104px;
    --g-prof: 36px minmax(150px,1fr) 104px 88px 62px 92px 104px 100px}
  #v-watch .w-row .w-why,#v-watch .w-hdr.activity .why,
  #v-watch .w-post .hide-n,#v-watch .w-hdr.posts .hide-n,
  #v-watch .w-prof .hide-n,#v-watch .w-hdr.profiles .hide-n{display:none}}
@media (max-width:900px){
  /* narrow shells scroll the table sideways on purpose; nothing is hidden or cut mid-glyph */
  #v-watch .w-panel{overflow-x:auto}
  #v-watch .w-hdr,#v-watch .w-row,#v-watch .w-post,#v-watch .w-prof{min-width:820px}}

/* 420px on a 375px phone: the drawer sat 45px off the left edge (measured: left -45, width
   420) and its first column was cut. On a phone it is the whole width. */
@media (max-width:620px){ #v-watch .w-drawer{width:100vw;max-width:100vw} }