/* =====================================================================
   Trayo Newsfeed — "Signal" — Linear × LinkedIn
   ---------------------------------------------------------------------
   Linear:   restraint, density, crisp 1px borders, tight Inter type,
             ONE accent (indigo), subtle hover lifts, monochrome tags
             with a leading colored dot.
   LinkedIn: actor row (logo + name + subtitle + time + ⋯), card feed,
             a divider'd action bar at the foot of every card.
   ===================================================================== */

:root {
  /* Spacing (4-based) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* Radii */
  --r-card:12px; --r-pill:9999px; --r-btn:8px; --r-chip:6px;

  /* Type scale — tight, Inter */
  --t-actor:13.5px;
  --t-meta:12px;
  --t-tag:10.5px;
  --t-anchor:16px;
  --t-anchor-line:1.4;
  --t-person:15px;
  --t-body:13.5px;
  --t-body-line:1.62;
  --t-cta:13px;

  /* ---- Dark (Trayo app shell — slate-blue, NOT black) ---- */
  --bg-app:        #181C23;
  --bg-sidebar:    #0E1525;
  --bg-card:       #232837;
  --bg-card-hover: #262C3C;
  --bg-raised:     #2A3142;
  --bg-well:       #1A1F2E;
  --bg-input:      #0F1419;
  --bg-popover:    #232837;

  --fg-1:   #E8EDF4;
  --fg-2:   #A0AEC0;
  --fg-3:   #7C8493;

  --line:        #2A3441;
  --line-strong: #3A4556;

  --accent:       #6366F1;
  --accent-text:  #A5B4FC;     /* accent readable on dark bg */
  --accent-soft:  rgba(99,102,241,0.16);
  --accent-line:  rgba(99,102,241,0.45);

  /* Type dots */
  --dot-news:   #A5B4FC;
  --dot-career: #5BC79A;
  --dot-job:    #E0A85B;

  --grain-opacity: 0;

  --feed-max: 680px;
  --sidebar-w: 232px;

  --card-pad: var(--sp-5);
  --feed-gap: var(--sp-3);

  /* Card size presets (1 = smallest/current). Set via [data-size] on root. */
  --feed-zoom: 1;
}

:root[data-size="2"] { --feed-zoom: 1.10; }
:root[data-size="3"] { --feed-zoom: 1.21; }
:root[data-size="4"] { --feed-zoom: 1.31; }
:root[data-size="5"] { --feed-zoom: 1.42; }

:root[data-theme="light"] {
  /* Trayo brand: cream "solarized" page + warm surfaces + brand purple */
  --bg-app:        #fdf9ee;
  --bg-sidebar:    #fbf6e8;
  --bg-card:       #fffdf8;
  --bg-card-hover: #fefbf2;
  --bg-raised:     #ffffff;
  --bg-well:       #f8f1df;
  --bg-input:      #fffdf8;
  --bg-popover:    #fffdf8;

  --fg-1:   #1c1a17;
  --fg-2:   #6b6253;
  --fg-3:   #9a9180;

  --line:        rgb(120 90 40 / 0.14);
  --line-strong: rgb(120 90 40 / 0.24);

  --accent:       #7B5DF3;
  --accent-text:  #6643d6;
  --accent-soft:  rgba(123,93,243,0.10);
  --accent-line:  rgba(123,93,243,0.38);

  --dot-news:   #7B5DF3;
  --dot-career: #16976a;
  --dot-job:    #d98a2b;

  --grain-opacity: 1;
}

:root[data-density="compact"] {
  --card-pad: var(--sp-4);
  --feed-gap: var(--sp-2);
  --t-anchor:15px;
  --t-body:13px;
  --t-body-line:1.55;
}
:root[data-density="comfortable"] {
  --card-pad: var(--sp-6);
  --feed-gap: var(--sp-4);
  --t-anchor:17px;
  --t-body:14px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: transparent;
  color: var(--fg-1);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  background: var(--bg-app);
  color: var(--fg-1);
  transition: color .2s ease;
  position: relative;
}
/* Grainy "solarized" texture overlay — light theme only (Trayo site bg).
   Fixed so it reads as a page-wide canvas behind the sidebar + feed. */
.app::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--grain-opacity, 0);
  background-image:
    radial-gradient(120% 80% at 85% 0%, rgba(255,201,168,0.30) 0%, rgba(255,201,168,0) 42%),
    radial-gradient(90% 70% at 0% 100%, rgba(123,93,243,0.10) 0%, rgba(123,93,243,0) 46%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.18  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/></svg>");
  transition: opacity .2s ease;
}
.sidebar, .main { position: relative; z-index: 1; }

