/*
  brand.css: the one stylesheet every mockup in this folder shares, and the built tool with them.
  Every colour comes from Gallagher's Digital Design System (colour foundations); faces, sizes and
  spacing from Gallagher's brand guidelines. docs/plans/design/brand-application.md applies both.
*/

/* The two web brand faces, served with the pages so that no request leaves the page. Both are
   open fonts under the SIL Open Font License; these are the latin subsets as variable fonts,
   so one file carries every weight the pages use. */
@font-face {
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/roboto-slab-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("assets/fonts/source-sans-3-latin.woff2") format("woff2");
}

:root {
  /* Colour: the tokens of Gallagher's Digital Design System. Navy is not an interface colour;
     it appears only as Dark Blue among the chart colours. */
  --surface: #FFFFFF;               /* background/page */
  --container-neutral: #F6F6F6;     /* background/container/neutral */
  --container-brand: #F2F7FC;       /* background/container/brand */
  --container-brand-strong: #C9E0F4; /* background/container/brand-strong */
  --border-neutral: #D1D1D1;        /* border/neutral: with white or neutral containers */
  --border-brand: #C9E0F4;          /* border/brand: with brand containers */
  --border-brand-strong: #6FACDE;   /* border/brand-strong */
  --border-interactive: #0075BC;    /* border/interactive */
  --border-field: #898D8D;          /* border/field: default and filled */
  --border-field-active: #0075BC;   /* border/field/active */
  --border-field-error: #D20000;    /* border/field/error */
  --focus: #072C4A;                 /* border/focus/primary */
  --text: #5D5D5D;                  /* text/default: body text */
  --text-strong: #444444;           /* text/default-strong: headings */
  --text-brand: #0075BC;            /* text/brand */
  --text-inverse: #FFFFFF;          /* text/inverse */
  --link: #0075BC;                  /* link/primary */
  --link-hover: #072C4A;            /* link/primary: hover and active */
  --button-primary: #0075BC;        /* button/primary */
  --button-primary-hover: #065486;  /* button/primary: hover and active */
  --button-primary-border-hover: #072C4A; /* border/button/primary/hover */
  --button-disabled: #D1D1D1;       /* button/primary/disabled */
  --button-secondary-active: #F0F8FF; /* button/secondary/active */
  --overlay-medium: rgb(0 0 0 / 50%); /* overlay/medium */
  --alert-error: #D20000;           /* text/alerts/error, with #FFDDDD */
  --alert-error-background: #FFDDDD;
  --alert-success: #3F8367;         /* text/alerts/success, with #DDEEE4 */
  --alert-success-background: #DDEEE4;
  --alert-warning-background: #FBF2C6;
  --hairline: var(--border-neutral);

  /* The data-visualisation palette, for charts only: six core colours, four chart-only colours,
     and two neutrals for context, missing or "other" data. No other colour is drawn in a chart. */
  --dv-primary-blue: #5A96D7;       /* Primary Blue 50: 3.1:1 on white */
  --dv-blue: #0075BC;               /* Blue 60: 4.9:1 */
  --dv-dark-blue: #00263E;          /* Dark Blue: 15.6:1 */
  --dv-orange: #DF6534;             /* Orange 50: 3.5:1 */
  --dv-yellow: #F0B323;             /* Yellow 40: 1.9:1, so drawn thicker */
  --dv-green: #3F8367;              /* Green 50: 4.5:1 */
  --dv-fuchsia: #A21CAF;            /* chart only: 6.3:1 */
  --dv-violet: #4C1D95;             /* chart only: 11:1 */
  --dv-lime: #65A30D;               /* chart only: 3.09:1 */
  --dv-rose: #881337;               /* chart only: 9.6:1 */
  --dv-gray-40: #898D8D;            /* neutral, for context and "other": 3.4:1 */
  --dv-gray-10: #E7E7E7;            /* neutral, for what is not chosen or not published */
  /* The fills of the Market section's series, the market's own, where every hue above is a club's:
     the system's greys, Gray 80, Gray 40 and Gray 20, then patterns in Gray 80 on white. No club
     takes any of them, so a series of the market is never read as a club. */
  --cat-dark: #444444;              /* Gray 80: white figures on it, 9.7:1 */
  --cat-mid: var(--dv-gray-40);     /* Gray 40: black figures on it, 6.3:1 */
  --cat-light: #D1D1D1;             /* Gray 20: black figures, 13:1; outlined, being 1.5:1 on white */
  --cat-ink: #444444;               /* the outline and the marks of the light fill and the patterns */
  --series-single: var(--dv-primary-blue);
  --series-market: var(--dv-gray-40);
  --gridline: var(--dv-gray-10);
  --axis-label: var(--text);

  /* Type */
  --face-heading: "Roboto Slab", Georgia, serif;
  --face-body: "Source Sans 3", Arial, sans-serif;
  --size-body: 17px;
  --size-table: 16px;
  --size-caption: 14px;
  --size-heading-3: 24px;
  --size-heading-2: 32px;
  --line-height-body: 1.5;

  /* Layout. No content cap: the page uses the full window, inside the side gutters. */
  --gutter: 24px;
  --control-height: 44px;
  --logo-height: 84px;
  --logo-clear: 22px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
}

/* Scrollbars: square and flat like every other surface, an interactive blue thumb (#0075BC) on
   the Blue 5 track (#F0F8FF), 4.6:1, above the 3:1 asked of interface components. Every scrolling
   element and the page itself carry it: the club list, tables that scroll sideways, the tab row. */
:root {
  --scrollbar-thumb: #0075BC;
  --scrollbar-track: #F0F8FF;
  --scrollbar-size: 10px;
}
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  scrollbar-width: thin;
}
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 0;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 0;
  border: 0;
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-button {
  display: none;
}

/* Base */

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

html {
  background: var(--surface);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--face-body);
  font-size: var(--size-body);
  font-weight: 400;
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--face-heading);
  font-weight: 400;
  color: var(--text-strong);
  line-height: 1.25;
}

h1,
h2 { font-size: var(--size-heading-2); }
h3 { font-size: var(--size-heading-3); }

p {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover,
a:active,
a:focus-visible {
  color: var(--link-hover);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

img {
  display: block;
  max-width: 100%;
}

strong,
b {
  font-weight: 600;
}

.caption,
small {
  font-size: var(--size-caption);
}

/* Every band of the page (header, sample bar, title band, workspace, foot) spans the window with
   the same gutters, so their contents line up with the workspace edges. */
.content {
  padding: 0 var(--gutter);
}

@media (min-width: 1600px) {
  :root {
    --gutter: 40px;
  }
}

/* Page frame: header */

.site-header {
  border-bottom: 1px solid var(--hairline);
}

.site-header .content {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
}

/* The logo's clear space is kept beside it. Above and below, the image's own transparent margin
   (a little more than the height of the "G" at every size it is drawn) is the clear space, so the
   header is no taller than the logo. */
.site-logo {
  display: block;
  padding: 0 var(--logo-clear);
  margin-left: calc(-1 * var(--logo-clear));
}

.site-logo img {
  height: var(--logo-height);
  width: auto;
}

.site-name {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 var(--space-3);
  border-left: 1px solid var(--hairline);
  font-family: var(--face-body);
  font-size: var(--size-heading-3);
  font-weight: 400;
  color: var(--text-strong);
}

.site-name a {
  color: inherit;
  text-decoration: none;
}

.site-nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.site-nav ul {
  display: flex;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 10px 0;
  color: var(--text-strong);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--link);
}

.site-nav a:active {
  color: var(--link-hover);
}

.site-nav a[aria-current="page"] {
  border-bottom-color: var(--border-interactive);
}

/* Page frame: the top region, title band, foot */

/* The top of every page (the header and the title band with its tabs) stays in
   view as the page scrolls. Its height, --top-region, is what everything sticky beneath it (the
   club list, the phone's "Comparing" bar) is offset by, and what the page keeps clear when it
   scrolls to a part of itself. The values here are the heights the region is drawn at, by width;
   the script measures the region as drawn and sets --top-region to that, so that a title that
   wraps onto a second line, say, is allowed for too. */
:root {
  --header-height: 85px;
  --band-height: 72px;
  --top-region: calc(var(--header-height) + var(--band-height));
  --selection-height: 0px;
  scroll-padding-top: calc(var(--top-region) + var(--selection-height) + var(--space-1));
}

.top-region {
  position: sticky;
  top: 0;
  z-index: 12;
  background: var(--surface);
}

/* Up to 1040px the header takes three lines; up to 750px a band's tabs take a line of their own
   under the title. (Below 600px, the phone's own values are set with the phone's rules.) */
@media (max-width: 1040px) {
  :root {
    --header-height: 217.5px;
  }
}

@media (max-width: 750px) {
  :root:has(.title-band.has-tabs) {
    --band-height: 122.5px;
  }
}

/* Review's and Compare's eight tabs take a line of their own under the title below 1280px, and
   go four to a row, in two rows, below 1010px (see "Eight tabs", with the tabs). */
@media (max-width: 1279px) {
  :root:has(.tabs.many) {
    --band-height: 122.5px;
  }
}

@media (max-width: 1009px) {
  :root:has(.tabs.many) {
    --band-height: 173px;
  }
}

.title-band {
  background: var(--container-brand-strong);
}

/* One band on every page: the same padding and the same 32px title, so it is the same height on
   every page at every width. It is kept slim so the workspace starts high on the page. */
.title-band .content {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.title-band h1 {
  color: var(--text-strong);
  white-space: nowrap;
}

main {
  padding: var(--space-5) 0;
}

.site-foot {
  border-top: 1px solid var(--hairline);
  font-size: var(--size-caption);
}

/* The foot: when the figures were last updated, and the links to Privacy, Terms of use and
   Storage choices, side by side where they fit and one under the other where they do not. */
.site-foot .content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.site-foot p {
  margin: 0;
}

.foot-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Buttons and controls */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding: 0 var(--space-3);
  border: 1px solid var(--button-primary);
  background: var(--button-primary);
  color: var(--surface);
  font-family: var(--face-body);
  font-size: var(--size-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.button:hover,
.button:active {
  background: var(--button-primary-hover);
  border-color: var(--button-primary-border-hover);
  color: var(--surface);
}

.button:disabled,
.button[aria-disabled="true"] {
  background: var(--button-disabled);
  border-color: var(--button-disabled);
  color: var(--text-strong);
  cursor: default;
}

/* Secondary: white with an interactive blue edge and text. The system keeps it white on hover, so
   hover underlines the words; pressed, it takes the Blue 5 fill. */
.button.secondary {
  background: var(--surface);
  border-color: var(--border-interactive);
  color: var(--text-brand);
}

.button.secondary:hover,
.button.secondary:focus-visible {
  background: var(--surface);
  border-color: var(--border-interactive);
  color: var(--text-brand);
}

.button.secondary:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.button.secondary:active {
  background: var(--button-secondary-active);
}

select,
input[type="text"],
input[type="search"] {
  height: var(--control-height);
  padding: 0 var(--space-2);
  border: 1px solid var(--border-field);
  background: var(--surface);
  color: var(--text);
  font-family: var(--face-body);
  font-size: var(--size-body);
  border-radius: 0;
}

/* A field takes the interactive blue edge while in use, and the error red when what is in it is
   wrong; the focus ring is drawn as on every other control. */
select:focus,
input[type="text"]:focus,
input[type="search"]:focus {
  border-color: var(--border-field-active);
}

[aria-invalid="true"] {
  border-color: var(--border-field-error);
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input::placeholder {
  color: var(--text);
  opacity: 1;
}

label {
  font-weight: 600;
}

.control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}

.control-row .field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  max-width: 100%;
}

/* A selector is as wide as its longest option unless told otherwise; on a phone that option
   ("Capital distribution and excess calls") is wider than the screen. */
.control-row .field select {
  min-width: 0;
  max-width: 100%;
}

/* Fact lists */

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.facts div {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-1);
}

.facts dt,
dl dt {
  font-size: var(--size-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.facts dd,
dl dd {
  margin: 0;
}

/* Section rules */

.section {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-neutral);
}

/* Tables */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--size-table);
  font-variant-numeric: tabular-nums;
}

caption {
  text-align: left;
  font-weight: 600;
  padding-bottom: var(--space-1);
}

th,
td {
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

thead th {
  background: var(--container-brand);
  font-weight: 600;
  color: var(--text-strong);
  border-bottom: 1px solid var(--border-brand);
}

th.figure,
td.figure {
  text-align: right;
}

td.figure {
  white-space: nowrap;
}

td.not-published {
  font-style: italic;
}

.table-scroll {
  overflow-x: auto;
  container: figures / inline-size;
}

/* Charts: the plot is a fluid SVG, the labels are text at 14px. A chart is its own container too,
   so a chart drawn small (four to a row) thins its labels however wide the column is. Plot heights
   are set per view from the width of the views column, further down. */

.chart {
  margin: 0;
  container: chart / inline-size;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-2) 56px;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
}

.chart-legend .key {
  display: inline-block;
  width: 24px;
  margin-right: 8px;
  vertical-align: middle;
  border-top: 3px solid var(--series-single);
}

.chart-legend .key.market {
  border-top-width: 2px;
  border-top-style: dashed;
  border-top-color: var(--series-market);
}

.chart-plot {
  position: relative;
  height: var(--plot-height, 280px);
  margin: 10px 8px 0 56px;
}

