/* ══ Tavvlo app sidebar ══════════════════════════════════════════════
   The one copy of these styles. Extracted verbatim from reputation.html so
   the rail is identical on every app page; js/tavvlo-sidebar.js renders the
   markup that goes with it. Edit here, not per page.
   ══════════════════════════════════════════════════════════════════ */
/* ── SIDEBAR ─────────────────────────────────────────────── */
.rep-sidebar {
  /* Ported from the basepoint shell: a 338px rail on #fafafa, hairline to
     the right, no top padding — the brand row owns that edge. Colours go
     through these tokens so the dark theme can restate them without every
     rule below needing a second copy. */
  --sb-ground: #FBFBFB;
  --sb-line:   #EEEFF1;
  --sb-ink:    #242629;
  --sb-ink-dim: rgba(0,0,0,.55);
  --sb-hover:  rgba(0,0,0,.04);
  --sb-active: #EEEFF1;

  display: flex; flex-direction: column;
  background: #fafafa;
  border-right: 1px solid #eeeef0;
  padding: 0;
  overflow: hidden;
  width: 338px; flex-shrink: 0;
  transition: width .22s cubic-bezier(.4,0,.2,1);
}
html[data-theme="dark"] .rep-sidebar,
html:not([data-theme]) .rep-sidebar {
  --sb-ground: transparent;
  --sb-line:   var(--color-palette--strok-1);
  --sb-ink:    rgba(var(--ink-rgb),.85);
  --sb-ink-dim: rgba(var(--ink-rgb),.5);
  --sb-hover:  rgba(var(--ink-rgb),.06);
  --sb-active: rgba(var(--ink-rgb),.08);
}

/* The workspace row: a fixed 48px band closed by its own rule, rather than
   padding under a floating wordmark. */
.sidebar-logo-wrap {
  display: flex; align-items: center; gap: 9px;
  height: 59px; flex-shrink: 0;
  padding: 0 20px 0 16px;
  border-bottom: 1px solid #f0f0f2;
  gap: 16px;
  justify-content: space-between;
}
.sidebar-logo { height: 15px; width: auto; }
.sidebar-mark {
  display: block; order: -1;
  width: 24px; height: 24px; border-radius: 7px;
  object-fit: cover;
}

/* Collapse toggle — sits by the wordmark, stays put when collapsed. */
.sb-collapse {
  margin-left: 0; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 26px;
  border: none; border-radius: 8px; background: transparent;
  color: #787b7e; cursor: pointer;
  transition: color .15s, background .15s, transform .22s cubic-bezier(.4,0,.2,1);
  height: 28px;
  border-radius: 5px;
}
.sb-collapse:hover { color: rgba(var(--ink-rgb),0.8); background: rgba(var(--ink-rgb),0.05); }
.sb-collapse .sb-icon { width: 16px; height: 16px; }

/* ── Collapsed rail ──────────────────────────────────────── */
/* The source collapses its rail to nothing, but it pairs that with a menu
   button in its own top bar. This hub has no such button and the expand
   chevron lives INSIDE the rail, so a zero width leaves no way back.
   Collapsing therefore stops at the icon strip. */
html[data-sidebar="collapsed"] .rep-sidebar { width: 64px; }
/* The wordmark does not fit the rail, so the square mark remains beside the
   collapse control and carries the identity on its own. */
html[data-sidebar="collapsed"] .rep-sidebar .sidebar-mark { display: block; }
html[data-sidebar="collapsed"] .rep-sidebar .sidebar-logo-wrap {
  gap: 4px; flex-direction: row; padding: 0 5px;
}
html[data-sidebar="collapsed"] .rep-sidebar .sb-item { padding: 12px 0; }
html[data-sidebar="collapsed"] .rep-sidebar .sb-item {
  justify-content: center; gap: 0; padding-left: 0; padding-right: 0;
}
html[data-sidebar="collapsed"] .rep-sidebar .sb-item > span,
html[data-sidebar="collapsed"] .rep-sidebar .sidebar-logo,
html[data-sidebar="collapsed"] .rep-sidebar .sb-prof-info { display: none; }
html[data-sidebar="collapsed"] .rep-sidebar .sidebar-logo-wrap { justify-content: center; }
html[data-sidebar="collapsed"] .sb-collapse { margin-left: 0; transform: rotate(180deg); }
html[data-sidebar="collapsed"] .rep-sidebar .sb-profile-widget { justify-content: center; padding-left: 0; padding-right: 0; }

.sidebar-divider { height: 1px; background: var(--color-palette--strok-1); margin: 10px 0; }

