/* wg21.org Paper Updates report (/mailing/updates/).
   Light chrome shared with the landing/about family: brand/banner tokens + the
   .banner* block from masthead.css, navbar + base tokens + the audience .badge*
   classes from shared-vars.css. This file adds the Mailings subnav, the report
   header, the filter panel, the grouped rows, and the revision-history block. */
@import "shared-vars.css";
@import "masthead.css";

html, body { margin: 0; padding: 0; overflow-x: hidden; }
body.paper-updates-page {
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Bare `a` like landing — must not outrank component link colors (.nav-signin). */
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Wide navbar shell, matching landing/about. */
.navbar-inner { max-width: var(--wrap); padding: 0 var(--pad-x); }

/* The section subnav (.subnav*) is styled in shared-vars.css and rendered by the
   shared _subnav.html.j2; this page just inherits it. */

/* ── Page scaffold ── */
.paper-updates {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-top: 16px;
  padding-inline: var(--pad-x);
  padding-bottom: 80px;
}
.pu-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink-soft);
}
.pu-back:hover { color: var(--accent-blue); }
.pu-back-icon { width: 19px; height: 19px; flex: none; }
/* Only the bottom Back link (the one after the footer) needs top spacing. */
.pu-foot + .pu-back { margin-top: 16px; }