.chart-plot svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.chart-plot .grid line {
  stroke: var(--gridline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

/* A single series is drawn in Primary Blue 50, the first colour of every categorical sequence; it
   reaches 3:1 on white, so it takes the 2px line and 4px markers set out under Club colours below. */
.chart-plot .series {
  fill: none;
  stroke: var(--series-single);
  stroke-width: 2;
  stroke-linejoin: miter;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}

.chart-plot .points {
  fill: none;
  stroke: var(--series-single);
  stroke-width: 4;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

/* The market average is a Gray 40 rule, the system's neutral for context data (3.4:1 on white). It
   is always dashed, never carries point markers and is always labelled "Market average". */
.chart-plot .series.market {
  stroke: var(--series-market);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.chart-plot .points.market {
  stroke: var(--series-market);
}

.chart-y,
.chart-x {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--axis-label);
  line-height: 1;
}

.chart-y li {
  position: absolute;
  right: 100%;
  width: 48px;
  margin-right: 8px;
  text-align: right;
  transform: translateY(-50%);
}

.chart-x {
  display: flex;
  margin: 8px 8px 0 56px;
}

/* Each year has an equal column. A label wider than its column (a policy year on a narrow chart,
   where every other year is labelled) spills evenly into its hidden neighbours rather than
   widening the row past the chart. */
.chart-x li {
  flex: 1 1 0;
  display: flex;
  justify-content: center;
  min-width: 0;
  white-space: nowrap;
  text-align: center;
}

.chart-x + .chart-legend {
  margin-top: 12px;
}

/* Club colours. Each club has one colour of its own, fixed in app/render/club-colours.js, the same
   on every view at once and whichever clubs are chosen: the list, every line, every bar, every key.
   The colours are the system's ten categorical chart colours, and no others: no tint, and no grey,
   which is the categories' in Compare (see CATEGORY_FILLS) and the market average's. A colour under
   3:1 against white (Yellow 40) is drawn 3px rather than 2px, with 6px square markers rather than
   4px, and its legend key is 3px to match. Every chart's Figures table carries each value as well,
   so the line is never the only way to read a figure. .club-gray is Review's, for a remainder drawn
   as a line. */

.club-primary-blue { --club: var(--dv-primary-blue); --hatch-bar: url(#club-hatch-primary-blue); --hatch-ring: url(#club-hatch-ring-primary-blue); }
.club-blue { --club: var(--dv-blue); --hatch-bar: url(#club-hatch-blue); --hatch-ring: url(#club-hatch-ring-blue); }
.club-dark-blue { --club: var(--dv-dark-blue); --hatch-bar: url(#club-hatch-dark-blue); --hatch-ring: url(#club-hatch-ring-dark-blue); }
.club-orange { --club: var(--dv-orange); --hatch-bar: url(#club-hatch-orange); --hatch-ring: url(#club-hatch-ring-orange); }
.club-yellow { --club: var(--dv-yellow); --club-line: 3; --club-point: 6; --hatch-bar: url(#club-hatch-yellow); --hatch-ring: url(#club-hatch-ring-yellow); }
.club-green { --club: var(--dv-green); --hatch-bar: url(#club-hatch-green); --hatch-ring: url(#club-hatch-ring-green); }
.club-fuchsia { --club: var(--dv-fuchsia); --hatch-bar: url(#club-hatch-fuchsia); --hatch-ring: url(#club-hatch-ring-fuchsia); }
.club-violet { --club: var(--dv-violet); --hatch-bar: url(#club-hatch-violet); --hatch-ring: url(#club-hatch-ring-violet); }
.club-lime { --club: var(--dv-lime); --hatch-bar: url(#club-hatch-lime); --hatch-ring: url(#club-hatch-ring-lime); }
.club-rose { --club: var(--dv-rose); --hatch-bar: url(#club-hatch-rose); --hatch-ring: url(#club-hatch-ring-rose); }
.club-gray { --club: var(--dv-gray-40); }

/* The second channel. Ten colours, twelve clubs: the two smallest share the hues of the two largest
   (Shipowners Gard's, American NorthStandard's) and are told from them by their drawing, never by a
   tint or a grey. Such a club's line is dashed, with open square markers, 6px, white inside; its
   bars, slices and swatches are hatched with diagonal lines of its hue on white, inside an outline
   of the hue, running the other way from N/P's Gray 40 hatching on Gray 10; its edge in the club
   list and its thin marks are dashed. The patterns are app/render/club-colours.js's, written once
   at the top of the page. */
.club-patterned {
  --club-point: 6;
  --club-fill: repeating-linear-gradient(45deg, var(--club) 0 2px, var(--surface) 2px 4px);
}

.chart-plot .series.club-patterned:not(.trend):not(.join) {
  stroke-dasharray: 7 4;
}

.chart-plot .points.point-hole {
  stroke: var(--surface);
  stroke-width: calc(var(--club-point, 6) - 3);
}

.peer-chart.many-clubs .chart-plot .points.point-hole {
  stroke-width: calc(var(--club-point, 6) * 0.75 - 2.5);
}

.chart-plot path.club-patterned:is(.peer-slice) {
  fill: var(--hatch-bar);
  stroke: var(--club);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* A hatched bar's outline is drawn inside it (a 3px stroke clipped to the rect leaves 1.5px), so that
   it is exactly as wide as the solid bars beside it (14 October 2026). */
.chart-plot rect.club-patterned {
  fill: var(--hatch-bar);
  stroke: var(--club);
  stroke-width: 3px;
  vector-effect: non-scaling-stroke;
  clip-path: inset(0) fill-box;
}

.chart-legend .key.club-patterned {
  border-top-style: dashed;
}

.chart-svg-defs,
.chart-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.market { --club: var(--series-market); }

.chart-plot .series[class*="club-"] {
  stroke: var(--club);
  stroke-width: var(--club-line, 2);
}

.chart-plot .points[class*="club-"] {
  stroke: var(--club);
  stroke-width: var(--club-point, 4);
}

.chart-legend .key[class*="club-"] {
  border-top-color: var(--club);
  border-top-width: calc(var(--club-line, 2) * 1px);
}

/* Text helpers */

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

.intro {
  max-width: 70ch;
  margin-bottom: var(--space-3);
}

.caption {
  margin: var(--space-1) 0 0;
}

/* The workspace: the club list on the left, the views to its right, and the foot of the page under
   the views. The list's column runs the whole height of the page, from the title band to the very
   bottom, so that the list, which stays in place as the page scrolls (below), never reaches the end
   of its column and is never pushed up, and never covers the foot. The main row takes any height
   the list needs beyond the views', so the foot stays at the bottom. */

main.workspace-page {
  padding: var(--space-3) 0 var(--space-5);
}

.workspace {
  display: grid;
  grid-template-columns: 316px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
  align-items: start;
}

.workspace > .rail {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.workspace > main {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.workspace > .site-foot {
  grid-column: 2;
  grid-row: 2;
}

/* In the views' column the foot's words line up with the views; its rule runs to the window's
   right edge, as it does across the window on other pages. */
.workspace > .site-foot {
  margin-right: calc(-1 * var(--gutter));
}

.workspace > .site-foot .content {
  padding-left: 0;
}

/* The views column is the container every view rule below asks about: the views grow and shrink
   with the room the column has, not with the window. */
.views {
  min-width: 0;
  container: views / inline-size;
}

/* The club list. It never moves as the page scrolls, as the top region does not: it stands the same
   24px under the title band at the top of the page and all the way to its foot, and it is no taller
   than the window under the top region less that gap above and below; its rows scroll inside it
   when there are more than fit. It has no margin below: the gap under it is room left in its column,
   so that a page whose height is not a whole number of pixels cannot push it up at the very end. */

.rail {
  position: sticky;
  top: calc(var(--top-region) + var(--space-3));
  display: flex;
  flex-direction: column;
  margin-top: var(--space-3);
  max-height: calc(100vh - var(--top-region) - 2 * var(--space-3));
  border: 1px solid var(--hairline);
  background: var(--surface);
}

.rail-head {
  flex: none;
  padding: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.rail-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
  margin-bottom: 12px;
}

.rail-title h2 {
  font-size: var(--size-heading-3);
}

.rail-count {
  margin: 0;
  font-size: var(--size-caption);
}

.rail-done {
  display: none;
}

.rail-search input {
  display: block;
  width: 100%;
}

.rail-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: 12px;
}

.rail-actions .button {
  padding: 0 var(--space-2);
}

.rail-list {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.rail-row {
  display: grid;
  grid-template-columns: 22px 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 8px var(--space-2) 8px 12px;
  border: 0;
  border-left: 4px solid transparent;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.rail-list li:last-child .rail-row {
  border-bottom: 0;
}

.rail-row:hover {
  background: var(--container-neutral);
}

.rail-row[aria-pressed="true"] {
  border-left-color: var(--club);
  background: var(--container-brand);
}

.rail-swatch {
  display: block;
  height: 4px;
  background: var(--dv-gray-10);
}

.rail-row[aria-pressed="true"] .rail-swatch {
  background: var(--club-fill, var(--club));
}

.rail-row.club-patterned[aria-pressed="true"] {
  border-left-style: dashed;
}

.rail-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 22px;
}

.rail-mark img {
  max-width: 34px;
  max-height: 22px;
  width: auto;
  height: auto;
}

.rail-name {
  display: block;
  overflow: hidden;
  color: var(--text-strong);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.rail-sub {
  display: block;
  font-size: var(--size-caption);
  line-height: 1.3;
  color: var(--text);
}

/* The bar that stands in for the list on a phone. Hidden on a wide screen. */

.selection-bar {
  display: none;
}

/* A section's tabs, in its title band: the title on the left and the tabs on the right, along
   the foot of the band, so the band keeps its height. The page on screen is a white tab joined to
   the page beneath it, under a rule in the interactive blue (4.9:1 on white); the others sit on
   the band, in the default-strong grey (7.2:1 on the band), and take the brand container and a
   brand-strong rule when pointed at. Where the title and the tabs do not fit on one line, the
   tabs take a line of their own under the title. */
.title-band.has-tabs .content {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  column-gap: var(--space-4);
  padding-bottom: 0;
}

.title-band.has-tabs h1 {
  padding-bottom: var(--space-2);
}

.tabs ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.tabs a {
  display: block;
  padding: 10px var(--space-2) 12px;
  border-top: 3px solid transparent;
  color: var(--text-strong);
  font-size: var(--size-body);
  text-decoration: none;
}

.tabs a:hover,
.tabs a:focus-visible {
  border-top-color: var(--border-brand-strong);
  background: var(--container-brand);
}

.tabs a:active {
  background: var(--surface);
}

.tabs a[aria-current="page"] {
  border-top-color: var(--border-interactive);
  background: var(--surface);
  font-weight: 600;
}

/* Eight tabs: Review's and Compare's sections, from Overview to Financial strength. They are the
   tabs above, drawn the same, to the right of the title where the band has room for them (from
   about 1260px); where it does not, all eight take a line of their own under the title, as any
   tabs do; and where one line cannot hold them (below 1010px), they go four to a row, in two rows
   of equal cells, the names centred, as on a phone. Nothing scrolls sideways at any width. */
@media (max-width: 1009px) {
  .tabs.many {
    flex-basis: 100%;
  }

  .tabs.many ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
    white-space: normal;
  }

  .tabs.many a {
    text-align: center;
  }
}

/* A view and its sections */

.view {
  padding-top: var(--space-3);
}

.view h2 {
  font-size: var(--size-heading-3);
  margin-bottom: var(--space-1);
}

/* The head of a view: its first content on the left, and Export and Print for that view at the top
   right. When the column is too narrow for both on one line, the actions take a line of their own
   above, still on the right. */

.view-head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px var(--space-3);
  margin-bottom: var(--space-3);
}

.view-head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
  margin-bottom: 0;
}

.view-actions,
.section-head {
  display: flex;
  gap: var(--space-1);
}

.view-actions {
  flex: none;
  margin-left: auto;
}

.section-head {
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}

/* Compact tables under a chart. The figure columns share 76% of the width equally (the table says
   how many there are in --figure-cols) and the first column has the rest, so the figures sit the
   same distance apart whatever their headings say; a heading wraps rather than widening its
   column. A column is wider than its share only when a single word in it cannot fit, such as a
   long club name on a phone, so nothing is ever drawn over its neighbour. */

table.compact th.figure {
  width: calc(76% / var(--figure-cols, 1));
}

table.compact th,
table.compact td {
  padding: 6px 8px;
}

table.compact thead th {
  vertical-align: bottom;
}

table.compact th.figure {
  white-space: normal;
}

/* Panels: a chart with its head, notes and definition. Review and Compare set one to a row; a row is
   centred, so a panel on its own sits in the middle, not at the left. */

.panels {
  --per-row: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-4);
}

.panels > .panel {
  flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--space-4)) / var(--per-row));
}

.panel {
  min-width: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-neutral);
}

.panel h2,
.panel h3 {
  margin-bottom: 4px;
}

.panel h3 {
  font-family: var(--face-body);
  font-size: var(--size-body);
  font-weight: 600;
}

.panel-unit {
  margin: 0 0 var(--space-2);
  font-size: var(--size-caption);
}

.panel .table-scroll {
  margin-top: var(--space-2);
}

.panel .definition {
  max-width: 70ch;
  margin-top: var(--space-2);
}

/* A panel's notes, under its chart: the panel shows no Figures table, which its expanded view and
   its printed page show. */
.panel-note {
  max-width: 70ch;
}

.panel .definition p {
  margin: 0;
}

/* A chart's head: its heading, its unit line where it has one, and its tools at the top right:
   Export, which offers the chart's figures as a spreadsheet or the chart as a PDF, and Expand, which
   opens the chart large with its legend, its figures and its definition. The tools are
   outline buttons with an icon, in the interactive blue, square like every other control; each is
   named for a screen reader. The heading keeps clear of them. */
:root {
  --tool-size: 36px;
  --tools-width: calc(2 * var(--tool-size) + var(--space-1));
}

.chart-head {
  position: relative;
  min-height: var(--tool-size);
  padding-right: calc(var(--tools-width) + var(--space-2));
}

.chart-tools {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: var(--space-1);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tool-size);
  height: var(--tool-size);
  padding: 0;
  border: 1px solid var(--border-interactive);
  background: var(--surface);
  color: var(--text-brand);
  cursor: pointer;
}

.icon-button svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
}

.icon-button:hover {
  border-color: var(--button-primary-border-hover);
  color: var(--link-hover);
}

.icon-button:active,
.icon-button[aria-expanded="true"] {
  background: var(--button-secondary-active);
}

/* Export's menu, under the button that opened it: a white panel with a 1px interactive blue edge,
   square, no shadow, its two choices in the body face, each a full-width row 44px high that takes
   the brand container when pointed at or focused. It sits over the chart, below the top region. */
.chart-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 4px 0;
  border: 1px solid var(--border-interactive);
  background: var(--surface);
}

.chart-menu button {
  display: block;
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-2);
  border: 0;
  background: var(--surface);
  color: var(--text-strong);
  font-family: var(--face-body);
  font-size: var(--size-body);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.chart-menu button:hover,
.chart-menu button:focus-visible {
  background: var(--container-brand);
  color: var(--text-brand);
}

.chart-menu button:focus-visible {
  outline-offset: -2px;
}

.chart-dialog-actions {
  position: relative;
}

/* A chart on a page opens large when it is clicked or tapped, as its Expand button does. */
figure.chart[data-expand] {
  cursor: zoom-in;
}

/* The parts of a chart's bars and doughnuts take the system's chart colours, in its order, and the
   neutral Gray 40 for a market average and for a remainder ("Rest of the World", "Other"). A 2px
   white gap separates neighbours. */
.seg-primary-blue { fill: var(--dv-primary-blue); }
.seg-blue { fill: var(--dv-blue); }
.seg-dark-blue { fill: var(--dv-dark-blue); }
.seg-orange { fill: var(--dv-orange); }
.seg-yellow { fill: var(--dv-yellow); }
.seg-green { fill: var(--dv-green); }
.seg-fuchsia { fill: var(--dv-fuchsia); }
.seg-violet { fill: var(--dv-violet); }
.seg-lime { fill: var(--dv-lime); }
.seg-rose { fill: var(--dv-rose); }
.seg-grey { fill: var(--dv-gray-40); }
rect[class^="seg-"],
polygon[class^="seg-"] {
  stroke: var(--surface);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  vertical-align: -1px;
}

.legend-swatch.seg-primary-blue { background: var(--dv-primary-blue); }
.legend-swatch.seg-blue { background: var(--dv-blue); }
.legend-swatch.seg-dark-blue { background: var(--dv-dark-blue); }
.legend-swatch.seg-orange { background: var(--dv-orange); }
.legend-swatch.seg-yellow { background: var(--dv-yellow); }
.legend-swatch.seg-green { background: var(--dv-green); }
.legend-swatch.seg-fuchsia { background: var(--dv-fuchsia); }
.legend-swatch.seg-violet { background: var(--dv-violet); }
.legend-swatch.seg-lime { background: var(--dv-lime); }
.legend-swatch.seg-rose { background: var(--dv-rose); }
.legend-swatch.seg-grey { background: var(--dv-gray-40); }

/* A fill of the Market section's, on a segment of a bar or a column and on its key: a grey, or a
   pattern in Gray 80 on white. The light grey and the patterns are outlined in Gray 80, so that each
   reaches 3:1 against white and its neighbours. None is diagonal hatching on Gray 10, which is
   N/P's alone, and none is a club's colour. */
.cat-dark { background: var(--cat-dark); }
.cat-mid { background: var(--cat-mid); }
.cat-light {
  background: var(--cat-light);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}
.cat-dots {
  background: radial-gradient(circle, var(--cat-ink) 0 1.2px, transparent 1.7px) 0 0 / 5px 5px, var(--surface);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}
.cat-lines {
  background: repeating-linear-gradient(to bottom, var(--cat-ink) 0 1px, transparent 1px 4px), var(--surface);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}
.cat-grid {
  background:
    linear-gradient(to right, var(--cat-ink) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(to bottom, var(--cat-ink) 1px, transparent 1px) 0 0 / 6px 6px,
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}

/* A category's fill in Compare: the system's chart neutral Gray 40, then patterns in Gray 40 on
   white, each inside a Gray 40 outline (3.4:1 on white). Every hue of the chart palette is a club's,
   so no category takes one; no fill is diagonal hatching, which is N/P's on Gray 10 and a club's
   second channel in its hue, and none is on Gray 10. The fills above (.cat-dark and the rest) are
   the Market section's. */
.cat-gray-40 { background: var(--dv-gray-40); }
.cat-dots-gray {
  background: radial-gradient(circle, var(--dv-gray-40) 0 1.3px, transparent 1.8px) 0 0 / 5px 5px, var(--surface);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}
.cat-lines-gray {
  background: repeating-linear-gradient(to bottom, var(--dv-gray-40) 0 1px, transparent 1px 4px), var(--surface);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}
.cat-grid-gray {
  background:
    linear-gradient(to right, var(--dv-gray-40) 1px, transparent 1px) 0 0 / 6px 6px,
    linear-gradient(to bottom, var(--dv-gray-40) 1px, transparent 1px) 0 0 / 6px 6px,
    var(--surface);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}
.cat-vlines-gray {
  background: repeating-linear-gradient(to right, var(--dv-gray-40) 0 1px, transparent 1px 4px), var(--surface);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}
.cat-checks-gray {
  background: conic-gradient(var(--dv-gray-40) 25%, transparent 0 50%, var(--dv-gray-40) 0 75%, transparent 0) 0 0 / 8px 8px, var(--surface);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}

/* N/P (not published) in a share-of-100 chart: the space the figures would fill, hatched in Gray 40
   on Gray 10 (the system's neutral for what is not published) inside a Gray 40 outline, so it reads
   as an absence and never as a share. "Other" is solid Gray 40, with no hatching or outline. The
   label sits on a white chip with the same outline, clear of the hatching. */
.chart-missing {
  background:
    repeating-linear-gradient(-45deg, var(--dv-gray-40) 0 1px, transparent 1px 7px),
    var(--dv-gray-10);
  outline: 1px solid var(--dv-gray-40);
  outline-offset: -1px;
}

/* The Review section: one club at a time, in the forms of Gallagher's P&I review workbook drawn in
   the site's look. Bars take the system's chart colours in its order, with Gray 40 for a market
   average and for a remainder ("Other", "Rest of the World"), and a 2px white gap between the parts
   of a stack. Lines are 2px with square markers, and a market average
   is a Gray 40 dashed line, never marked. A linear trend line is dotted, in its series' colour. The
   gridlines are Gray 10, as on every chart; where bars run below zero the zero line is drawn in the
   axis labels' grey. A second value axis is labelled on the right. */

main.review-page {
  padding: var(--space-3) 0 var(--space-5);
}

.review-picker .field select {
  min-width: 240px;
}

.review-mark {
  display: inline-flex;
  align-items: center;
  height: var(--control-height);
}

.review-mark img {
  max-width: 68px;
  max-height: 44px;
  width: auto;
  height: auto;
}

.review-view > .intro {
  max-width: 70ch;
}

/* Two charts to a row on Review and Compare, each at most half the column, a lone last chart
   centred at the same width: always from 900px, and between 600px and 899px wherever the column
   gives each chart 320px or more (a column of 672px: Review from about 720px, Compare, whose club
   list then sits above the charts, likewise). Where the column is narrower, one to a row, at most
   560px, centred; on a phone (below 600px) one to a row at the whole width. The expanded view and
   the printout, a chart to a page, are drawn without these rules. */
.panels.review-panels {
  --per-row: 1;
}

@media screen and (min-width: 900px) {
  .panels.review-panels {
    --per-row: 2;
  }
}

@media screen and (min-width: 600px) and (max-width: 899px) {
  @container views (min-width: 672px) {
    .panels.review-panels {
      --per-row: 2;
    }
  }
}

@media screen and (min-width: 900px) {
  .panels.review-panels > .panel {
    max-width: 50%;
  }
}

/* Tables are as wide as their columns, not the column they are in, and centred: a chart's Figures
   table has columns of about 100 to 220px; a tab's table of figures has its row labels at their
   own width (at most 30 characters) and every year 84px wide. */
table.compact.review-chart-figures {
  width: auto;
  min-width: min(100%, 360px);
  margin: 0 auto;
}

table.compact.review-chart-figures th.figure {
  width: auto;
  min-width: 96px;
  max-width: 220px;
  white-space: normal;
}

.review-chart-table {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.review-panels .chart {
  margin-top: var(--space-1);
}

/* A tab's table of figures never scrolls sideways and its type is never made smaller: its years
   are split into blocks, one under the other, each repeating the row labels and saying which years
   it holds, the newest last. The page draws the blocks for three widths and shows the one that fits
   the column: eight years to a block at 960px and wider, five from 720px, three below (on a phone
   the row labels take 136px and a year 64px). Every block of a table has the same column widths,
   so its figures line up block to block. */
.year-blocks-frame {
  container: yearblocks / inline-size;
}

.year-blocks {
  display: none;
}

@container yearblocks (min-width: 960px) {
  .year-blocks.blocks-wide {
    display: block;
  }
}

@container yearblocks (min-width: 720px) and (max-width: 959.98px) {
  .year-blocks.blocks-medium {
    display: block;
  }
}

@container yearblocks (max-width: 719.98px) {
  .year-blocks.blocks-narrow {
    display: block;
  }
}

.year-block + .year-block {
  margin-top: var(--space-3);
}

.block-years {
  width: fit-content;
  margin: 0 auto 4px;
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--text-strong);
}

table.compact.review-figures {
  width: auto;
  table-layout: fixed;
  margin: 0 auto;
}

table.review-figures col.label {
  width: calc(var(--label, 24ch) + 24px);
}

table.review-figures col.year {
  width: 84px;
}

table.compact.review-figures th.figure {
  width: auto;
}

@container yearblocks (max-width: 479.98px) {
  table.review-figures col.label {
    width: 136px;
  }

  table.review-figures col.year {
    width: 64px;
  }
}

table.review-figures th.figure,
table.review-figures td.figure {
  min-width: 72px;
}

.chart-plot .zero {
  stroke: var(--axis-label);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.chart-plot .bars rect {
  shape-rendering: crispEdges;
}

.chart-plot .series.trend {
  stroke-width: 2;
  stroke-dasharray: 1 5;
  stroke-linecap: round;
}

.chart-legend .key.trend {
  border-top-style: dotted;
}

.review-legend {
  margin-top: 12px;
}

.review-legend .legend-swatch {
  vertical-align: -1px;
}

/* A second value axis, labelled on the right of the plot, which keeps the same room on that side. */
.chart-plot.has-y2,
.chart-x.has-y2 {
  margin-right: 64px;
}

.chart-y2 {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--axis-label);
  line-height: 1;
}

.chart-y2 li {
  position: absolute;
  left: 100%;
  width: 56px;
  margin-left: 8px;
  text-align: left;
  transform: translateY(-50%);
}

/* Horizontal bars: the years up the side, the first at the foot; the values along the bottom. */
.chart-xv {
  position: relative;
  height: 14px;
  margin: 8px 8px 0 56px;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--axis-label);
  line-height: 1;
}

.chart-xv li {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* The last value is drawn to the left of its tick, ending in the plot's 8px margin, so that a wide
   figure ("1,600.0") never runs past the chart's right edge. */
.chart-xv li:last-child {
  transform: translateX(calc(-100% + 8px));
}

/* N/P in a chart with the years along the foot, Review's and Compare's: a bar, or a line's year,
   not published, hatched under the chart's lines and bars so that the figures that have the year
   are not covered. */
.review-chart .chart-plot {
  isolation: isolate;
}

.peer-missing {
  z-index: -1;
}

/* A column of shares that add up to 100 (an investment allocation) that is not published: the
   column hatched in Gray 40 on Gray 10 inside a Gray 40 outline, with an N/P chip. */
.column-missing {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--space-1);
  color: var(--text);
  font-size: var(--size-caption);
  font-weight: 600;
}

.column-missing > span,
.donut-missing > span {
  padding: 3px 6px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1;
}

/* Doughnuts: the ring in the middle and its labels either side, the category over its share. */
.chart-plot.donut-plot {
  width: min(100%, calc(var(--plot-height, 280px) * 1.6));
  height: auto;
  aspect-ratio: 16 / 10;
  margin: 10px auto 0;
}

/* A doughnut of the clubs in Compare keeps room either side for a club's name, which does not
   wrap: its ring is drawn narrower than the column where the column is narrow. */
.peer-chart .chart-plot.donut-plot {
  width: min(100% - 112px, calc(var(--plot-height, 280px) * 1.6));
}

.donut-plot svg {
  overflow: visible;
}

.donut-labels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.donut-labels li {
  position: absolute;
  display: flex;
  flex-direction: column;
  max-width: 34%;
  font-size: var(--size-caption);
  line-height: 1.2;
  color: var(--text);
  transform: translate(0, -50%);
}

.donut-labels li.left {
  align-items: flex-end;
  text-align: right;
  transform: translate(-100%, -50%);
}

.donut-labels li span:last-child {
  font-weight: 600;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.np-ground {
  fill: var(--dv-gray-10);
}

.np-hatch {
  stroke: var(--dv-gray-40);
  stroke-width: 1;
}

.np-ring {
  stroke: var(--dv-gray-40);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.donut-missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: var(--size-caption);
  font-weight: 600;
}

/* Eight tabs: on a phone they go four to a row, in two rows. */
@media (max-width: 599px) {
  .tabs.many ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row;
  }
}

/* A year ("2018") is narrow: a chart labels every year down to 420px wide, and thins its second
   axis as it thins its first. */
@container chart (min-width: 420px) {
  .chart-x.years:not(.every-2):not(.every-3) li:nth-child(even) {
    visibility: visible;
  }
}

@container views (max-width: 999px) {
  .chart-y2 li:nth-child(even):not(:last-child) {
    display: none;
  }

  .chart-plot.has-y2,
  .chart-x.has-y2 {
    margin-right: 56px;
  }
}

@container chart (max-width: 449px) {
  .chart-y2 li:nth-child(even):not(:last-child) {
    display: none;
  }
}

/* Fluid views. Every rule here asks how wide the views column is, not the window. Wider, the
   panels go more to a row and charts, tables and grids grow; running text keeps its 70 character
   measure. Narrower, charts lose height, axis labels thin out and tables drop secondary columns:
   less is shown, and type never goes below 14px. */

/* Chart widths (9 October 2026, at the owner's direction; two to a row from 11 October 2026). Between
   600px and 899px a chart is no wider than 560px, which keeps it readable when it is one to a row;
   two to a row, where the column allows, are each narrower than that. From 900px Review's and
   Compare's charts are each at most half the column (see their own rules). On a phone (below 600px)
   a chart has the whole width. The expanded view and the printout are drawn without these rules. */
@media screen and (min-width: 600px) and (max-width: 899px) {
  .panels > .panel {
    max-width: 560px;
  }
}

@media screen and (min-width: 900px) {
  .panels {
    --per-row: 2;
  }
}

@container views (min-width: 1400px) {
  .panels {
    --per-row: 3;
  }
}

/* Below 1000px of column the actions take their own line above the view, and charts are shorter
   with every other year and fewer values labelled. */
@container views (max-width: 999px) {
  .view {
    --plot-height: 220px;
    --area-height: 180px;
  }

  .view-actions {
    order: -1;
    flex-basis: 100%;
    justify-content: flex-end;
  }

  .chart-x li:nth-child(even) {
    visibility: hidden;
  }

  .chart-y li:nth-child(even):not(:last-child) {
    display: none;
  }

  .chart-legend {
    margin-left: 0;
  }
}

/* A chart drawn small labels every other year whatever the column. A policy year label
   ("2025/26") is about 47px wide; up to 449px a chart's seven years would sit closer than 8px
   apart, so below that every other year is labelled. */
@container chart (max-width: 449px) {
  .chart-x li:nth-child(even) {
    visibility: hidden;
  }

  .chart-y li:nth-child(even):not(:last-child) {
    display: none;
  }
}

/* Below 600px of column (a phone) */
@container views (max-width: 599px) {
  .view {
    --plot-height: 180px;
    --area-height: 160px;
  }

  .view-actions .more {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

@container figures (max-width: 459px) {
  .table-scroll table.compact th,
  .table-scroll table.compact td {
    padding: 6px 4px;
  }

  table.compact thead th {
    font-size: var(--size-caption);
    line-height: 1.25;
  }
}

/* Below 900px the list cannot sit beside the views: a bar fixed to the top of the screen names
   the chosen clubs instead, and "Change clubs" opens the full list over the page. */

@media (max-width: 899px) {
  /* One column: the views, and the foot across the window under them, as on every other page. */
  .workspace {
    display: block;
  }

  .workspace > .site-foot {
    margin-left: calc(-1 * var(--gutter));
  }

  .workspace > .site-foot .content {
    padding-left: var(--gutter);
  }

  .rail {
    display: none;
  }

  /* The list opens as a panel over the page, on the system's medium overlay (black at 50%),
     drawn as an outline round the panel so that it needs no element of its own. */
  .rail:target,
  .rail.is-open {
    display: flex;
    position: fixed;
    inset: 0 0 0 auto;
    width: min(100%, calc(100% - var(--space-5)), 420px);
    z-index: 20;
    max-height: none;
    margin: 0;
    border: 0;
    outline: 100vmax solid var(--overlay-medium);
  }

  .rail:target .rail-done,
  .rail.is-open .rail-done {
    display: inline-flex;
  }

  .selection-bar {
    display: block;
    position: sticky;
    top: var(--top-region);
    z-index: 10;
    background: var(--surface);
    border-bottom: 1px solid var(--border-neutral);
  }

  .selection-bar .content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .selection-names {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: 0;
    min-width: 0;
    line-height: 1.4;
  }

  .selection-label {
    flex-basis: 100%;
    font-size: var(--size-caption);
  }

  .selection-club {
    color: var(--text-strong);
    font-weight: 600;
    white-space: nowrap;
  }

  .selection-club .legend-swatch {
    background: var(--club-fill, var(--club));
  }

  .selection-bar .button {
    flex: none;
    padding: 0 12px;
  }

  main.workspace-page {
    padding-top: var(--space-2);
  }
}

/* Responsive: single column below 720px, gutters unchanged */

@media (max-width: 1040px) {
  .site-header .content {
    flex-direction: column;
    align-items: flex-start;
  }

  .site-name {
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(-1 * var(--gutter));
    padding: var(--space-2) var(--gutter);
    border-left: 0;
    border-top: 1px solid var(--hairline);
  }

  .site-nav {
    margin-left: 0;
    padding-bottom: var(--space-2);
  }

  .site-nav ul {
    gap: var(--space-3);
  }
}

@media (max-width: 719px) {
  main {
    padding: var(--space-4) 0;
  }

  .site-nav ul {
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
  }
}

/* Data page: sources, definitions, units, reporting. These rules were the Data page's own and
   are kept here so that one stylesheet holds every rule. They sit last, where the page had them,
   so that they still take precedence over the rules above; the .intro rule repeats the one above
   and changes nothing elsewhere. */

.lead { max-width: 70ch; margin-bottom: var(--space-3); }
.section h2 { margin-bottom: var(--space-1); }
.section-head h2 { margin-bottom: 0; }
.intro { max-width: 70ch; margin-bottom: var(--space-3); }
.sources th[scope="row"], .units th[scope="row"] { font-weight: 400; white-space: nowrap; }
.definitions dt { font-family: var(--face-heading); font-size: 18px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-strong); margin-bottom: 4px; }
.sources td:nth-child(4), .sources td:last-child { white-space: nowrap; }
.sources a { position: relative; }
@media (max-width: 1040px) {
  .sources { min-width: 760px; }
  .units { min-width: 760px; }
}

/* The Data section, a tab at a time. A section's heading carries a short rule in primary blue
   above it, as Gallagher's own pages set a section apart; the Definitions and the Notes on the
   figures are laid out alike, in blocks under a hairline, three to a row on a wide screen, two at
   middling widths and one on a phone. */
h2.ruled {
  padding-top: var(--space-2);
  background: linear-gradient(var(--border-brand-strong), var(--border-brand-strong)) left top / 48px 4px no-repeat;
}

.section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.notes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
}

.notes-club {
  border-top: 1px solid var(--hairline);
  padding-top: var(--space-1);
}

.notes-club h3 {
  margin: 0 0 4px;
  font-family: var(--face-heading);
  font-size: 18px;
  font-weight: 400;
  color: var(--text-strong);
}

.notes-club ul {
  margin: 0;
  padding-left: 20px;
}

.notes-club li {
  margin-bottom: 4px;
}

@media (max-width: 1100px) {
  .facts,
  .notes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Sources, one fold per club, closed until opened: its name, when its financial year ends and how
   many documents it has, and, opened, its table. The fold says "Show" or "Hide" in words, as the
   brand allows no icons. */
.source-groups {
  border-top: 1px solid var(--border-neutral);
}

.source-group {
  border-bottom: 1px solid var(--border-neutral);
}

.source-group summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--space-3);
  min-height: var(--control-height);
  padding: 10px var(--space-2);
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.source-group summary::-webkit-details-marker {
  display: none;
}

.source-group summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--link);
  font-size: var(--size-caption);
  font-weight: 600;
}

.source-group[open] summary::after {
  content: "Hide";
}

.source-group summary:hover,
.source-group[open] summary {
  background: var(--container-brand);
}

.source-group summary:focus-visible {
  outline-offset: -2px;
}

.source-club {
  font-family: var(--face-heading);
  font-size: 20px;
}

.source-group summary .source-year-end,
.source-count {
  display: inline;
  font-size: var(--size-caption);
}

.source-group .table-scroll {
  padding: var(--space-2) var(--space-2) var(--space-3);
}

/* On a wide screen the folds' headings line up: each club's name, when its year ends and how many
   sources it has start at the same place in every fold. */
@media (min-width: 900px) {
  .source-club {
    flex: 0 0 220px;
  }

  .source-group summary .source-year-end {
    flex: 0 0 380px;
  }
}

/* Units and checks, in a panel of the brand container. */
.brand-panel {
  padding: var(--space-3);
  background: var(--container-brand);
  border: 1px solid var(--border-brand);
}

.brand-panel table {
  background: var(--surface);
}

.brand-panel h3 {
  margin: var(--space-3) 0 var(--space-1);
}

.brand-panel p {
  max-width: 70ch;
  margin-bottom: 0;
}

/* At the foot of every tab of the Data section: how to report a figure that looks wrong, with
   the one action it asks for, an email to the people who keep the figures. */
.report-panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-5);
  padding: var(--space-3);
  background: var(--container-brand);
  border: 1px solid var(--border-brand);
  border-left: 4px solid var(--border-brand-strong);
}

.report-text {
  flex: 1 1 420px;
  max-width: 70ch;
}

.report-panel h2 {
  margin-bottom: var(--space-1);
  font-size: var(--size-heading-3);
}

.report-panel p {
  margin: 0;
}

.report-panel .button {
  flex: none;
}

/* The Cookie policy's table: what is kept, by its name, the name in bold and where it is kept in
   the body weight. */
.cookies th[scope="row"] {
  font-weight: 400;
}

.cookies code {
  font-family: var(--face-body);
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Interactive states. The mockups show the default state of each page and none of these change
   it: they are what the working tool needs once clubs can be chosen. */

/* Focus. A row inside a frame that scrolls would have an outline drawn outside it cut off by the
   frame, so those outlines are drawn just inside instead. */
.rail-row:focus-visible,
.tabs a:focus-visible {
  outline-offset: -2px;
}

/* While the script draws the view the session was last on, the page it replaces is not shown. */
html[data-pending] body {
  visibility: hidden;
}

/* A search that matches no club says so in place of the rows. */
.rail-empty {
  margin: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--size-caption);
  font-style: italic;
}

/* The phone bar with no club chosen. */
.selection-none {
  font-style: italic;
}

/* Print without the script's printout: the tab as it appears on screen. Whatever only works on
   screen (the club list, the tabs, the buttons) is left off the page. */
@media print {
  .top-region {
    position: static;
  }

  .site-nav,
  .selection-bar,
  .rail,
  .tabs,
  .view-actions,
  .chart-tools,
  .chart-dialog,
  .view-controls,
  .section-head .button {
    display: none !important;
  }

  .workspace {
    display: block;
  }

  main.workspace-page {
    padding-top: var(--space-2);
  }

  .title-band,
  .chart,
  thead th,
  .rail-swatch {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .table-scroll {
    overflow: visible;
  }

  .chart,
  .panel,
  tr {
    break-inside: avoid;
  }
}

/* A year axis showing more years than its labels have room for labels every second, or every
   third, year. Seven policy years fit at every width the charts are drawn at, so the sample
   figures never need it. */
.chart-x.every-2 li:nth-child(even),
.chart-x.every-3 li:not(:nth-child(3n + 1)) {
  visibility: hidden;
}

/* On a narrow chart, where seven years are already labelled every other year, so are these: every
   fourth, or every sixth. */
@container chart (max-width: 449px) {
  .chart-x.every-2 li:not(:nth-child(4n + 1)),
  .chart-x.every-3 li:not(:nth-child(6n + 1)) {
    visibility: hidden;
  }
}

@container views (max-width: 999px) {
  .chart-x.every-2 li:not(:nth-child(4n + 1)),
  .chart-x.every-3 li:not(:nth-child(6n + 1)) {
    visibility: hidden;
  }
}

/* On the Data page, when the figures say when a club's financial year ends, it is given under
   the club's name beside each of its sources. */
.source-year-end {
  display: block;
  font-size: var(--size-caption);
}

/* Phones: below 600px of window width. Every rule for a phone is here, inside this one query, so
   that nothing at a laptop or desktop width can change; the pages at 600px and wider are proven
   pixel for pixel unchanged by them. */
@media (max-width: 599px) {
  /* The header in two compact rows: the logo and Compare, Data and Terms on one, the tool's name
     under them. The logo is drawn at 40px, which makes its badge 19px high (the brand's minimum is
     18px) and its clear space, the height of the "G", 11px; nothing enters it. At that size the
     three sections fit beside it down to a 360px screen. */
  :root {
    --logo-height: 40px;
    --logo-clear: 11px;
    --header-height: 82.09375px;
    --band-height: 46px;
  }

  :root:has(.title-band.has-tabs) {
    --band-height: 44px;
  }

  :root:has(.tabs.many) {
    --band-height: 88px;
  }

  .site-header .content {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .site-nav {
    order: 1;
    margin-left: auto;
    padding-bottom: 0;
  }

  .site-nav ul {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .site-nav a {
    font-size: 16px;
  }

  .site-name {
    order: 2;
    width: calc(100% + var(--gutter) * 2);
    margin: 0 calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    border-left: 0;
    border-top: 1px solid var(--hairline);
    font-size: var(--size-body);
    line-height: 1.3;
  }

  /* The title band, tighter: on a phone it is shorter, with a 24px title, rather than the 72px
     band the wider pages share. */
  .title-band .content {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
  }

  .title-band h1 {
    font-size: var(--size-heading-3);
  }

  /* A section's tabs on a phone: one row across the band, in equal cells at least 44px high,
     a label taking a second line where it needs one, at 14px. The section's title is in the
     header (Compare, Data, Terms), so in a band with tabs it is kept for screen readers and not
     drawn, which keeps the whole top region about 170px high. */
  .title-band.has-tabs .content {
    display: block;
    padding-top: 0;
  }

  .title-band.has-tabs h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tabs ul {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0 calc(-1 * var(--space-1));
    white-space: normal;
  }

  .tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--control-height);
    padding: 2px 4px 4px;
    font-size: var(--size-caption);
    line-height: 1.2;
    text-align: center;
  }

  /* The head of a view: each selector under its label at the full width; Export and Print as two
     equal buttons on one row. */
  .view-head > .view-controls {
    flex-basis: 100%;
  }

  .control-row.view-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .control-row .field {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    width: 100%;
  }

  .control-row .field select {
    width: 100%;
  }

  .view-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  /* A phone prints the view on screen only, so that its two buttons keep the row to themselves. */
  .view-actions .print-report {
    display: none;
  }

  /* Tables that scroll sideways show that they do: a flat 4px edge in the interactive blue (the
     scrollbar's colour, 4.9:1 on white) on the side that has more beyond it. It is the frame's
     background, covered by a white strip that travels with the table, so it shows only where the
     table runs on; no shadow, as the rest of the tool has none. "not published", a note rather
     than a figure, is set at the caption size and may wrap rather than widen the table. */
  .table-scroll {
    background:
      linear-gradient(var(--surface), var(--surface)) left center / 4px 100% no-repeat local,
      linear-gradient(var(--surface), var(--surface)) right center / 4px 100% no-repeat local,
      linear-gradient(var(--border-interactive), var(--border-interactive)) left center / 4px 100% no-repeat scroll,
      linear-gradient(var(--border-interactive), var(--border-interactive)) right center / 4px 100% no-repeat scroll;
  }

  .table-scroll table.compact th,
  .table-scroll table.compact td {
    padding-left: 2px;
    padding-right: 2px;
  }

  td.figure.not-published {
    font-size: var(--size-caption);
    white-space: normal;
  }

  /* The Data page's tables as one block per row, each value under its column's name, with the
     column headings kept for a screen reader. */
  .stacks {
    min-width: 0;
  }

  .sources.stacks,
  .units.stacks {
    min-width: 0;
  }

  .stacks thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .stacks,
  .stacks caption,
  .stacks tbody,
  .stacks tr,
  .stacks th[scope="row"],
  .stacks td {
    display: block;
  }

  .stacks tr {
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .stacks th[scope="row"],
  .stacks td {
    padding: 2px 0;
    border-bottom: 0;
    text-align: left;
    white-space: normal;
  }

  .stacks th[scope="row"] {
    color: var(--text-strong);
    font-weight: 600;
  }

  .stacks .source-year-end {
    font-weight: 400;
  }

  .stacks td::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-strong);
  }

  .stacks td[data-label="Link"]::before {
    content: none;
  }

  .stacks td:empty {
    display: none;
  }

  .sources td:nth-child(4),
  .sources td:last-child {
    white-space: normal;
  }

  .sources.stacks th[scope="row"] {
    white-space: normal;
  }

  /* The Data section on a phone: one block of notes or definitions to a row; the two buttons over
     the sources, and the report's, at the full width. */
  .facts,
  .notes-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .section-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  /* A club's fold on a phone: its name and Show (or Hide) on the first line, when its year ends
     and how many sources it has on the lines beneath. */
  .source-group summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 2px var(--space-2);
    padding: 10px var(--space-1);
  }

  .source-group summary > span {
    grid-column: 1;
  }

  .source-group summary::after {
    grid-column: 2;
    grid-row: 1;
  }

  .source-club {
    font-size: 18px;
  }

  .source-group .table-scroll {
    padding: 0 var(--space-1) var(--space-2);
  }

  .brand-panel {
    padding: var(--space-2);
  }

  .report-panel {
    padding: var(--space-2);
  }

  .report-panel .button {
    flex: 1 1 100%;
  }

  .cookies.stacks {
    min-width: 0;
  }

  /* The club list over the page: the page behind it does not scroll. */
  html:has(.rail.is-open),
  html:has(.rail:target) {
    overflow: hidden;
  }
}

/* A sealed site's pages arrive without figures and are drawn by the script once it has opened
   them. This line says what is happening meanwhile, and, in the alert colours, why the figures
   could not be opened if that fails. No mockup carries it. */
.site-status {
  max-width: 70ch;
}

.site-status.error {
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--alert-error);
  background: var(--alert-error-background);
  color: #444444;
}

/* Privacy and Terms of use: a document of short sections, each under a smaller heading than the
   Data page's, at a reading measure. */
.document .section {
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

.document h2 {
  margin-bottom: var(--space-1);
  font-size: var(--size-heading-3);
}

.document p,
.document ul {
  max-width: 70ch;
}

.document ul {
  margin: 0 0 var(--space-2);
  padding-left: 24px;
}

.document li {
  margin-bottom: var(--space-1);
}

.document-date {
  font-size: var(--size-caption);
}

/* The storage notice: asks whether to remember the reader's choices between visits. The script
   puts it first in the page, so that the keyboard and a screen reader meet it first, and it is
   drawn at the foot of the screen, over the page as it scrolls and after the foot at the end, so
   that it never covers anything for good and blocks nothing. The two answers are buttons of the
   same size, side by side: "Decline all" hollow on the left, "Accept all" filled on the right, as
   the owner chose; declining is as easy as accepting. No mockup of a page shows it, except
   storage-notice.html, and none of these rules applies without it. */
body:has(> .storage-notice) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.storage-notice {
  order: 1;
  position: sticky;
  bottom: 0;
  z-index: 15;
  margin-top: auto;
  background: var(--container-brand);
  border-top: 1px solid var(--border-brand-strong);
}

.storage-notice:focus-visible {
  outline-offset: -2px;
}

.storage-notice .content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.storage-notice p {
  flex: 1 1 360px;
  max-width: 70ch;
  margin: 0;
  color: var(--text-strong);
  line-height: 1.4;
}

.storage-notice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

@media (max-width: 599px) {
  .storage-notice p {
    font-size: var(--size-caption);
  }

  .storage-notice-actions {
    flex: 1 1 100%;
  }
}

@media print {
  .storage-notice,
  .foot-nav {
    display: none !important;
  }
}

/* The expanded view of a chart: a modal dialog on a Dark Blue backdrop at 75%, the chart's title in
   the heading face with its unit line and Close at the top, and under them, scrolling where they
   need to, the chart drawn large, its legend, its Figures table with its notes, and its definition.
   The chart is drawn again at its new size, not enlarged as a picture. The body is a views container
   of its own, so a chart drawn here follows the same rules as on a page of its width. The page
   behind does not scroll while it is open. On a phone it fills the screen. */
/* Only the body scrolls: the dialog itself, which a browser lets scroll by default, never does, so
   the reader sees one scrollbar and the head with Export and Close stays in place. */
.chart-dialog {
  width: min(1240px, calc(100vw - 2 * var(--space-5)));
  max-width: none;
  max-height: calc(100vh - 2 * var(--space-5));
  margin: auto;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
}

.chart-dialog[open] {
  display: flex;
  flex-direction: column;
}

.chart-dialog::backdrop {
  background: rgb(0 38 62 / 75%);
}

html:has(.chart-dialog[open]) {
  overflow: hidden;
}

.chart-dialog-frame {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.chart-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--hairline);
}

.chart-dialog-titles {
  min-width: 0;
}

.chart-dialog-head h2 {
  margin-bottom: 4px;
}

.chart-dialog-head .panel-unit {
  margin: 0;
}

.chart-dialog-actions {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.chart-dialog-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: var(--space-3) var(--space-4) var(--space-4);
  container: views / inline-size;
  --plot-height: clamp(240px, calc(100vh - 460px), 560px);
  --area-height: clamp(220px, calc(100vh - 460px), 520px);
}

.chart-dialog-body > .chart-legend {
  margin-bottom: var(--space-2);
}

.chart-dialog-body > .table-scroll {
  margin-top: var(--space-3);
}

.chart-dialog-body .definition {
  max-width: 70ch;
  margin-top: var(--space-3);
}

.chart-dialog-body .definition p {
  margin: 0;
}

@media (max-width: 599px) {
  .chart-dialog {
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin: 0;
  }

  .chart-dialog-head {
    padding: 12px var(--gutter);
  }

  .chart-dialog-head h2 {
    font-size: var(--size-heading-3);
  }

  .chart-dialog-body {
    padding: var(--space-2) var(--gutter) var(--space-4);
    --plot-height: 260px;
    --area-height: 240px;
  }
}

/* The printout: A4 sheets, built by the script in a frame of their own exactly as wide as a sheet
   and printed from there (app/browser/print.js), one sheet to a page with no margin of the
   browser's own. Every size is fixed, so a sheet holds the same whatever the screen: the head, with
   the logo at 40px and the tool's name over a hairline; the body, its blocks 16px apart; the foot,
   under a hairline, naming the section and the page. The Gallagher logo is laid over every sheet
   as a watermark at 9%, in greyscale. Each section opens under its pale blue band. Every year is
   labelled on every chart, and a Figures table keeps its columns equal after the first. On screen
   (a mockup, or the frame) the sheets stand one under another on a grey desk. */
.print-frame {
  position: fixed;
  top: 0;
  left: -10000px;
  width: 210mm;
  height: 297mm;
  border: 0;
}

.print-document {
  --sheet-side: 48px;
  --plot-height: 300px;
  --area-height: 300px;
}

.print-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 297mm;
  overflow: hidden;
  background: var(--surface);
  font-size: 15px;
  line-height: 1.45;
  break-after: page;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet:last-child {
  break-after: auto;
}

.sheet * {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.sheet-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--sheet-side);
  padding: 28px 0 12px;
  border-bottom: 1px solid var(--hairline);
}

.sheet-head img {
  width: auto;
  height: 40px;
}

.sheet-tool {
  color: var(--text-strong);
  font-size: 14px;
}

.sheet-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 0;
  overflow: hidden;
  padding: 20px var(--sheet-side) 0;
}

.sheet-body > * {
  flex: none;
}

.sheet-foot {
  display: flex;
  flex: none;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 16px var(--sheet-side) 0;
  padding: 10px 0 26px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.sheet-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sheet-band {
  padding: var(--space-2) var(--space-3);
  background: var(--container-brand-strong);
}

.sheet-band h2 {
  font-size: 28px;
}

.sheet-band p {
  margin: 4px 0 0;
  color: var(--text-strong);
}

.sheet-continued {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.print-continues {
  margin: 0;
  color: var(--text-strong);
  font-weight: 600;
}

.print-block {
  display: flow-root;
}

.print-head h2 {
  margin: 0 0 4px;
  font-size: var(--size-heading-3);
}

.print-head h3 {
  margin: 0 0 4px;
  font-size: 20px;
}

.print-head h2 + h3 {
  margin-top: var(--space-1);
  font-family: var(--face-body);
  font-size: var(--size-body);
  font-weight: 600;
}

.print-head .panel-unit {
  margin: 0;
}

.print-note .caption {
  margin: 0;
}

.print-definition .definition,
.print-text .intro {
  max-width: 70ch;
  margin: 0;
}

.print-definition p {
  margin: 0;
}

.print-figure .chart-legend {
  margin-bottom: 0;
}

/* Every year labelled, and every value on the axis. */
.sheet .chart-x li,
.sheet .chart-x.every-2 li,
.sheet .chart-x.every-3 li {
  visibility: visible !important;
}

/* Past fourteen years a page has no room for every label: every other year is labelled, and every
   year keeps its point. */
.sheet .chart-x.every-3 li:nth-child(even) {
  visibility: hidden !important;
}

.sheet .chart-y li {
  display: block !important;
}

.sheet .table-scroll {
  overflow: visible;
  background: none;
}

.sheet table {
  font-size: 14px;
}

.sheet table.compact {
  table-layout: fixed;
}

.sheet table.compact th,
.sheet table.compact td {
  padding: 5px 8px;
}

.sheet table.compact thead th {
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* The cover: the logo large, the band across the sheet, what is compared, the contents, and the
   note on the figures at the foot. */
.cover {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 72px 72px 0;
}

.cover-logo {
  width: 360px;
  height: auto;
  margin-left: -12px;
}

.cover-band {
  margin: 64px -72px 0;
  padding: 40px 72px 44px;
  background: var(--container-brand-strong);
}

.cover-band p {
  margin: 0;
  color: var(--text-strong);
  font-size: 17px;
  letter-spacing: 0.02em;
}

.cover-band h1 {
  margin-top: 4px;
  font-size: 44px;
  line-height: 1.1;
}

.cover-facts {
  margin: 48px 0 0;
}

/* A single chart's cover: its definition, as a lead under the band, before the facts. */
.cover-lead {
  max-width: 62ch;
  margin: 40px 0 0;
  color: var(--text-strong);
  font-size: 17px;
}

.cover-lead + .cover-facts {
  margin-top: 32px;
}

.cover-facts div {
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr);
  gap: var(--space-2);
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}

.cover-facts dt {
  color: var(--text-strong);
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.cover-contents-title {
  margin: 48px 0 6px;
  font-size: 22px;
}

.cover-contents {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cover-contents li {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: 5px 0;
}

/* Eight sections, as Print all sections lists Review's or Compare's: the lines closer, and less
   room above the facts and the contents, so that the contents and the note under them fit the
   cover, with every club's name. */
.cover-contents:has(> li:nth-child(7)) li {
  padding: 2px 0;
}

.cover:has(.cover-contents > li:nth-child(7)) .cover-facts {
  margin-top: 40px;
}

.cover:has(.cover-contents > li:nth-child(7)) .cover-contents-title {
  margin-top: 32px;
}

.cover-dots {
  flex: 1 1 auto;
  border-bottom: 1px dotted var(--border-field);
  transform: translateY(-4px);
}

.cover-page {
  font-variant-numeric: tabular-nums;
}

.cover-note {
  max-width: 62ch;
  margin: auto 0 0;
  padding-top: 32px;
  font-size: 12px;
}

@media screen {
  .print-document {
    padding: var(--space-3) 0;
    background: var(--dv-gray-10);
  }

  .print-document .sheet {
    margin: 0 auto var(--space-3);
  }
}

@media print {
  .print-document {
    padding: 0;
    background: none;
  }

  .print-document .sheet {
    margin: 0;
  }
}

/* Compare: the chosen clubs overlaid on each chart. A club is its colour from the club list
   on every chart; where a club has more than one figure the first is solid, the second dashed and
   the third dotted. Every club's bar is the same width: a solid bar has no outline, and a hatched
   bar's outline is drawn inside it. The market average is a Gray 40 long dash, so as not to be read
   as a club's dashed line.
   The key under each chart names the clubs drawn, each a button that picks the club out, and then
   what each style stands for, in a neutral grey. */
.peer-bar {
  fill: var(--club);
}

.peer-slice {
  fill: var(--club);
  stroke: var(--surface);
  stroke-width: 1;
}

.peer-rest {
  fill: var(--dv-gray-10);
}

.chart-plot .series.style-2 {
  stroke-dasharray: 6 3;
}

.chart-plot .series.style-3 {
  stroke-dasharray: 1.5 3;
}

.chart-plot .series.market.peer-market,
.chart-plot .series.join {
  stroke-dasharray: 14 6;
}

.axis-titles {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--axis-label);
}

.axis-titles .right {
  text-align: right;
}

.peer-legend {
  margin: 12px 8px 0 56px;
}

.peer-clubs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

ol.peer-clubs {
  counter-reset: none;
}

.peer-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 2px 8px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-strong);
  font: inherit;
  font-size: var(--size-caption);
  cursor: pointer;
}

.peer-key:hover {
  border-color: var(--hairline);
  background: var(--container-brand);
}

.peer-key:focus-visible {
  outline: 2px solid var(--border-interactive);
  outline-offset: 1px;
}

.peer-key[aria-pressed="true"] {
  border-color: var(--club);
  font-weight: 600;
}

.donut .peer-legend {
  margin-left: 0;
  text-align: center;
}

.donut .peer-clubs,
.donut .peer-styles {
  justify-content: center;
}

.peer-chip {
  display: inline-block;
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--club-fill, var(--club, var(--dv-gray-40)));
}

/* A club drawn as a line is keyed by a short line in its colour, with its square marker. */
.peer-chip.line {
  position: relative;
  width: 20px;
  height: calc(var(--club-line, 2) * 1px);
}

.peer-chip.line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--club-point, 4) * 1px);
  height: calc(var(--club-point, 4) * 1px);
  background: inherit;
  transform: translate(-50%, -50%);
}

/* A club with the second channel: its chip hatched and outlined, its line key dashed with an open marker. */
.club-patterned .peer-chip:not(.line):not(.market) {
  box-shadow: inset 0 0 0 1px var(--club);
}

.club-patterned .peer-chip.line {
  background: repeating-linear-gradient(to right, var(--club) 0 5px, transparent 5px 8px);
}

.club-patterned .peer-chip.line::after {
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--club);
}

.peer-chip.market {
  height: 0;
  border-top: 2px dashed var(--series-market);
  background: none;
}

.peer-styles {
  margin: var(--space-1) 0 0;
}

.peer-styles .key {
  border-top-color: var(--text-strong);
}

.peer-styles .key.style-2 {
  border-top-width: 2px;
  border-top-style: dashed;
}

.peer-styles .key.style-3 {
  border-top-width: 3px;
  border-top-style: dotted;
}

/* The lines that join each club's bars year to year: the market average's long dash, keyed in the
   default-strong grey, since each takes its club's colour from the clubs named above it. */
.peer-styles .key.peer-join {
  width: 32px;
  height: 2px;
  border: 0;
  background: repeating-linear-gradient(to right, var(--text-strong) 0 14px, transparent 14px 20px);
}

.peer-styles .key.peer-market {
  border-top: 2px dashed var(--series-market);
  width: 32px;
}

.peer-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  background: var(--text-strong);
}

.peer-swatch.tint {
  background: color-mix(in srgb, var(--text-strong) 30%, white);
  border: 1px solid var(--text-strong);
}

.peer-swatch.rest {
  background: var(--dv-gray-10);
}

/* Compare's Geographical Spread and Entered Tonnage: a 100% bar per club, one above the other, the
   club named to its left in a 150px column (above its bar where the chart is narrower than 480px).
   The bars stand on a scale: a line at 0% and along the base, 6px clear of the first and last bar,
   a faint line at each quarter, and ticks at 0, 25, 50, 75 and 100% hanging from the base. The
   categories take the neutral fills (.cat-*), never a club's colour: the club is told by its name,
   with its colour only as a thin mark beside it. A figure is written on a segment of 12% or more,
   white on Gray 80 (9.7:1), black on Gray 40 and Gray 20 (6.3:1 and 13:1), and black on a white chip
   on a pattern; on one under 20% only where the chart is 640px or wider. A club with no mix is
   hatched N/P across its bar. */
.stack {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px var(--space-2);
  margin: var(--space-2) 0 var(--space-2);
}

.stack-grid {
  position: absolute;
  top: -6px;
  bottom: 30px;
  left: calc(150px + var(--space-2));
  right: 0;
  border-left: 1px solid var(--axis-label);
  border-bottom: 1px solid var(--axis-label);
  background:
    linear-gradient(to right, var(--hairline) 1px, transparent 1px) 0 0 / 25% 100% repeat-x,
    linear-gradient(to left, var(--hairline) 1px, transparent 1px) 0 0 / 100% 100% no-repeat;
  pointer-events: none;
}

.stack-name {
  font-size: var(--size-table);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* The club's colour beside its name: a thin upright mark, never a fill. */
.stack-mark {
  display: inline-block;
  width: 4px;
  height: 0.9em;
  margin-right: 8px;
  vertical-align: -0.05em;
  background: var(--club-fill, var(--club));
}

.stack-bar {
  display: flex;
  height: 100%;
}

.stack-bar > span {
  flex: none;
  height: 100%;
}

.stack-bar > span + span {
  border-left: 2px solid var(--surface);
}

.stack-plot {
  position: relative;
  height: 32px;
}

.stack-labels {
  margin: 0;
  padding: 0;
  list-style: none;
}

.stack-labels li {
  position: absolute;
  top: 50%;
  padding: 2px 4px;
  color: #000000;
  font-size: var(--size-caption);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.stack-labels li.on-dark {
  color: #FFFFFF;
}

.stack-labels li.on-pattern {
  background: var(--surface);
}

.stack-axis {
  grid-column: 2;
  position: relative;
  height: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.stack-axis li {
  position: absolute;
  top: 4px;
  transform: translateX(-50%);
}

.stack-axis li:first-child {
  transform: none;
}

.stack-axis li:last-child {
  transform: translateX(-100%);
}

.stack-axis li::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--axis-label);
}

.stack-axis li:first-child::before {
  left: 0;
}

.stack-axis li:last-child::before {
  left: auto;
  right: 0;
}

.stack-missing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: var(--size-caption);
  font-weight: 600;
}

.stack-missing > span {
  padding: 3px 6px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1;
}

.peer-mix .peer-legend {
  margin-left: calc(150px + var(--space-2));
}

/* A column of shares adding up to 100 in Compare's Investment Strategy, a small chart a club: its
   categories filling it from the foot, a 2px white gap between them. */
.stack-column {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column-reverse;
}

.stack-column > span {
  flex: none;
  width: 100%;
}

.stack-column > span + span {
  border-bottom: 2px solid var(--surface);
}

@container chart (max-width: 479px) {
  .stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 0;
  }

  .stack-plot + .stack-name {
    margin-top: var(--space-1);
  }

  .stack-grid {
    left: 0;
  }

  .stack-name {
    position: relative;
    justify-self: start;
    padding-right: 6px;
    background: var(--surface);
    font-size: var(--size-caption);
  }

  .stack-axis {
    grid-column: 1;
  }

  .peer-mix .peer-legend {
    margin-left: 0;
  }
}

@container chart (max-width: 639px) {
  .stack-labels li.narrow {
    display: none;
  }
}

/* Every club is drawn on every chart, so with many clubs over many years a bar can be a few pixels
   wide. Such bars are drawn without the white gap between neighbours and without being snapped to
   whole pixels, so that none is lost. */
.thin-bars .chart-plot .bars rect {
  shape-rendering: geometricPrecision;
}

.thin-bars .chart-plot .bars rect[class^="seg-"] {
  stroke: none;
}

/* A club picked out: every other club's marks fade to a fifth, its key to a half. */
.has-focus [data-peer]:not(.is-focus) {
  opacity: 0.2;
}

.has-focus .peer-key[data-peer]:not(.is-focus) {
  opacity: 0.5;
}

/* The clubs' figures, the clubs across in blocks: a club column 120px (88px in a narrow column), its name in the caption size,
   the label column as wide as its longest label, each club's colour as a chip by its name. The
   clubs' facts have wider columns, 200px, for addresses and ratings. */
.peer-tables {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

table.compact.peer-figures {
  --club-col: 120px;
  width: calc(var(--label, 8ch) + 24px + var(--clubs, 1) * var(--club-col));
  table-layout: fixed;
  margin: 0 auto;
}

table.compact.peer-figures.wide {
  --club-col: 200px;
}

table.peer-figures col.label {
  width: calc(var(--label, 8ch) + 24px);
}

table.peer-figures col.club {
  width: var(--club-col);
}

table.compact.peer-figures th.figure {
  width: auto;
}

table.peer-figures thead th {
  font-size: var(--size-caption);
  vertical-align: bottom;
  white-space: normal;
}

/* A club's name in a column heading, its chip before it, the two kept together. */
.peer-head {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-align: left;
}

.peer-head .peer-chip {
  align-self: center;
}

table.peer-figures.wide td {
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}

table.peer-figures thead th,
table.peer-figures tbody th {
  overflow-wrap: break-word;
}

table.peer-figures.wide thead th.figure {
  text-align: left;
}

table.peer-figures tbody th {
  font-weight: 600;
  color: var(--text-strong);
}

@container yearblocks (max-width: 479.98px) {
  table.compact.peer-figures {
    --club-col: 88px;
  }

  /* On a phone the clubs' facts are one club to a block, across the column: the labels take 40%. */
  table.compact.peer-figures.wide {
    width: 100%;
  }

  table.peer-figures.wide col.label {
    width: 40%;
  }

  table.peer-figures.wide col.club {
    width: 60%;
  }
}

/* On a printed sheet the clubs' facts take the sheet's width, the labels a little over a quarter of
   it and the clubs of a block sharing the rest, so that three clubs fit an A4 sheet. */
.sheet-body table.compact.peer-figures.wide {
  width: 100%;
}

.sheet-body table.peer-figures.wide col.label {
  width: 28%;
}

.sheet-body table.peer-figures.wide col.club {
  width: auto;
}

/* A chart's rows of the workbook's table, in its expanded view and in print, under its Figures: the
   rows the chart draws, and the rows it carries for the workbook, each under a small heading in
   the body face, centred over its table. */
.workbook-rows {
  margin-top: var(--space-4);
}

.workbook-rows .year-blocks-frame + .workbook-head {
  margin-top: var(--space-4);
}

.workbook-head {
  margin: 0 auto var(--space-2);
  font-family: var(--face-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-strong);
  text-align: center;
}

.peer-tables > .workbook-head {
  margin-top: var(--space-2);
  margin-bottom: 0;
}

/* Compare's tables of the clubs (13 October 2026): the review's club-by-club tables with a row for
   each club chosen, named with its colour's chip, and for the market where the site holds its
   figure. Each takes the column's whole width, after the charts; its figures are 84px apart and
   the clubs' names 180px; a second label column (Premium, Claims) is 96px. On a phone the club
   names take 112px and a figure 64px. Shaded figures are keyed under the table. */
.panels.review-panels > .panel.table-panel {
  flex-basis: 100%;
  max-width: 100%;
}

table.compact.peer-table {
  --value-col: 84px;
  --club-col: 180px;
  --sub-col: 96px;
  width: calc(var(--club-col) + var(--cols, 1) * var(--value-col));
  table-layout: fixed;
  margin: 0 auto;
}

table.compact.peer-table.has-sub {
  width: calc(var(--club-col) + var(--sub-col) + var(--cols, 1) * var(--value-col));
}

table.peer-table col.club {
  width: var(--club-col);
}

table.peer-table col.sub {
  width: var(--sub-col);
}

table.peer-table col.value {
  width: var(--value-col);
}

table.compact.peer-table th.figure {
  width: auto;
}

table.peer-table thead th {
  font-size: var(--size-caption);
  vertical-align: bottom;
}

table.peer-table thead td {
  background: var(--container-brand);
  border-bottom: 0;
}

table.peer-table td.figure {
  white-space: normal;
  overflow-wrap: anywhere;
}

table.peer-table tbody th {
  font-weight: 600;
  color: var(--text-strong);
  overflow-wrap: break-word;
}

table.peer-table tbody th.peer-row-sub {
  font-weight: 400;
  color: var(--text);
}

@container yearblocks (max-width: 479.98px) {
  table.compact.peer-table {
    --value-col: 62px;
    --club-col: 134px;
    --sub-col: 76px;
  }

  table.compact.peer-table.has-sub {
    --club-col: 108px;
  }

  table.peer-table tbody th {
    font-size: var(--size-caption);
    overflow-wrap: anywhere;
  }
}

.sheet-body table.compact.peer-table {
  --value-col: 76px;
  --club-col: 150px;
  --sub-col: 80px;
}

td.mark-excess,
.legend-swatch.mark-excess {
  background: var(--alert-error-background);
}

td.mark-under,
.legend-swatch.mark-under,
td.mark-highest,
.legend-swatch.mark-highest {
  background: var(--border-neutral);
}

td.mark-lowest,
.legend-swatch.mark-lowest,
td.mark-increased,
.legend-swatch.mark-increased {
  background: var(--container-brand-strong);
}

td.mark-reduced,
.legend-swatch.mark-reduced {
  background: var(--alert-warning-background);
}

td.mark-positive,
.legend-swatch.mark-positive {
  background: var(--alert-success-background);
}

td.mark-stable,
.legend-swatch.mark-stable {
  background: var(--container-brand-strong);
}

td.mark-negative,
.legend-swatch.mark-negative {
  background: var(--alert-error-background);
}

td.mark-target,
td.mark-overcall {
  color: var(--alert-error);
}

td.mark-undercall {
  color: var(--alert-success);
}

.legend-swatch.mark-target,
.legend-swatch.mark-overcall {
  background: var(--alert-error);
}

.legend-swatch.mark-undercall {
  background: var(--alert-success);
}

.table-marks .legend-swatch {
  outline: 1px solid var(--border-neutral);
  outline-offset: -1px;
}

.compare-table .table-marks {
  justify-content: center;
  margin: 0;
}

@media (max-width: 599px) {
  .club-name {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .club-name h2 {
    font-size: var(--size-heading-3);
  }
}

table.peer-table thead th[scope="colgroup"] {
  text-align: center;
}

/* A marked figure carries its mark in words for a screen reader, kept inside the cell. */
td.target,
td[class*="mark-"] {
  position: relative;
}

/* ---------------------------------------------------------------------------------------------
   Market: the market as Gallagher's P&I Pre-Renewal Review 2025 sets it out (app/render/market.js).
   Its tab band holds the review's two sections; each section's tabs sit under the head of its
   pages, wrapping as they need. Its charts are the review's forms in the neutral fills and lines
   no club takes (Gray 80, Gray 40, Gray 20, then dashes, dots and patterns); only its market share
   doughnuts draw clubs, each in its colour. Its tables are the review's, in the site's house style,
   the review's bands and marks drawn with the design system's container and alert tokens. None of
   these rules reaches a page of Review, Compare, Data or Terms.
   --------------------------------------------------------------------------------------------- */

.subtabs ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.subtabs a {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--border-brand);
  background: var(--surface);
  color: var(--link);
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
}

.subtabs a:hover,
.subtabs a:focus-visible {
  border-color: var(--border-interactive);
  background: var(--container-brand);
  color: var(--link-hover);
}

.subtabs a[aria-current="page"] {
  border-color: var(--border-interactive);
  background: var(--button-primary);
  color: var(--text-inverse);
  font-weight: 600;
}

.market-heading {
  margin-bottom: var(--space-1);
  font-size: var(--size-heading-3);
}

.market-lead {
  margin-bottom: 0;
}

.panels.market-panels > .panel.wide {
  flex-basis: 100%;
  max-width: 100%;
}

/* The series. Lines: Gray 80 and Gray 40 solid, the same dashed, Gray 80 dotted; circle markers
   where the review draws them. Bars: Gray 80, Gray 40, and Gray 20 inside a Gray 80 outline. Areas:
   Gray 80 and Gray 40, translucent so that the second lies over the first and both still read. */
.market-chart {
  --mk-dark: var(--cat-dark);
  --mk-mid: var(--cat-mid);
  --mk-light: var(--cat-light);
}

.chart-plot .series.mk-line-1 { stroke: var(--mk-dark); stroke-width: 2; }
.chart-plot .series.mk-line-2 { stroke: var(--mk-mid); stroke-width: 2.5; }
.chart-plot .series.mk-line-3 { stroke: var(--mk-dark); stroke-width: 2; stroke-dasharray: 7 4; }
.chart-plot .series.mk-line-4 { stroke: var(--mk-mid); stroke-width: 2.5; stroke-dasharray: 7 4; }
.chart-plot .series.mk-line-5 { stroke: var(--mk-dark); stroke-width: 2; stroke-dasharray: 1.5 3.5; stroke-linecap: round; }
.chart-plot .series.trend[class*="mk-line-"] { stroke-width: 1.5; stroke-dasharray: 1 4; stroke-linecap: round; }

.chart-plot .points.round {
  stroke-width: 7;
  stroke-linecap: round;
}

.chart-plot .points.mk-line-1,
.chart-plot .points.mk-line-3,
.chart-plot .points.mk-line-5 { stroke: var(--mk-dark); }
.chart-plot .points.mk-line-2,
.chart-plot .points.mk-line-4 { stroke: var(--mk-mid); }

.mk-fill-1 { fill: var(--mk-dark); }
.mk-fill-2 { fill: var(--mk-mid); }
.mk-fill-3 { fill: var(--mk-light); }
/* Gray 20's outline is drawn inside its bar (a 2px stroke clipped to the rect leaves 1px), so that
   it is exactly as wide as the bars of Gray 80 and Gray 40 beside it. */
.chart-plot .bars rect.mk-fill-3 {
  stroke: var(--cat-ink);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
  clip-path: inset(0) fill-box;
}

.mk-area-1 { fill: var(--mk-dark); fill-opacity: 0.22; }
.mk-area-2 { fill: var(--mk-mid); fill-opacity: 0.4; }

.legend-swatch.mk-swatch-1 { background: var(--cat-dark); }
.legend-swatch.mk-swatch-2 { background: var(--cat-mid); }
.legend-swatch.mk-swatch-3 { background: var(--cat-light); box-shadow: inset 0 0 0 1px var(--cat-ink); }
.legend-swatch.mk-swatch-1.area { background: rgb(68 68 68 / 22%); box-shadow: inset 0 0 0 2px var(--cat-dark); }
.legend-swatch.mk-swatch-2.area { background: rgb(137 141 141 / 40%); box-shadow: inset 0 0 0 2px var(--cat-mid); }
.legend-swatch.mk-np,
.mk-legend .legend-swatch.mk-np {
  background: repeating-linear-gradient(-45deg, var(--dv-gray-40) 0 1px, transparent 1px 4px), var(--dv-gray-10);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}

.chart-legend .key.mk-key-1 { border-top: 2px solid var(--cat-dark); }
.chart-legend .key.mk-key-2 { border-top: 3px solid var(--cat-mid); }
.chart-legend .key.mk-key-3 { border-top: 2px dashed var(--cat-dark); }
.chart-legend .key.mk-key-4 { border-top: 3px dashed var(--cat-mid); }
.chart-legend .key.mk-key-5 { border-top: 2px dotted var(--cat-dark); }

.chart-legend .key.marked {
  position: relative;
}

.chart-legend .key.marked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cat-dark);
  transform: translate(-50%, -50%);
}

.chart-legend .key.mk-key-2.marked::after,
.chart-legend .key.mk-key-4.marked::after {
  background: var(--cat-mid);
}

/* A seventh fill for the year bars of Market Investment Yield: upright lines in Gray 80 on white. */
.cat-vlines {
  background: repeating-linear-gradient(to right, var(--cat-ink) 0 1px, transparent 1px 4px), var(--surface);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}



.mk-slice {
  stroke: var(--surface);
  stroke-width: 0.6;
}

/* The plot keeps room on the left for the review's wider axis labels ("-15.00%", "2.0000"). */
.chart-plot.mk-plot {
  margin-left: 64px;
}

.mk-plot .chart-y li {
  width: 56px;
}

/* The categories along the foot: the review's own labels, every one or every second on a wide
   chart, and fewer on a narrower one and on a phone (app/render/market-charts.js gives each label
   the steps it is hidden at). */
.mk-x {
  display: flex;
  margin: 8px 8px 0 64px;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--axis-label);
  line-height: 1;
}