/* Rows are inset from the rail's edge by 10px, so the active pill floats
   clear of the border rather than butting into it. */
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 1px; padding: 10px;
  padding: 0 12px;
  gap: 0;
}
.sidebar-bottom { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }

/* Use the template's nav-link pattern, extended for vertical sidebar */
/* 28px rows on a 9px radius, 6px between icon and label, 14px/500 text at
   full ink — the rail reads as a list of names, not as muted chrome. */
.sb-item {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 8px;
  border-radius: 12px;
  color: var(--sb-ink);
  font-size: 18px; font-weight: 500; line-height: 20px;
  text-decoration: none;
  cursor: pointer; border: none; background: transparent;
  font-family: 'Inter', sans-serif;
  transition: color .15s, background .15s;
  gap: 8px;
  padding: 0 10px;
  font-weight: 400;
  letter-spacing: -.3px;
  line-height: normal;
}
.sb-item:hover { background: var(--sb-hover); }
.sb-item.active { color: var(--sb-ink); background: var(--sb-active);
  background: #edeef0;
}
/* Carries .rep-sidebar so it outranks the bare .sb-icon rule in
   reputation.html's own inline styles, which sets 16. */
.rep-sidebar .sb-icon {
  width: 18px; height: 14px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  height: 18px;
}

