/* Report components shared by the mini report, the full report and the comparison page.
   Ported from Connor's k3.css with every color routed through the theme tokens in styles.css,
   so the same markup reads correctly on the classic and dark themes. Prefix: ww- */

.ww-linkbtn {
  background: none;
  border: 0;
  color: var(--hue);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0;
  text-decoration: none;
}

.ww-linkbtn:hover { text-decoration: underline; }

.ww-areaname {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.ww-areasub { color: var(--muted-text); font-size: 0.82rem; margin-top: 0.15rem; }

/* ---- hero ordinal ---- */
.ww-hero-big {
  color: var(--text);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 0.6rem;
}

.ww-hero-big small {
  color: var(--muted-text);
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 0.3rem;
}

.ww-hero-big.m-gold { color: var(--gold-ink); }
.ww-hero-big.m-silver { color: var(--silver-ink); }
.ww-hero-big.m-bronze { color: var(--bronze-ink); }

.ww-hero-big.m-gold,
.ww-hero-big.m-silver,
.ww-hero-big.m-bronze { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

.ww-hero-big.m-gold { text-decoration-color: var(--gold-edge); }
.ww-hero-big.m-silver { text-decoration-color: var(--silver-edge); }
.ww-hero-big.m-bronze { text-decoration-color: var(--bronze-edge); }

.ww-lede { color: var(--text); font-size: 0.92rem; line-height: 1.5; margin: 0.7rem 0 0; }
.ww-lede b { font-weight: 700; }
.ww-lede .soft { color: var(--muted-text); }

.num { font-variant-numeric: tabular-nums; }

/* ---- density field ---- */
.ww-field { margin-top: 1.1rem; }
.ww-fieldviz { position: relative; }
.ww-fieldviz svg { display: block; height: 74px; overflow: visible; width: 100%; }

.ww-youpin {
  background: var(--hue-bright);
  border-radius: 999px;
  color: var(--on-accent);
  font-size: 10.5px;
  font-weight: 750;
  padding: 2px 8px;
  position: absolute;
  top: -6px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 2;
}

.ww-youpin::after {
  background: var(--hue-bright);
  content: "";
  height: 58px;
  left: 50%;
  position: absolute;
  top: 100%;
  width: 2px;
}

.ww-medflag {
  color: var(--chart-median);
  font-size: 9.5px;
  font-weight: 650;
  position: absolute;
  top: -4px;
  transform: translateX(-50%);
  white-space: nowrap;
  z-index: 1;
}

.ww-fieldlabels {
  color: var(--muted-text);
  display: flex;
  font-size: 10.5px;
  justify-content: space-between;
  margin-top: 4px;
}

.ww-fieldlabels .lo { color: var(--chart-behind); font-weight: 700; }
.ww-fieldlabels .hi { color: var(--chart-ahead); font-weight: 700; }

.ww-fieldcap { color: var(--muted-text); font-size: 0.75rem; line-height: 1.45; margin-top: 0.5rem; }
.ww-fieldcap b { color: var(--text); font-weight: 650; }

/* every chart mark gets a fat hover pad, so a hairline is easy to hit */
[data-wardtick] { cursor: help; }
[data-wardtick].hot { filter: brightness(1.15); }

/* ---- calls to action ---- */
.ww-ctas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.ww-cta {
  align-items: center;
  background: var(--hue-bright);
  border: 1.5px solid var(--hue-bright);
  border-radius: 999px;
  color: var(--on-accent);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  gap: 0.35rem;
  padding: 0.45rem 0.95rem;
  text-decoration: none;
}

.ww-cta:hover { filter: brightness(1.08); }
.ww-cta.ghost { background: transparent; border-color: var(--border); color: var(--text); }
.ww-cta.ghost:hover { border-color: var(--hue-bright); color: var(--hue); }

/* ---- section heads ---- */
.ww-peekhead {
  align-items: baseline;
  color: var(--muted-text);
  display: flex;
  font-size: 11px;
  font-weight: 700;
  justify-content: space-between;
  letter-spacing: 0.1em;
  margin-top: 1.2rem;
  text-transform: uppercase;
}

.ww-peekhead .ww-seeall { font-size: 0.75rem; letter-spacing: 0; text-transform: none; }

/* ---- rank boxes: strongest / weakest ---- */
.ww-rankboxes {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  margin-top: 0.5rem;
}

.ww-rankbox {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem 0.55rem;
  text-align: left;
  transition: border-color 0.14s ease;
}

.ww-rankbox:hover { border-color: var(--hue-bright); }
.ww-rankbox.open { border-color: var(--hue-bright); box-shadow: inset 0 0 0 1px var(--hue-bright); }
.ww-rankbox .ord { color: var(--chart-ahead); font-size: 27px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.ww-rankbox .lbl { color: var(--muted-text); font-size: 0.72rem; font-weight: 650; line-height: 1.3; }
.ww-rankbox.weak .ord { color: var(--warm); }

.ww-rankbox.m-gold { background: linear-gradient(168deg, var(--surface-raised), var(--gold-wash)); border-color: var(--gold-edge); border-top: 5px solid var(--gold-edge); }
.ww-rankbox.m-silver { background: linear-gradient(168deg, var(--surface-raised), var(--silver-wash)); border-color: var(--silver-edge); border-top: 5px solid var(--silver-edge); }
.ww-rankbox.m-bronze { background: linear-gradient(168deg, var(--surface-raised), var(--bronze-wash)); border-color: var(--bronze-edge); border-top: 5px solid var(--bronze-edge); }
.ww-rankbox.m-gold .ord { color: var(--gold-ink); }
.ww-rankbox.m-silver .ord { color: var(--silver-ink); }
.ww-rankbox.m-bronze .ord { color: var(--bronze-ink); }

/* ---- one measure on its real scale ---- */
.ww-relative {
  border: 1.5px solid var(--hue-bright);
  border-radius: 12px;
  margin-top: 0.6rem;
  padding: 0.9rem 1rem 0.75rem;
}

.ww-relative h6 { font-size: 0.8rem; font-weight: 750; margin: 0; }
.ww-relative .relviz { margin-top: 0.9rem; position: relative; }
.ww-relative svg { display: block; height: 46px; width: 100%; }

.ww-relative .youtag,
.ww-relative .toptag {
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: -8px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ww-relative .youtag { color: var(--hue); }
.ww-relative .toptag { color: var(--muted-text); }
.ww-relative .relcap { color: var(--muted-text); font-size: 0.75rem; line-height: 1.45; margin-top: 0.5rem; }
.ww-relative .relcap b { color: var(--text); font-weight: 650; }

/* ---- strips (comparison) ---- */
.ww-mainchart { margin-top: 1rem; }

.ww-mainhead {
  font-size: 0.95rem;
  font-weight: 800;
}

.ww-mainhead span { color: var(--muted-text); display: block; font-size: 0.75rem; font-weight: 500; }

.ww-strip { border-top: 1px solid var(--hair); margin-top: 0.9rem; padding-top: 0.7rem; }

.ww-striphead { align-items: baseline; display: flex; justify-content: space-between; }
.ww-striphead .nm { font-size: 0.85rem; font-weight: 750; }
.ww-striphead .dir { color: var(--muted-text); font-size: 0.7rem; }

.ww-stripviz { height: 30px; margin-top: 1.2rem; position: relative; }

.ww-sbase {
  background: var(--hair);
  height: 2px;
  left: 0;
  position: absolute;
  right: 0;
  top: 18px;
}

.ww-stick {
  background: var(--chart-tick);
  height: 12px;
  position: absolute;
  top: 12px;
  transform: translateX(-50%);
  width: 1.5px;
}

.ww-stick::before,
.ww-spin::before {
  content: "";
  inset: -7px -6px;
  position: absolute;
}

.ww-stick.hot { background: var(--muted-text); }

.ww-spin {
  border-radius: 999px;
  height: 14px;
  position: absolute;
  top: 12px;
  transform: translate(-50%, 0);
  width: 14px;
  z-index: 2;
}

.ww-spin { box-shadow: 0 0 0 2px var(--surface); }
.ww-spin.up { top: 4px; }
.ww-spin.down { top: 20px; }
.ww-spin.a { background: var(--chart-you); }
.ww-spin.b { background: var(--chart-b); }
.ww-spin.tie { background: linear-gradient(90deg, var(--chart-you) 50%, var(--chart-b) 50%); }
.ww-spin.hot { box-shadow: 0 0 0 3px var(--surface), 0 0 0 4.5px currentColor; }

.ww-stag {
  font-size: 10.5px;
  font-weight: 750;
  position: absolute;
  top: -14px;
  transform: translateX(-50%);
  white-space: nowrap;
}

.ww-stag.a { color: var(--chart-you); }
.ww-stag.b { color: var(--chart-b); }

.ww-stripends { color: var(--muted-text); display: flex; font-size: 10px; justify-content: space-between; margin-top: 2px; }
.ww-stripcap { color: var(--muted-text); font-size: 0.75rem; line-height: 1.45; margin-top: 0.4rem; }
.ww-stripcap b { color: var(--text); font-weight: 650; }

.ww-pairkey { color: var(--muted-text); display: flex; flex-wrap: wrap; font-size: 0.72rem; gap: 0.8rem; margin-top: 0.4rem; }
.ww-pairkey .ka { color: var(--chart-you); font-weight: 700; }
.ww-pairkey .kb { color: var(--chart-b); font-weight: 700; }

/* ---- trajectory ---- */
.ww-rankrec { margin-top: 0.5rem; position: relative; }
.ww-rankrec svg { display: block; height: 118px; width: 100%; }
.ww-rr-ylab { color: var(--muted-text); font-size: 9.5px; left: 0; position: absolute; }

.ww-yearchips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }

.ww-yearchip {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  font: inherit;
  min-width: 46px;
  padding: 0.25rem 0.45rem;
}

.ww-yearchip .yr { color: var(--muted-text); font-size: 0.65rem; font-weight: 650; }
.ww-yearchip .rk { font-size: 0.82rem; font-weight: 750; }
.ww-yearchip.on { border-color: var(--hue-bright); color: var(--hue); }
.ww-yearchip.empty { color: var(--muted-text); opacity: 0.6; }
.ww-yearchip.pending { opacity: 0.5; }
.ww-yearchip .rk.m-gold { color: var(--gold-ink); }
.ww-yearchip .rk.m-silver { color: var(--silver-ink); }
.ww-yearchip .rk.m-bronze { color: var(--bronze-ink); }

/* ---- sparkline multiples ---- */
.ww-multis { display: grid; gap: 0.75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.ww-multi { border-top: 2px solid var(--hair); padding-top: 0.5rem; }
.ww-multi.mine { border-top-color: var(--hue); }
.ww-multi h6 { font-size: 0.75rem; font-weight: 700; margin: 0; }
.ww-multi .mv { color: var(--muted-text); font-size: 0.68rem; margin-top: 1px; }
.ww-multi svg { display: block; height: 54px; margin-top: 0.45rem; width: 100%; }

/* ---- basket pills ---- */
.ww-pilltray { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }

.ww-pill {
  align-items: center;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 650;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
}

.ww-pill:hover { border-color: var(--hue-bright); }
.ww-pill.on { background: var(--hue-bright); border-color: var(--hue-bright); color: var(--on-accent); }
.ww-pill .rk { font-size: 0.68rem; font-weight: 750; }
.ww-pill .rk.m-gold { background: var(--gold-wash); border-radius: 999px; color: var(--gold-ink); padding: 1px 6px; }
.ww-pill .rk.m-silver { background: var(--silver-wash); border-radius: 999px; color: var(--silver-ink); padding: 1px 6px; }
.ww-pill .rk.m-bronze { background: var(--bronze-wash); border-radius: 999px; color: var(--bronze-ink); padding: 1px 6px; }
.ww-pill .rk.none { color: var(--muted-text); font-size: 0.65rem; font-style: italic; }

/* ---- the one tooltip ---- */
.ww-tip {
  background: var(--text);
  border-radius: 8px;
  color: var(--background);
  font-size: 0.75rem;
  line-height: 1.35;
  max-width: 240px;
  padding: 0.4rem 0.6rem;
  pointer-events: none;
  position: fixed;
  z-index: 9000;
}

.ww-tip b { font-weight: 750; }
.ww-tip span { display: block; opacity: 0.85; }
.ww-tip[hidden] { display: none; }

@media (max-width: 640px) {
  .ww-hero-big { font-size: 34px; }
  .ww-multis { grid-template-columns: 1fr; }
  .ww-rankboxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .ww-rankbox,
  .ww-cta,
  .ww-pill { transition: none; }
}


/* ==== the full report page ==== */
.report-layout {
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  margin: 0 auto;
  max-width: 60rem;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
}

.report-loading,
.report-note { color: var(--muted-text); }
.report-note { background: var(--brand-wash); border-radius: var(--radius-md); color: var(--text); padding: 0.6rem 0.9rem; }

.report-controls {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
}

.report-controls .ww-linkbtn { align-self: center; margin-right: auto; }
.report-select { display: grid; font-size: 0.72rem; font-weight: 700; gap: 0.2rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-text); }
.report-select select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  max-width: 22rem;
  padding: 0.4rem 0.6rem;
}
.report-select-area { min-width: 14rem; }

.report-identity { align-items: center; display: flex; gap: 1rem; }
.report-signifier { border-radius: 1rem; flex: 0 0 auto; height: 5.5rem; object-fit: cover; width: 5.5rem; }
.report-identity-copy .eyebrow { margin: 0 0 0.2rem; }
.report-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); }
.report-identity-copy .wardreport-areas { margin-top: 0.4rem; }
a.wardreport-area { text-decoration: none; }
a.wardreport-area:hover { color: var(--hue); }