.mk-x li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  white-space: nowrap;
}

.mk-x.two-line li span + span {
  margin-top: 3px;
}

.mk-x.rotate {
  height: 40px;
}

.mk-x.rotate li span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.mk-x.at-zero {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  padding-top: 5px;
}

@container chart (max-width: 599px) {
  .mk-x li.n {
    visibility: hidden;
  }
}

@container chart (min-width: 600px) and (max-width: 999px) {
  .mk-x li.m {
    visibility: hidden;
  }
}

@container chart (min-width: 1000px) {
  .mk-x li.w {
    visibility: hidden;
  }
}

.mk-caption {
  margin: 8px 8px 0 64px;
  font-size: var(--size-caption);
  text-align: center;
}

/* Keys, where the review puts them: over the plot at the right, under it at the right or across
   its foot, stacked one to a line where the review stacks them, and beside a doughnut. */
.chart-legend.mk-legend {
  margin: 0 8px var(--space-1) 64px;
}

.chart-legend.mk-legend.at-top-right,
.chart-legend.mk-legend.at-top-inside,
.chart-legend.mk-legend.at-bottom-right {
  justify-content: flex-end;
}

.chart-legend.mk-legend.at-bottom {
  justify-content: center;
}

.chart-legend.mk-legend.at-bottom-right,
.chart-legend.mk-legend.at-bottom {
  margin-top: 12px;
  margin-bottom: 0;
}

