/* =============================================================
   SYNDICATE — component kit
   Built on the LongevityGraph "AI Labs" system (colors_and_type.css):
   IBM Plex Sans/Mono, paper-white surfaces, hairline borders, no
   shadows, tight radii, mono uppercase labels.
   Deliberate deviation: GREEN is promoted to the interactive accent
   (buttons, active tabs, links, focus) for the fintech feel — while
   still carrying its semantic weight (firm / positive). Amber =
   pending/soft/caution. Red = rejected/danger.
   ============================================================= */

:root {
  --green-strong: #008F5E;   /* hover / pressed green */
  --green-tint:    #F0FAF5;  /* faint green wash for selected rows */
  --paper-low:     #F2F2EF;  /* surface-low fill for inputs/empty wells */
  /* Tokens used here but defined upstream in emr-styles.css (not linked) —
     mirrored so this folder stays self-contained. */
  --ink-fainter:   #9CA0A4;  /* faint metadata, separators, chevrons */
  --red-soft:      #FEE9D9;  /* soft red chip (rejected / disabled) */
  --amber-soft:    #FEF3C7;  /* soft amber chip (pending / soft) */
}

* { box-sizing: border-box; }

/* The app frame that sits inside each artboard. Paper background,
   fills the artboard. */
.syn-app {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   TOP APP BAR
   ============================================================ */
.syn-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 56px;
  flex-shrink: 0;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.syn-brand { display: flex; align-items: center; gap: 9px; }
.syn-mark {
  width: 18px; height: 18px;
  background: var(--ink);
  border-radius: 4px;
  flex-shrink: 0;
}
.syn-mark.green { background: var(--green); }
.syn-wordmark {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.syn-spacer { flex: 1; }
.syn-topbar-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* Avatar */
.syn-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper-low);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.syn-avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.syn-avatar.lg { width: 40px; height: 40px; font-size: 14px; }

/* ============================================================
   TABS (stage navigation)
   ============================================================ */
.syn-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 28px;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
  flex-shrink: 0;
}
.syn-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 13px 4px;
  margin-right: 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--t-fast);
}
.syn-tab:hover { color: var(--ink); }
.syn-tab.active {
  color: var(--ink);
  font-weight: 500;
  border-bottom-color: var(--green);
}
.syn-tab-count {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.syn-tab.active .syn-tab-count { color: var(--green); }

/* ============================================================
   PAGE LAYOUT
   ============================================================ */
.syn-main {
  flex: 1;
  overflow: hidden;
  padding: 28px;
}
.syn-page {
  max-width: 1120px;
  margin: 0 auto;
}
.syn-pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.syn-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 12px;
}
.syn-title {
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
}
.syn-subline {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-top: 7px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.syn-subline .sep { color: var(--ink-fainter); }
.syn-section-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.syn-section-label .count {
  color: var(--ink-fainter);
  font-weight: 400;
}

/* ============================================================
   BUTTONS — green primary (promoted accent)
   ============================================================ */
.syn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.syn-btn svg { width: 14px; height: 14px; }

/* Primary — green fill */
.syn-btn-primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.syn-btn-primary:hover { background: var(--green-strong); border-color: var(--green-strong); }

/* Secondary — hairline outline */
.syn-btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.syn-btn-secondary:hover { border-color: var(--ink); }

/* Ghost / quiet */
.syn-btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: transparent;
  padding: 7px 9px;
}
.syn-btn-ghost:hover { color: var(--ink); background: rgba(15,17,18,0.04); }

/* Destructive */
.syn-btn-danger {
  background: var(--surface);
  color: var(--red);
  border-color: var(--hairline-strong);
}
.syn-btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.syn-btn.block { width: 100%; }
.syn-btn.lg { padding: 12px 18px; font-size: 14px; }

/* Quiet inline action (table row controls) */
.syn-action {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  cursor: pointer;
  background: none; border: none; padding: 4px 6px;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.syn-action:hover { color: var(--ink); background: rgba(15,17,18,0.04); }
.syn-action.danger:hover { color: var(--red); background: var(--red-soft); }

/* Google sign-in button */
.syn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.syn-google:hover { border-color: var(--ink); }
.syn-google svg { width: 17px; height: 17px; }

/* ============================================================
   CARDS
   ============================================================ */
.syn-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.syn-card-pad { padding: 18px 20px; }
.syn-card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--hairline);
}
.syn-card-title {
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ============================================================
   STAT / METRIC TILES
   ============================================================ */
.syn-stats {
  display: grid;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.syn-stat {
  background: var(--surface);
  padding: 14px 16px;
}
.syn-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 7px;
}
.syn-stat-value {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 7px;
}
.syn-stat-delta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}
.syn-stat-delta.up { color: var(--green); }
.syn-stat-delta.down { color: var(--red); }
.syn-stat-sub {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  margin-top: 5px;
}

