/* Outbound module (first tenant: Lithra). Self-contained: uses only the app's theme tokens (styles.css :root), so light and
   dark both work and nothing here holds a hex. Ice style: one glass layer, light from above, lavender rim, violet glow
   only on hover / selection, rounded, hairlines between rows only, no monospace (tabular figures), no all-caps labels. */

.ob-main { display:none; }
.app[data-mod="lithra"] { grid-template-columns:60px minmax(0,1fr); grid-template-areas:"rail main"; }
.app[data-mod="lithra"] .list-pane, .app[data-mod="lithra"] .reader, .app[data-mod="lithra"] .fab { display:none; }
@media (min-width:1181px) { .app[data-mod="lithra"] .side { display:none; } }
.app[data-mod="lithra"] .ob-main { grid-area:main; display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--canvas); }
.ob-main .head { background:var(--surface); border-bottom:1px solid var(--border); }
.ob-main { --ob-r:16px; --ob-glass:var(--glass-bg); --ob-rim:var(--glass-line);
  --ob-shadow:inset 0 1px 0 var(--glass-sheen), 0 1px 2px color-mix(in srgb, var(--glass-glow) 10%, transparent), 0 14px 34px -22px var(--glass-glow);
  font-variant-numeric:tabular-nums; }

.ob-scroll { flex:1; min-height:0; overflow:auto; padding:18px 20px 40px; scrollbar-width:thin;
  background:radial-gradient(1200px 380px at 50% -140px, color-mix(in srgb, var(--glow) 9%, transparent), transparent 70%); }
.ob-wrap { max-width:1180px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.ob-scroll .list-state { margin-top:40px; }

/* phase chip in the header (a plain fact: no tooltip) */
.ob-chip { display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 10px 0 9px; border-radius:999px; font-size:12px; font-weight:600;
  color:var(--pp); background:var(--pp-bg); }
.ob-chip i { width:6px; height:6px; border-radius:50%; background:currentColor; }
.ob-chip.ok { color:var(--ok); background:var(--ok-bg); }
.ob-chip.warn { color:var(--warn); background:var(--warn-bg); }

/* ---------- the one glass layer ---------- */
.ob-glass { position:relative; padding:14px 16px 16px; border-radius:var(--ob-r); background:var(--ob-glass); border:1px solid var(--ob-rim);
  box-shadow:var(--ob-shadow); -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2); min-width:0; }
.ob-h { display:flex; align-items:center; gap:8px; min-height:28px; margin-bottom:8px; font-size:13.5px; font-weight:620; letter-spacing:-.01em; color:var(--text); }
.ob-hi { display:inline-grid; color:var(--pp2); }
.ob-h .n { font-size:12.5px; font-weight:550; color:var(--faint); }
.ob-meta { font-size:12px; color:var(--faint); white-space:nowrap; }
.ob-sub { margin:12px 0 4px; font-size:12px; font-weight:600; color:var(--muted); }
.ob-sub:first-of-type { margin-top:2px; }

.ob-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start; }
.ob-col { display:flex; flex-direction:column; gap:16px; min-width:0; }