.chart-legend.mk-legend.stacked {
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* N/P in a Market chart: the room the figure would take, hatched, with its chip. */
.mk-missing {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  font-size: var(--size-caption);
  font-weight: 600;
}

.mk-missing.across {
  left: 0;
  right: 0;
  bottom: auto;
}

.mk-missing > span {
  padding: 3px 6px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1;
}

/* Horizontal bars: the categories down the left, the first at the top. */
.chart-plot.mk-hplot {
  height: calc(var(--plot-height, 280px) * 1.3);
  margin-left: 72px;
}

.mk-hplot .chart-y li {
  width: 64px;
}

.chart-xv.mk-xv {
  margin-left: 72px;
}

/* Market Investment Yield: a bar a year, the latest at the top, its figure at its end; no axes. */
.chart-plot.mk-yield-plot {
  margin: 10px 72px 0;
}

.mk-yield-zero {
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--axis-label);
}

.mk-ybar {
  position: absolute;
}

.mk-ylabel {
  position: absolute;
  padding: 0 6px;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
  white-space: nowrap;
  transform: translateY(-50%);
}

/* Doughnuts: the key at the left, one club to a line, and the ring beside it. */
.mk-doughnut-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: 10px;
}

.mk-doughnut-frame .chart-legend.mk-legend {
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
}