/* Header. */
.pu-head { padding: 16px 0 28px; }
.pu-eyebrow {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #57606a;
}
.pu-eyebrow .slash { color: var(--accent-blue); }
.pu-eyebrow .dot { color: var(--ink-faint, #8b95a6); }
.pu-title {
  margin: 0 0 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -.02em;
  line-height: 1.15;
  color: var(--ink);
}
.pu-range {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-blue);
}
.pu-subtitle { margin: 0; font-size: 15px; color: var(--ink-soft); }

/* Quick presets sit above the bordered filter panel; the label hugs the chips
   rather than reserving the wide filter-label column. */
.pu-quick { margin: 4px 0 14px; gap: 8px; }
.pu-quick .pu-filter-label { flex: 0 0 auto; }

/* ── Filter panel ── */
.pu-filters {
  margin: 0 0 28px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #f6f7f9;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pu-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pu-filter-label {
  flex: 0 0 92px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Inside the panel, stack each label above its controls. The sub-chip disclosure
   row (no label) stays inline. */
.pu-filters .pu-filter-row:not(.pu-subrow) {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.pu-filters .pu-filter-label { flex: none; }
/* Search + result count share one row above the bordered filter panel. */
.pu-searchbar { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.pu-search-wrap { flex: 1 1 auto; min-width: 0; }
.pu-search {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
}
.pu-count {
  margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}
/* The form is layout-transparent (display:contents) so its two range rows fall into
   the .pu-filters column like any other filter row; .pu-range-controls is the actual
   inline-flex row that the label sits above. */
.pu-date-form { display: contents; }
.pu-range-controls { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pu-date-select {
  /* Custom chevron (native arrow spacing is inconsistent across browsers): the
     background-position fixes a roomy gap before the right edge, and padding-right
     keeps the option text clear of it. */
  appearance: none;
  -webkit-appearance: none;
  /* Fixed height (not just padding): without it the box tracks the line height of
     the selected content, so an empty placeholder (29px) jumps to 31px once a
     value is picked, shifting the whole align-center row. */
  height: 31px;
  padding: 0 26px 0 9px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 7px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%2357606a' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}
/* Fixed widths snug to each label so changing a selection never reflows: months
   fit "06 - Jun"; the year boxes only hold a 4-digit year so they're narrower. */
.pu-date-select { width: 102px; }
.pu-date-select[name$="_year"] { width: 78px; }
/* Meeting names are wider and variable; give the plenary selects room. */
.pu-plenary-select { width: 148px; }
.pu-chip-set { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Sub-group disclosure (CWG/LWG under Wording, EWG/LEWG under Evolution): a recessed
   darker tray, sized to its contents and pulled up snug under the parent Target-group
   chips so it reads as a drill-down into the active roll-up. */
.pu-subrow {
  align-self: flex-start;
  gap: 8px;
  margin-top: -7px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #e7eaef;
}
.pu-subrow-arrow { color: var(--ink-faint, #8b95a6); }
.pu-subchips { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.pu-subchip { padding: 5px 10px; font-size: 12px; }
/* Explicit, since the flex display above out-specifies the [hidden] UA rule. */
.pu-subrow[hidden], .pu-subchips[hidden] { display: none; }

/* Chips (filter toggles + buttons). */
.pu-chip {
  appearance: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  transition: background .12s, border-color .12s, color .12s;
}
.pu-chip:hover { border-color: #c4ccd6; color: var(--ink); }
.pu-chip.is-active {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}
/* Clear All / Reset are actions, not filter toggles, but still read as buttons
   (bordered + white) rather than bare text links. */
.pu-chip-ghost { border-color: var(--line); background: #fff; color: var(--ink-soft); }
.pu-chip-ghost:hover { border-color: #c4ccd6; color: var(--accent-blue); }
/* Clear All / Reset stay muted until their filters are active, then light up as a
   live action (Clear All is toggled by JS; Reset by the server on each form swap).
   Both are always in the DOM so toggling never shifts the row. */
.pu-chip-muted { opacity: .5; cursor: default; pointer-events: none; }
/* Enabled: a soft blue-grey fill with dark ink text for clear contrast. */
.pu-chip-muted.is-enabled {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  background: #eaeef2;
  border-color: #d4dbe3;
  color: var(--ink);
}
.pu-chip-muted.is-enabled:hover {
  background: #dfe5ec;
  border-color: #c4ccd6;
  color: var(--ink);
}
/* Quick presets use a faded accent tint by default so they read as a subtle action,
   not a solid (selected) filter chip; they deepen to the solid accent on hover. */
.pu-chip-accent {
  background: var(--accent-dim, #edf2fe);
  border-color: #cfe0fb;
  color: var(--accent-blue);
}
.pu-chip-accent:hover {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
}

.pu-date-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
}

/* ── Grouped results ── */
.pu-group { margin-top: 28px; }
.pu-group-head { margin: 0 0 12px; }
/* The whole header row is the collapse toggle: a full-width button whose flanking
   gradient rules (blue at the outer ends, fading toward the label) make every part
   of the row clickable, not just the centered label. Native chrome is reset so it
   still reads as the centered header text it replaced. */
.pu-group-label {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  padding: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
}
.pu-group-label::before,
.pu-group-label::after {
  content: "";
  flex: 1;
  height: 1px;
}
.pu-group-label::before { background: linear-gradient(to right, rgba(0, 122, 255, .35), transparent); }
.pu-group-label::after  { background: linear-gradient(to left, rgba(0, 122, 255, .35), transparent); }
/* Inner text/count/caret stay snug (their own 6px gap), unaffected by the row's
   16px gap between the gradient rules and the label. */
.pu-group-label-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.pu-group-label:hover { color: var(--accent-blue); }
.pu-group-count { color: var(--ink-faint, #8b95a6); font-weight: 400; }
/* Caret points down when expanded (default), right when collapsed. */
.pu-group-caret {
  color: var(--ink-faint, #8b95a6);
  transition: transform .12s;
  transform: rotate(90deg);
}
.pu-group.is-collapsed .pu-group-caret { transform: none; }
.pu-group.is-collapsed .pu-group-card { display: none; }

/* One bordered card per group; rows divided by hairlines. */
.pu-group-card {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.pu-row { padding: 16px 18px; }
.pu-row + .pu-row { border-top: 1px solid var(--line-soft); }
/* Rows with revisions toggle on click anywhere (links inside opt out in JS). */
.pu-row-expandable { cursor: pointer; }
.pu-row-main { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
/* Disposition pills + revs button, pushed to the right edge so New/Approved form a
   scannable column while the id + audience badges read as the identity on the left. */
.pu-row-right { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; }
.pu-paper-id {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-blue);
}
a.pu-paper-id:hover { text-decoration: underline; }
.pu-status {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid transparent;
}
/* Status pill colors mirror the disposition kinds: adopted green, not-adopted red,
   in-progress amber, new blue, no-status grey. */
.pu-status-approved { color: #1a7f37; background: #e6f4ea; border-color: #b7e0c2; }
.pu-status-not-adopted { color: #b3261e; background: #fce8e6; border-color: #f3c2bd; }
.pu-status-in-progress { color: #8a5a00; background: #fdf3e0; border-color: #f0d9a8; }
.pu-status-new { color: var(--accent-blue); background: #eef3fb; border-color: #cfe0fb; }
.pu-expand {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 12px;
  /* Match the title's line-height so, with the title row's align-items:flex-start,
     the button text top lines up with the title text top. */
  line-height: 1.3;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pu-expand:hover { color: var(--accent-blue); }
.pu-expand-caret { transition: transform .12s; }
.pu-expand[aria-expanded="true"] .pu-expand-caret { transform: rotate(90deg); }
/* Status badges (New / Approved) sit in the right-pinned cluster on the id row. */
.pu-statuses { display: inline-flex; align-items: center; gap: 8px; }
/* Title shares its line with the revs toggle (pushed right); moving revs off the
   id row keeps a crowded audience-badge list from orphaning the status cluster. */
.pu-row-titlerow { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.pu-row-title { flex: 1; min-width: 0; margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.pu-row-titlerow .pu-expand { margin-left: auto; flex-shrink: 0; }
/* Only one revs toggle is visible per breakpoint: the top-row copy on tablet and
   up, the title-row copy on phones (see the mobile block). */
.pu-expand-title { display: none; }
.pu-row-authors { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* Revision history (expandable). The label sits above a stack of revision cards. */
.pu-revisions { margin-top: 12px; }
.pu-revisions-label {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.pu-rev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Revision rows with a light-blue left accent border. */
.pu-rev {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 10px 0 10px 12px;
  border-left: 3px solid #cfe0fb;
}
/* R-label dark (matches the design); the two dates: document date darker, mailing
   month muted. Mono keeps the columns aligned across rows. */
.pu-rev-label { min-width: 1.7em; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.pu-rev-label:hover { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 2px; }
.pu-rev-docdate { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.pu-rev-mailing { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint, #8b95a6); }
/* "New" pinned right, mirroring the paper row's status column. */
.pu-rev-right { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
/* On desktop the audience badges stay inline in the rev row (the wrapper is
   transparent); on phones they drop to their own line — see the mobile block. */
.pu-rev-badges { display: contents; }
/* "New" marks the latest revision (the one added this cycle). */
.pu-rev-new {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 2px;
  color: var(--accent-blue);
  background: #eef3fb;
  border: 1px solid #cfe0fb;
}

/* Footer + empty state. */
.pu-foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.pu-foot-link { color: var(--accent-blue); font-weight: 600; }
.pu-foot-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.pu-empty {
  margin: 40px 0;
  padding: 32px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-soft);
}

/* No-results empty state (client filters/search matched nothing). */
.pu-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 56px 20px;
  margin-top: 28px;
}
.pu-no-results[hidden] { display: none; }
.pu-no-results-icon { width: 40px; height: 40px; color: var(--ink-faint, #8b95a6); }
.pu-no-results-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.pu-no-results-hint { margin: 0; font-size: 14px; color: var(--ink-soft); }
.pu-no-results-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pu-no-results-actions button[hidden] { display: none; }

/* Hidden by JS-toggled filtering. */
.pu-row[hidden], .pu-group[hidden] { display: none; }

/* ── Entrance animation ── */
/* Group cards fade + rise when JS opts in (filter change, clear, window swap,
   initial load); JS sets a small staggered animation-delay per visible card. */
@keyframes pu-rise {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.pu-group.pu-rise { animation: pu-rise 180ms ease both; }

/* ── Skeleton (shown while a brand-new window fetches) ── */
.pu-skel-group { margin-top: 28px; }
.pu-skel-head { width: 160px; height: 12px; margin: 0 0 10px; border-radius: 4px; }
.pu-skel-card {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
}
.pu-skel-row { padding: 16px 18px; }
.pu-skel-row + .pu-skel-row { border-top: 1px solid var(--line-soft); }
.pu-skel-line { height: 12px; margin: 7px 0; border-radius: 4px; }
.pu-skel-head,
.pu-skel-line {
  background-color: #e7eaee;
  background-image: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: pu-shimmer 1.3s infinite;
}
@keyframes pu-shimmer {
  from { background-position: -120% 0; }
  to   { background-position: 220% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pu-group.pu-rise { animation: none; }
  .pu-skel-head, .pu-skel-line { animation: none; }
}

@media (max-width: 720px) {
  .pu-title { font-size: 24px; }
  /* Drop the window range onto its own line so it doesn't crowd the title. */
  .pu-range { display: block; margin-left: 0; margin-top: 4px; }
  .pu-filter-label { flex-basis: 100%; }
  .pu-foot { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Stack the search box above its result count on narrow screens. */
  .pu-searchbar { flex-direction: column; align-items: stretch; gap: 8px; }
}

/* On phones, tighten the gap within each pair — the two audience badges (EWG/CWG)
   and the two status pills (New/Approved) — so each reads as one unit on a cramped
   row. Negative margin trims the 10px flex gap only between adjacent same-type items;
   the id-to-badge and pill-to-rev-button gaps stay put. */
@media (max-width: 560px) {
  /* Condense the rows: tighter padding and type so more fits on a phone. */
  .pu-row { padding: 12px 14px; }
  /* On phones the title keeps the 8px title-row offset but drops its own top
     margin, so it sits closer under the id/badge row than the desktop default. */
  .pu-row-titlerow { margin-top: 8px; }
  .pu-row-title { font-size: 15px; margin: 0 0 3px; }
  /* Swap which revs toggle shows: title-row copy on phones, top-row copy hidden. */
  .pu-expand-top { display: none; }
  .pu-expand-title { display: inline-flex; }
  .pu-row-authors { font-size: 12px; }
  .pu-revisions { margin-top: 8px; }

  /* Audience badges and status pills each stay tight internally (read as one unit). */
  .pu-row .badge + .badge,
  .pu-statuses .pu-status + .pu-status { margin-left: -5px; }

  /* Revision rows: keep "New" pinned to the right edge (mirrors the paper row's
     New/Approved column) even when the row wraps on a phone. */
  .pu-rev { gap: 6px 10px; padding: 6px 0 6px 10px; }
  .pu-rev-right { margin-left: auto; }
  /* Phones only: audience badges drop to their own left-aligned line below the
     meta (order:1 + full basis) so a long list doesn't orphan "New". */
  .pu-rev-badges {
    order: 1;
    flex-basis: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
  }
}