/* The four maps: one field, firms as dots that move between the ToR's views. */
.mp-head h1 { margin-bottom: 8px; }
.mp-head .reading { max-width: 70ch; }
.mp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 18px; }
@media (max-width: 760px) { .mp-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mp-tabs a { display: block; padding: 10px 14px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); text-decoration: none; font-size: 0.92rem; line-height: 1.3; }
.mp-tabs a span { display: block; font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--pine-deep); }
.mp-tabs a:hover { border-color: var(--sage); }
.mp-tabs a.on { background: var(--pine-deep); border-color: var(--pine-deep); color: #d4e5da; }
.mp-tabs a.on span { color: #fff; }

.mp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
@media (max-width: 1050px) { .mp-wrap { grid-template-columns: 1fr; } }
.mp-field { margin: 0; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; }
.mp-field svg { width: 100%; height: auto; display: block; }
.mp-field figcaption { margin: 4px 6px 0; }

.mp-cell { fill: #f6f8f3; cursor: pointer; transition: fill .15s; }
.mp-cell:hover { fill: #eef4ea; }
.mp-cell.picked { fill: #e3eedc; stroke: var(--accent); stroke-width: 1.5; }
.mp-zone { fill: rgba(183, 201, 88, 0.12); stroke: var(--chartreuse); stroke-width: 1.5; stroke-dasharray: 6 5; pointer-events: none; }
.mp-note { font-family: var(--serif); font-style: italic; font-size: 13px; fill: var(--ink-soft); pointer-events: none; }
.mp-tick { font-size: 12px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.mp-axis { font-family: var(--serif); font-size: 15px; font-weight: 600; fill: var(--pine-deep); }
.mp-end { font-size: 11px; fill: var(--muted); }

.mp-dot { cursor: pointer; outline: none; }
#mp.ready .mp-dot { transition: transform 1.15s cubic-bezier(.45, .05, .25, 1), opacity .3s; }
.mp-core { stroke: #fff; stroke-width: 1.2; }
.mp-ring { fill: none; stroke: transparent; stroke-width: 2; }
.mp-dot.fresh .mp-ring { stroke: var(--accent); }
.mp-dot.us .mp-core { stroke: var(--pine); stroke-width: 2.5; }
.mp-dot.us .mp-ring { stroke: none; }
.mp-halo { fill: rgba(183, 201, 88, 0.28); stroke: none; }
.mp-label { font-size: 11px; fill: var(--ink); paint-order: stroke; stroke: #f6f8f3; stroke-width: 3.5px; stroke-linejoin: round; display: none; pointer-events: none; }
.mp-dot.named .mp-label, .mp-dot.hl .mp-label, .mp-dot:focus .mp-label { display: block; }
.mp-dot.us .mp-label { font-family: var(--serif); font-size: 14px; font-weight: 700; fill: var(--pine); }
.mp-dot.hl .mp-core, .mp-dot:focus .mp-core { stroke: var(--ink); stroke-width: 2; }
#mp.hovering .mp-dot:not(.hl):not(.us) { opacity: 0.45; }
.hide-A .c-A, .hide-B .c-B, .hide-C .c-C, .hide-D .c-D, .hide-E .c-E, .hide-F .c-F { opacity: 0.07 !important; pointer-events: none; }
.mp-trail { fill: none; stroke-width: 1.4; opacity: 0.5; transition: stroke-dashoffset 1.1s ease-out; }
.mp-trail.c-A { stroke: var(--cat-A); } .mp-trail.c-B { stroke: var(--cat-B); } .mp-trail.c-C { stroke: var(--cat-C); }
.mp-trail.c-D { stroke: var(--cat-D); } .mp-trail.c-E { stroke: var(--cat-E); } .mp-trail.c-F { stroke: var(--cat-F); }
.mp-trail.us { stroke: var(--chartreuse); stroke-width: 3; opacity: 1; }

.mp-tip { position: absolute; z-index: 4; top: 0; left: 0; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(18, 42, 36, 0.16); padding: 12px 14px; font-size: 0.84rem; line-height: 1.45; pointer-events: none; opacity: 0; transition: opacity .12s; }
.mp-tip.on { opacity: 1; }
.mp-tip b { display: block; font-family: var(--serif); font-size: 1.08rem; color: var(--pine-deep); }
.mp-tip .cat-line { color: var(--muted); font-size: 0.8rem; }
.mp-tip .ax { margin-top: 8px; }
.mp-tip .ax span { font-weight: 600; color: var(--pine-deep); }
.mp-tip .ax p { margin: 2px 0 0; color: var(--ink-soft); }
.mp-tip .ax i { color: var(--amber); font-style: normal; }
.mp-tip .newline { margin-top: 8px; color: var(--accent); font-weight: 600; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.dot.c-A { background: var(--cat-A); } .dot.c-B { background: var(--cat-B); } .dot.c-C { background: var(--cat-C); }
.dot.c-D { background: var(--cat-D); } .dot.c-E { background: var(--cat-E); } .dot.c-F { background: var(--cat-F); }
.dot.us { background: var(--chartreuse); box-shadow: 0 0 0 2px var(--pine); }
.mp-side h3 { margin-top: 0; }
.mp-key { display: grid; gap: 2px; margin: 4px 0 8px; }
.mp-key button { background: none; border: 0; color: var(--ink); text-align: left; padding: 4px 0; font-size: 0.92rem; cursor: pointer; }
.mp-key button:hover { color: var(--pine-deep); background: none; text-decoration: underline; }
.mp-key button[aria-pressed="false"] { opacity: 0.35; }
.mp-key .us-key { cursor: default; }
.mp-key .us-key:hover { text-decoration: none; }
.mp-when { background: var(--band); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; }
.mp-panel { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 4px; }
.mp-panel h3 { margin: 12px 0 6px; font-size: 1.08rem; }
.mp-list { list-style: none; padding: 0; margin: 6px 0; columns: 2; column-gap: 14px; }
.mp-list li { padding: 3px 0; font-size: 0.9rem; break-inside: avoid; }
/* reduced motion: quieter, but a move the person asked for (changing maps) still glides */
@media (prefers-reduced-motion: reduce) { #mp.ready:not(.asked) .mp-dot { transition-duration: .35s; transition-delay: 0s !important; } #mp:not(.asked) .mp-trail { transition: none; } }

/* ===================================================== firm scorecard */
.sc-band { background: linear-gradient(180deg, #0b3832 0%, #0e3f37 100%); color: #e6efe9; }
.sc-band .in { max-width: 1240px; margin: 0 auto; padding: 30px 20px 26px; }
.sc-band h1 { color: #fff; font-size: clamp(2rem, 3.6vw, 2.9rem); margin: 4px 0 10px; letter-spacing: -0.015em; }
.sc-cat { margin: 0; color: #b9cfc3; font-size: 0.92rem; }
.sc-cat .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.25); }
.sc-pos { font-family: var(--serif); font-size: 1.15rem; line-height: 1.55; color: #e6efe9; max-width: 62em; margin: 0 0 18px; }
.sc-profile { display: flex; flex-wrap: wrap; gap: 14px 34px; margin: 0; }
.sc-profile div { min-width: 120px; max-width: 320px; }
.sc-profile dt { font-size: 0.78rem; color: #9fb8ac; margin-bottom: 2px; }
.sc-profile dd { margin: 0; font-size: 0.92rem; color: #fff; }
.sc-profile a { color: var(--chartreuse); }
.sc-profile svg rect[fill="#dde1da"] { fill: rgba(255,255,255,.18); }
.sc-profile svg rect[fill="#40803c"] { fill: var(--chartreuse); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 6px 0 4px; }
@media (max-width: 760px) { .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.thumbs a { display: block; text-decoration: none; color: var(--ink-soft); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; }
.thumbs a:hover { border-color: var(--sage); }
.thumbs svg { width: 100%; height: auto; display: block; }
.thumbs span { display: block; font-size: 0.84rem; margin-top: 6px; line-height: 1.3; }
.thumbs span b { display: block; font-family: var(--serif); color: var(--pine-deep); font-size: 0.98rem; }
.sc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 44px; align-items: start; }
@media (max-width: 960px) { .sc-grid { grid-template-columns: 1fr; gap: 0; } }
.sc-score { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sc-score-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.sc-score h3 { margin: 0; font-size: 1.08rem; }
.sc-level { margin: 4px 0 2px; font-weight: 600; color: var(--ink); }
.sc-why { margin: 0; color: var(--ink-soft); font-size: 0.92rem; max-width: 68ch; }
.measure { max-width: 72ch; }
.dims { border-top: 1px solid var(--line); }
.tl { position: relative; margin: 8px 0 0 6px; padding-left: 22px; border-left: 2px solid var(--sage); max-width: 900px; }
.tl-year { position: relative; margin: 16px 0 6px; }
.tl-year span { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; color: var(--pine-deep); }
.tl-year::before { content: ""; position: absolute; left: -30px; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--pine-deep); border: 3px solid var(--paper); }
.tl-item { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 5px 0; font-size: 0.93rem; }
.tl-date { color: var(--muted); font-size: 0.84rem; padding-top: 2px; }

/* =============================================================== matrix */
.mx-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.84rem; color: var(--muted); margin: 0 0 6px; }
.mx-legend i { display: inline-block; width: 160px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, #eef3ea, #7fa58c, #0b3832); }
.mx-legend em { font-style: normal; margin-left: 12px; }
.mx th.rot { cursor: pointer; }
.mx th.rot:hover div, .mx th.rot.sorted div { color: var(--accent); }
.mx th.rot.sorted div::after { content: " (sorted)"; font-weight: 400; color: var(--muted); }
.mx th.colhl div { color: var(--pine-deep); text-decoration: underline; text-underline-offset: 3px; }
.mx tr.sortable:hover td.f { background: var(--accent-soft); }
.mx td.v.colhl a, .mx td.v.colhl span { box-shadow: inset 0 0 0 2px rgba(18, 42, 36, 0.35); }
.mx td.f { position: sticky; left: 0; z-index: 1; }
.mx .mx-firmhead { position: sticky; left: 0; z-index: 2; }

/* ============================================================ articles */
.md h2 { font-size: 1.5rem; margin-top: 0.4em; }
.md h3 { font-size: 1.18rem; margin-top: 1.8em; }
.md p, .md li { line-height: 1.65; }
.md > h2 + p { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.md ul, .md ol { padding-left: 1.2em; }
.md li { margin: 0.35em 0; }
.md li::marker { color: var(--accent); }
.md table { width: 100%; }
.md td:first-child { font-weight: 600; color: var(--pine-deep); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 1.6em 0; }
.md a { overflow-wrap: anywhere; }
.etag { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-style: normal; white-space: nowrap; vertical-align: 1px; }
.etag.ev { background: var(--accent-soft); color: var(--pine-deep); }
.etag.ju { background: var(--blue-soft); color: var(--blue); }
.etag.hy { background: var(--amber-soft); color: var(--amber); }

/* ============================================================== sign in */
.signin { min-height: calc(100vh - 58px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 860px) { .signin { grid-template-columns: 1fr; } .signin .side { display: none; } }
.signin .side { background: radial-gradient(120% 90% at 30% 40%, #134a40 0%, #0b3832 60%, #082d28 100%); color: #e6efe9; padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; }
.signin .side h1 { color: #fff; font-size: clamp(2rem, 3.4vw, 2.8rem); margin: 0 0 14px; }
.signin .side p { font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; max-width: 30em; color: #d4e5da; }
.signin .side svg { width: 220px; height: auto; opacity: 0.9; margin-top: 26px; }
.signin .form { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.signin form { width: min(380px, 100%); display: grid; gap: 14px; }
.signin label { display: grid; gap: 6px; font-size: 0.9rem; color: var(--ink-soft); }
.signin .field { padding: 10px 12px; font-size: 1rem; }
.signin button { justify-self: start; padding: 10px 22px; font-size: 1rem; }
.foot-user { margin-left: 6px; }
.ev-stored { margin-left: 8px; }
.rank .rank-head th { font-size: 0.74rem; font-weight: 600; color: var(--muted); text-align: left; padding: 0 4px 4px; }
.rank .rank-head th:nth-child(4), .rank .rank-head th:nth-child(5) { text-align: right; }
.mx.mode-scores td.v a, .mx.mode-scores td.v span { width: 76px; height: 32px; line-height: 32px; font-size: 0.95rem; }
.mx.mode-scores th.rot { width: 76px; }
.mx.mode-scores th.rot div { transform: translate(22px, 0) rotate(-45deg); }
.mx.mode-scores td.f { min-width: 240px; font-size: 0.92rem; }

/* ============================================ "what can I click?" halo */
@keyframes hint-ring { 0% { box-shadow: 0 0 0 0 rgba(183, 201, 88, 0.95); } 70% { box-shadow: 0 0 0 9px rgba(183, 201, 88, 0); } 100% { box-shadow: 0 0 0 0 rgba(183, 201, 88, 0); } }
@keyframes hint-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(183, 201, 88, 0)); } 40% { filter: drop-shadow(0 0 6px rgba(183, 201, 88, 1)) drop-shadow(0 0 2px rgba(183, 201, 88, 1)); } }
.hint { animation: hint-ring 1.1s ease-out 2; animation-delay: var(--hint-delay, 0ms); border-radius: 6px; }
svg .hint, .mp-dot.hint, .km-firm.hint, .km-dim.hint { animation: hint-glow 1.1s ease-in-out 2; animation-delay: var(--hint-delay, 0ms); }
@media (prefers-reduced-motion: reduce) {
  .hint, svg .hint, .mp-dot.hint, .km-firm.hint, .km-dim.hint { animation: none; outline: 2px solid var(--chartreuse); outline-offset: 2px; }
}
.foot a#hint-again { margin-left: 6px; }
.hint-btn { width: 30px; height: 30px; border-radius: 50%; padding: 0; background: transparent; border: 1px solid rgba(255,255,255,.35); color: #e3eee7; font-family: var(--serif); font-weight: 700; font-size: 1rem; line-height: 1; }
.hint-btn:hover { background: var(--chartreuse); border-color: var(--chartreuse); color: var(--pine); }
.foot a[data-hint-again] { margin-left: 6px; }

/* scorecards list: every category's table shares the same columns */
table.fl { table-layout: fixed; width: 100%; }
table.fl col.c-firm { width: auto; }
table.fl col.c-score { width: 62px; }
table.fl col.c-n { width: 72px; }
table.fl col.c-spark { width: 140px; }
table.fl td, table.fl th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.fl td.tab, table.fl th.tab { text-align: left; }
@media (max-width: 760px) { table.fl col.c-score { width: 34px; } table.fl col.c-spark { width: 0; } table.fl td:last-child, table.fl th:last-child { display: none; } }