.mk-doughnut-plot {
  flex: 0 1 auto;
  width: min(60%, var(--plot-height, 280px));
  aspect-ratio: 1;
}

.mk-doughnut-plot svg {
  display: block;
  width: 100%;
  height: 100%;
}

@container chart (max-width: 449px) {
  .mk-doughnut-frame {
    flex-direction: column-reverse;
  }

  .mk-doughnut-frame .chart-legend.mk-legend {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* The reinsurance programme: its attachment points down the left and its layers in four columns,
   not to scale, as the review draws it. On a narrow screen it keeps its width and scrolls. */
.mk-diagram {
  overflow-x: auto;
}

.mk-structure {
  display: grid;
  grid-template-columns: 80px 1.5fr 1.5fr 1fr 1fr;
  grid-template-rows: 10px 72px 64px 56px 44px 128px 30px auto auto;
  column-gap: 6px;
  row-gap: 3px;
  min-width: 640px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.3;
}

.mk-levels {
  display: contents;
  list-style: none;
}

.mk-levels li {
  grid-column: 1;
  align-self: start;
  margin-top: -9px;
  padding-top: 0;
  font-size: var(--size-caption);
  font-variant-numeric: tabular-nums;
  color: var(--axis-label);
  white-space: nowrap;
}

.mk-block {
  position: relative;
  display: flex;
  min-width: 0;
  padding: 6px 8px;
  overflow: hidden;
}

.mk-block p {
  margin: 0;
}

.mk-block.dark { background: var(--cat-dark); color: var(--text-inverse); }
.mk-block.mid { background: var(--cat-mid); color: #111111; }
.mk-block.light { background: var(--cat-light); color: #111111; box-shadow: inset 0 0 0 1px var(--cat-ink); }
.mk-block.outline { background: var(--surface); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--cat-ink); }
.mk-block.pool {
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(to bottom, var(--cat-ink) 0 1px, transparent 1px 4px), var(--surface);
  box-shadow: inset 0 0 0 1px var(--cat-ink);
}

.mk-block.pool .mk-block-words {
  padding: 0 8px;
  background: var(--surface);
  color: var(--text-strong);
  font-weight: 600;
}

.mk-block.dark .mk-block-words {
  flex: 1 1 auto;
  align-self: center;
  padding-right: 66px;
  padding-bottom: 20px;
  font-size: 15px;
}

.mk-aad {
  position: absolute;
  left: 0;
  right: 66px;
  bottom: 0;
  padding: 3px 8px;
  border-top: 1px dashed var(--text-inverse);
  font-size: 12px;
}

.mk-pp {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mk-pp li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  background: var(--cat-mid);
  color: #111111;
  font-size: 11px;
}

.mk-pp li:nth-child(2) { background: var(--cat-light); }
.mk-pp li:nth-child(3) { background: var(--surface); box-shadow: inset 0 0 0 1px var(--cat-ink); }

.mk-pp li span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.mk-column-name {
  margin: 6px 0 0;
  font-weight: 600;
  color: var(--text-strong);
  text-align: center;
}

.mk-column-note {
  margin: 4px 0 0;
  font-size: 12px;
  text-align: center;
}

/* The review's tables: figures right-aligned in the review's own formats; its highlighted lines
   (results, totals) on Blue 20, its subtotals and totals ruled above, the market's lines on Blue 5,
   a group's heading across the table. A club's second line belongs to its first. */
.market-table {
  width: 100%;
}

.market-table thead th {
  vertical-align: bottom;
}

.market-table.dense th,
.market-table.dense td {
  padding: 6px 8px;
}

.market-table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--text-strong);
}

.market-table tr.row-cont > * {
  border-top: 0;
}

.market-table tr.row-lead > * {
  border-bottom-style: dotted;
}

.market-table tr.row-band > * {
  background: var(--container-brand-strong);
  font-weight: 600;
  color: var(--text-strong);
}

.market-table tr.row-total > *,
.market-table tr.row-sub > * {
  border-top: 1px solid var(--cat-ink);
  font-weight: 600;
}

.market-table tr.row-market > * {
  background: var(--container-brand);
  font-weight: 600;
  color: var(--text-strong);
}

.market-table tr.row-group > th {
  padding-top: var(--space-2);
  background: var(--container-neutral);
  color: var(--text-strong);
}

.market-table tr.row-detail > * {
  background: var(--container-neutral);
}

.market-table td.strong {
  font-weight: 600;
  color: var(--text-strong);
}

.market-table td.figure:not(:first-child) {
  white-space: nowrap;
}

/* The marks the review gives a cell, and the outlook it gives a rating, in the system's tokens. */
.mark-excess,
.mark-over { background: var(--alert-error-background); }
.mark-under,
.mark-undercall { background: var(--alert-success-background); }
.mark-capital,
.mark-down { background: var(--alert-warning-background); }
.mark-up,
.mark-lowest,
.mark-latest { background: var(--container-brand-strong); }
.mark-highest { background: var(--cat-light); }
.mark-indication { color: var(--alert-error); font-style: italic; }
.mark-latest { font-weight: 600; }
.outlook-positive { background: var(--alert-success-background); }
.outlook-stable { background: var(--container-brand-strong); }
.outlook-negative { background: var(--alert-error-background); }

.mk-table-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--size-caption);
}

