/* ============================================================================
   block-b.css — Block B additions layered on portal.css
   (magic link / Google sign-in, deal timeline, shortcut chip).
   Tokens only — no literal colors outside tokens.css.
   ========================================================================== */

/* ---- login: divider + secondary sign-in methods --------------------------- */

.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px;
  color: var(--text-faint);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: color-mix(in srgb, var(--on-dark) 18%, transparent);
}

.auth-alt { display: flex; flex-direction: column; gap: 9px; }

.btn-alt {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--on-dark) 25%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--on-dark);
  font: 500 13.5px/1 var(--font-ui);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.btn-alt:hover { border-color: var(--brass-bright); }
.btn-alt:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.btn-alt:disabled { opacity: 0.55; cursor: default; }
.btn-alt .g-mark { font: 600 13px/1 var(--font-mono); color: var(--brass-bright); }

/* ---- timeline module ------------------------------------------------------ */

.timeline-entry { padding: 0; overflow: hidden; }
.timeline-entry + .timeline-entry { margin-top: 10px; }

.timeline-entry > summary {
  list-style: none; cursor: pointer;
  padding: 14px 15px;
  display: flex; flex-direction: column; gap: 6px;
}
.timeline-entry > summary::-webkit-details-marker { display: none; }
.timeline-entry > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: -2px; }
.timeline-entry[open] > summary { border-bottom: 1px solid var(--line); }

.timeline-title { display: flex; align-items: center; gap: 9px; }
.timeline-title .name { font: 600 14.5px/1.2 var(--font-ui); color: var(--text); }

.timeline-meta {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  color: var(--text-mute); font-size: 12px;
}
.timeline-meta .mono { font: 500 10.5px/1.6 var(--font-mono); letter-spacing: 0.06em; color: var(--text-faint); }

.timeline-docs { padding: 6px 15px 13px; }
.timeline-none { font-size: 12.5px; color: var(--text-mute); margin: 8px 0 2px; }

.timeline-doc {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0;
}
.timeline-doc + .timeline-doc { border-top: 1px solid var(--line); }

.timeline-doc-main { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; min-width: 0; }
.timeline-doc-main .fname {
  font-size: 13px; color: var(--text-body);
  overflow-wrap: anywhere;
}
.timeline-doc-main .meta { font: 500 10px/1.4 var(--font-mono); letter-spacing: 0.06em; color: var(--text-faint); }

/* the shortcut chip — one stored file linked into several deals */
.chip-linked {
  background: color-mix(in srgb, var(--brass) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  color: var(--brass-deep);
}

.timeline-doc-actions { display: flex; gap: 4px; flex-shrink: 0; }

.btn-link {
  background: none; border: none; cursor: pointer;
  padding: 5px 7px; border-radius: 7px;
  font: 500 12px/1 var(--font-ui);
  color: var(--brass-deep);
}
.btn-link:hover { background: var(--surface-alt); }
.btn-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.btn-link:disabled { opacity: 0.5; cursor: default; }
.btn-link.danger { color: var(--warn); }

/* ---- portal footer (site wiring) ------------------------------------------ */

.portal-foot {
  margin: 26px 0 8px; text-align: center;
  font-size: 12px; color: var(--text-faint);
}
.portal-foot a { color: var(--brass-deep); text-decoration: none; }
.portal-foot a:hover { text-decoration: underline; }

.login-back {
  margin-top: 18px;
  font-size: 12.5px;
}
.login-back a { color: color-mix(in srgb, var(--on-dark) 72%, transparent); text-decoration: none; }
.login-back a:hover { color: var(--on-dark); }