/* Editorial chrome shared by the index-of-fifty and menu-money pages: a masthead with a double
   rule, a serif headline, a "how to read this" grid, and a controls row. Every colour is a theme
   token so both pages read on the classic and dark themes. Page-specific rules follow, grouped. */

.ed-page {
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 62rem;
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 3rem;
  --measure-text: 40rem;
}

.ed-masthead {
  border-bottom: 3px double var(--text);
  margin-bottom: 1.4rem;
  padding-bottom: 1.1rem;
  text-align: center;
}

.ed-kicker {
  color: var(--muted-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  margin: 0 0 0.4rem;
  text-transform: uppercase;
}

.ed-masthead h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  margin: 0;
}

.ed-standfirst {
  color: var(--text);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.5;
  margin: 0.7rem auto 0;
  max-width: var(--measure-text);
}

.ed-howto {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.4rem;
  padding-bottom: 1.2rem;
}

.ed-section-label {
  color: var(--muted-text);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  margin: 0 0 0.6rem;
  text-transform: uppercase;
}

.howto-grid {
  display: grid;
  gap: 1rem 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.howto-grid h3 {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.howto-grid p {
  color: var(--muted-text);
  font-family: var(--serif);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0;
}

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

.ed-controls .ww-linkbtn { align-self: center; margin-right: auto; }

.ed-controls .report-select input[type="search"] {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.6rem;
  width: 11rem;
}

.ed-toggle {
  align-items: center;
  color: var(--muted-text);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.4rem;
}

.ed-toggle input:disabled + span { opacity: 0.5; }

.ed-result {
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.5;
  margin: 0 0 1rem;
}

.ed-result[hidden] { display: none; }

.ed-share { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }

/* ==== /index ==== */
/* the equation panel: weight the eleven domains, and the fifty re-rank */
.report-equation {
  border-bottom: 1px solid var(--border);
  border-top: 1px solid var(--border);
  margin: 0 0 1.6rem;
  padding: 1.4rem 0 1.8rem;
}

.report-equation h2 { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 0.5rem; }
.equation-intro { font-family: var(--serif); font-size: 0.98rem; line-height: 1.6; margin: 0 0 1.3rem; max-width: var(--measure-text); }
.equation-intro a { color: var(--hue); }
.equation-form { display: grid; gap: 0.7rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.equation-cat { border: 0; margin: 0; padding: 0; }
.equation-cat legend { font-size: 0.82rem; font-weight: 650; margin-bottom: 0.25rem; padding: 0; }
.equation-count { color: var(--muted-text); font-size: 0.72rem; font-weight: 400; }
.equation-choices { border: 1px solid var(--border); border-radius: 3px; display: inline-flex; overflow: hidden; }
.equation-choice input { opacity: 0; pointer-events: none; position: absolute; }
.equation-choice span { border-right: 1px solid var(--border); color: var(--text); cursor: pointer; display: inline-block; font-size: 0.76rem; padding: 0.28rem 0.6rem; }
.equation-choice:last-child span { border-right: 0; }
.equation-choice input:checked + span { background: var(--hue-bright); color: var(--on-accent); }
.equation-choice input:disabled + span { color: var(--muted-text); cursor: default; }
.equation-choice input:focus-visible + span { outline: 2px solid var(--text); outline-offset: -2px; }
.equation-reset { align-self: end; background: none; border: 1px solid var(--border); border-radius: 3px; color: var(--text); cursor: pointer; font: inherit; font-size: 0.78rem; justify-self: start; padding: 0.4rem 0.7rem; }
.equation-reset:hover { background: var(--surface-muted); }
.equation-fine { color: var(--muted-text); font-size: 0.78rem; line-height: 1.5; margin: 1rem 0 0; max-width: var(--measure-text); }
.equation-fine b { color: var(--text); }
.equation-lists { margin-top: 0.9rem; }
.equation-lists .preset-chips { margin-top: 0.6rem; }
.equation-result { background: var(--surface-muted); border-radius: 3px; font-size: 0.9rem; line-height: 1.5; margin: 0 0 1.4rem; padding: 0.6rem 0.8rem; }
.equation-result[hidden] { display: none; }

/* the index itself: hairline rows, three across on a desk, one on a phone */
.report-index { border-bottom: 1px solid var(--border); margin-bottom: 2rem; padding-bottom: 2rem; }
.index-title { color: var(--muted-text); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; margin: 0 0 0.4rem; text-transform: uppercase; }
.index-grid { display: grid; gap: 0 2rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.idx-row[hidden] { display: none; }
.idx-row > a { border-bottom: 1px solid var(--border); color: inherit; display: block; padding: 0.75rem 0.3rem 0.85rem; text-decoration: none; }
.idx-row > a:hover { background: var(--surface-muted); }
.idx-meta { align-items: baseline; display: flex; gap: 0.55rem; margin-bottom: 0.3rem; }
.idx-num { color: var(--hue); font-family: var(--serif); font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.idx-who { color: var(--muted-text); font-size: 0.78rem; min-width: 0; overflow-wrap: anywhere; }
.idx-row .idx-rank { color: var(--muted-text); font-size: 0.72rem; font-variant-numeric: tabular-nums; margin-left: auto; }
.idx-row.m-gold .idx-rank, .idx-row.m-silver .idx-rank, .idx-row.m-bronze .idx-rank { color: var(--text); font-weight: 700; }
.idx-row.m-gold .idx-num { text-decoration: underline; text-decoration-color: var(--gold-edge); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.idx-row.m-silver .idx-num { text-decoration: underline; text-decoration-color: var(--silver-edge); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.idx-row.m-bronze .idx-num { text-decoration: underline; text-decoration-color: var(--bronze-edge); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.idx-headline { display: block; font-family: var(--serif); font-size: 0.97rem; line-height: 1.4; }
.idx-headline:empty { display: none; }
.idx-move { font-size: 0.72rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.idx-move:empty { display: none; }
.idx-move.is-up { color: var(--positive); }
.idx-move.is-down { color: var(--negative); }

/* the fingerprint view: the same fifty as cards with a mini bloom */
.idx-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); list-style: none; margin: 0; padding: 0; }
.idx-card > a { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); color: inherit; display: grid; gap: 0.15rem 0.7rem; grid-template-columns: 4.6rem minmax(0, 1fr); grid-template-rows: auto auto auto auto; height: 100%; padding: 0.7rem; text-decoration: none; transition: border-color 0.14s ease; }
.idx-card > a:hover { border-color: var(--hue-bright); }
.idx-card[hidden] { display: none; }
.idx-card .idx-bloom { align-self: start; grid-row: 1 / span 4; }
.idx-card .ww-bloom-mini { display: block; max-width: none; width: 100%; }
.ww-bloom-mini .bloom-petal { cursor: inherit; fill-opacity: 0.3; stroke-opacity: 0.45; transition: none; }
.ww-bloom-mini .bloom-petal.is-strong { fill-opacity: 0.6; }
.ww-bloom-mini .bloom-petal.is-weak { fill-opacity: 0.5; }
.ww-bloom-mini .bloom-petal.is-lens { fill-opacity: 0.85; stroke: var(--hue); stroke-width: 3; }
[data-lens] .ww-bloom-mini .bloom-petal:not(.is-lens) { opacity: 0.45; }
.idx-rankline { align-items: baseline; display: flex; gap: 0.4rem; }
.idx-card .idx-rank { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.idx-card.m-gold .idx-rank { color: var(--gold-ink); }
.idx-card.m-silver .idx-rank { color: var(--silver-ink); }
.idx-card.m-bronze .idx-rank { color: var(--bronze-ink); }
.idx-card.m-gold > a { background: linear-gradient(168deg, var(--surface), var(--gold-wash)); border-top: 4px solid var(--gold-edge); }
.idx-card.m-silver > a { background: linear-gradient(168deg, var(--surface), var(--silver-wash)); border-top: 4px solid var(--silver-edge); }
.idx-card.m-bronze > a { background: linear-gradient(168deg, var(--surface), var(--bronze-wash)); border-top: 4px solid var(--bronze-edge); }
.idx-card.is-unscored .idx-rank { color: var(--muted-text); font-size: 0.9rem; font-weight: 700; }
.idx-name { font-size: 0.95rem; font-weight: 750; line-height: 1.2; }
.idx-sub { color: var(--muted-text); font-size: 0.72rem; line-height: 1.3; }
.idx-score { color: var(--muted-text); font-size: 0.75rem; }
.idx-score b { color: var(--text); }
.idx-lens { color: var(--hue); font-size: 0.72rem; font-weight: 700; }
.idx-lens:empty { display: none; }
.idx-head { color: var(--muted-text); font-family: var(--serif); font-size: 0.78rem; font-style: italic; grid-column: 1 / -1; line-height: 1.4; }
.idx-head:empty { display: none; }
.idx-spark { grid-column: 1 / -1; margin-top: 0.3rem; }
.idx-spark:empty { display: none; }
.idx-spark svg { display: block; height: 34px; width: 100%; }
.idx-spark-cap { color: var(--muted-text); font-size: 0.65rem; }
.idx-sentinel { color: var(--muted-text); font-size: 0.8rem; grid-column: 1 / -1; list-style: none; padding: 1rem; text-align: center; }
.idx-sentinel[hidden] { display: none; }

@media (max-width: 640px) {
  .idx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
  .idx-card > a { grid-template-columns: 3.6rem minmax(0, 1fr); padding: 0.55rem; }
  .ed-controls .report-select input[type="search"] { width: 100%; }
}

@media (max-width: 400px) {
  .idx-grid { grid-template-columns: 1fr; }
}

@media print {
  .site-header, .ed-controls, .ed-share, .preset-chips, .report-editor, .sort-arrow, .report-equation { display: none !important; }
  .index-grid { grid-template-columns: repeat(2, 1fr); }
  .ed-page { max-width: none; padding: 0; }
  .idx-grid { grid-template-columns: repeat(3, 1fr); }
  .idx-card { break-inside: avoid; }
  .idx-card > a { border-color: #999; }
  .wardreport-bloom .bloom-petal,
  .menu-bar-fill,
  .menu-area { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}


/* ==== /menu ==== */
.menu-note { font-size: 0.8rem; margin: 0.6rem 0 0; }
.menu-bars { display: grid; gap: 0.4rem; margin-top: 0.4rem; }
.menu-bar-row { align-items: center; display: grid; gap: 0.6rem; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) 3.4rem; }
.menu-bar-label { font-size: 0.85rem; font-weight: 700; }
.menu-bar-track { background: var(--surface-muted); border-radius: 999px; display: block; height: 0.8rem; overflow: hidden; position: relative; }
.menu-bar-fill { border-radius: 999px; display: block; height: 100%; }
.menu-bar-value { font-size: 0.82rem; text-align: right; }

.tone-1 { --tone: var(--menu-cat-1); }
.tone-2 { --tone: var(--menu-cat-2); }
.tone-3 { --tone: var(--menu-cat-3); }
.tone-4 { --tone: var(--menu-cat-4); }
.tone-5 { --tone: var(--menu-cat-5); }
.tone-6 { --tone: var(--menu-cat-6); }
.tone-7 { --tone: var(--menu-cat-7); }
.tone-8 { --tone: var(--menu-cat-8); }
.tone-other { --tone: var(--menu-cat-other); }
.menu-bar-fill, .detail-bar-fill, .menu-swatch { background: var(--tone); }
.menu-area { fill: var(--tone); fill-opacity: 0.88; stroke: var(--surface); stroke-width: 0.6; }
.menu-swatch { border-radius: 3px; display: inline-block; height: 0.7rem; margin-right: 0.35rem; vertical-align: -1px; width: 0.7rem; }

.menu-table-wrap { margin-top: 0.6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.menu-table { border-collapse: collapse; font-size: 0.8rem; min-width: 56rem; width: 100%; }
.menu-table thead th { background: var(--surface); border-bottom: 2px solid var(--border); position: sticky; text-align: left; top: 0; z-index: 1; }
.menu-table th.num, .menu-table td.num { text-align: right; }
.menu-table tbody th { font-weight: 700; text-align: left; }
.menu-table td, .menu-table th { padding: 0.35rem 0.45rem; vertical-align: middle; }
.menu-table .menu-col-ward { min-width: 12rem; }
.menu-table .menu-col-top { min-width: 9rem; white-space: nowrap; }
.menu-table tbody tr.menu-row { border-top: 1px solid var(--hair); }
.menu-table tbody tr.menu-row:hover { background: var(--surface-muted); }
.menu-table tbody tr.is-focus > th { box-shadow: inset 3px 0 0 var(--hue); }
.sort-btn { background: none; border: 0; color: var(--muted-text); cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 0.3rem 0; text-align: inherit; text-transform: uppercase; white-space: nowrap; }
th[aria-sort] .sort-btn { color: var(--hue); }
.sort-arrow { font-size: 0.6rem; }
.ward-toggle { background: none; border: 0; color: var(--text); cursor: pointer; display: grid; font: inherit; font-weight: 750; padding: 0; text-align: left; }
.ward-toggle small { color: var(--muted-text); font-size: 0.68rem; font-weight: 500; }
.ward-toggle:hover { color: var(--hue); }
.menu-detail-row > td { background: var(--hue-soft); border-left: 3px solid var(--hue); padding: 0.8rem 0.9rem; }
.menu-detail-bars { display: grid; gap: 0.45rem 1.4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.detail-metric-head { align-items: baseline; display: flex; font-size: 0.8rem; justify-content: space-between; }
.detail-metric-label { font-weight: 700; }
.detail-metric-value { font-weight: 800; }
.detail-metric-median { color: var(--muted-text); font-size: 0.68rem; font-weight: 500; margin-left: 0.4rem; }
.detail-bar-track { background: var(--surface); border-radius: 999px; display: block; height: 0.55rem; margin-top: 0.2rem; overflow: visible; position: relative; }
.detail-bar-fill { border-radius: 999px; display: block; height: 100%; }
.detail-bar-tick { background: var(--text); height: 0.95rem; position: absolute; top: -0.2rem; width: 2px; }
.menu-stats { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); margin-top: 0.9rem; }
.menu-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); display: grid; gap: 0.1rem; padding: 0.55rem 0.7rem; }
.menu-stat-label { color: var(--muted-text); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.menu-stat-value { font-size: 1.2rem; font-weight: 800; }
.menu-stat-median { color: var(--muted-text); font-size: 0.7rem; }
.menu-stat-note { color: var(--muted-text); font-size: 0.7rem; line-height: 1.35; margin-top: 0.2rem; }
.menu-caveat { color: var(--muted-text); font-size: 0.75rem; line-height: 1.45; margin: 0.8rem 0 0; }
.menu-detail-links { font-size: 0.82rem; margin: 0.7rem 0 0; }

.menu-focus .ed-result { margin: 0.8rem 0 0.4rem; }
.menu-stack { display: block; height: auto; margin-top: 0.4rem; width: 100%; }
.menu-band { fill: transparent; }
.menu-band.alt { fill: var(--hair); fill-opacity: 0.55; }
.menu-band-label { fill: var(--muted-text); font-size: 8.5px; font-weight: 700; letter-spacing: 0.04em; }
.menu-grid { stroke: var(--hair); stroke-width: 0.8; }
.menu-axis { fill: var(--muted-text); font-size: 8.5px; }
.menu-remap { stroke: var(--text); stroke-dasharray: 3 3; stroke-opacity: 0.5; stroke-width: 1; }
.menu-hit { cursor: help; fill: transparent; }
.menu-hit.hot { fill: rgb(255 255 255 / 25%); stroke: var(--text); stroke-width: 1; }
.menu-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: 0.72rem; margin-top: 0.5rem; }
.menu-multis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 1.2rem; }
.menu-multis .ww-multi h6 { align-items: center; display: flex; gap: 0.2rem; }
.menu-multis-cap { font-size: 0.72rem; margin: 0.5rem 0 0; }

@media (max-width: 640px) {
  .menu-bar-row { grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; }
  .menu-multis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}