/* ── Sidebar profile widget ── */
.sb-profile-widget {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 12px;
  text-decoration: none; cursor: pointer;
  transition: background .15s; margin-top: 6px;
  border: 1px solid transparent;
}
.sb-profile-widget:hover { background: rgba(var(--ink-rgb),0.04); border-color: var(--color-palette--strok-1); }
.sb-prof-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  background: rgba(var(--accent-rgb),0.13); border: 1.5px solid rgba(var(--accent-rgb),0.32);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--color-palette--primary);
  font-family: 'Geist', sans-serif; user-select: none;
}
.sb-prof-info { flex: 1; min-width: 0; }
.sb-prof-name {
  font-size: 13px; font-weight: 600; color: rgba(var(--ink-rgb),0.85);
  font-family: 'Geist', sans-serif; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-prof-plan {
  font-size: 11px; color: rgba(var(--ink-rgb),0.32); margin-top: 1px;
  font-family: 'Inter', sans-serif;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Theme toggle ────────────────────────────────────────── */
/* Two presentations of one control: a labelled row in the sidebar on
   desktop, and a 38px icon button in each panel header on phones
   (where the sidebar is hidden entirely). */
.theme-toggle { width: 100%; text-align: left; }
.theme-switch {
  margin-left: auto; position: relative; flex-shrink: 0;
  width: 34px; height: 19px; border-radius: 99px;
  background: rgba(var(--ink-rgb),0.10);
  border: 1px solid var(--color-palette--strok-1);
  transition: background .18s;
}
.theme-knob {
  position: absolute; top: 2px; left: 2px;
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(var(--ink-rgb),0.55);
  transition: transform .18s cubic-bezier(.4,0,.2,1), background .18s;
}
html[data-theme="light"] .theme-switch { background: rgba(var(--accent-rgb),0.25); border-color: rgba(var(--accent-rgb),0.45); }
html[data-theme="light"] .theme-knob { transform: translateX(15px); background: var(--accent-solid); }

/* Show whichever glyph names the theme currently in effect. */
.theme-icon-sun { display: none; }
html[data-theme="light"] .theme-icon-sun { display: block; }
html[data-theme="light"] .theme-icon-moon { display: none; }

/* ── Workspace row ───────────────────────────────────────────────────
   The square mark, the workspace name and a caret, in the 48px band. The
   wordmark image stays in the DOM but hidden: other scripts swap its src by
   theme, and removing it would break that. */
.rep-sidebar .sidebar-logo { display: none; }
.rep-sidebar .sidebar-mark {
  display: block; width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 9px; object-fit: cover;
  width: 28px;
  height: 29px;
  box-shadow: 0 0 1px 1px #ddd;
  object-fit: cover;
}
.sb-ws-name {
  font-size: 21px; font-weight: 600; line-height: 20px;
  color: var(--sb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700;
  letter-spacing: -.3px;
  margin-right: auto;
}
.sb-ws-caret { width: 16px; height: 14px; flex-shrink: 0; color: var(--sb-ink-dim);
  height: 16px;
  margin-left: -10px;
}

/* ── Quick actions row ───────────────────────────────────────────── */
.sb-quick {
  display: flex; align-items: center; gap: 8px;
  height: auto; flex-shrink: 0; padding: 0 10px;
  padding: 11px 12px 0;
  gap: 8px;
  margin-bottom: 11px;
}
.sb-quick-btn {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
  height: 37px; padding: 0 6px 0 5px;
  border: 1px solid #e9e9ec; border-radius: 9px;
  background: #fff; cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background .15s;
  gap: 8px;
  border-radius: 11px;
  box-shadow: 0 1px 3px #00000009;
  padding: 0 10px;
  flex: 1;
}
.sb-quick-btn:hover { background: var(--sb-hover); }
.sb-quick-key {
  display: grid; place-items: center; flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--sb-active); color: var(--sb-ink-dim);
  font-size: 10px; font-weight: 600;
}
.sb-quick-label {
  flex: 1; min-width: 0; text-align: left;
  font-size: 14px; font-weight: 500; color: var(--sb-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sb-quick-kbd {
  flex-shrink: 0; font-size: 11px; font-weight: 500; line-height: 16px;
  color: #a1a2a5;
  font: 14px Arial, Inter, sans-serif;
  border: 1px solid #f0f0f2;
  border-radius: 7px;
  padding: 3px 5px;
  margin-left: auto;
}
.sb-quick-search {
  display: grid; place-items: center; flex-shrink: 0;
  width: 67px; height: 30px;
  border: 1px solid #e9e9ec; border-radius: 9px;
  background: #fff; color: var(--sb-ink-dim); cursor: pointer;
  transition: background .15s, color .15s;
  height: 37px;
  border-radius: 11px;
  box-shadow: 0 1px 3px #00000009;
  padding: 0 10px;
  justify-content: space-between;
}
.sb-quick-search:hover { background: var(--sb-hover); color: var(--sb-ink); }
.sb-quick-search .sb-icon { width: 14px; height: 14px; }

/* ── Section headings ────────────────────────────────────────────── */
.sb-section {
  display: flex; align-items: center;
  height: 29px; padding: 0 4px 0 9px;
  font-size: 15px; font-weight: 500; line-height: 16px;
  color: #808184;
  margin-top: 22px;
  gap: 8px;
  padding: 0 12px;
  font-weight: 400;
  line-height: normal;
}

/* Nothing but icons fits the 64px rail. */
html[data-sidebar="collapsed"] .rep-sidebar .sb-ws-name,
html[data-sidebar="collapsed"] .rep-sidebar .sb-ws-caret,
html[data-sidebar="collapsed"] .rep-sidebar .sb-section,
html[data-sidebar="collapsed"] .rep-sidebar .sb-quick-btn { display: none; }
html[data-sidebar="collapsed"] .rep-sidebar .sb-quick { justify-content: center; padding: 0; }

/* ── Quick actions palette ───────────────────────────────────────── */
.sb-pal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  background: rgba(16,18,20,.28);
}
.sb-pal[hidden] { display: none; }
.sb-pal-card {
  width: min(560px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--sb-line); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  overflow: hidden;
}
.sb-pal-input {
  width: 100%; height: 48px; padding: 0 16px;
  border: 0; border-bottom: 1px solid var(--sb-line);
  font-size: 15px; font-family: 'Inter', sans-serif; color: var(--sb-ink);
  outline: none; background: transparent;
}
.sb-pal-list { max-height: 320px; overflow-y: auto; padding: 6px; }
.sb-pal-row {
  display: block; width: 100%; text-align: left;
  height: 32px; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent;
  font-size: 14px; font-weight: 500; color: var(--sb-ink);
  font-family: 'Inter', sans-serif; cursor: pointer;
}
.sb-pal-row.is-on { background: var(--sb-active); }
html[data-theme="dark"] .sb-pal-card,
html:not([data-theme]) .sb-pal-card { background: #16181a; }

/* First row under a heading sits 4px clear of it. */
.sb-section + .sb-item { margin-top: 4px; }

/* ── Rail widths, from the source's own breakpoints ─────────────────── */
@media (max-width: 1250px) {
  .rep-sidebar { width: 280px; }
  .sidebar-logo-wrap { padding-right: 12px; }
  .sb-quick { gap: 5px; }
  .sb-quick-btn, .sb-quick-search { padding: 0 7px; }
}
@media (max-width: 850px) {
  .rep-sidebar { width: 235px; }
  .sb-quick-kbd { display: none; }
  .sb-quick-search { width: 35px; }
  .sidebar-logo-wrap { gap: 10px; }
  .sb-ws-name { font-size: 19px; }
}
/* Below this the rail stops taking layout space and slides in over the
   content instead, which is the only way 280px fits a phone. */
@media (max-width: 650px) {
  .rep-sidebar {
    position: absolute; z-index: 5;
    height: 100%; width: 280px;
    box-shadow: 10px 0 40px #0002;
    transform: translateX(-105%);
    transition: transform .2s;
  }
  html[data-sidebar="open"] .rep-sidebar { transform: translateX(0); }
}

/* ── Expandable parents ───────────────────────────────────────────────
   The children hang off a hairline indented 19px, as in the source, so the
   nesting reads without needing a second indent level on the labels. */
.sb-branch { width: 100%; }
.sb-branch-caret {
  margin-left: auto;
  width: 14px !important; height: 14px !important;
  transform: rotate(-90deg);
  transition: transform .18s ease;
}
.sb-branch.is-open .sb-branch-caret { transform: none; }
.sb-children {
  border-left: 1px solid #e6e6e8;
  margin-left: 19px;
}
.sb-children .sb-item { padding-left: 10px; }
.sb-children.is-collapsed { display: none; }
html[data-sidebar="collapsed"] .rep-sidebar .sb-children { display: none; }
html[data-sidebar="collapsed"] .rep-sidebar .sb-branch-caret { display: none; }

/* ══ Attio geometry ══════════════════════════════════════════════════
   The rail restyled to the reference in ~/Downloads/ahbc-attio-recreation:
   a 240px column of 27px rows on a 9px radius, 14px labels, 13px line icons.
   Appended as one block rather than edited into the rules above, which have
   accumulated several passes of overrides and restate the same properties
   two and three times — unpicking that by hand is how a rule that mattered
   gets dropped silently.

   COLOURS GO THROUGH THE EXISTING TOKENS. The reference is light-only; this
   hub is not. Writing #fcfcfc straight onto .rep-sidebar would have taken the
   dark theme with it, so the light values are restated on the tokens the dark
   branch already overrides.
   ══════════════════════════════════════════════════════════════════ */
.rep-sidebar {
  --sb-ground: #fcfcfc;
  --sb-line:   #f0f0f1;
  --sb-ink:    #222426;
  --sb-ink-dim: #747b72;
  --sb-hover:  #f5f5f5;
  --sb-active: #f0f0f0;

  width: 240px;
  min-width: 205px;
  background: var(--sb-ground);
  border-right: 1px solid var(--sb-line);
  /* The reference's own stack. On Windows this resolves to the face the
     screenshot was taken in, which is the point of matching it. */
  font-family: Arial, Helvetica, sans-serif;
}

/* Workspace row — a 48px band, mark + name + caret, closed by a hairline. */
.rep-sidebar .sidebar-logo-wrap {
  height: 48px;
  padding: 0 11px;
  gap: 10px;
  border-bottom: 1px solid var(--sb-line);
}
.rep-sidebar .sidebar-mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  box-shadow: none;
}
.rep-sidebar .sb-ws-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: normal;
}
.rep-sidebar .sb-ws-caret { width: 12px; height: 12px; margin-left: -4px; }
.rep-sidebar .sb-collapse { width: 24px; height: 24px; border-radius: 6px; }
.rep-sidebar .sb-collapse .sb-icon { width: 14px; height: 14px; }

/* Search row: one wide button, one square one, both 28px. */
.rep-sidebar .sb-quick {
  padding: 9px 8px 10px;
  gap: 6px;
  margin-bottom: 0;
}
.rep-sidebar .sb-quick-btn {
  height: 28px;
  padding: 0 7px;
  border-radius: 8px;
  border: 1px solid #eeeeef;
  box-shadow: 0 1px 2px #00000005;
  gap: 7px;
}
.rep-sidebar .sb-quick-key {
  width: 15px; height: 15px;
  border-radius: 4px;
  font-size: 9px;
}
.rep-sidebar .sb-quick-label { font-size: 14px; font-weight: 400; }
.rep-sidebar .sb-quick-kbd {
  font: 11px Arial, Helvetica, sans-serif;
  padding: 1px 4px;
  border-radius: 4px;
  border-color: #f0f0f2;
}
.rep-sidebar .sb-quick-search {
  width: 28px; height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #eeeeef;
  box-shadow: 0 1px 2px #00000005;
  place-items: center;
  justify-content: center;
}
.rep-sidebar .sb-quick-search .sb-icon { width: 13px; height: 13px; }

/* Rows. 27px is the reference's 1.96rem at its 14px root — short enough that
   fourteen of them fit above the fold, which is what makes the rail scannable. */
.rep-sidebar .sidebar-nav { padding: 0 8px; gap: 0; }
.rep-sidebar .sidebar-bottom { padding: 4px 8px; }
.rep-sidebar .sb-item {
  height: 27px;
  gap: 7px;
  padding: 0 9px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: normal;
}
.rep-sidebar .sb-item:hover { background: var(--sb-hover); }
.rep-sidebar .sb-item.active { background: var(--sb-active); }
.rep-sidebar .sb-icon {
  width: 13px; height: 13px;
  stroke-width: 1.8;
}

/* Section headings. Taller than the rows they introduce, so the groups read
   as separated without a rule between them. */
.rep-sidebar .sb-section {
  height: 34px;
  margin-top: 10px;
  padding: 0 9px;
  gap: 9px;
  font-size: 12px;
  font-weight: 400;
  color: var(--sb-ink-dim);
  line-height: normal;
}

/* The Meta parent and its children, at the same scale. */
.rep-sidebar .sb-branch-caret { width: 11px; height: 11px; }
.rep-sidebar .sb-children .sb-item { padding-left: 27px; }

/* Profile row at the foot. */
.rep-sidebar .sb-profile-widget { padding: 7px 9px; border-radius: 9px; gap: 9px; }
.rep-sidebar .sb-prof-avatar {
  width: 26px; height: 26px;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
}
.rep-sidebar .sb-prof-name { font-size: 13px; font-family: Arial, Helvetica, sans-serif; }
.rep-sidebar .sb-prof-plan { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
.rep-sidebar .theme-switch { width: 28px; height: 16px; }
.rep-sidebar .theme-knob { width: 11px; height: 11px; }
html[data-theme="light"] .rep-sidebar .theme-knob { transform: translateX(12px); }

/* ── The Team badge ──────────────────────────────────────────────────
   In the reference, the record objects — Companies, People, Deals — carry a
   filled square badge rather than a line icon, which is what separates "a
   thing you can open records of" from "a page you visit". Team is ours, so
   it gets the same treatment in the same blue. Our own glyph, inverted to
   white inside it. */
.rep-sidebar .sb-item[data-page="team"] .sb-icon {
  width: 15px; height: 15px;
  padding: 2px;
  border-radius: 4px;
  background: #5469e5;
  color: #fff;
  stroke: #fff;
  stroke-width: 2.4;
  box-sizing: border-box;
  overflow: visible;
}

/* The width breakpoints above were written for a 338px rail and would make
   this one WIDER as the window narrows. Below the drawer breakpoint the rail
   simply keeps its width. */
@media (max-width: 1250px) { .rep-sidebar { width: 240px; } }
@media (max-width: 850px)  { .rep-sidebar { width: 218px; }
  .rep-sidebar .sb-quick-search { width: 28px; } }

/* The collapse, restored.
   `min-width: 205px` above is what a rail needs so it never crushes its own
   labels — but min-width beats width, so it also pinned the COLLAPSED rail open
   at 205px while the labels hid themselves. The result looked like a broken
   half-collapse. The floor only applies while the rail is expanded. */
html[data-sidebar="collapsed"] .rep-sidebar {
  width: 64px;
  min-width: 0;
}

/* ── Embed mode ────────────────────────────────────────────────────────
   Set by ?embed=1 before first paint. The page is inside a window on
   /desktop, which supplies its own navigation, so the rail goes away and the
   document stops scrolling as a page - the window scrolls its content. Any
   page rendering this rail gets this for free. */
html[data-embed] .rep-sidebar { display: none !important; }
html[data-embed], html[data-embed] body { height: 100%; overflow: hidden; }

/* ── Scale: the whole rail, 10% up (2026-09-12) ─────────────────────────
   zoom rather than editing every size above: icons, labels, padding, the
   expanded and collapsed widths all grow together and stay in proportion
   (240 -> 264px expanded, 64 -> 70px collapsed). The rail still fills the
   shell's height - a zoomed element sized by its parent is not drawn taller.

   The nav list now shrinks and scrolls when the window is short. It already
   overflowed a 1366x694 laptop by 36px before this change, and overflow:hidden
   on the rail was quietly cutting off the account row at the bottom; at +10%
   that would have been ~100px. Its rows must not shrink with it, or they are
   crushed instead of scrolled (27 -> 24px in testing). */
.rep-sidebar { zoom: 1.1; }
.rep-sidebar .sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.rep-sidebar .sidebar-nav::-webkit-scrollbar { width: 0; height: 0; }
.rep-sidebar .sidebar-nav > * { flex-shrink: 0; }