/*
 * Documents Timeline
 * Design tokens are scoped to .docs-timeline on purpose: the plugin must not
 * restyle the surrounding theme. Nothing here targets a bare element
 * selector outside that scope.
 *
 * Responsive behaviour uses container queries against the widget's own
 * inline size, per the handoff, so the component is correct inside a
 * narrow column as well as full width.
 */

.docs-timeline {
  /* ---------- Color ---------- */
  --docs-timeline-navy-900: #142C89;
  --docs-timeline-navy-800: #213967;
  --docs-timeline-navy-700: #284671;
  --docs-timeline-navy-100: #EFF2FF;
  --docs-timeline-blue-600: #2D71FF;
  --docs-timeline-ice-100: #EEF6FB;
  --docs-timeline-white: #FFFFFF;
  --docs-timeline-gray-050: #F7F8F9;
  --docs-timeline-gray-100: #F4F5F8;
  --docs-timeline-gray-300: #E3E5EA;
  --docs-timeline-gray-500: #8A8F9C;

  --docs-timeline-text-heading: var(--docs-timeline-navy-900);
  --docs-timeline-text-body: var(--docs-timeline-navy-700);
  --docs-timeline-text-muted: var(--docs-timeline-gray-500);
  --docs-timeline-text-link: var(--docs-timeline-blue-600);
  --docs-timeline-surface-card: var(--docs-timeline-white);
  --docs-timeline-surface-panel: var(--docs-timeline-gray-100);
  --docs-timeline-surface-input: var(--docs-timeline-gray-050);
  --docs-timeline-surface-pill: var(--docs-timeline-navy-100);
  --docs-timeline-surface-row-alt: var(--docs-timeline-ice-100);
  --docs-timeline-border-hairline: var(--docs-timeline-gray-300);
  --docs-timeline-action-bg: var(--docs-timeline-navy-900);
  --docs-timeline-action-bg-hover: #0F216A;

  /* ---------- Type ---------- */
  --docs-timeline-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --docs-timeline-text-base: 16px;
  --docs-timeline-text-sm: 15px;
  --docs-timeline-text-xs: 14px;
  --docs-timeline-weight-regular: 400;
  --docs-timeline-weight-semibold: 600;
  --docs-timeline-weight-bold: 700;
  --docs-timeline-leading-tight: 1.18;
  --docs-timeline-leading-relaxed: 1.6;
  --docs-timeline-tracking-tight: -0.01em;

  /* ---------- Radius ---------- */
  --docs-timeline-radius-sm: 4px;
  --docs-timeline-radius-md: 6px;
  --docs-timeline-radius-lg: 12px;
  --docs-timeline-radius-full: 999px;

  /* ---------- Motion ---------- */
  --docs-timeline-ease: cubic-bezier(.2, .6, .3, 1);
  --docs-timeline-transition-color:
    color 200ms var(--docs-timeline-ease),
    background-color 200ms var(--docs-timeline-ease),
    border-color 200ms var(--docs-timeline-ease);

  /* ---------- Responsive scalars (overridden in container queries) ---------- */
  --docs-timeline-page-pad: 0 32px 96px;
  --docs-timeline-tab-gap: 32px;
  --docs-timeline-tab-size: 18px;
  --docs-timeline-month-chip-w: 86px;
  --docs-timeline-month-heading-size: 24px;
  --docs-timeline-day-size: 22px;
  --docs-timeline-card-gap: 10px;
  --docs-timeline-row-pad: 13px 18px;
  --docs-timeline-desc-pad: 0 18px 16px;
  --docs-timeline-link-pad: 6px 18px;

  /*
   * This element only establishes the query container. A container query
   * cannot style the container itself, so every value that changes at a
   * breakpoint lives on .docs-timeline__inner instead.
   */
  container-type: inline-size;
  container-name: docs-timeline;
  box-sizing: border-box;
  background: var(--docs-timeline-white);
  font-family: var(--docs-timeline-font);
  font-size: var(--docs-timeline-text-base);
  line-height: var(--docs-timeline-leading-relaxed);
  color: var(--docs-timeline-text-body);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

.docs-timeline *,
.docs-timeline *::before,
.docs-timeline *::after { box-sizing: border-box; }

/* Our own display rules would otherwise beat the UA rule for [hidden]. */
.docs-timeline [hidden] { display: none !important; }

/*
 * Themes love to put margins and text-transform on everything. Reset inside
 * our scope only, and through :where() so these carry zero specificity --
 * a plain element reset would otherwise outrank the component classes below
 * and silently drop their margins.
 */
:where(.docs-timeline) :where(h1, h2, p, dl, dd, dt, figure) {
  margin: 0;
  padding: 0;
}

:where(.docs-timeline) :where(button, input) {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
}

.docs-timeline :focus-visible {
  outline: 2px solid var(--docs-timeline-blue-600);
  outline-offset: 2px;
  border-radius: 2px;
}

.docs-timeline__inner {
  /* content-box so the page padding sits outside the 1140px measure,
     giving the 1204px overall width the design was drawn at.

     Top padding is zero on purpose: the heading and intro copy are authored
     in Elementor above the shortcode, so the space above the widget belongs
     to that layout, not to this component. */
  box-sizing: content-box;
  max-width: 1140px;
  margin: 0 auto;
  padding: var(--docs-timeline-page-pad);
}

/* ============================ Filter bar ============================ */

.docs-timeline__years {
  display: flex;
  flex-wrap: wrap;
  gap: var(--docs-timeline-tab-gap);
  border-bottom: 1px solid var(--docs-timeline-border-hairline);
  margin: 0 0 24px;
}

.docs-timeline__year {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0 0 12px;
  margin: 0 0 -1px;
  cursor: pointer;
  font-size: var(--docs-timeline-tab-size);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: 1.2;
  color: var(--docs-timeline-text-muted);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__year[aria-pressed="true"] {
  color: var(--docs-timeline-navy-900);
  border-bottom-color: var(--docs-timeline-navy-900);
}

.docs-timeline__year:hover { color: var(--docs-timeline-navy-900); }

.docs-timeline__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 24px;
  justify-content: space-between;
  margin: 0 0 24px;
}

.docs-timeline__searchfield {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 320px;
  min-width: 260px;
}

.docs-timeline__label {
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  color: var(--docs-timeline-text-body);
  line-height: 1.4;
}

.docs-timeline__search {
  width: 100%;
  margin: 0;
  padding: 13px 16px;
  background: var(--docs-timeline-surface-input);
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-sm);
  font-size: var(--docs-timeline-text-sm);
  line-height: 1.4;
  color: var(--docs-timeline-text-body);
  box-shadow: none;
}