/* =====================================================================
   Sidebar — Linear: quiet, dense, monochrome
   ===================================================================== */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  padding: var(--sp-4) var(--sp-3);
}
.brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2) var(--sp-5);
}
.brand img { width: 22px; height: 22px; }
:root[data-theme="light"] .brand img { filter: invert(1); }
.brand .word {
  font-weight: 700; font-size: 16px; letter-spacing: -0.02em; color: var(--fg-1);
}
.brand .kbd {
  margin-left: auto;
  font-size: 10.5px; color: var(--fg-3);
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 5px; font-weight: 500;
}

.ws {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px var(--sp-2);
  border-radius: 8px;
  margin-bottom: var(--sp-4);
}
.ws:hover { background: var(--bg-well); }
.ws .glyph {
  width: 20px; height: 20px; border-radius: 5px;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.ws .name { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.ws svg { width: 13px; height: 13px; color: var(--fg-3); margin-left: auto; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--fg-3);
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px var(--sp-2);
  border-radius: 7px;
  font-size: 13.5px; font-weight: 500;
  color: var(--fg-2);
}
.nav-item svg { width: 16px; height: 16px; }
.nav-item:hover { background: var(--bg-well); color: var(--fg-1); }
.nav-item.active { background: var(--bg-well); color: var(--fg-1); font-weight: 600; }
.nav-item .badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}

.side-foot {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2);
  border-radius: 8px;
}
.side-foot:hover { background: var(--bg-well); }
.side-foot .av {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: linear-gradient(135deg,#6E79D6,#8E5BD0);
  color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.side-foot .nm { font-size: 13px; font-weight: 500; color: var(--fg-1); }
.side-foot .rl { font-size: 11px; color: var(--fg-3); }

/* =====================================================================
   Main + topbar
   ===================================================================== */
.main { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  height: 52px; padding: 0 var(--sp-6);
  background: color-mix(in srgb, var(--bg-app) 82%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.topbar .title { font-size: 14px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; }
.topbar .crumb { font-size: 13px; color: var(--fg-3); }
.topbar .grow { flex: 1; }

.seg {
  display: inline-flex; align-items: center;
  background: var(--bg-well);
  border: 1px solid var(--line);
  border-radius: 7px; padding: 2px;
}
.seg button {
  appearance: none; border: 0; background: transparent;
  color: var(--fg-2); width: 28px; height: 24px;
  border-radius: 5px; display: grid; place-items: center;
}
.seg button svg { width: 14px; height: 14px; }
.seg button.on { background: var(--bg-card); color: var(--fg-1); box-shadow: 0 1px 2px rgba(0,0,0,.12); }

/* =====================================================================
   Feed
   ===================================================================== */
.feed {
  width: 100%; max-width: var(--feed-max);
  margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-8);
  zoom: var(--feed-zoom, 1);
}

/* Filter tabs — Linear quiet tabs */
.tabs {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}
.tab {
  appearance: none; border: 0; background: transparent;
  color: var(--fg-2); font-size: 13px; font-weight: 500;
  padding: 8px 10px; position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
}
.tab:hover { color: var(--fg-1); }
.tab .ct { font-size: 11px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.tab.on { color: var(--fg-1); font-weight: 600; }
.tab.on::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
}
.tabs .grow { flex: 1; }
.tabs .search {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-3); font-size: 12.5px;
  padding: 5px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--bg-input);
  margin-bottom: 6px;
}
.tabs .search svg { width: 13px; height: 13px; }
.tabs .search input {
  border: 0; outline: 0; background: transparent; color: var(--fg-1);
  font-family: inherit; font-size: 12.5px; width: 110px;
}

/* ---------- Card ---------- */
.cards { display: flex; flex-direction: column; gap: var(--feed-gap); }

.card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--card-pad);
  transition: border-color .12s ease;
}
.card:hover { border-color: var(--line-strong); background-color: var(--bg-card-hover); }
:root[data-theme="light"] .card { box-shadow: 0 1px 2px rgba(16,17,26,0.04); }
:root[data-theme="light"] .card:hover { box-shadow: 0 4px 14px -6px rgba(16,17,26,0.10); }