/* ---------- funnel: the drawn river ---------- */
.ob-funnel { position:relative; padding:10px 6px 8px; }
.ob-river { position:absolute; left:6px; right:6px; top:64px; height:96px; width:calc(100% - 12px); overflow:visible; }
.ob-river .s0 { stop-color:var(--pp2); stop-opacity:.34; }
.ob-river .s1 { stop-color:var(--glow); stop-opacity:.14; }
.ob-river-a { fill:url(#obRiverG); }
.ob-river-e { fill:none; stroke:var(--pp2); stroke-opacity:.55; stroke-width:1.4; vector-effect:non-scaling-stroke; }
.ob-river-t { stroke:var(--canvas); stroke-width:1.5; stroke-opacity:.9; vector-effect:non-scaling-stroke; }
.ob-stages { position:relative; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); }
.ob-stage { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; min-height:166px; padding:6px 4px 0; border-radius:14px; text-align:center;
  color:var(--text); transition:background .18s, box-shadow .18s; outline:none; }
.ob-stage b { font-size:30px; font-weight:650; letter-spacing:-.035em; line-height:1.05; }
.ob-stage span { font-size:12.5px; color:var(--muted); font-weight:520; }
.ob-stage em { position:absolute; left:0; top:108px; transform:translate(-50%, -50%); font-style:normal; font-size:11.5px; font-weight:620; color:var(--pp);
  background:var(--surface); padding:2px 7px; border-radius:999px; box-shadow:0 0 0 1px var(--ob-rim); }
.ob-stage em:empty { display:none; }
.ob-stage.zero b { color:var(--faint); font-weight:560; }
.ob-stage:hover, .ob-stage:focus-visible { background:color-mix(in srgb, var(--glow) 7%, transparent); box-shadow:inset 0 0 0 1px var(--ob-rim), 0 10px 30px -20px var(--glass-glow); }
.ob-stage.on { background:color-mix(in srgb, var(--glow) 11%, transparent); box-shadow:inset 0 0 0 1.5px var(--glass-line-p), 0 12px 34px -18px var(--glass-glow-p); }
.ob-stage.on b { color:var(--pp); }

/* ---------- rows (one faint hairline between rows; nothing else) ---------- */
.ob-rows { display:flex; flex-direction:column; }
.ob-row { position:relative; display:flex; align-items:center; gap:12px; width:100%; min-height:52px; padding:8px 10px; margin:0 -10px; width:calc(100% + 20px);
  border-radius:12px; text-align:left; color:var(--text); outline:none; transition:background .15s, box-shadow .15s; }
.ob-row + .ob-row::before { content:""; position:absolute; left:56px; right:10px; top:0; height:1px; background:var(--hair); }
.ob-row:hover, .ob-row:focus-visible { background:var(--hover); }
.ob-row:focus-visible { box-shadow:inset 0 0 0 1.5px var(--pp-ring); }
.ob-row:hover + .ob-row::before, .ob-row:hover::before, .ob-row:focus-visible::before, .ob-row:focus-visible + .ob-row::before { opacity:0; }
.ob-ava { width:32px; height:32px; }
.ob-ava .ico { width:14px; height:14px; }
.ob-rm { display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.ob-rn { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-rs { font-size:12.5px; color:var(--faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-time { width:32px; flex:none; font-size:13px; font-weight:650; color:var(--pp); text-align:center; }
.ob-go { display:inline-grid; color:var(--faint); opacity:0; transition:opacity .15s, transform .15s; }
.ob-row:hover .ob-go, .ob-row:focus-visible .ob-go { opacity:1; transform:translateX(2px); }
.ob-st { flex:none; font-size:12px; font-weight:600; color:var(--muted); padding:3px 9px; border-radius:999px; background:var(--surface-2); white-space:nowrap; }
.ob-st.ok { color:var(--ok); background:var(--ok-bg); }
.ob-st.pp { color:var(--pp); background:var(--pp-bg); }
.ob-st.warn { color:var(--warn); background:var(--warn-bg); }
.ob-st.bad { color:var(--err); background:var(--err-bg); }

/* calm empty state inside a section */
.ob-calm { display:flex; align-items:center; gap:10px; padding:14px 4px 4px; font-size:13.5px; color:var(--faint); }
.ob-calm .ico { color:var(--faint); }
.ob-calm.zero .ico { color:var(--ok); }
.ob-calm.bad .ico { color:var(--warn); }

/* the drill: opens in place under the funnel */
.ob-drill { box-shadow:inset 0 1px 0 var(--glass-sheen), 0 0 0 1px var(--glass-line-p), 0 18px 44px -24px var(--glass-glow-p); }

/* ---------- mailboxes: people x domains, a reputation ring each ---------- */
.ob-hero .ob-h { font-size:15px; }
.ob-runway { margin:2px 0 14px; }
.ob-rw-t { display:flex; align-items:baseline; gap:8px; font-size:12.5px; color:var(--faint); }
.ob-rw-t b { font-size:20px; font-weight:650; letter-spacing:-.025em; color:var(--text); }
.ob-rw-bar { position:relative; height:6px; margin-top:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ob-rw-bar i { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, var(--pp), var(--pp2));
  box-shadow:0 0 12px color-mix(in srgb, var(--glow) 60%, transparent); }
.ob-boxgrid { display:grid; grid-template-columns:auto repeat(var(--cols), minmax(0,1fr)); align-items:center; gap:6px 6px; }
.ob-dh { text-align:center; font-size:12px; font-weight:600; color:var(--faint); }
.ob-pn { display:inline-flex; align-items:center; gap:8px; padding-right:6px; font-size:13px; font-weight:600; white-space:nowrap; }
.ob-pn .p-ava { width:26px; height:26px; font-size:11px; }
.ob-box { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 7px; border-radius:14px; outline:none; color:var(--text);
  transition:background .15s, box-shadow .15s, transform .15s; }
.ob-box:hover, .ob-box:focus-visible { background:color-mix(in srgb, var(--glow) 7%, transparent); box-shadow:inset 0 0 0 1px var(--ob-rim); }
.ob-box.none { min-height:72px; }
.ob-rg { position:relative; display:grid; place-items:center; width:44px; height:44px; }
.ob-rg b { position:absolute; font-size:13px; font-weight:650; letter-spacing:-.02em; }
.ob-ring { width:44px; height:44px; transform:rotate(-90deg); }
.ob-ring circle { fill:none; stroke-width:3; }
.ob-ring .tr { stroke:var(--surface-2); }
.ob-ring .br { stroke:var(--ok); stroke-linecap:round; transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1); }
.ob-ring.warn .br { stroke:var(--warn); }
.ob-box.warn .ob-rg b { color:var(--warn); }
.ob-bs { font-size:12px; font-weight:600; color:var(--muted); }
.ob-bs small { font-size:11px; font-weight:500; color:var(--faint); }
.ob-bb { position:absolute; top:4px; left:6px; display:inline-flex; align-items:center; gap:2px; font-size:11px; font-weight:650; color:var(--warn); }
.ob-warn { position:absolute; top:4px; right:6px; display:inline-grid; color:var(--warn); }

/* ---------- by person ---------- */
.ob-people { display:flex; flex-direction:column; }
.ob-prow { position:relative; display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr)); align-items:center; gap:4px; padding:6px 0; }
.ob-prow + .ob-prow::before { content:""; position:absolute; left:34px; right:0; top:0; height:1px; background:var(--hair); }
.ob-fig { display:flex; align-items:baseline; justify-content:center; gap:5px; padding:6px 4px; border-radius:10px; color:var(--text); outline:none; transition:background .15s; }
.ob-fig b { font-size:18px; font-weight:650; letter-spacing:-.02em; }
.ob-fig span { font-size:12px; color:var(--faint); }
.ob-fig.zero b { color:var(--faint); font-weight:560; }
.ob-fig:hover, .ob-fig:focus-visible { background:var(--hover); box-shadow:inset 0 0 0 1px var(--ob-rim); }

/* ---------- what's working: bars ---------- */
.ob-bar { display:grid; grid-template-columns:minmax(0,9rem) minmax(0,1fr) 3rem 4.4rem; align-items:center; gap:10px; width:100%; padding:6px 6px; margin:0 -6px; width:calc(100% + 12px);
  border-radius:10px; text-align:left; outline:none; transition:background .15s; }
.ob-bar:hover, .ob-bar:focus-visible { background:var(--hover); }
.ob-bl { font-size:13px; font-weight:550; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-bt { position:relative; height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; }
.ob-bt i { position:absolute; inset:0 auto 0 0; border-radius:inherit; background:linear-gradient(90deg, var(--pp), var(--pp2)); transition:width .5s cubic-bezier(.2,.8,.2,1); }
.ob-bar b { font-size:13.5px; font-weight:650; text-align:right; }
.ob-bn { font-size:12px; color:var(--faint); text-align:right; white-space:nowrap; }

/* ---------- LinkedIn ---------- */
.ob-chart { position:relative; height:76px; margin:2px 0 4px; }
.ob-chart svg { width:100%; height:100%; display:block; overflow:visible; }
.ob-ar { fill:color-mix(in srgb, var(--acc-2) 10%, transparent); }
.ob-ln { fill:none; stroke-width:1.8; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.ob-ln.a { stroke:var(--acc-2); }
.ob-ln.b { stroke:var(--ok); }
.ob-day { position:absolute; top:0; bottom:0; width:20px; transform:translateX(-50%); border-radius:8px; outline:none; }
.ob-day::after { content:""; position:absolute; left:50%; bottom:-2px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--border); transition:background .15s, transform .15s; }
.ob-day:hover, .ob-day:focus-visible { background:var(--hover); }
.ob-day.on::after { background:var(--pp); transform:scale(1.4); }
.ob-key { display:flex; align-items:center; gap:12px; font-size:11.5px; color:var(--faint); }
.ob-key i { display:inline-block; width:10px; height:2px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.ob-key .a i { background:var(--acc-2); } .ob-key .b i { background:var(--ok); }
.ob-li-tot { display:flex; gap:16px; margin:10px 0 2px; font-size:12.5px; color:var(--faint); }
.ob-li-tot:empty { display:none; }
.ob-li-tot b { font-size:15px; font-weight:650; color:var(--text); margin-right:3px; }
.ob-li { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px; margin-top:12px; }
.ob-li-f { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ob-li-l { font-size:12.5px; font-weight:550; color:var(--muted); }
.ob-step { display:flex; align-items:center; gap:2px; height:40px; padding:0 4px; border-radius:999px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--ob-rim); }
.ob-step .icon-btn { width:32px; height:32px; border-radius:50%; }
.ob-li-in { flex:1; min-width:0; width:100%; height:32px; border:0; background:none; text-align:center; font:inherit; font-size:16px; font-weight:650; color:var(--text);
  font-variant-numeric:tabular-nums; outline:none; -moz-appearance:textfield; }
.ob-li-in::-webkit-outer-spin-button, .ob-li-in::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.ob-step:focus-within { box-shadow:inset 0 0 0 1.5px var(--glass-line-p), 0 0 0 3px var(--pp-bg); }
.ob-dayb { display:inline-flex; align-items:center; gap:5px; height:26px; padding:0 8px 0 10px; border-radius:999px; font-size:12px; font-weight:600; color:var(--pp); background:var(--pp-bg); }

/* ---------- narrower ---------- */
@media (max-width:1180px) {
  .ob-grid { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:760px) {
  .app[data-mod="lithra"] { grid-template-columns:minmax(0,1fr); grid-template-areas:"main"; }
  .ob-main .title-btn { cursor:pointer; }
  .ob-scroll { padding:12px 16px 96px; }
  .ob-wrap, .ob-col { gap:12px; }
  .ob-glass { padding:12px 14px 14px; }
  /* the river turns: a vertical ladder of stages, each bar its share */
  .ob-river { display:none; }
  .ob-funnel { padding:0; }
  .ob-stages { grid-template-columns:minmax(0,1fr); gap:2px; }
  .ob-stage { flex-direction:row; align-items:center; gap:10px; min-height:48px; padding:6px 12px 9px; text-align:left; border-radius:12px; }
  .ob-stage::after { content:""; position:absolute; left:12px; bottom:4px; height:3px; width:calc((100% - 24px) * var(--w, 0%) / 100%); border-radius:999px;
    background:linear-gradient(90deg, var(--pp), var(--pp2)); opacity:.75; }
  .ob-stage b { font-size:20px; min-width:2.2em; }
  .ob-stage span { font-size:14px; flex:1; }
  .ob-stage em { position:static; transform:none; box-shadow:none; background:none; padding:0; }
  .ob-boxgrid { gap:4px 2px; }
  .ob-pn { font-size:0; gap:0; padding-right:2px; }
  .ob-pn .p-ava { font-size:11px; }
  .ob-people .ob-pn { font-size:14px; gap:8px; }
  .ob-bar { grid-template-columns:minmax(0,7rem) minmax(0,1fr) 2.6rem; }
  .ob-bn { display:none; }
  .ob-li-in { font-size:16px; }   /* 16px: no zoom on focus */
}
@media (prefers-reduced-motion: reduce) {
  .ob-ring .br, .ob-bt i { transition:none; }
}