.docs-timeline__search::placeholder { color: var(--docs-timeline-text-muted); opacity: 1; }

.docs-timeline__viewtoggle {
  display: flex;
  gap: 10px;
  align-items: center;
}

.docs-timeline__viewcaption {
  font-size: var(--docs-timeline-text-xs);
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__viewbtn {
  padding: 9px 18px;
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.3;
  background: var(--docs-timeline-white);
  color: var(--docs-timeline-navy-900);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__viewbtn[aria-pressed="true"] {
  background: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

.docs-timeline__types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.docs-timeline__chip {
  padding: 7px 15px;
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.3;
  background: var(--docs-timeline-surface-pill);
  color: var(--docs-timeline-navy-900);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__chip[aria-pressed="true"] {
  background: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

/* ---------- Type filter ---------- */

/*
 * A disclosure rather than a row of chips. With two dozen document types a
 * chip apiece becomes a wall of buttons that pushes the results off screen.
 * The panel is bordered rather than raised: the design system is flat, and
 * the block near the end of this file forces shadows off anyway.
 */

.docs-timeline__typefilter {
  position: relative;
  max-width: 340px;
  margin: 0 0 20px;
}

.docs-timeline__typetoggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  background: var(--docs-timeline-surface-input);
  color: var(--docs-timeline-navy-900);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.3;
  text-align: left;
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__typetoggle-text { flex: 0 0 auto; }

.docs-timeline__typetoggle-value {
  flex: 1 1 auto;
  color: var(--docs-timeline-text-muted);
  font-weight: var(--docs-timeline-weight-regular);
}

/* Drawn with borders, so it needs no rotation to flip. */
.docs-timeline__typetoggle-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
}

.docs-timeline__typefilter.is-open .docs-timeline__typetoggle-caret {
  border-top: none;
  border-bottom: 6px solid currentColor;
}

.docs-timeline__typepanel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 10px;
  background: var(--docs-timeline-surface-card);
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-lg);
}

/* Explicit, because a theme reset that sets display on this element would
   otherwise defeat the hidden attribute. */
.docs-timeline__typepanel[hidden] { display: none; }

.docs-timeline__typelist {
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
}

.docs-timeline__typeopt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: var(--docs-timeline-radius-sm);
  color: var(--docs-timeline-navy-900);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  line-height: 1.3;
}

.docs-timeline__typeopt:hover { background: var(--docs-timeline-surface-panel); }

.docs-timeline__typecheck {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--docs-timeline-navy-900);
}