/* ----- Actor row (LinkedIn) ----- */
.actor { display: flex; align-items: flex-start; gap: var(--sp-3); position: relative; }
.actor:has(.pop) { z-index: 10; }
.actor-logo {
  width: 40px; height: 40px; border-radius: 9px;
  object-fit: cover; background: #fff; flex-shrink: 0;
  border: 1px solid var(--line);
}
.actor-logo-fb {
  width: 40px; height: 40px; border-radius: 9px; flex-shrink: 0;
  background: linear-gradient(135deg,#6E79D6,#8E5BD0);
  color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}

/* ----- Photo avatars (sized by the context class they sit beside) ----- */
.avatar-img { object-fit: cover; border-radius: var(--r-pill); display: block; flex-shrink: 0; background: var(--bg-well); }
.pav.avatar-img       { width: 40px; height: 40px; }
.cav.avatar-img       { width: 24px; height: 24px; }
.av.avatar-img        { width: 28px; height: 28px; }

/* ----- Signal pills (inline on the account-name line) ----- */
.sig {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500;
  color: var(--fg-2);
  background: var(--bg-well);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 9px; white-space: nowrap;
}
.sig::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--fg-3);
}
.actor-main { flex: 1; min-width: 0; padding-top: 1px; }
.actor-line { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.actor-name {
  font-size: 15px; font-weight: 650; color: var(--fg-1);
  letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 240px;
  flex-shrink: 0;
}
.actor-name:hover { color: var(--accent-text); }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-tag); font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 2px 8px 2px 7px;
  white-space: nowrap; flex-shrink: 0;
}
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tag-dot, var(--fg-2)); }
.tag .kind { color: var(--fg-3); font-weight: 600; }

.actor-sub {
  font-size: var(--t-meta); color: var(--fg-3);
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actor-sub a:hover { color: var(--fg-1); text-decoration: underline; text-underline-offset: 2px; }
.actor-sub .dot-sep { opacity: .6; margin: 0 2px; }

/* overflow */
.of { position: relative; flex-shrink: 0; margin: -2px -4px 0 0; }
.of .btn {
  width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--fg-3); border-radius: 6px; display: grid; place-items: center;
}
.of .btn:hover { background: var(--bg-well); color: var(--fg-1); }
.of .btn svg { width: 16px; height: 16px; }
.of .pop {
  position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 210px;
  background: var(--bg-popover); border: 1px solid var(--line);
  border-radius: 10px; padding: 4px; z-index: 50;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,.45);
}
:root[data-theme="light"] .of .pop { box-shadow: 0 16px 40px -12px rgba(16,17,26,.18); }
.of .pop button, .of .pop a {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: transparent; border: 0; padding: 7px 9px; border-radius: 6px;
  font-size: 13px; color: var(--fg-1); text-align: left; font-family: inherit;
}
.of .pop button:hover, .of .pop a:hover { background: var(--bg-well); }
.of .pop svg { width: 14px; height: 14px; color: var(--fg-3); }
.of .pop hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }

/* ----- Anchor ----- */
.anchor { margin-top: var(--sp-3); }

.headline {
  font-size: var(--t-anchor); font-weight: 600; line-height: var(--t-anchor-line);
  letter-spacing: -0.012em; color: var(--fg-1); margin: 0; text-wrap: pretty;
}
.anchor-sub {
  font-size: 12.5px; color: var(--fg-2); margin-top: 5px;
  font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; gap: 4px 0; align-items: center;
}
.anchor-sub .dot-sep { color: var(--fg-3); opacity: .7; margin: 0 8px; }