/* ============================================================
   STATUS PILLS / BADGES
   ============================================================ */
.syn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}
.syn-pill::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.syn-pill.dotless::before { display: none; }

/* semantic */
.syn-pill.firm,
.syn-pill.active   { background: var(--green-soft); color: var(--green); }
.syn-pill.firm::before, .syn-pill.active::before { background: var(--green); }

.syn-pill.soft,
.syn-pill.pending  { background: var(--amber-soft); color: var(--amber); }
.syn-pill.soft::before, .syn-pill.pending::before { background: var(--amber); }

.syn-pill.rejected,
.syn-pill.disabled { background: var(--red-soft); color: var(--red); }
.syn-pill.rejected::before, .syn-pill.disabled::before { background: var(--red); }

/* neutral / structural pills (stage badges, roles) */
.syn-pill.neutral {
  background: var(--paper-low);
  color: var(--ink-soft);
}
.syn-pill.neutral::before { background: var(--ink-fainter); }
.syn-pill.ink {
  background: var(--ink);
  color: var(--paper);
}
.syn-pill.ink::before { display: none; }
.syn-pill.outline {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--ink-soft);
}
.syn-pill.outline::before { display: none; }

/* role tag (admin/member) — quiet */
.syn-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--hairline-strong);
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.syn-tag.admin { color: var(--ink); border-color: var(--ink); }

/* ============================================================
   LIST ROWS
   ============================================================ */
.syn-list {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.syn-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 15px 18px;
}
.syn-row + .syn-row { border-top: 1px solid var(--hairline); }
.syn-row.clickable { cursor: pointer; transition: background var(--t-fast); }
.syn-row.clickable:hover { background: var(--paper); }
.syn-row-main { flex: 1; min-width: 0; }
.syn-row-top {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 4px;
}
.syn-row-name {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.syn-row-sub {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
}
.syn-row-sub .sep { color: var(--ink-fainter); }
.syn-row-metrics {
  display: flex;
  gap: 28px;
  flex-shrink: 0;
}
.syn-metric { text-align: right; }
.syn-metric-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 3px;
}
.syn-metric-value {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.syn-metric-value.green { color: var(--green); }
.syn-row-actions {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}

/* ============================================================
   FORMS
   ============================================================ */
.syn-form-section {
  margin-bottom: 26px;
}
.syn-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
}
.syn-form-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.syn-field { display: flex; flex-direction: column; gap: 6px; }
.syn-field.span-2 { grid-column: span 2; }
.syn-field.span-3 { grid-column: 1 / -1; }
.syn-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
}
.syn-label .req { color: var(--red); margin-left: 2px; }
.syn-label .opt {
  font-family: var(--mono);
  font-size: 10px; font-weight: 400; letter-spacing: 0.05em;
  color: var(--ink-fainter);
  text-transform: uppercase;
  margin-left: 6px;
}
.syn-input,
.syn-select,
.syn-textarea {
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-sm);
  padding: 9px 11px;
  width: 100%;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.syn-input::placeholder, .syn-textarea::placeholder { color: var(--ink-fainter); }
.syn-input:focus, .syn-select:focus, .syn-textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-tint);
}
.syn-input.has-prefix { padding-left: 26px; }
.syn-input-wrap { position: relative; }
.syn-input-prefix {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-faint);
  pointer-events: none;
}
.syn-input.readonly,
.syn-input[readonly] {
  background: var(--paper-low);
  color: var(--ink-soft);
  border-color: var(--hairline);
}
.syn-textarea { resize: none; line-height: 1.5; }
.syn-help {
  font-size: 11.5px;
  color: var(--ink-faint);
  line-height: 1.45;
}
.syn-field.error .syn-input { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.syn-error {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--red);
}

