/* ===================================================================
   Version History & Changes sidebar.

   Standing beside the reading column on wide screens (`>= 76rem`). Below
   that it's out of the reading column entirely -- its facts surface through
   the meta strip instead (below) -- so it only ever needs its `.card`
   (primitives.css) resting, in-flow surface at the width where it's shown
   at all: the wide-screen rule below already strips that back off. ===== */

.sidebar-left {
  display: block;
  margin: 1.2rem 0 var(--space-10);
  padding: var(--space-7) var(--space-8);
  font-family: var(--sans);
  font-size: var(--text-xs);
  line-height: 1.35;
}

@media (min-width: 76rem) {
  .sidebar-left {
    position: sticky;
    top: var(--chrome-h);
    max-height: calc(100vh - var(--chrome-h) - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    z-index: 30;
    margin: 0;
    padding: 0 4px var(--space-8) 0;
    background: transparent;
    border: none;
    box-shadow: none;
  }
  /* `1 / -1` spans both of the section page's rows; on the diff page's
     one-row grid the last line is just row 1's own. */
  .doc > .sidebar-left,
  #doc-panel-info {
    grid-column: 1;
    grid-row: 1 / -1;
  }
}

.sidebar-section {
  margin-bottom: 1.1rem;
}
.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-section h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xs);
}

.sidebar-meta-item {
  margin-bottom: var(--space-4);
}
.sidebar-meta-item:last-child {
  margin-bottom: 0;
}
.sidebar-meta-label {
  display: block;
  font-size: var(--text-3xs);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sidebar-meta-value {
  display: block;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--ink);
}
.sidebar-citation {
  color: var(--accent);
  font-family: var(--sans);
  font-weight: 650;
}
.sidebar-status {
  color: var(--note);
  font-style: italic;
}
.sidebar-meta-link {
  color: var(--accent);
  text-decoration: none;
}
.sidebar-meta-link:hover {
  text-decoration: underline;
}

.sidebar-citation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: .1rem 0;
}

.sidebar-citation-text {
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}

.sidebar-copy-btn {
  background: transparent;
  border: none;
  padding: 2px;
  margin: 0 2px 0 0;
  cursor: pointer;
  font: inherit;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

.sidebar-meta-sub {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-2xs);
  font-weight: 400;
  color: var(--faint);
  line-height: 1.35;
  margin-top: .05rem;
}

.sidebar-rp-sub[title] {
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: var(--rule);
  text-underline-offset: 2px;
}
.sidebar-rp-sub[title]:hover {
  color: var(--muted);
  text-decoration-color: var(--muted);
}

.sidebar-prior-amendments {
  margin-top: .15rem;
}

.sidebar-amended-links {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: .15rem;
}
.sidebar-amended-links .sidebar-prior-amendments {
  margin-top: 0;
}
.sidebar-prior-link {
  display: inline-block;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.sidebar-prior-link:hover {
  text-decoration-style: solid;
}

/* Below the sidebar's own breakpoint, Document Info has no tab of its own
   any more -- its facts are reachable from the meta strip instead (below),
   so the card itself stays out of the reading column entirely. At and above
   the breakpoint it's back to being the persistent sidebar, unchanged. */
#doc-panel-info {
  display: none;
}

@media (min-width: 76rem) {
  #doc-panel-info {
    display: block;
  }
  /* Unboxes both panels back to being `.doc`'s own grid children. */
  .doc-stage,
  .doc-tabtrack {
    display: contents;
  }
}

/* The mobile meta strip: the same "Amended"/"Cited by" facts Document Info
   carries, always visible under the title instead of waiting behind a tap.
   Hidden once the sidebar itself is visible (`>= 76rem`), same breakpoint as
   `#doc-panel-info` above. */
.doc-metastrip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: .5rem 0 0;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-xs);
  color: var(--muted);
}
.doc-metastrip .metastrip-item {
  display: inline-flex;
  align-items: center;
}
.doc-metastrip .metastrip-sep {
  color: var(--faint);
}
.doc-metastrip .sidebar-prior-link {
  font-size: inherit;
}

@media (min-width: 76rem) {
  .doc-metastrip {
    display: none;
  }
}

/* A comparison's own "Amended by" row on the Changes page: which Public
   Law(s) it actually spans, each linking to its own (possibly narrower)
   comparison. Reuses `.pill` (primitives.css). */
.amended-by-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: .2rem;
}
.amended-by-chip {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  padding: .25rem .65rem;
  border: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--accent);
  text-decoration: none;
  background: var(--accent-soft);
}
.amended-by-chip svg { flex: 0 0 auto; }
a.amended-by-chip:hover {
  border-color: var(--accent);
}
.amended-by-chip-static {
  color: var(--muted);
  background: transparent;
}
.amended-by-hint {
  margin-top: .4rem;
  font-family: var(--sans);
  font-size: var(--text-3xs);
  color: var(--faint);
}

/* The amendment-history popover's per-row status -- every amendment now
   does the same thing (link to a comparison), so this is the whole state
   space: linked, current, or not archived. */
.amendments-popover-status {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
}
.amendments-popover-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--sans);
  font-size: var(--text-2xs);
  color: var(--accent);
}
.amendments-popover-link:hover {
  text-decoration: underline;
}
.amendments-popover-current {
  color: var(--faint);
}
.amendments-popover-unavailable {
  color: var(--faint);
}

/* The endpoint pickers (diff.css's `.endpoints`), now rendered inside the
   Comparing row instead of their own strip below the title: the row's own
   spacing already separates it from its neighbors, and the sidebar's
   type scale (`--text-xs`) is smaller than the main column's. */
.sidebar-meta-item .endpoints {
  margin: .2rem 0 0;
  font-size: inherit;
}