/* Career: person head (avatar + name + verb) then from → to move */
.person-head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.person-head .pav {
  width: 40px; height: 40px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg,#6E79D6,#8E5BD0);
}
.person-head .pav.violet { background: linear-gradient(135deg,#A78BFA,#7C3AED); }
.person-head .pav.teal   { background: linear-gradient(135deg,#5EEAD4,#14B8A6); }
.person-head .pav.amber  { background: linear-gradient(135deg,#FCD34D,#F59E0B); }
.person-head .pav.rose   { background: linear-gradient(135deg,#FDA4AF,#F43F5E); }
.phead-main { flex: 1; min-width: 0; }
.pname-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pname { font-size: var(--t-anchor); font-weight: 650; color: var(--fg-1); letter-spacing: -0.012em; }
.verb {
  display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--dot-career);
  background: color-mix(in srgb, var(--dot-career) 15%, transparent);
  padding: 2px 8px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.move {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  font-size: 14px; line-height: 1.3; margin-top: 5px;
}
.move .from { color: var(--fg-2); font-weight: 500; }
.move .arrow { color: var(--fg-3); flex-shrink: 0; }
.move .to { color: var(--fg-1); font-weight: 650; letter-spacing: -0.01em; }
.pmeta { font-size: 12.5px; color: var(--fg-3); margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ----- Angle (Trayo's take — clearly separated from the fact) ----- */
.angle { margin-top: var(--sp-5); }
.angle-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--fg-3);
  margin-bottom: var(--sp-2);
  white-space: nowrap;
}
.angle-label .spark {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.angle p {
  margin: 0; font-size: var(--t-body); line-height: var(--t-body-line);
  color: var(--fg-2); text-wrap: pretty;
}
.angle em { font-style: normal; color: var(--accent-text); font-weight: 500; }
.angle .fits {
  margin-top: var(--sp-3);
  padding: 2px 0 2px var(--sp-3);
  border-left: 2px solid var(--accent-line);
  color: var(--fg-2);
}
.angle .fits strong { color: var(--fg-1); font-weight: 600; }

/* ----- Action bar (LinkedIn engagement bar) ----- */
.act {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-4); padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 32px; padding: 0 12px 0 5px;
  border-radius: var(--r-pill); border: 0;
  background: var(--accent); color: #fff;
  font-size: var(--t-cta); font-weight: 600; font-family: inherit;
  white-space: nowrap;
  transition: filter .12s ease, transform .08s ease;
}
.cta:hover { filter: brightness(1.08); }
.cta:active { transform: translateY(1px); }
.cta svg { width: 13px; height: 13px; opacity: .8; }
.cta .cav {
  width: 24px; height: 24px; border-radius: var(--r-pill);
  display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(255,255,255,0.18);
}
.cta strong { font-weight: 700; }

.cta.ghost {
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--line-strong); padding: 0 14px; height: 32px;
}
.cta.ghost:hover { background: var(--bg-well); filter: none; }

/* Deep Research — secondary action, career cards only */
.cta.dr {
  background: transparent; color: var(--accent-text);
  border: 1px solid var(--accent-line); padding: 0 13px; height: 32px;
}
.cta.dr:hover { background: var(--accent-soft); filter: none; }
.cta.dr svg { opacity: 1; color: var(--accent-text); }

.act .role { font-size: 12px; color: var(--fg-3); flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act .spacer { flex: 1; }

.more {
  appearance: none; background: transparent; border: 1px solid var(--line);
  color: var(--fg-2); height: 28px; padding: 0 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; white-space: nowrap; flex-shrink: 0;
}
.more:hover { color: var(--fg-1); border-color: var(--line-strong); background: var(--bg-well); }
.more svg { width: 12px; height: 12px; }

.others { flex-basis: 100%; display: flex; flex-direction: column; gap: 1px;
  margin-top: var(--sp-2); }
.others .it { display: flex; align-items: center; gap: var(--sp-3);
  padding: 7px var(--sp-2); border-radius: 8px; color: var(--fg-1); }
.others .it:hover { background: var(--bg-well); }
.others .it .av {
  width: 28px; height: 28px; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; color: #fff; font-size: 10.5px; font-weight: 700;
  background: linear-gradient(135deg,#6E79D6,#8E5BD0);
}
.others .it .av.violet { background: linear-gradient(135deg,#A78BFA,#7C3AED); }
.others .it .av.teal   { background: linear-gradient(135deg,#5EEAD4,#14B8A6); }
.others .it .av.amber  { background: linear-gradient(135deg,#FCD34D,#F59E0B); }
.others .it .av.rose   { background: linear-gradient(135deg,#FDA4AF,#F43F5E); }
.others .it .nm { font-size: 13px; font-weight: 600; color: var(--fg-1); }
.others .it .rl { font-size: 11.5px; color: var(--fg-3); }
.others .it .info { flex: 1; min-width: 0; }
.others .it .go { color: var(--fg-3); }
.others .it:hover .go { color: var(--accent-text); }

.end { text-align: center; padding: var(--sp-6); color: var(--fg-3); font-size: 12px; }
.empty { text-align: center; padding: 64px 20px; color: var(--fg-3); }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .feed { padding: var(--sp-4); }
  .topbar { padding: 0 var(--sp-4); }
}