/* ============================================================
   Legal page — styles specific to /legal/. Builds on the shared
   classes in assets/css/site.css (section header, container).
   ============================================================ */

/* ---------------------------------------------------------------
   Sticky tab bar
   --------------------------------------------------------------- */
.trs-legal-tabbar {
  position: sticky; top: 74px; z-index: 90;
  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
}
.trs-legal-tabs { display: flex; gap: 4px; }
.trs-legal-tabs__tab {
  padding: 15px 18px; border: none; background: transparent; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
}
.trs-legal-tabs__tab:hover { color: var(--text-strong); }
.trs-legal-tabs__tab--active { color: var(--brand); border-bottom-color: var(--brand); }

/* ---------------------------------------------------------------
   Page head
   --------------------------------------------------------------- */
.trs-legal-head { background: var(--graphite-50); padding: 56px var(--gutter) 40px; }
.trs-legal-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); }

/* ---------------------------------------------------------------
   Layout: TOC sidebar + content
   --------------------------------------------------------------- */
.trs-legal__layout {
  padding: 56px var(--gutter) 112px; display: grid;
  grid-template-columns: 260px 1fr; gap: 64px; align-items: start;
}

.trs-legal-toc { position: sticky; top: 140px; display: flex; flex-direction: column; gap: 2px; }
.trs-legal-toc__label {
  font-family: var(--font-sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: 10px;
}
.trs-legal-toc__link {
  display: block; padding: 7px 10px; margin-left: -10px; border-radius: var(--radius-sm);
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.4; font-weight: 500;
  color: var(--text-body); text-decoration: none; border-left: 2px solid transparent;
}
.trs-legal-toc__link:hover { color: var(--brand); text-decoration: none; }
.trs-legal-toc__link--active { font-weight: 700; color: var(--brand); border-left: 2px solid var(--brand); }

.trs-legal-content { min-width: 0; }
.trs-legal-p { font-family: var(--font-sans); font-size: 16px; line-height: 1.75; color: var(--text-body); margin: 0 0 20px; }

.trs-legal-section { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--color-border); }
.trs-legal-section:first-of-type { margin-top: 40px; }
.trs-legal-section__title {
  display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 22px;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--text-strong); margin: 0 0 16px;
}
.trs-legal-section__num { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--brand); }
.trs-legal-section .trs-legal-p { font-size: 15.5px; }

.trs-legal-list { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trs-legal-list li { display: flex; gap: 10px; font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--text-body); }
.trs-legal-list__dot { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); margin-top: 9px; }

.trs-legal-address {
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.9; color: var(--text-body);
  background: var(--color-surface); border-left: 3px solid var(--brand); padding: 16px 20px; margin: 8px 0 0;
}

.trs-legal-closing {
  margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--color-border);
  font-family: var(--font-sans); font-size: 14.5px; color: var(--text-muted);
}
.trs-legal-closing a { color: var(--brand); text-decoration: underline; }

@media (max-width: 860px) {
  .trs-legal__layout { grid-template-columns: 1fr; }
  .trs-legal-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px 16px; }
  .trs-legal-toc__label { width: 100%; }
}
@media (max-width: 640px) {
  .trs-legal-tabs { overflow-x: auto; }
  .trs-legal-tabs__tab { white-space: nowrap; }
}