/* segmented control (soft/firm, member/admin) */
.syn-segment {
  display: inline-flex;
  background: var(--paper-low);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.syn-segment.block { display: flex; }
.syn-seg-opt {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 7px 16px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.syn-seg-opt.active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(15,17,18,0.06);
}
.syn-seg-opt.active.firm { color: var(--green); }

/* toggle switch */
.syn-toggle {
  width: 38px; height: 22px;
  border-radius: 11px;
  background: var(--hairline-strong);
  position: relative;
  cursor: pointer;
  transition: background var(--t-fast);
  flex-shrink: 0;
}
.syn-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--t-fast);
}
.syn-toggle.on { background: var(--green); }
.syn-toggle.on::after { transform: translateX(16px); }

/* mono code field (invite url) */
.syn-codefield {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--ink);
  background: var(--paper-low);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}
.syn-codefield .url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syn-codefield.disabled { color: var(--ink-fainter); }

/* ============================================================
   MODALS
   ============================================================ */
.syn-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15,17,18,0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.syn-modal {
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-lg);
  width: 100%;
  box-shadow: 0 24px 60px rgba(15,17,18,0.18);
  overflow: hidden;
}
.syn-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 14px;
}
.syn-modal-title {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.syn-modal-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 4px;
}
.syn-modal-close {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--ink-faint);
  background: none; border: none; cursor: pointer;
  line-height: 1; padding: 2px;
}
.syn-modal-body { padding: 6px 22px 8px; }
.syn-modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 22px 20px;
  margin-top: 8px;
}
.syn-modal-foot .left { margin-right: auto; }

/* ============================================================
   AUTH / CENTERED LAYOUTS
   ============================================================ */
.syn-auth {
  width: 100%; height: 100%;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  font-family: var(--sans);
  color: var(--ink);
}
.syn-auth-card {
  width: 100%;
  max-width: 380px;
  text-align: center;
}
.syn-auth-card.wide { max-width: 440px; }
.syn-auth-brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 28px;
}
.syn-auth-brand .syn-wordmark { font-size: 19px; }
.syn-auth-tagline {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 30px;
  line-height: 1.5;
}
.syn-auth-foot {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 18px;
  line-height: 1.5;
}
.syn-auth-icon {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
}
.syn-auth-icon svg { width: 22px; height: 22px; }
.syn-auth-icon.green { background: var(--green-soft); color: var(--green); }
.syn-auth-icon.amber { background: var(--amber-soft); color: var(--amber); }
.syn-auth-icon.neutral { background: var(--paper-low); color: var(--ink-soft); }
.syn-auth-h {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.syn-auth-body {
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 22px;
}
.syn-link {
  color: var(--green);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font-weight: 500;
}
.syn-link:hover { border-bottom-color: var(--green); }
.syn-link-quiet {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--hairline-strong);
  cursor: pointer;
}
.syn-link-quiet:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* read-only detail rows (pending screen) */
.syn-readrows {
  text-align: left;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.syn-readrow {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 15px;
  font-size: 13px;
}
.syn-readrow + .syn-readrow { border-top: 1px solid var(--hairline); }
.syn-readrow .k {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
.syn-readrow .v { color: var(--ink); font-weight: 500; text-align: right; }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.syn-empty {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-md);
  background: var(--paper-low);
  padding: 56px 32px;
  text-align: center;
}
.syn-empty-mark {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  color: var(--ink-fainter);
}
.syn-empty-mark svg { width: 20px; height: 20px; }
.syn-empty-h {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
}
.syn-empty-p {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

/* ============================================================
   MISC
   ============================================================ */
.syn-prose {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.syn-prose.soft { color: var(--ink-soft); }
.syn-divider { height: 1px; background: var(--hairline); margin: 22px 0; }

/* progress bar (commitment target) */
.syn-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--paper-low);
  overflow: hidden;
}
.syn-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
}
.syn-progress-fill.soft { background: var(--amber); }

/* research / link item */
.syn-linkitem {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
}
.syn-linkitem + .syn-linkitem { border-top: 1px solid var(--hairline); }
.syn-linkicon {
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--paper-low);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.syn-linkicon svg { width: 14px; height: 14px; }
.syn-linkitem-main { flex: 1; min-width: 0; }
.syn-linkitem-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.syn-linkitem-meta {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: 0.03em; margin-top: 2px;
}

