/**
 * sidebar — Figma articles/sidebar. Fixed-width article meta rail: author
 * profile, last-updated date, and a share popover. Designed to sit in a
 * narrow side column; falls back to full width on small screens.
 */

.sidebar-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.sidebar-profile {
  display: flex;
  flex-direction: column;
}

.sidebar-avatar {
  display: block;
  width: var(--spacing-96);
  height: var(--spacing-96);
  margin-bottom: var(--spacing-16);
  overflow: hidden;
  border-radius: 50%;
}

.sidebar-avatar img {
  width: var(--spacing-96);
  height: var(--spacing-96);
  object-fit: cover;
  border-radius: 50%;
}

.sidebar-author {
  margin-bottom: var(--spacing-16);
}

.sidebar-meta {
  display: flex;
  flex-direction: column;
}

.sidebar-name {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--amp-ink-blue, #001e41);
}

.sidebar-role {
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--amp-text, #313131);
}

/* Author bio, sourced from an Author Content Fragment (AC3). Optional — only
   rendered when the referenced fragment supplies a bio. */
.sidebar-bio {
  margin: var(--spacing-8) 0 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--amp-text, #313131);
}

/* Reading time / Last Updated rows: label on the left, mini-tag pill on the
   right. JS appends date before reading; `order` flips them to match Figma. */
.sidebar-date,
.sidebar-reading {
  display: flex;
  align-items: center;
  margin: 0;
}

.sidebar-reading {
  order: 1;
  margin-bottom: var(--spacing-8);
}

.sidebar-date {
  order: 2;
  margin-bottom: var(--spacing-24);
}

/* Flatten the label so its icon + text become direct flex children of the
   row. The label text floats left; the icon joins the value on the right to
   form the mini-tag pill. */
.sidebar-date-label {
  display: contents;
}