.report-represented .alder-card { margin: 0; }
.report-alder h3 { margin: 0.1rem 0 0.25rem; }
.report-roster { color: var(--muted-text); font-size: 0.82rem; }

.report-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem;
}

.report-hero .ww-hero-big { margin-top: 0; }

.report-mix .preset-chips { margin-top: 0.6rem; }
.report-editor { margin-top: 0.8rem; }
.report-editor summary { color: var(--hue); cursor: pointer; font-size: 0.85rem; font-weight: 700; }
.report-editor .ww-pilltray { margin-top: 0.6rem; }
.ww-pill em { font-size: 0.68rem; font-style: normal; opacity: 0.8; }
.ww-pill .x { font-weight: 400; opacity: 0.7; }
.report-add { align-items: center; display: flex; flex-wrap: wrap; font-size: 0.8rem; font-weight: 700; gap: 0.5rem; margin-top: 0.7rem; }
.report-add select { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 0.6rem; color: var(--text); font: inherit; font-size: 0.85rem; max-width: 100%; padding: 0.35rem 0.5rem; }

.report-ctas { margin-top: 0; }
.report-peek .ww-peekhead:first-child { margin-top: 0; }
.report-overtime .ww-mainhead { margin-bottom: 0.4rem; }
.ww-trendcap { color: var(--muted-text); font-size: 0.78rem; margin: 0.5rem 0 0; }
.ww-trendcap b { color: var(--text); }