.mk-key-cell {
  display: inline-block;
  min-width: 16px;
  height: 16px;
  margin-right: 8px;
  vertical-align: -3px;
  box-shadow: inset 0 0 0 1px var(--border-neutral);
}

.mk-key-cell.mark-indication {
  min-width: 0;
  box-shadow: none;
}

.mk-key-cell.mark-indication::before {
  content: "0.0%";
  font-size: var(--size-caption);
  line-height: 16px;
}

/* In print a table takes the sheet's width at a smaller size, so that a wide one fits an A4 sheet. */
.sheet .market-table {
  font-size: 12px;
}

.sheet .market-table th,
.sheet .market-table td {
  padding: 4px 6px;
}

.sheet .mk-structure {
  min-width: 0;
}

.market-table tr.head-hidden th {
  height: 0;
  padding: 0;
  border: 0;
  line-height: 0;
}

/* A table is as wide as its columns need, centred, and never narrower than a readable width. */
/* Centred by its margins, not by flex, so that a table wider than a phone scrolls from its first
   column rather than overflowing both sides. */
.market-table {
  width: auto;
  min-width: min(100%, 640px);
  margin: 0 auto;
}

.market-table th + th,
.market-table td {
  min-width: 72px;
}

/* A Market chart's Figures table: as wide as its columns, centred, as Review's are. */
table.compact.market-chart-figures {
  width: auto;
  min-width: min(100%, 360px);
  margin: 0 auto;
}