/* comment / discussion */
.syn-comment { display: flex; gap: 12px; padding: 14px 0; }
.syn-comment + .syn-comment { border-top: 1px solid var(--hairline); }
.syn-comment-main { flex: 1; min-width: 0; }
.syn-comment-head {
  display: flex; align-items: baseline; gap: 9px;
  margin-bottom: 4px;
}
.syn-comment-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.syn-comment-time {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  letter-spacing: 0.03em;
}
.syn-comment-body { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* ============================================================
   ICON SIZING — Icon.* svgs have no intrinsic size; constrain them.
   Order matters: broad default first, specific overrides after.
   ============================================================ */
.syn-app svg { width: 14px; height: 14px; flex-shrink: 0; }
.syn-error svg { width: 13px; height: 13px; flex-shrink: 0; }
.syn-btn svg { width: 14px; height: 14px; }
.syn-google svg { width: 17px; height: 17px; }
.syn-auth-icon svg { width: 22px; height: 22px; }
.syn-empty-mark svg { width: 20px; height: 20px; }
.syn-modal-close svg { width: 15px; height: 15px; }
.syn-linkicon svg { width: 14px; height: 14px; }

/* utility */
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
.ink-soft { color: var(--ink-soft); }
.ink-faint { color: var(--ink-faint); }
.green-text { color: var(--green); }

/* ============================================================
   APP LAYOUT — natural document flow (mockup used fixed artboards)
   ============================================================ */
.syn-app { height: auto; min-height: 100vh; }
.syn-main { overflow: visible; }
.syn-topbar { position: sticky; top: 0; z-index: 20; }
.syn-tabs { position: sticky; top: 56px; z-index: 19; }

/* clickable links inside prose / comments */
.syn-prose a, .syn-comment-body a, .syn-row-sub a { color: var(--green); border-bottom: 1px solid transparent; }
.syn-prose a:hover, .syn-comment-body a:hover, .syn-row-sub a:hover { border-bottom-color: var(--green); }
a.green-text { color: var(--green); border-bottom: 1px solid transparent; }
a.green-text:hover { border-bottom-color: var(--green); }

/* "Inactive" marker for disabled members */
.syn-inactive { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-fainter); border: 1px solid var(--hairline-strong); border-radius: var(--r-sm);
  padding: 1px 5px; margin-left: 6px; }

/* ============================================================
   RESEARCH — rich link cards (content-hub style)
   ============================================================ */
.syn-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.syn-card-link { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit;
  transition: border-color var(--t-fast); position: relative; }
.syn-card-link:hover { border-color: var(--hairline-strong); }
.syn-thumb { position: relative; width: 100%; aspect-ratio: 16/10; background: var(--paper-low);
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.syn-thumb img { width: 100%; height: 100%; object-fit: cover; }
.syn-thumb .syn-thumb-ic { width: 26px; height: 26px; color: var(--ink-fainter); }
.syn-thumb .syn-play { position: absolute; width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15,17,18,.62); display: flex; align-items: center; justify-content: center; }
.syn-thumb .syn-play::after { content: ""; border-left: 13px solid #fff; border-top: 8px solid transparent;
  border-bottom: 8px solid transparent; margin-left: 3px; }
.syn-card-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.syn-card-kind { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; align-items: center; gap: 6px; }
.syn-card-ttl { font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.syn-card-desc { font-size: 11.5px; color: var(--ink-soft); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.syn-card-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-fainter); margin-top: auto; padding-top: 4px;
  display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.syn-card-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: var(--r-sm);
  background: rgba(250,250,248,.92); border: 1px solid var(--hairline-strong); color: var(--ink-soft);
  display: none; align-items: center; justify-content: center; cursor: pointer; z-index: 2; }
.syn-card-link:hover .syn-card-del { display: flex; }
.syn-card-del:hover { color: var(--red); border-color: var(--red); }
.syn-card-del svg { width: 12px; height: 12px; }

/* comment edit/deleted states + actions */
.syn-comment-actions { display: inline-flex; gap: 8px; margin-left: 8px; opacity: 0; transition: opacity var(--t-fast); }
.syn-comment:hover .syn-comment-actions { opacity: 1; }
.syn-comment-act { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); cursor: pointer; }
.syn-comment-act:hover { color: var(--ink); }
.syn-comment-act.danger:hover { color: var(--red); }
.syn-comment-edited { font-family: var(--mono); font-size: 10px; color: var(--ink-fainter); margin-left: 6px; }
.syn-comment-deleted { font-size: 13px; color: var(--ink-fainter); font-style: italic; }
.syn-comment-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.syn-comment-edit textarea { width: 100%; }
.syn-comment-edit-row { display: flex; gap: 8px; justify-content: flex-end; }