.report-domains-head h2 { font-size: 1.2rem; margin: 0 0 0.3rem; }
.report-domains-head p { margin: 0 0 1rem; }
.report-domains .wardreport-accordion summary { cursor: pointer; }

.report-share { align-items: center; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.soft { color: var(--muted-text); }

@media (max-width: 640px) {
  .report-identity { align-items: flex-start; }
  .report-signifier { height: 4rem; width: 4rem; }
  .report-controls .ww-linkbtn { flex-basis: 100%; }
  .report-select-area { min-width: 0; width: 100%; }
}


/* ==== compare page ==== */
.compare-pickers {
  align-items: end;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.compare-pickers .report-select select { max-width: none; width: 100%; }
.compare-pickers .side-a span { color: var(--chart-you); }
.compare-pickers .side-b span { color: var(--chart-b); }

.compare-swap {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  height: 2.4rem;
  width: 2.4rem;
}

.compare-swap:hover { border-color: var(--hue-bright); color: var(--hue); }

.compare-quick { align-items: center; display: flex; flex-wrap: wrap; gap: 0.4rem; }

.compare-sides {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compare-sides .side { border-left: 4px solid var(--chart-you); padding-left: 0.8rem; }
.compare-sides .side.b { border-left-color: var(--chart-b); }
.side-tag { color: var(--muted-text); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; }
.compare-ord { font-size: 1.05rem; font-weight: 800; margin: 0.2rem 0 0.4rem; }
.compare-ord.m-gold { color: var(--gold-ink); }
.compare-ord.m-silver { color: var(--silver-ink); }
.compare-ord.m-bronze { color: var(--bronze-ink); }
.compare-verdict .ww-lede { margin-top: 1rem; }
.compare-duels .ww-mainhead { margin-bottom: 0.3rem; }
.compare-missing { font-size: 0.78rem; margin: 0.9rem 0 0; }

@media (max-width: 640px) {
  .compare-pickers { grid-template-columns: 1fr; }
  .compare-swap { justify-self: center; }
}


/* ==== what changed over time ==== */
.ww-changes-lede { font-size: 0.95rem; line-height: 1.5; margin: 0.6rem 0 0; }
.ww-changes-howto { color: var(--muted-text); font-size: 0.8rem; margin: 0.5rem 0 0.9rem; }
.ww-changes-howto summary { color: var(--hue); cursor: pointer; font-weight: 700; }
.ww-changes-howto p { line-height: 1.5; margin: 0.4rem 0 0; }
.ww-changes-controls { align-items: end; display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.ww-changes-controls .preset-chips { align-self: end; }
.ww-catchips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.6rem 0 0.9rem; }
.ww-catchip {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  color: var(--muted-text);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
}
.ww-catchip em { font-style: normal; opacity: 0.7; }
.ww-catchip[aria-pressed="true"] { background: var(--hue-soft); border-color: var(--hue-bright); color: var(--hue); }
.ww-changes-peers { font-size: 0.8rem; margin: 0 0 0.8rem; }
.ww-changes-cols { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ww-changes-col h4 { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; margin: 0 0 0.5rem; text-transform: uppercase; }
.ww-changes-col h4 em { font-style: normal; font-weight: 600; opacity: 0.7; }
.ww-changes-col.is-good h4 { color: var(--delta-up); }
.ww-changes-col.is-bad h4 { color: var(--delta-down); }
.ww-changes-list { display: grid; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.ww-change { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-md); }
.ww-change-empty { background: none; border: 0; font-size: 0.85rem; padding: 0.4rem 0; }
.ww-change-head {
  align-items: center;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: grid;
  font: inherit;
  gap: 0.3rem 0.8rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 0.55rem 0.7rem;
  text-align: left;
  width: 100%;
}
.ww-change-head:focus-visible { outline: 2px solid var(--hue-bright); outline-offset: 2px; }
.ww-change-main { display: grid; gap: 0.15rem; min-width: 0; }
.ww-change-label { align-items: center; display: flex; font-size: 0.86rem; font-weight: 750; gap: 0.35rem; line-height: 1.25; }
.ww-change-icon { color: var(--hue); display: inline-flex; flex: 0 0 auto; }
.ww-change-icon svg { height: 16px; width: 16px; }
.ww-change-cat { color: var(--muted-text); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ww-change-pair { color: var(--text); font-size: 0.8rem; overflow-wrap: anywhere; }
.ww-change-years { color: var(--muted-text); font-size: 0.7rem; margin-left: 0.4rem; }
.ww-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.ww-flag { background: var(--surface-muted); border-radius: 999px; color: var(--muted-text); font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.5rem; }
.ww-change-viz { align-items: flex-end; display: grid; gap: 0.15rem; justify-items: end; }
.ww-spark { display: block; }
.ww-change-delta { font-size: 0.82rem; font-weight: 800; white-space: nowrap; }
.is-improved .ww-change-delta { color: var(--delta-up); }
.is-worsened .ww-change-delta { color: var(--delta-down); }
.is-office .ww-change-delta, .is-flat .ww-change-delta { color: var(--text); }
.is-demoted .ww-change-delta, .is-demoted .ww-spark { opacity: 0.62; }
.ww-change-detail { border-top: 1px solid var(--hair); padding: 0.5rem 0.7rem 0.7rem; }
.ww-change-detail dl { display: grid; font-size: 0.78rem; gap: 0.25rem 0.8rem; grid-template-columns: max-content minmax(0, 1fr); margin: 0; }
.ww-change-detail dt { color: var(--muted-text); font-weight: 700; }
.ww-change-detail dd { margin: 0; }
.ww-changes-office { margin-top: 1.2rem; }
.ww-changes-office .ww-changes-list { margin-top: 0.6rem; }
.ww-changes-excluded { color: var(--muted-text); font-size: 0.78rem; margin-top: 1.2rem; }
.ww-changes-excluded h4 { color: var(--muted-text); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; margin: 0 0 0.4rem; text-transform: uppercase; }
.ww-changes-excluded ul { line-height: 1.5; margin: 0; padding-left: 1.1rem; }
.ww-changes-excluded b { color: var(--text); }

@media (max-width: 800px) {
  .ww-changes-cols { grid-template-columns: 1fr; }
}


/* ==== the written profile ==== */
.report-read .eyebrow { margin: 0 0 0.3rem; }
.report-prose-head { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; margin: 0 0 0.6rem; }
.report-prose { font-family: var(--serif); font-size: 1.06rem; line-height: 1.62; max-width: 40rem; }
.report-prose p { margin: 0 0 0.9rem; }
.report-prose-num { color: inherit; text-decoration: underline dotted var(--hue); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.report-prose-num:hover { color: var(--hue); }
.report-prose-note { border-top: 1px solid var(--border); color: var(--muted-text); font-family: var(--serif); font-size: 0.95rem; font-style: italic; line-height: 1.5; margin: 0.4rem 0 0; max-width: 40rem; padding-top: 0.6rem; }
.report-prose-note b { font-style: normal; font-weight: 700; }
.report-prose-provenance { color: var(--muted-text); font-size: 0.78rem; line-height: 1.45; margin-top: 0.8rem; }
.report-prose-aside { color: var(--text); font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; margin: 0.6rem 0 0; }
.ww-rankbox.is-linked { outline: 2px solid var(--hue-bright); outline-offset: 2px; }