table.compact.market-chart-figures th.figure {
  width: auto;
  min-width: 96px;
  max-width: 220px;
}

/* A horizontal chart's categories are names, not a scale: every one is labelled at every width. */
.mk-hplot .chart-y li:nth-child(even) {
  display: block;
}

/* On a narrow chart the value axis of horizontal bars is labelled every second tick. */
@container chart (max-width: 599px) {
  .mk-xv li:nth-child(even):not(:last-child) {
    visibility: hidden;
  }
}

/* On a sheet a table takes the sheet's width, its headings wrapping, so that the widest of the
   review's tables (Tonnage, its eleven columns of years) fits an A4 sheet. */
.sheet .market-table {
  width: 100%;
  min-width: 0;
}

.sheet .market-table th + th,
.sheet .market-table td {
  min-width: 0;
}

.sheet .market-table thead th {
  white-space: normal;
}

.sheet .market-table.dense {
  font-size: 11px;
}

.sheet .market-table.dense th,
.sheet .market-table.dense td {
  padding: 3px 4px;
}

/* ===============================================================================================
   Overview, and the forms of 13 October 2026
   =============================================================================================== */

/* Review's Overview opens with the club's mark and full name, over a hairline. */
.overview-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-neutral);
}

.overview-mark {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 72px;
}

.overview-mark img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.overview-identity h2 {
  min-width: 0;
  margin: 0;
  font-size: 30px;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* On a phone the name is smaller, so that a long single word of a club's full name fits beside
   the mark rather than pushing the page sideways. */
@media (max-width: 599px) {
  .overview-identity h2 {
    font-size: 22px;
  }
}

/* The key figures: four cards of one family, each a cell of the brand's pale blue container with
   no border, rule, radius or shadow, the cells 2px apart, so that the change of colour is their
   edge. Headings in Roboto Slab and sentence case; a label is light, Gray 60; a figure bold, Gray
   80. Four across where the column gives each 290px, two across from 640px, one below. */
.key-figures {
  container: keyfigures / inline-size;
  margin: var(--space-3) 0 var(--space-5);
}

.key-figures > .chart-head h2 {
  font-size: var(--size-heading-3);
}

.key-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin-top: var(--space-2);
}

@container keyfigures (min-width: 640px) {
  .key-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container keyfigures (min-width: 1160px) {
  .key-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.key-card {
  min-width: 0;
  padding: var(--space-3);
  background: var(--container-brand);
}

.key-card h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--face-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--text-strong);
}

.key-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.key-figure {
  min-width: 0;
  margin: 0;
  padding-top: var(--space-1);
  border-top: 1px solid var(--border-brand);
}

.key-figure dt,
.key-lines dt,
.key-label {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.35;
  color: var(--text);
}

.key-figure dd {
  margin: 2px 0 0;
}

.key-value {
  display: block;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

.key-sub {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}

.key-note {
  margin: var(--space-2) 0 0;
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--text);
}

/* A share as a bar on its track: the fill in Primary Blue 50 (a club's colour on Compare), the
   track the same colour's tint, the figure bold at the right. */
.key-tracks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.key-tracks > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label amount" "track track";
  align-items: end;
  gap: 4px var(--space-1);
  margin-bottom: 14px;
}

.key-tracks > li:last-child {
  margin-bottom: 0;
}

.key-tracks .key-label,
.key-tracks .key-club {
  grid-area: label;
}

.key-amount {
  grid-area: amount;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.key-track {
  --track: var(--dv-primary-blue);
  grid-area: track;
  position: relative;
  display: block;
  height: 10px;
  background: var(--dv-gray-10);
}

.key-track[class*="club-"] {
  --track: var(--club);
}

.key-fill {
  display: block;
  height: 100%;
  background: var(--track);
}

.key-track.club-patterned .key-fill {
  background: var(--club-fill);
  box-shadow: inset 0 0 0 1px var(--club);
}

.key-track .key-np {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.key-track .key-np > span {
  padding: 0 4px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1.2;
}

/* On Compare each row of the key figures starts with the club's name beside a small square of its colour. */
.key-club {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 15px;
  font-weight: 400;
  color: var(--text-strong);
}

.key-swatch {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--club-fill, var(--club, var(--dv-primary-blue)));
}

.key-lines {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-2) 0 0;
}

.key-lines dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-strong);
}

/* A web address breaks only after a dot or a slash, where the page offers it a break. */
.address {
  overflow-wrap: normal;
  word-break: normal;
}

table.peer-figures.wide td .address {
  overflow-wrap: normal;
}

@container keyfigures (max-width: 479.98px) {
  .key-card {
    padding: var(--space-2);
  }
}

/* Compare's key figures: Review's four cards read club against club as one table, a row a club,
   in one panel of the brand's pale blue, the same flat cell the cards are, with no border, rule,
   radius or shadow. Over the columns, the cards' headings in Roboto Slab, each over a hairline in
   the brand's border; under them, each column's name, light, which sorts the rows (the sorted one
   bold, underlined in the interactive blue). The figures bold, right-aligned, in tabular numerals;
   each market share with a slim bar on its track, every bar of the three on one scale, so that a
   column reads as a bar chart; the vessel mix one 100% bar in the categories' greys and patterns.
   Where the column is too narrow for the table it scrolls inside its frame, the clubs' names
   standing still, and a 4px edge in the interactive blue says there is more on the right. */
.kf-panel {
  margin-top: var(--space-2);
  padding: 12px var(--space-2) var(--space-3);
  background: var(--container-brand);
}

.kf-order-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  margin-bottom: 4px;
}

.kf-order {
  margin: 0;
  font-size: var(--size-caption);
  line-height: 1.4;
  color: var(--text);
}

.kf-reset {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--size-caption);
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.kf-reset:hover {
  color: var(--link-hover);
}

.kf-reset[hidden] {
  display: none;
}

/* Positioned, so that the words kept for a screen reader inside the table scroll with it and never
   widen the page. */
.kf-frame {
  position: relative;
  overflow-x: auto;
  background:
    linear-gradient(var(--container-brand), var(--container-brand)) right center / 4px 100% no-repeat local,
    linear-gradient(var(--border-interactive), var(--border-interactive)) right center / 4px 100% no-repeat scroll;
}

.kf-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.kf-table th,
.kf-table td {
  padding: 5px 0 5px 10px;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

/* The first column of each heading's group stands further off, so that the four read as groups. */
.kf-table .kf-first {
  padding-left: 18px;
}

.kf-table .kf-club-col {
  position: sticky;
  left: 0;
  z-index: 1;
  padding-left: 0;
  padding-right: 4px;
  background: var(--container-brand);
  text-align: left;
}

.kf-table td.kf-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  padding: 0;
  background: var(--container-brand);
}

/* A heading of a group: the card's name, over a hairline that stops short of the gap between groups. */
.kf-table .kf-group {
  padding: 0 0 6px 18px;
  font-family: var(--face-heading);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  vertical-align: bottom;
  white-space: normal;
  color: var(--text-strong);
  background: linear-gradient(var(--border-brand), var(--border-brand)) right bottom / calc(100% - 18px) 1px no-repeat;
}

.kf-heads th {
  padding-top: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-brand);
  font-size: var(--size-caption);
  font-weight: 400;
  line-height: 1.25;
  color: var(--text);
  vertical-align: bottom;
  white-space: normal;
}

.kf-sort {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  line-height: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

.kf-sort:hover {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.kf-heads th[aria-sort] .kf-sort {
  font-weight: 600;
  color: var(--text-strong);
  text-decoration: underline 2px var(--border-interactive);
  text-underline-offset: 4px;
}

.kf-table tbody th,
.kf-table tbody td {
  border-bottom: 1px solid var(--border-brand);
}

.kf-table tbody tr:last-child > * {
  border-bottom: 0;
}

.kf-table tbody td {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-strong);
}

.kf-table tbody th {
  font-weight: 400;
}

.kf-table .kf-rating,
.kf-table .kf-words,
.kf-table .kf-vessel {
  text-align: left;
}

/* A row's second line, light: the rating's outlook, and each share's bar under its figure. */
.kf-grade,
.kf-outlook {
  display: block;
}

.kf-outlook {
  font-size: var(--size-caption);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text);
}

/* Words, an abatement policy say, wrap rather than widen the table. */
.kf-table td.kf-words {
  min-width: 6.6em;
  max-width: 9em;
  font-size: var(--size-caption);
  line-height: 1.25;
  white-space: normal;
}

.kf-amount {
  display: block;
}

.key-track.kf-bar {
  width: 100%;
  min-width: 56px;
  height: 7px;
  margin-top: 4px;
}

.kf-stack {
  position: relative;
  display: flex;
  width: 124px;
  height: 10px;
}

.kf-stack > span {
  flex: none;
  height: 100%;
}

.kf-stack > span + span {
  border-left: 2px solid var(--container-brand);
}

.kf-stack > .key-np {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.kf-stack > .key-np > span {
  padding: 0 4px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1.2;
}

/* The vessel column's key, over its bars: the four types, the long name on two lines. */
.kf-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  width: 124px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.3;
}

.kf-key .legend-swatch {
  width: 10px;
  height: 10px;
  margin-right: 5px;
  vertical-align: 0;
}

/* A club picked out: its row turns white across the panel, and the other clubs' marks fade; every
   figure stays readable. */
.has-focus .kf-panel [data-peer]:not(.is-focus) {
  opacity: 1;
}

.kf-table tbody tr.is-focus > *,
.kf-detail-list li.is-focus {
  background: var(--surface);
}

.has-focus .kf-table tbody tr:not(.is-focus) :is(.key-swatch, .key-fill, .kf-stack) {
  opacity: 0.3;
}

/* Club details: each club's principal address, website and last S&P change, folded away under the
   table, a club a line, its facts side by side under their light names. */
.kf-details {
  margin-top: var(--space-2);
  border-top: 1px solid var(--border-brand);
}

.kf-details summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--space-2);
  min-height: var(--control-height);
  padding: 10px 0 6px;
  color: var(--text-strong);
  cursor: pointer;
  list-style: none;
}

.kf-details summary::-webkit-details-marker {
  display: none;
}

.kf-details summary::after {
  content: "Show";
  margin-left: auto;
  color: var(--link);
  font-size: var(--size-caption);
  font-weight: 600;
}

.kf-details[open] summary::after {
  content: "Hide";
}

.kf-details summary:hover .kf-details-title {
  color: var(--link);
}

.kf-details-title {
  font-family: var(--face-heading);
  font-size: 18px;
}

.kf-details-what {
  font-size: var(--size-caption);
  color: var(--text);
}

.kf-detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kf-detail-list li {
  display: grid;
  grid-template-columns: minmax(0, 9.5em) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr);
  gap: 2px var(--space-2);
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--border-brand);
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-strong);
}

.kf-detail-label {
  display: block;
  font-size: var(--size-caption);
  color: var(--text);
}

@container keyfigures (max-width: 759.98px) {
  .kf-detail-list li {
    grid-template-columns: minmax(0, 1fr);
  }

  .kf-detail-label {
    display: inline;
    margin-right: 6px;
  }
}

/* A narrow column, a phone's: a little less room round the table, the clubs' names on two lines
   where they need them, and sort buttons a finger's height. */