.sidebar-meta-text {
  flex: 1;
  min-width: 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: var(--line-height-22);
  color: var(--amp-ink-blue, #001e41);
}

.sidebar-meta-icon {
  order: 1;
  flex: none;
  width: var(--spacing-16);
  height: var(--spacing-16);
  color: var(--amp-ink-blue, #001e41);
}

.sidebar-date-value {
  order: 2;
  margin: 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  color: var(--amp-ink-blue, #001e41);
}

/* Desktop mini-tag pill: form one rounded chip by joining the icon (left
   half) and value (right half) borders. The mobile pill in styles/article.css
   draws its own border on .sidebar-date, so this stays desktop-only to avoid
   a doubled border. */
@media (width >= 1024px) {
  /* 56px top inset aligns the avatar with the article H1 across the gutter
     (Figma sidebar-padding-vt). Desktop-only because the sidebar pieces are
     reparented into the hero on mobile. */
  .sidebar-inner {
    padding-top: var(--spacing-56);
  }

  .sidebar-meta-icon {
    box-sizing: content-box;
    margin-left: var(--spacing-8);
    padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-8);
    border: 1px solid var(--amp-grey-d2, #d2d2d2);
    border-right: 0;
    border-radius: 60px 0 0 60px;
  }

  .sidebar-date .sidebar-date-value,
  .sidebar-reading .sidebar-date-value {
    padding: var(--spacing-4) var(--spacing-12) var(--spacing-4) 0;
    border: 1px solid var(--amp-grey-d2, #d2d2d2);
    border-left: 0;
    border-radius: 0 60px 60px 0;
  }
}

.sidebar-share {
  position: relative;
}

.sidebar-share-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px solid var(--amp-ultramarine-deep, #001b99);
  border-radius: 0;
  background: transparent;
  color: var(--amp-ultramarine-deep, #001b99);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: -0.0071em;
  cursor: pointer;
}

.sidebar-share-toggle:hover {
  border-color: var(--amp-ultramarine, #0018f0);
  color: var(--amp-ultramarine, #0018f0);
}

.sidebar-share-toggle:active {
  border-color: var(--amp-ultramarine, #0018f0);
  background: var(--amp-blue-pale, #eaf4ff);
  color: var(--amp-ultramarine, #0018f0);
}

.sidebar-share-toggle .amp-icon {
  flex: 0 0 var(--spacing-24);
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.sidebar-share-link .amp-icon {
  flex: 0 0 var(--spacing-24);
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.sidebar-share-modal {
  position: absolute;
  z-index: 10;

  /* 4px tool-tip outside-margin + the 8px triangle above the panel. */
  top: calc(100% + 12px);
  left: 0;
  box-sizing: border-box;
  width: 344px;
  max-width: 90vw;
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-32);
  background: var(--amp-bg, #fff);
  border-radius: var(--radius-card, 8px);

  /* elevation-lg as drop-shadow, not box-shadow: it follows the panel+triangle
     silhouette, so no grey seam cuts across the arrow's base. */
  filter: drop-shadow(0 3px 20px rgb(0 0 0 / 10%));
}

/* Push the shadow away from the trigger so it never greys the gap the triangle
   sits in. Blur must not exceed the offset or it spills back into that gap. */
.sidebar-share-modal.points-up {
  filter: drop-shadow(0 12px 12px rgb(0 0 0 / 10%));
}

.sidebar-share-modal.points-down {
  filter: drop-shadow(0 -12px 12px rgb(0 0 0 / 10%));
}

/* containerTriangle (Figma 5417:98179) — 20x8 pointer at the panel's left edge,
   flipped to the opposite edge when JS opens the panel above its trigger. */
.sidebar-share-modal::before {
  content: '';
  position: absolute;
  left: var(--share-pointer-x, 10px);
  display: none;
  width: 20px;
  height: 8px;
  margin-left: -10px;
  background: var(--amp-bg);
}

.sidebar-share-modal.points-up::before {
  bottom: 100%;
  display: block;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.sidebar-share-modal.points-down::before {
  top: 100%;
  display: block;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Dimmer behind the modal. Hidden by default (desktop uses an inline dropdown);
   the mobile bottom-sheet rules in styles/article.css reveal it when open. */
.sidebar-share-scrim {
  display: none;
}

.sidebar-share-close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  padding: var(--spacing-16);
  border: 0;
  background: none;
  color: var(--amp-ultramarine-deep);
  cursor: pointer;
}

.sidebar-share-close .amp-icon {
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.sidebar-share-heading {
  margin: 0 var(--spacing-32) var(--spacing-16) 0;
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-28);
  line-height: var(--line-height-32);
  letter-spacing: -0.0179em;
  color: var(--amp-ink-blue, #001e41);
}

.sidebar-share-body {
  margin: 0 var(--spacing-32) var(--spacing-32) 0;
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-18);
  line-height: var(--line-height-28);
  color: var(--amp-text, #313131);
}

.sidebar-share-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

/* Icon-only, four across (Figma containerSocialButtons 5417:98184). */
.sidebar-share-social {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}

.sidebar-share-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--spacing-8);
  min-height: var(--spacing-48);

  /* Figma strokes sit inside the 48px frame; CSS borders add on top, so the
     block padding absorbs the 1px to keep the button exactly 48 tall. */
  padding: calc(var(--spacing-12) - 1px) var(--spacing-16);
  border: 1px solid var(--amp-ultramarine-deep, #001b99);
  border-radius: 0;
  background: none;
  color: var(--amp-ultramarine-deep, #001b99);
  font-family: var(--heading-font-family);
  font-weight: var(--font-weight-600);
  font-size: var(--font-size-14);
  line-height: var(--line-height-20);
  letter-spacing: -0.0071em;
  text-decoration: none;
  cursor: pointer;
}

.sidebar-share-link:hover {
  background: var(--amp-blue-wash, #f0f3ff);
}

/* Icon-only buttons shrink to the grid track; no room for the 16px inline pad. */
.sidebar-share-social .sidebar-share-link {
  padding: var(--spacing-12) var(--spacing-16);
}

/* The global `a:any-link` / `a:hover` rules (0,1,1) outrank the base class
   rule (0,1,0), which tinted the social icons `--amp-ultramarine`. */
.sidebar-share-buttons a.sidebar-share-link,
.sidebar-share-buttons a.sidebar-share-link:hover {
  color: var(--amp-ultramarine-deep);
  text-decoration: none;
}

.sidebar-copy[data-flash]::after {
  content: attr(data-flash);
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: 0;
  background: var(--amp-ink-blue, #001e41);
  color: var(--amp-bg, #fff);
  font-family: var(--body-font-family);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-12);
  line-height: var(--line-height-16);
  white-space: nowrap;
}