.docs-timeline__typeopt-label { flex: 1 1 auto; }

.docs-timeline__typeopt-count {
  flex: 0 0 auto;
  color: var(--docs-timeline-text-muted);
  font-variant-numeric: tabular-nums;
}

.docs-timeline__typeclear {
  width: 100%;
  margin: 8px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  background: var(--docs-timeline-surface-pill);
  color: var(--docs-timeline-navy-900);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
}

.docs-timeline__months {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  background: var(--docs-timeline-surface-panel);
  border-radius: var(--docs-timeline-radius-lg);
  margin: 0 0 28px;
}

.docs-timeline__month {
  min-width: var(--docs-timeline-month-chip-w);
  padding: 10px 14px;
  border: none;
  border-radius: var(--docs-timeline-radius-sm);
  cursor: pointer;
  text-align: center;
  background: var(--docs-timeline-white);
  color: var(--docs-timeline-navy-900);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__month[aria-pressed="true"] {
  background: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

.docs-timeline__month-name {
  display: block;
  font-size: var(--docs-timeline-text-sm);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: 1.3;
}

.docs-timeline__month-count {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  opacity: .75;
}

.docs-timeline__resultbar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--docs-timeline-border-hairline);
  margin: 0 0 8px;
}

.docs-timeline__count {
  margin: 0;
  font-size: var(--docs-timeline-text-sm);
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__resultmeta {
  display: flex;
  gap: 18px;
  align-items: baseline;
  flex-wrap: wrap;
}

.docs-timeline__axis {
  font-size: var(--docs-timeline-text-xs);
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__expandall {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  color: var(--docs-timeline-text-link);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__expandall:hover { color: var(--docs-timeline-navy-900); text-decoration: underline; }

/* ============================ Timeline ============================ */

.docs-timeline__group { padding: 32px 0 8px; }

.docs-timeline__grouphead {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 18px;
}

.docs-timeline__grouptitle {
  margin: 0;
  font-family: var(--docs-timeline-font);
  font-size: var(--docs-timeline-month-heading-size);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: var(--docs-timeline-leading-tight);
  letter-spacing: var(--docs-timeline-tracking-tight);
  color: var(--docs-timeline-text-heading);
  text-transform: none;
}

.docs-timeline__groupcount {
  font-size: var(--docs-timeline-text-xs);
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__grouprule {
  flex: 1;
  height: 1px;
  background: var(--docs-timeline-border-hairline);
}

.docs-timeline__day {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  align-items: stretch;
}

.docs-timeline__daymark {
  padding: 2px 18px 0 0;
  text-align: right;
}

.docs-timeline__daynum {
  display: block;
  font-family: var(--docs-timeline-font);
  font-size: var(--docs-timeline-day-size);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: 1.1;
  color: var(--docs-timeline-text-heading);
}

/* Month abbreviation only shows when the rail is gone (< 560px). */
.docs-timeline__daymon { display: none; }

.docs-timeline__dayweek {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__dayentries {
  position: relative;
  min-width: 0;
  border-left: 1px solid var(--docs-timeline-border-hairline);
  padding: 0 0 22px 22px;
  display: flex;
  flex-direction: column;
  gap: var(--docs-timeline-card-gap);
}

.docs-timeline__dot {
  position: absolute;
  left: -5px;
  top: 9px;
  width: 9px;
  height: 9px;
  border-radius: var(--docs-timeline-radius-full);
  background: var(--docs-timeline-navy-900);
}

/* ---------- Document card ---------- */

.docs-timeline__card {
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-lg);
  background: var(--docs-timeline-surface-card);
  overflow: hidden;
}

.docs-timeline__cardhead {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 18px;
  row-gap: 10px;
  padding: var(--docs-timeline-row-pad);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__cardhead:hover { background: var(--docs-timeline-gray-050); }

.docs-timeline__cardmain {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

/*
 * The whole header is the expand target, but it must still be a real
 * button for keyboard and screen-reader users. The button carries the
 * document name and stretches an invisible hit area across the header;
 * the View link sits above it so it is never swallowed by the toggle.
 */
.docs-timeline__toggle {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.45;
  color: var(--docs-timeline-text-heading);
}

.docs-timeline__toggle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

.docs-timeline__pill {
  padding: 4px 12px;
  border-radius: var(--docs-timeline-radius-md);
  background: var(--docs-timeline-surface-pill);
  color: var(--docs-timeline-navy-900);
  font-size: 12px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.docs-timeline__cardmeta {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 16px;
  justify-self: end;
  justify-content: flex-end;
}

.docs-timeline__dateline {
  font-size: 12px;
  color: var(--docs-timeline-text-muted);
  white-space: nowrap;
}

.docs-timeline__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: flex-end;
}

.docs-timeline__detailslabel {
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  color: var(--docs-timeline-text-link);
  white-space: nowrap;
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__cardhead:hover .docs-timeline__detailslabel { color: var(--docs-timeline-navy-900); }

.docs-timeline__view {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: var(--docs-timeline-link-pad);
  border-radius: var(--docs-timeline-radius-full);
  background: var(--docs-timeline-action-bg);
  color: var(--docs-timeline-white);
  font-size: 12px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__view:hover,
.docs-timeline__view:focus {
  background: var(--docs-timeline-action-bg-hover);
  color: var(--docs-timeline-white);
  text-decoration: none;
}

.docs-timeline__panel {
  padding: var(--docs-timeline-desc-pad);
  border-top: 1px solid var(--docs-timeline-border-hairline);
}

.docs-timeline__desc {
  margin: 14px 0 0;
  max-width: 78ch;
  font-size: var(--docs-timeline-text-sm);
  line-height: var(--docs-timeline-leading-relaxed);
  color: var(--docs-timeline-text-body);
  text-wrap: pretty;
}

.docs-timeline__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 16px 0 0;
}

.docs-timeline__fields dt {
  font-size: 11px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__fields dd {
  margin: 4px 0 0;
  font-size: var(--docs-timeline-text-xs);
  line-height: 1.4;
  color: var(--docs-timeline-text-body);
}

/* ============================ Table view ============================ */

.docs-timeline__tablewrap {
  margin: 24px 0 0;
  overflow-x: auto;
  border-radius: var(--docs-timeline-radius-lg);
}

.docs-timeline__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--docs-timeline-text-xs);
  min-width: 640px;
  table-layout: auto;
  margin: 0;
  background: transparent;
}

.docs-timeline__table thead tr { background: var(--docs-timeline-navy-800); }

.docs-timeline__table th {
  padding: 14px 16px;
  text-align: left;
  color: var(--docs-timeline-white);
  font-size: var(--docs-timeline-text-sm);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: 1.4;
  border: none;
  text-transform: none;
}

.docs-timeline__table th.docs-timeline__nowrap { white-space: nowrap; }

.docs-timeline__table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--docs-timeline-border-hairline);
  border-left: none;
  border-right: none;
  border-top: none;
  color: var(--docs-timeline-text-body);
  line-height: 1.45;
  vertical-align: top;
}

.docs-timeline__table tbody tr { background: var(--docs-timeline-white); }
.docs-timeline__table tbody tr:nth-child(even) { background: var(--docs-timeline-surface-row-alt); }

.docs-timeline__table td.docs-timeline__cell-name { min-width: 220px; }

.docs-timeline__rowname {
  display: block;
  font-weight: var(--docs-timeline-weight-semibold);
  color: var(--docs-timeline-text-heading);
}

.docs-timeline__rowdesc {
  display: block;
  margin-top: 4px;
  color: var(--docs-timeline-text-muted);
  line-height: 1.5;
}

.docs-timeline__table td.docs-timeline__nowrap { white-space: nowrap; }

.docs-timeline__tablelink {
  color: var(--docs-timeline-text-link);
  text-decoration: none;
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__tablelink:hover {
  color: var(--docs-timeline-navy-900);
  text-decoration: underline;
}

/* ---------- Table below 780px: stacked cards ---------- */

.docs-timeline__stack {
  display: none;
  margin: 20px 0 0;
  flex-direction: column;
  gap: 12px;
}

.docs-timeline__stackcard {
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-lg);
  background: var(--docs-timeline-surface-card);
  padding: 16px;
}

.docs-timeline__stackname {
  display: block;
  font-size: 15px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.45;
  color: var(--docs-timeline-text-heading);
}

.docs-timeline__stackpill {
  display: inline-block;
  margin: 10px 0 0;
}

.docs-timeline__stackdesc {
  margin: 12px 0 0;
  font-size: var(--docs-timeline-text-sm);
  line-height: var(--docs-timeline-leading-relaxed);
  color: var(--docs-timeline-text-body);
  text-wrap: pretty;
}

.docs-timeline__stackfields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--docs-timeline-border-hairline);
}

.docs-timeline__stackfields dt {
  font-size: 11px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.4;
  color: var(--docs-timeline-text-muted);
}

.docs-timeline__stackfields dd {
  margin: 4px 0 0;
  font-size: var(--docs-timeline-text-xs);
  line-height: 1.4;
  color: var(--docs-timeline-text-body);
}

.docs-timeline__stacklink {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 16px 0 0;
  padding: 12px 18px;
  border-radius: var(--docs-timeline-radius-full);
  background: var(--docs-timeline-action-bg);
  color: var(--docs-timeline-white);
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  text-align: center;
  text-decoration: none;
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__stacklink:hover,
.docs-timeline__stacklink:focus {
  background: var(--docs-timeline-action-bg-hover);
  color: var(--docs-timeline-white);
  text-decoration: none;
}

/* ============================ Empty state ============================ */

.docs-timeline__empty {
  padding: 56px 24px;
  text-align: center;
  background: var(--docs-timeline-surface-panel);
  border-radius: var(--docs-timeline-radius-lg);
  margin: 24px 0 0;
}

.docs-timeline__emptytext {
  margin: 0;
  font-size: var(--docs-timeline-text-sm);
  color: var(--docs-timeline-text-body);
}

.docs-timeline__reset {
  margin: 16px 0 0;
  padding: 9px 20px;
  border: none;
  border-radius: var(--docs-timeline-radius-full);
  cursor: pointer;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  background: var(--docs-timeline-action-bg);
  color: var(--docs-timeline-white);
  transition: var(--docs-timeline-transition-color);
}

.docs-timeline__reset:hover { background: var(--docs-timeline-action-bg-hover); }

.docs-timeline__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================ 560 – 780px ============================ */

@container docs-timeline (max-width: 779.98px) {
  .docs-timeline__inner {
    --docs-timeline-page-pad: 0 24px 72px;
  }

  /* The table does not scroll sideways here; it becomes a card list. */
  .docs-timeline__tablewrap { display: none; }
  .docs-timeline__stack { display: flex; }

  /* Meta cluster drops below the name, full width, left aligned. */
  .docs-timeline__cardhead { grid-template-columns: minmax(0, 1fr); }

  .docs-timeline__cardmeta {
    flex-wrap: wrap;
    justify-self: stretch;
    justify-content: flex-start;
    width: 100%;
  }
}

/* ============================ Below 560px ============================ */

@container docs-timeline (max-width: 559.98px) {
  .docs-timeline__inner {
    --docs-timeline-page-pad: 0 16px 64px;
    --docs-timeline-tab-gap: 20px;
    --docs-timeline-tab-size: 16px;
    --docs-timeline-month-chip-w: 64px;
    --docs-timeline-month-heading-size: 20px;
    --docs-timeline-day-size: 17px;
    --docs-timeline-card-gap: 14px;
    --docs-timeline-row-pad: 14px;
    --docs-timeline-desc-pad: 0 14px 16px;
    --docs-timeline-link-pad: 12px 22px;
  }

  /* The rail is removed: the day becomes an inline header above the cards. */
  .docs-timeline__day { grid-template-columns: minmax(0, 1fr); }

  .docs-timeline__daymark {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0 0 10px;
    text-align: left;
  }

  .docs-timeline__daymon { display: inline; }
  .docs-timeline__dayweek { margin-top: 0; }

  .docs-timeline__dayentries {
    border-left: none;
    padding: 0 0 26px;
  }

  .docs-timeline__dot { display: none; }

  .docs-timeline__cardmeta {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Details left, View right, on their own line. */
  .docs-timeline__actions {
    width: 100%;
    justify-content: space-between;
  }

  /*
   * The handoff asks for a >= 44px touch target here, but the padding it
   * specifies (12px 22px on 12px text) only reaches 41px. Keep the padding
   * as drawn and hold the height with a minimum.
   */
  .docs-timeline__view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
}

/* Honour a reduced-motion preference: the design's only motion is colour. */
@media (prefers-reduced-motion: reduce) {
  .docs-timeline * { transition: none !important; }
}

/* ============================ Theme armour ============================
 *
 * WordPress themes style bare `button`, `a` and `input` heavily, and they
 * almost always style :hover / :focus / :active as well. Those states were
 * the gap in the original reset: a theme rule such as
 *
 *   .entry-content button:hover { background:#2b2b33; color:#fff;
 *                                 border-radius:999px; padding:12px 24px }
 *
 * painted a dark pill over the year tabs and the card title, and its padding
 * shifted the whole page. Declaring only the resting state is not enough.
 *
 * So every interactive element below states its own appearance in every
 * state, selected from the root class down (.docs-timeline .docs-timeline__x)
 * so it outranks the theme's own descendant selectors. Verbose, but this is
 * what makes the widget look the same on a theme it has never met.
 *
 * Deliberately NOT set here: display, min-height and the flex properties the
 * container queries use for the 44px mobile touch targets, which these rules
 * would otherwise outrank.
 */

/*
 * Decoration this design never uses, in any state.
 *
 * !important is deliberate and confined to this block. A theme rule like
 * `.entry-content button:hover` scores the same specificity as the selector
 * below (0,2,1) and wins on order, because theme CSS is almost always
 * enqueued after plugin CSS -- which is how a drop shadow and a 1px lift
 * survived the first pass of this fix.
 *
 * These five properties are safe to force: the design system states that the
 * site is flat and that nothing scales, lifts, rotates or bounces, so no
 * shadow, transform, filter, text-shadow or background-image is ever wanted
 * here. Colour, spacing and type are NOT forced -- those stay overridable.
 */
.docs-timeline :is(button, a, input),
.docs-timeline :is(button, a, input):hover,
.docs-timeline :is(button, a, input):focus,
.docs-timeline :is(button, a, input):active {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- Year tabs ---------- */

.docs-timeline .docs-timeline__year,
.docs-timeline .docs-timeline__year:hover,
.docs-timeline .docs-timeline__year:focus,
.docs-timeline .docs-timeline__year:active {
  background-color: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0 0 12px;
  margin: 0 0 -1px;
  font-size: var(--docs-timeline-tab-size);
  font-weight: var(--docs-timeline-weight-bold);
  line-height: 1.2;
  color: var(--docs-timeline-text-muted);
}

.docs-timeline .docs-timeline__year:hover,
.docs-timeline .docs-timeline__year:focus {
  color: var(--docs-timeline-navy-900);
}

.docs-timeline .docs-timeline__year[aria-pressed="true"],
.docs-timeline .docs-timeline__year[aria-pressed="true"]:hover,
.docs-timeline .docs-timeline__year[aria-pressed="true"]:focus {
  color: var(--docs-timeline-navy-900);
  border-bottom-color: var(--docs-timeline-navy-900);
}

/* ---------- Card title (the expand toggle) ---------- */

.docs-timeline .docs-timeline__toggle,
.docs-timeline .docs-timeline__toggle:hover,
.docs-timeline .docs-timeline__toggle:focus,
.docs-timeline .docs-timeline__toggle:active {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  text-decoration: none;
  font-size: 15px;
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.45;
  color: var(--docs-timeline-text-heading);
}

/* ---------- Timeline / Table switch ---------- */

.docs-timeline .docs-timeline__viewbtn,
.docs-timeline .docs-timeline__viewbtn:hover,
.docs-timeline .docs-timeline__viewbtn:focus,
.docs-timeline .docs-timeline__viewbtn:active {
  background-color: var(--docs-timeline-white);
  color: var(--docs-timeline-navy-900);
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  padding: 9px 18px;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.3;
}

.docs-timeline .docs-timeline__viewbtn[aria-pressed="true"],
.docs-timeline .docs-timeline__viewbtn[aria-pressed="true"]:hover,
.docs-timeline .docs-timeline__viewbtn[aria-pressed="true"]:focus {
  background-color: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

/* ---------- Type chips ---------- */

.docs-timeline .docs-timeline__chip,
.docs-timeline .docs-timeline__chip:hover,
.docs-timeline .docs-timeline__chip:focus,
.docs-timeline .docs-timeline__chip:active {
  background-color: var(--docs-timeline-surface-pill);
  color: var(--docs-timeline-navy-900);
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-md);
  padding: 7px 15px;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  line-height: 1.3;
}

.docs-timeline .docs-timeline__chip[aria-pressed="true"],
.docs-timeline .docs-timeline__chip[aria-pressed="true"]:hover,
.docs-timeline .docs-timeline__chip[aria-pressed="true"]:focus {
  background-color: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

/* ---------- Month scrubber ---------- */

.docs-timeline .docs-timeline__month,
.docs-timeline .docs-timeline__month:hover,
.docs-timeline .docs-timeline__month:focus,
.docs-timeline .docs-timeline__month:active {
  background-color: var(--docs-timeline-white);
  color: var(--docs-timeline-navy-900);
  border: none;
  border-radius: var(--docs-timeline-radius-sm);
  padding: 10px 14px;
  font-weight: var(--docs-timeline-weight-regular);
}

.docs-timeline .docs-timeline__month[aria-pressed="true"],
.docs-timeline .docs-timeline__month[aria-pressed="true"]:hover,
.docs-timeline .docs-timeline__month[aria-pressed="true"]:focus {
  background-color: var(--docs-timeline-navy-900);
  color: var(--docs-timeline-white);
}

/* ---------- Expand all (a text button, not a pill) ---------- */

.docs-timeline .docs-timeline__expandall,
.docs-timeline .docs-timeline__expandall:hover,
.docs-timeline .docs-timeline__expandall:focus,
.docs-timeline .docs-timeline__expandall:active {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
  color: var(--docs-timeline-text-link);
}

.docs-timeline .docs-timeline__expandall:hover,
.docs-timeline .docs-timeline__expandall:focus {
  color: var(--docs-timeline-navy-900);
  text-decoration: underline;
}

/* ---------- Clear filters ---------- */

.docs-timeline .docs-timeline__reset,
.docs-timeline .docs-timeline__reset:hover,
.docs-timeline .docs-timeline__reset:focus,
.docs-timeline .docs-timeline__reset:active {
  background-color: var(--docs-timeline-action-bg);
  color: var(--docs-timeline-white);
  border: none;
  border-radius: var(--docs-timeline-radius-full);
  padding: 9px 20px;
  font-size: var(--docs-timeline-text-xs);
  font-weight: var(--docs-timeline-weight-semibold);
}

.docs-timeline .docs-timeline__reset:hover,
.docs-timeline .docs-timeline__reset:focus {
  background-color: var(--docs-timeline-action-bg-hover);
  color: var(--docs-timeline-white);
}

/* ---------- Document links ---------- */

.docs-timeline .docs-timeline__view,
.docs-timeline .docs-timeline__view:hover,
.docs-timeline .docs-timeline__view:focus,
.docs-timeline .docs-timeline__view:active,
.docs-timeline .docs-timeline__stacklink,
.docs-timeline .docs-timeline__stacklink:hover,
.docs-timeline .docs-timeline__stacklink:focus,
.docs-timeline .docs-timeline__stacklink:active {
  background-color: var(--docs-timeline-action-bg);
  color: var(--docs-timeline-white);
  border: none;
  border-radius: var(--docs-timeline-radius-full);
  text-decoration: none;
  font-weight: var(--docs-timeline-weight-semibold);
}

.docs-timeline .docs-timeline__view:hover,
.docs-timeline .docs-timeline__view:focus,
.docs-timeline .docs-timeline__stacklink:hover,
.docs-timeline .docs-timeline__stacklink:focus {
  background-color: var(--docs-timeline-action-bg-hover);
  color: var(--docs-timeline-white);
}

.docs-timeline .docs-timeline__view,
.docs-timeline .docs-timeline__view:hover,
.docs-timeline .docs-timeline__view:focus {
  padding: var(--docs-timeline-link-pad);
  font-size: 12px;
}

.docs-timeline .docs-timeline__stacklink,
.docs-timeline .docs-timeline__stacklink:hover,
.docs-timeline .docs-timeline__stacklink:focus {
  padding: 12px 18px;
  font-size: var(--docs-timeline-text-xs);
}

/* ---------- Table link (a plain anchor, deliberately) ---------- */

.docs-timeline .docs-timeline__tablelink,
.docs-timeline .docs-timeline__tablelink:active {
  background-color: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  color: var(--docs-timeline-text-link);
  text-decoration: none;
  font-weight: var(--docs-timeline-weight-regular);
}

.docs-timeline .docs-timeline__tablelink:hover,
.docs-timeline .docs-timeline__tablelink:focus {
  background-color: transparent;
  color: var(--docs-timeline-navy-900);
  text-decoration: underline;
}

/* ---------- Search field ---------- */

/*
 * Extra specificity here on purpose. Themes reach for attribute selectors on
 * inputs -- `.entry-content input[type="search"]` scores (0,2,1) and beat the
 * (0,2,0) this rule started as, leaving the field with the theme's pill shape
 * and grey fill. The doubled root class plus the attribute takes it to (0,4,0).
 */
.docs-timeline.docs-timeline .docs-timeline__search[type="search"],
.docs-timeline.docs-timeline .docs-timeline__search[type="search"]:hover,
.docs-timeline.docs-timeline .docs-timeline__search[type="search"]:focus,
.docs-timeline.docs-timeline .docs-timeline__search[type="search"]:active {
  background-color: var(--docs-timeline-surface-input);
  color: var(--docs-timeline-text-body);
  border: 1px solid var(--docs-timeline-border-hairline);
  border-radius: var(--docs-timeline-radius-sm);
  padding: 13px 16px;
  font-size: var(--docs-timeline-text-sm);
  line-height: 1.4;
}