@container keyfigures (max-width: 479.98px) {
  .kf-panel {
    padding: 8px var(--space-2) var(--space-2);
  }

  .kf-table th,
  .kf-table td {
    padding-left: 8px;
  }

  .kf-table .kf-first {
    padding-left: 14px;
  }

  .kf-table .kf-group {
    padding-left: 14px;
    background-size: calc(100% - 14px) 1px;
  }

  .kf-table .kf-club-col {
    padding-left: 0;
  }

  .kf-table tbody th .key-club {
    max-width: 6.5em;
    white-space: normal;
    font-size: 14px;
    line-height: 1.25;
  }

  .kf-table tbody td {
    font-size: 14px;
  }

  .kf-sort {
    min-height: var(--control-height);
    display: inline-flex;
    align-items: flex-end;
  }
}

/* Printed, the table in two halves one over the other, each at the sheet's width. */
.kf-sheet .kf-table + .kf-table {
  margin-top: 4px;
}

.kf-sheet .kf-table th,
.kf-sheet .kf-table td {
  padding-top: 4px;
  padding-bottom: 4px;
}

.kf-sheet .kf-table .kf-club-col,
.kf-sheet .kf-table td.kf-corner {
  position: static;
  background: none;
}

.kf-sheet .kf-table tbody td {
  font-size: 13px;
}

.kf-sheet .kf-table tbody th,
.kf-sheet .kf-table tbody td {
  border-bottom-color: var(--border-neutral);
}

.kf-sheet .kf-table .kf-group {
  font-size: 15px;
}

.kf-sheet .key-track.kf-bar {
  min-width: 80px;
}

.kf-sheet .kf-stack,
.kf-sheet .kf-key {
  width: 160px;
}

.kf-sheet .kf-stack > span + span {
  border-left-color: var(--surface);
}

/* Overview printed: the identity and the cards on a sheet, then the charts two to a row. */
.overview-sheet {
  --plot-height: 170px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.overview-sheet .key-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.overview-sheet .key-card {
  padding: 14px 16px;
}

.overview-sheet .key-value {
  font-size: 20px;
}

.overview-sheet .overview-identity {
  margin: 0;
  padding-bottom: 12px;
}

.overview-sheet .overview-identity h2 {
  font-size: 22px;
}

.overview-charts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}

/* Many clubs: two charts a sheet, one over the other, each across the sheet. */
.overview-charts.stacked {
  grid-template-columns: minmax(0, 1fr);
}

.overview-chart .chart {
  font-size: 11px;
}

.overview-chart .chart-legend,
.overview-chart .peer-legend {
  font-size: 11px;
}

/* N/P under a rank track, a rating timeline or a bump chart: a hatched cell under the year with no
   rank, with its chip, never at a rank, where it could be read as one. */
.np-strip {
  display: flex;
  margin: 6px 8px 0 56px;
  padding: 0;
  list-style: none;
}

.np-strip > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.np-strip .chart-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84%;
  height: 20px;
  overflow: hidden;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.np-strip .chart-missing > span {
  padding: 1px 3px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
  line-height: 1.1;
}

.np-strip.has-end-labels {
  margin-right: var(--end-labels, 148px);
}

/* In a club's small chart the chip is smaller, in its column's middle. */
.chart-plot.mini .column-missing {
  padding-bottom: 2px;
  font-size: 10px;
}

.chart-plot.mini .column-missing > span {
  padding: 1px 2px;
}

/* A hatched part of a stack, up to its published total. */
.chart-plot .np-part {
  align-items: center;
  padding-bottom: 0;
}

/* A total: a Gray 80 cap across its column. */
.chart-plot .total-cap line {
  stroke: var(--text-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
}

.chart-legend .key.total-cap {
  border-top: 2px solid var(--text-strong);
}

/* A part of a bar or a doughnut in a club's colour hatched, for a club with the second channel (see
   .club-patterned): diagonal lines of the hue on white, inside an outline of the hue. The outline
   of a bar is drawn inside it, never across its edge (14 October 2026: "the bars should always all
   be the same exact width"): a 5px stroke clipped to the rect (fill-box) leaves 2.5px inside, and
   the bar's own 2px white edge, drawn over it as every bar's is (rect.bar-edge), leaves 1.5px of
   outline inside 1px of white, so that the bar's outer edges are exactly a plain bar's. */
.seg-primary-blue { --seg: var(--dv-primary-blue); --hatch-bar: url(#club-hatch-primary-blue); --hatch-ring: url(#club-hatch-ring-primary-blue); }
.seg-blue { --seg: var(--dv-blue); --hatch-bar: url(#club-hatch-blue); --hatch-ring: url(#club-hatch-ring-blue); }
.seg-dark-blue { --seg: var(--dv-dark-blue); --hatch-bar: url(#club-hatch-dark-blue); --hatch-ring: url(#club-hatch-ring-dark-blue); }
.seg-orange { --seg: var(--dv-orange); --hatch-bar: url(#club-hatch-orange); --hatch-ring: url(#club-hatch-ring-orange); }
.seg-yellow { --seg: var(--dv-yellow); --hatch-bar: url(#club-hatch-yellow); --hatch-ring: url(#club-hatch-ring-yellow); }
.seg-green { --seg: var(--dv-green); --hatch-bar: url(#club-hatch-green); --hatch-ring: url(#club-hatch-ring-green); }
.seg-fuchsia { --seg: var(--dv-fuchsia); --hatch-bar: url(#club-hatch-fuchsia); --hatch-ring: url(#club-hatch-ring-fuchsia); }
.seg-violet { --seg: var(--dv-violet); --hatch-bar: url(#club-hatch-violet); --hatch-ring: url(#club-hatch-ring-violet); }
.seg-lime { --seg: var(--dv-lime); --hatch-bar: url(#club-hatch-lime); --hatch-ring: url(#club-hatch-ring-lime); }
.seg-rose { --seg: var(--dv-rose); --hatch-bar: url(#club-hatch-rose); --hatch-ring: url(#club-hatch-ring-rose); }
.seg-grey { --seg: var(--dv-gray-40); }

.chart-plot .bars rect.seg-patterned {
  fill: var(--hatch-bar);
  stroke: var(--seg);
  stroke-width: 5px;
  vector-effect: non-scaling-stroke;
  clip-path: inset(0) fill-box;
}

.chart-plot .bars rect.bar-edge {
  fill: none;
  stroke: var(--surface);
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}

path.seg-patterned {
  fill: var(--hatch-ring);
}

.legend-swatch.seg-patterned {
  background: repeating-linear-gradient(45deg, var(--seg) 0 2px, var(--surface) 2px 4px);
  box-shadow: inset 0 0 0 1px var(--seg);
}

/* A figure of nought: a short rule on the zero line, so that it is never read as N/P. */
.chart-plot .zero-tick {
  stroke: var(--text-strong);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.chart-plot .zero-tick[class*="club-"] {
  stroke: var(--club);
  stroke-width: 3;
}

/* The last excess call: a Gray 80 dashed rule at its year, named at its head. */
.chart-plot .last-call {
  stroke: var(--text-strong);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
}

.last-call-label {
  position: absolute;
  top: -2px;
  transform: translate(-50%, -100%);
  padding: 0 4px;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--text-strong);
  background: var(--surface);
}

/* Several market averages on one chart: Gray 80 solid with markers, Gray 40 dashed with markers,
   Gray 80 dotted; and a club's trend, a thin dashed line in its colour. */
.chart-plot .series.market.market-solid {
  stroke: var(--text-strong);
  stroke-dasharray: none;
}

.chart-plot .series.market.market-dash {
  stroke: var(--dv-gray-40);
  stroke-dasharray: 6 4;
}

.chart-plot .series.market.market-dot {
  stroke: var(--text-strong);
  stroke-dasharray: 1.5 3.5;
  stroke-linecap: round;
}

.chart-plot .points.market.market-solid,
.chart-plot .points.market.market-dot {
  stroke: var(--text-strong);
}

.chart-plot .points.market.market-dash {
  stroke: var(--dv-gray-40);
}

.chart-legend .key.market.market-solid {
  border-top: 2px solid var(--text-strong);
}

.chart-legend .key.market.market-dash {
  border-top: 2px dashed var(--dv-gray-40);
}

.chart-legend .key.market.market-dot {
  border-top: 2px dotted var(--text-strong);
}

.chart-plot .series.trend.trend-dash {
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  stroke-linecap: butt;
}

.chart-legend .key.trend.trend-dash {
  border-top-width: 2px;
  border-top-style: dashed;
}

/* A target, not a declared increase: a hollow marker. */
.chart-plot .points.target-ring {
  stroke: var(--club, var(--series-single));
  stroke-width: 10;
}

.chart-plot .points.target-hole {
  stroke: var(--surface);
  stroke-width: 5;
}

.legend-target {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 8px;
  vertical-align: -1px;
  border: 2px solid var(--club, var(--text));
  background: var(--surface);
}

/* A rank track or a rating timeline: its levels down the side, the best at the top, a chip at each
   year on a step line. A rating's plot is as tall as its grades need. */
.ordinal-chart .chart-plot {
  height: max(160px, calc(var(--levels, 12) * 24px));
}

.chart-plot .ordinal-chip {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 28px;
  padding: 3px 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  color: var(--text-strong);
  background: var(--surface);
  box-shadow: inset 0 0 0 2px var(--club, var(--series-single));
}

.chart-plot .ordinal-chip.club-patterned {
  box-shadow: none;
  outline: 2px dashed var(--club);
  outline-offset: -2px;
}

/* Compare: lines a club named at their right-hand end, from five clubs; the names are buttons that
   pick the club out, nudged apart where two would meet, with a leader from a line's end to a name
   that moved. */
.chart-plot.has-end-labels,
.chart-x.has-end-labels {
  margin-right: var(--end-labels, 148px);
}

.end-labels {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: calc(var(--end-labels, 148px) - 4px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.end-labels > li {
  position: absolute;
  left: 12px;
  right: 0;
  transform: translateY(-50%);
  line-height: 1;
}

.peer-key.end-label {
  max-width: 100%;
  min-height: 0;
  padding: 1px 2px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-plot svg.end-leaders {
  position: absolute;
  top: 0;
  left: 100%;
  width: 12px;
  height: 100%;
  overflow: visible;
}

.end-leaders line {
  stroke: var(--club);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@container chart (max-width: 479px) {
  .chart-plot.has-end-labels,
  .chart-x.has-end-labels,
  .np-strip.has-end-labels {
    --end-labels: 118px;
  }

  .peer-key.end-label {
    font-size: 11px;
  }
}

/* A line can be pointed at to pick its club out: an invisible wider stroke takes the pointer. */
.chart-plot .hit {
  fill: none;
  stroke: rgb(0 0 0 / 0%);
  stroke-width: 12;
  pointer-events: stroke;
  vector-effect: non-scaling-stroke;
}

/* With seven clubs or more, every club's line and markers are drawn at three quarters of their
   weight, so that twelve read apart. */
.peer-chart.many-clubs .chart-plot .series[class*="club-"] {
  stroke-width: calc(var(--club-line, 2) * 0.75);
}

.peer-chart.many-clubs .chart-plot .points[class*="club-"] {
  stroke-width: calc(var(--club-point, 4) * 0.75);
}

/* A club's trend in the clustered bars, drawn only while the club is picked out. */
.chart-plot .picked-only {
  display: none;
}

.has-focus .chart-plot .picked-only.is-focus {
  display: inline;
}

/* The range between two market averages: a Gray 10 band. */
.chart-plot .peer-band {
  fill: var(--dv-gray-10);
}

.legend-swatch.peer-band {
  background: var(--dv-gray-10);
  box-shadow: inset 0 0 0 1px var(--dv-gray-40);
}

/* Small multiples: a small chart a club, on one scale, its name over it beside a small square of
   its colour. */
.multiples-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px 14px;
  margin: 10px 0 0;
}

.multiples-grid.wide {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.multiple {
  container: chart / inline-size;
  min-width: 0;
}

.multiple-name {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.multiple-name .stack-mark {
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--club-fill, var(--club));
}

.multiple-name .stack-mark.club-patterned,
.key-swatch:is(.club-patterned *),
.dot-track .dot.club-patterned {
  box-shadow: inset 0 0 0 1px var(--club);
}

.chart-plot.mini {
  height: 90px;
  margin: 6px 4px 0 44px;
}

.chart-plot.mini .chart-y li {
  width: 40px;
  margin-right: 4px;
  font-size: 11px;
}

.chart-x.mini-years {
  margin: 4px 4px 0 44px;
  font-size: 11px;
}

/* A figure beyond the shared scale of small multiples (14 October 2026): drawn to the edge, where it
   ends in a point in its own colour, its figure labelled over the chart (or under it) in its row,
   rows of 13px kept free over and under every small chart of the grid alike, so that the plots line
   up. A bar's point is its own end cut to a 7px arrowhead by two white corners; a line's is a 6px
   high arrowhead in its club's colour at the edge, in place of its square. */
.multiples-grid {
  --cut-row: 13px;
}

.multiples-grid .chart-plot.mini {
  margin-top: calc(6px + var(--cut-over, 0) * var(--cut-row));
}

.multiples-grid .chart-x.mini-years {
  margin-top: calc(4px + var(--cut-under, 0) * var(--cut-row));
}

.cut-mark {
  position: absolute;
  pointer-events: none;
}

.cut-mark.bar {
  height: 7px;
  background: var(--surface);
}

.cut-mark.bar.over {
  top: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 0, 0 100%);
}

.cut-mark.bar.under {
  bottom: 0;
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 50% 100%, 0 0);
}

.cut-mark.point {
  width: 10px;
  height: 7px;
  margin-left: -5px;
  background: var(--club);
}

.cut-mark.point.over {
  top: -1px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.cut-mark.point.under {
  bottom: -1px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.cut-labels {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.cut-labels li {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  line-height: var(--cut-row);
  color: var(--text-strong);
  white-space: nowrap;
  transform: translateX(-50%);
}

.cut-labels li.over {
  bottom: calc(100% + 1px + var(--row) * var(--cut-row));
}

.cut-labels li.under {
  top: calc(100% + 1px + var(--row) * var(--cut-row));
}

.cut-labels li.start {
  transform: translateX(-4px);
}

.cut-labels li.end {
  transform: translateX(calc(-100% + 4px));
}

/* A small chart's first and last years, and the last excess call's last, stand inside the plot,
   from its left edge and to its right, so that a narrow year's label never runs past the chart. */
.chart-x.mini-years li:first-child {
  justify-content: flex-start;
}

.chart-x.mini-years li:last-child,
.chart-x.dot-years li:last-child {
  justify-content: flex-end;
}

.multiples .peer-legend {
  margin-left: 0;
}

/* Investment Strategy on Compare: each club's columns in the categories' fills, on 0 to 100%. */
.chart-plot.composition-plot {
  height: 150px;
}

.composition-grid {
  position: absolute;
  inset: 0;
  border-top: 1px solid var(--gridline);
  border-bottom: 1px solid var(--axis-label);
  background: linear-gradient(var(--gridline), var(--gridline)) 0 50% / 100% 1px no-repeat;
}

/* The last excess call on Compare: a row a club, a square at its year. */
.dot-rows {
  display: grid;
  grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr);
  align-items: center;
  gap: 6px var(--space-2);
  margin-top: 10px;
}

.dot-track {
  position: relative;
  height: 30px;
  background: linear-gradient(var(--gridline), var(--gridline)) 0 50% / 100% 1px no-repeat;
}

.dot-track .dot {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%);
  background: var(--club-fill, var(--club));
}

.dot-track .dot-label {
  position: absolute;
  top: 50%;
  transform: translate(10px, -50%);
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-strong);
}

.dot-track .dot-label.before {
  transform: translate(calc(-100% - 10px), -50%);
}

.dot-track .dot-none {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--text);
}

.dot-track .dot-np {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}

.dot-track .dot-np > span {
  padding: 0 3px;
  background: var(--surface);
  outline: 1px solid var(--dv-gray-40);
}

.dot-years {
  grid-column: 2;
  margin: 0;
}

/* A small multiple labels its first year and its last, always. */
.chart-x.mini-years.ends li {
  visibility: visible;
}