/* Mankappian Research - marketing site design system.
   Values are copied from design_handoff_mankappian_site/README.md ("Style Guide").
   Paper, not interface: white ground, ruled sections, serif text. One accent (plum).
   Rules over containers - no cards, fills, borders-around-content, shadows or radius. */

:root {
  --plum: #4C0C40;
  --plum-tint: #C9AEC2;
  --plum-wash: #E8DCE6;
  --ink: #201C1C;
  --ink-soft: #332E2E;
  --grey-text: #56504E;
  --grey-muted: #706864;
  --grey-light: #A79EA4;
  --rule: #E4DFE2;
  --rule-light: #EDE9EB;
  --paper: #FCFCFC;

  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Jost', Arial, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
html { scrollbar-gutter: stable; }       /* short and long pages keep the same width: the nav never shifts between pages */

* { box-sizing: border-box; }

a { color: var(--plum); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--plum-wash); }

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

/* Browsers apply a default `margin: 1em 40px` to <figure> - without this
   reset every photo sits ~40px inset from the column edges on each side. */
figure { margin: 0; }

h1, h2, h3, p { margin: 0; text-wrap: pretty; }

/* ---- Type scale ---- */

.wordmark {
  /* Mobile-safe default, matched proportionally to .tagline (same ratio
     in min/slope/max - the two were tuned to render the same width). */
  font: 500 clamp(15.5px, 2.8vw, 22px) var(--serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--plum);
  white-space: nowrap;
}

.tagline {
  font: 300 clamp(8.9px, 1.608vw, 12.64px) var(--sans);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--grey-muted);
  margin-top: 4px;
  white-space: nowrap;
}

/* From tablet width up (the point where .h1's own clamp(23px,3.1vw,32px)
   leaves its 23px floor) there's room to size the wordmark 2px above it -
   same 3.1vw slope, offset +2px. The tagline is scaled by the exact same
   ratio it has to the mobile wordmark size above (~1.741x), so the two
   lines stay the same rendered width as each other at this larger scale
   too, just as they do below the breakpoint. */
@media (min-width: 742px) {
  .wordmark { font-size: clamp(18.75px, calc(2.325vw + 1.5px), 25.5px); }
  .tagline { font-size: clamp(10.77px, calc(1.33545vw + 0.8615px), 14.6475px); }
  /* the menu's capitals start level with the wordmark's: the wordmark's taller line puts its caps
     lower by 0.4 x its size - 6px (measured), so the menu drops by the same */
  .site-nav { margin-top: clamp(1.5px, calc(0.93vw - 5.4px), 4.2px); }
}

.note-title {
  font: 400 clamp(26px, 3.6vw, 38px) var(--serif);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--plum);
  max-width: 34ch;
}

.h1 {
  font: 400 clamp(23px, 3.1vw, 32px) var(--serif);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--plum);
}

.h2 {
  font: 400 clamp(21px, 2.8vw, 26px) var(--serif);
  line-height: 1.28;
  color: var(--ink);
}

.h3 {
  font: 500 19px var(--serif);
  line-height: 1.35;
  color: var(--ink);
}

.lead {
  font: 400 clamp(17px, 2.2vw, 20px) var(--serif);
  line-height: 1.62;
  color: var(--grey-text);
  max-width: 58ch;
}

.body-text {
  font: 400 clamp(17px, 2.2vw, 19px) var(--serif);
  line-height: 1.68;
  color: var(--ink-soft);
  max-width: 62ch;
}

.body-text + .body-text { margin-top: 20px; }

.body-small {
  font: 400 16.5px var(--serif);
  line-height: 1.6;
  color: var(--grey-text);
}

.section-label {
  font: 400 11px var(--sans);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-muted);
}

.nav-link {
  font: 400 13px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-text);
  border-bottom: 1px solid transparent;
  padding-bottom: 4px;
}
.nav-link:hover { color: var(--plum); }
.nav-link.active { color: var(--plum); border-bottom-color: var(--plum); }
.nav-ext { display: inline-flex; align-items: center; gap: 7px; }       /* opens in a new window: drawn icon after the label */
.nav-ext svg { flex: none; margin-top: -1px; }

.cta-link {
  display: inline-block;
  font: 400 13px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--plum);
  border-bottom: 1px solid var(--plum-tint);
  padding-bottom: 5px;
}
.cta-link:hover { color: var(--ink); }

.meta {
  font: 300 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-muted);
}
.meta .sep { color: var(--plum-tint); }

/* ---- Layout ---- */

body.page {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}

/* The edge bar and the content column move together as one unit, centred
   as a whole in the viewport - not the bar pinned to the left edge with
   the content centred (or left-anchored) independently of it. */
.page-shell {
  position: relative;
  min-height: 100vh;
  max-width: calc(1060px + clamp(26px, 3.6vw, 44px));
  margin: 0 auto;
  padding-left: clamp(26px, 3.6vw, 44px);
}

.edge-bar {
  position: absolute;
  left: clamp(14px, 1.9vw, 24px);
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--plum);
}

.wrap {
  max-width: 1060px;
  margin: 0;
  padding-left: clamp(20px, 5vw, 64px);
  padding-right: clamp(20px, 5vw, 64px);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;              /* the menu lines up with the top of the wordmark */
  justify-content: space-between;
  gap: 20px 32px;
  padding-top: clamp(24px, 4vw, 48px);
  padding-bottom: clamp(16px, 2.2vw, 26px);
}

.site-header a { display: block; }

.site-nav {
  display: flex;
  gap: 22px;
}

.header-rule,
.rule {
  height: 1px;
  background: var(--rule);
  border: none;
  margin: 0;
}

/* The footer rule is a plain element (.rule, an <hr>) inside .wrap's
   content area - not a border on a .wrap-scoped box - so it's inset by
   the same gutter padding as the header rule and computes to the same
   width. A `border-top` here would instead span .wrap's own full box
   (which already includes that padding) and come out wider. */
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 28px;
  padding-top: clamp(32px, 5vw, 52px);
  padding-bottom: clamp(32px, 5vw, 52px);
}

.footer-wordmark {
  font: 400 12.5px var(--serif);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-muted);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: baseline;
}

.footer-meta a { color: var(--grey-muted); }
.footer-meta a:hover { color: var(--plum); }

main.home .site-footer { margin-top: clamp(32px, 6vw, 72px); }

/* ---- Sections ---- */

.section {
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(36px, 6vw, 72px);
}

.hero {
  padding-top: clamp(16px, 2.2vw, 24px);
  padding-bottom: clamp(32px, 4.5vw, 56px);
}

.hero .lead { margin-top: clamp(28px, 4vw, 40px); }
.hero .lead + .lead { margin-top: 14px; }   /* a run of paragraphs (the homepage) */

.figure { padding-bottom: clamp(32px, 5vw, 56px); }
.figure img {
  width: 100%;
  object-fit: cover;
}
.figure figcaption {
  font: 300 12px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey-muted);
  margin-top: 14px;
}
.figure figcaption .sep { color: var(--plum-tint); }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 3.5vw, 48px);
}

.list-row {
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 17px;
  color: #403A3A;
}

/* ---- Publication list (Research page) ---- */

.publication {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 40px;
  padding: clamp(24px, 3.5vw, 34px) 0;
  border-top: 1px solid var(--rule);
}

.publication .meta-col {
  flex: 0 0 150px;
  padding-top: 6px;
}
.publication .meta-col .topic { color: var(--plum); margin-top: 8px; }
.publication .meta-col .pages { margin-top: 8px; }

.publication .body-col { flex: 1 1 340px; }
.publication .body-col .h2 { letter-spacing: -0.005em; }
.publication .body-col .summary { margin-bottom: 14px; }
.publication .body-col .read-more {
  display: inline-block;
  margin-top: 16px;
  font-size: 11px;
  letter-spacing: 0.16em;
}

/* ---- Note (long-form) ---- */

.note-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font: 400 11px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6E6664;
  margin-bottom: clamp(12px, 1.6vw, 18px);
}

.note-dek {
  margin-top: clamp(24px, 3.5vw, 34px);
  max-width: 52ch;
  font-size: clamp(19px, 2.5vw, 23px);
  line-height: 1.5;
  color: var(--grey-text);
  font-style: italic;
}

.note-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-top: clamp(26px, 4vw, 38px);
  padding-bottom: clamp(30px, 4vw, 44px);
  font: 400 12px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E6664;
  border-bottom: 1px solid var(--rule);
}

.note-grid {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 64px);
  padding-top: clamp(36px, 5vw, 56px);
}

.note-main { flex: 1 1 480px; min-width: 0; max-width: 70ch; }

.note-sidebar {
  /* flex-grow:1 (not 0) so it absorbs whatever's left once .note-main
     hits its own max-width:70ch cap, instead of stopping at 220px and
     leaving a gap before .wrap's right edge - capped so it doesn't run
     away on very wide viewports. */
  flex: 1 1 220px;
  max-width: 320px;
  min-width: 0;
  align-self: flex-start;
  position: sticky;
  top: 24px;
}

.sidebar-label {
  font: 400 10.5px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6E6664;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.contents-row {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-light);
  font-size: 16px;
  line-height: 1.4;
  color: #403A3A;
}

.keyfig-row { padding: 14px 0; border-bottom: 1px solid var(--rule-light); }
.keyfig-value { font-size: clamp(22px, 3vw, 27px); line-height: 1.1; color: var(--plum); }
.keyfig-label { margin-top: 6px; font-size: 15.5px; line-height: 1.4; color: #4A4444; }

.exec-summary {
  padding-bottom: clamp(28px, 4vw, 40px);
  border-bottom: 1px solid var(--rule);
}
.exec-summary .section-label { color: var(--plum); margin-bottom: 16px; }
.exec-summary p { font-size: clamp(18px, 2.3vw, 20px); line-height: 1.66; color: #2A2626; }

.note-main h2 {
  margin: clamp(24px, 3vw, 36px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--plum-tint);
  font: 400 clamp(23px, 3vw, 30px) var(--serif);
  line-height: 1.28;
  color: var(--ink);
}

/* .exec-summary already closes with its own border-bottom - without this,
   a heading immediately after it doubles up on the divider (its own
   border-top on top of exec-summary's border-bottom), just a small gap
   apart, so it reads as two stacked rules instead of one. */
.exec-summary + h2 {
  padding-top: 0;
  border-top: none;
  margin-top: clamp(28px, 4vw, 40px);
}

/* The section-divider spacing above (and on .pull-quote below) assumes a
   predecessor to separate from. Whichever block type ends up first in the
   flow (a heading here, a callout for the classic note, ...) should sit
   flush under the byline instead - the gap only makes sense once there is
   something above it to divide from. */
.note-main > *:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.note-main > p,
.note-main .body-copy {
  margin: 20px 0 0;
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: none;
}

.body-list {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.body-list li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(17px, 2.1vw, 19px);
  line-height: 1.7;
  color: var(--ink-soft);
}
.body-list li + li { margin-top: 10px; }
.body-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--plum);
}

.pull-quote {
  margin: clamp(30px, 4vw, 40px) 0;
  font-size: clamp(20px, 2.6vw, 25px);
  line-height: 1.45;
  color: var(--plum);
  font-style: italic;
  max-width: 44ch;
}

.fig-block { margin-top: clamp(28px, 4vw, 40px); }
.fig-placeholder {
  position: relative;
  margin-top: 18px;
  height: clamp(200px, 26vw, 320px);
  background-color: #F6F3F4;
  background-image: repeating-linear-gradient(135deg, #EDE7EA 0 8px, #F6F3F4 8px 16px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fig-placeholder span {
  font: 400 11px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6E6664;
  background: var(--paper);
  padding: 9px 14px;
}
/* Jost, matching chart axis labels, but sentence case (not uppercase)
   since these read as part of the figure itself, not interface
   furniture. See design_handoff README's "Data shapes" (Figure: caption
   number, title, image, source line) and Typefaces section. */
.figure-caption {
  margin-top: 12px;
  font: 500 15px var(--sans);
  color: var(--ink);
}
.figure-source {
  margin-top: 4px;
  font: 400 13px var(--sans);
  color: var(--grey-text);
}
.fig-note { margin-top: 16px; font-size: 16px; line-height: 1.55; color: #4A4444; max-width: 52ch; }

.theses-block { margin-top: clamp(28px, 4vw, 40px); }
.theses-table-label {
  border-top: 1px solid var(--plum);
  padding: 14px 0 4px;
  font: 400 11px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
}
.thesis-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 36px;
  padding: clamp(22px, 3vw, 30px) 0;
  border-top: 1px solid var(--rule);
}
.thesis-name {
  flex: 0 0 160px;
  font-size: clamp(19px, 2.4vw, 22px);
  line-height: 1.3;
  color: var(--plum);
}
.thesis-body { flex: 1 1 320px; min-width: 0; }
.thesis-label {
  font: 400 10.5px var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #6E6664;
}
.thesis-body p { margin: 10px 0 0; font-size: 17px; line-height: 1.62; color: var(--ink-soft); }
.thesis-question { color: var(--ink); font-style: italic; }
.thesis-considerations { margin-top: 22px; }

.methodology p { margin: 1.2em 0 0; font-size: 16.5px; line-height: 1.66; color: #403A3A; }
.methodology p:first-of-type { margin-top: 0; }
.methodology ul { margin: 14px 0 0; padding-left: 20px; font-size: 16.5px; line-height: 1.66; color: #403A3A; }
.methodology li { margin-bottom: 6px; }

.buyout-table { max-width: 420px; margin-top: clamp(26px, 3.5vw, 34px); }
.buyout-head {
  border-top: 1px solid var(--plum);
  padding: 12px 0;
  font: 400 10.5px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--plum);
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.buyout-labels {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  font: 300 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6E6664;
}
.buyout-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-top: 1px solid var(--rule-light);
  font-size: 17px;
  color: var(--ink-soft);
}

.sources-block {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: clamp(24px, 3.5vw, 32px);
  border-top: 1px solid var(--rule);
}
.sources-block .section-label { margin-bottom: 16px; }
.sources-block p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4A4444; }
.sources-block p + p { margin-top: 8px; }

/* Inline [^N] citation - jumps to its {{footnotes}} item below. */
.footnote-ref { font-size: 0.72em; vertical-align: super; }
/* The "back to text" mark on each footnote item - jumps to where [^N]
   was cited (its #fnref-N). Muted since it's a wayfinding aid, not part
   of the citation text itself. */
.footnote-backref { margin-left: 8px; font: 12px var(--sans); color: var(--grey-muted); text-decoration: none; }
.footnote-backref:hover { color: var(--plum); }

.about-research {
  margin-top: clamp(40px, 6vw, 64px);
  padding: clamp(28px, 4vw, 36px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.about-research .section-label { color: var(--plum); margin-bottom: 16px; }
.about-research p { font-size: 17px; line-height: 1.66; color: var(--ink-soft); max-width: 64ch; }
.about-research .signoff { margin-top: 20px; font-size: 18px; line-height: 1.6; }

/* ---- Interactive publications (content_blocks) ---- */

/* Reuses .note-grid/.note-main/.note-sidebar and .keyfig-* wholesale (see
   "Key figures" above) for the same typography and section-heading rhythm
   as the classic note - only the chart/map/legend/table pieces below are
   new. The chart/map group and everything after it renders in its own
   full-width .note-main (max-width:none inline), outside the sidebar's
   row - see _split_sidebar_content() in views.py for why. */

.chart-block { margin-top: clamp(12px, 2vw, 20px); position: relative; }

.map-zoom-controls {
  position: absolute; top: 8px; right: 8px;
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); background: var(--paper);
}
.map-zoom-btn {
  width: 26px; height: 26px; padding: 0; border: none; background: none; cursor: pointer;
  font: 400 16px var(--sans); color: var(--ink-soft); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.map-zoom-btn:hover { background: var(--rule-light); color: var(--plum); }
.map-zoom-btn + .map-zoom-btn { border-top: 1px solid var(--rule); }
.chart-block svg.zoomed { cursor: grab; }
.chart-block svg.zoomed.dragging { cursor: grabbing; }
/* Set by drawGbMap (charts.js) when the map is sized off a target height
   (see sizeMapToMatchColumn) rather than off its own column's width - its
   svg then has an explicit px width that's often narrower than the
   column, so centre it instead of leaving it stuck to the left edge. */
/* align-items defaults to stretch, which would pull the svg taller than
   its own explicit width/height attributes and let its default
   preserveAspectRatio ("meet") centre the correctly-proportioned map
   inside that inflated box - visible as empty space above (and below)
   the actual land outline. flex-start keeps the svg at its own size. */
.chart-block.map-fit-height { display: flex; justify-content: center; align-items: flex-start; }
.chart-block .pt-hit { cursor: pointer; }
/* transform:scale, not the r property directly - Chrome/Edge animate an
   SVG circle's r via CSS fine, but Firefox does not (confirmed: it applies
   stroke/stroke-width from the same rule, just not r, leaving the circle
   visibly un-enlarged on hover). transform-box:fill-box scales from the
   circle's own centre instead of the svg viewport's origin, and is well
   supported across Chrome/Firefox/Safari, unlike r as a CSS property. */
.chart-block .pt { transition: transform 0.08s ease-out; transform-box: fill-box; transform-origin: center; }
.chart-block .pt.hovered { transform: scale(1.5); stroke: #E69F00; stroke-width: 1.5px; }
.chart-block .pt.selected { transform: scale(1.75); stroke: var(--plum); stroke-width: 2px; }
.chart-block .dno-region { cursor: default; }

/* Fixed height so hovering a DNO region never shifts the map below it -
   text only, no box/background (see .dno-hover-area/-operator). Flex
   column, not margin-top on the operator line: when both lines are empty
   (nothing hovered), an empty div's margin can collapse straight through
   its empty, borderless, paddingless parent and escape this box entirely
   - even with an explicit height set - shifting everything below by that
   margin. Flex children never collapse margins, so gap is used instead. */
.dno-hover-label {
  height: 34px;
  margin-bottom: 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}
.dno-hover-area { font: 600 13px var(--sans); color: var(--ink); }
.dno-hover-operator { font: 400 12px var(--sans); color: var(--grey-muted); }

.asset-info-panel {
  margin-bottom: 8px;
  padding: 0 16px;
  transition: opacity 0.11s ease, background-color 0.15s ease;
  /* Fixed, not min-height: the empty and populated states have very
     different content heights, and if the box itself resized between
     them it would shift the map/charts below it under a stationary
     cursor - flipping mouseout/mouseover on whatever point ends up
     under the pointer and looping forever. Height must stay constant
     regardless of which state is showing. */
  height: 206px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.asset-info-panel:not(:has(.asset-info-name)) {
  align-items: center;
  justify-content: center;
  background: rgba(76, 12, 64, 0.035);
}
.asset-info-empty {
  font: 400 13px var(--sans);
  color: var(--grey-muted);
  text-align: center;
}
.asset-info-empty strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--ink);
}
.asset-info-name {
  border-top: 1px solid var(--plum);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0 13px;
  font: 400 16px var(--serif);
  color: var(--plum);
}
.asset-info-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.asset-info-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font: 400 12px var(--sans);
  color: var(--ink-soft);
}
.asset-info-row span:first-child { color: var(--grey-muted); }
.asset-info-flag {
  border-top: 1px solid var(--rule-light);
  padding-top: 9px;
  font: 400 10.5px var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 12px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: none;
  cursor: pointer;
  font: 400 13px var(--sans);
  color: var(--ink-soft);
  transition: border-color 0.12s, opacity 0.12s;
}
.legend-item:hover { border-color: var(--plum-tint); }
.legend-item.inactive { opacity: 0.35; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.legend-count { color: var(--grey-muted); }

/* Colour key only, not a filter - see the flag .legend-item buttons above
   for the actual (always flag-based) filtering. Boxless/compact: this is a
   colour reference, not another row of clickable controls. */
.oem-legend-row {
  gap: 6px 18px;
  margin-top: 8px;
  /* visibility, not display:none - toggled by charts.js setColorMode().
     Always keeps its rendered height reserved so switching "Colour by"
     never reflows the panel/charts/map below it. */
  visibility: hidden;
}
.oem-legend-row.is-active { visibility: visible; }
.legend-item-static {
  padding: 0;
  border: none;
  cursor: default;
  font-size: 12px;
}

/* Hollowed out while colouring by OEM, to signal the dots no longer match
   what's on the chart - the buttons stay full-colour and clickable as
   filters (see flag-legend-row in charts.js), only the swatch empties out. */
.flag-legend-row.color-inactive .legend-dot {
  background: none !important;
  border: 1.5px solid var(--grey-muted);
}

.color-by-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 4px;
}
.color-by-label {
  font: 400 12px var(--sans);
  letter-spacing: 0.04em;
  color: var(--grey-muted);
}
.color-by-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--rule);
  background: var(--paper) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" stroke="%23706864" stroke-width="1.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 11px center;
  background-size: 9px 6px;
  cursor: pointer;
  font: 400 13px var(--sans);
  line-height: 1.2;
  color: var(--ink-soft);
  transition: border-color 0.12s;
}
.color-by-select:hover, .color-by-select:focus { border-color: var(--plum-tint); }
.color-by-select:focus { outline: none; }

/* Named layouts - a small fixed vocabulary every content.md picks from
   (see LAYOUT_SLOTS in manalysis/_shared/content_parser.py) rather than
   one-off per-piece grids. The template just emits N .layout-item cells
   in order; these rules place them. */
.layout-grid {
  display: grid;
  gap: clamp(24px, 3.5vw, 40px);
  margin-top: clamp(20px, 3vw, 28px);
  align-items: start;
}
.layout-item { min-width: 0; }
.layout-item .chart-block:first-child { margin-top: 0; }

.layout-single { grid-template-columns: 1fr; }
.layout-two { grid-template-columns: 1fr 1fr; }
.layout-three { grid-template-columns: 1fr 1fr 1fr; }
.layout-four_grid { grid-template-columns: 1fr 1fr; }

.layout-two_one,
.layout-one_two {
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
  /* Tighter than the shared .layout-grid default - the stacked column's
     row gap directly sets how tall that column is, which (see
     sizeMapToMatchColumn in charts.js) is also what the paired map gets
     sized to, so less gap here means a shorter column AND a shorter map. */
  gap: clamp(8px, 1.2vw, 12px);
}

/* two_one: two items stacked left, one spanning right. one_two: mirrored -
   one spanning left, two stacked right. The spanning cell stays visible
   while its taller sibling column scrolls past it. */
.layout-two_one .layout-item:nth-child(1) { grid-column: 1; grid-row: 1; }
.layout-two_one .layout-item:nth-child(2) { grid-column: 1; grid-row: 2; }
.layout-two_one .layout-item:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 24px; }

.layout-one_two .layout-item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 24px; }
.layout-one_two .layout-item:nth-child(2) { grid-column: 2; grid-row: 1; }
.layout-one_two .layout-item:nth-child(3) { grid-column: 2; grid-row: 2; }

/* A legend's filter/colour-by controls and its hover/click info panel,
   when it precedes a two_one layout, render as extra .layout-items
   instead of a full-width block (see _content_block_item.html) - the
   controls span both columns as their own top row. Below that, each
   column is its own flex column (.layout-col), not a shared grid row per
   item - the panel is much shorter than a chart, and pairing it with one
   in the same grid row would force that row (and the empty space around
   the panel) to the chart's full height. sizeMapToMatchColumn (charts.js)
   sizes the map to match the chart column's total height, measuring from
   wherever the map item's own top actually lands (below the panel above
   it in its own flex column) - so it doesn't need to know about the
   controls row, or this column structure, at all. */
/* Narrower right column than the plain 1fr 1fr split - GB's portrait
   aspect ratio means the map, height-matched to the chart column (see
   sizeMapToMatchColumn in charts.js), only ever needs a fraction of an
   equal-width column - the rest was empty space either side of it
   (centred by .map-fit-height). A ~3:1 split gives the map roughly the
   width it actually wants, and the chart column the width back. */
.layout-two_one.has-panel { grid-template-rows: auto auto; grid-template-columns: 2fr 1fr; }
.layout-two_one.has-panel .layout-item-controls { grid-column: 1 / -1; grid-row: 1; }
.layout-two_one.has-panel .layout-col {
  grid-row: 2; min-width: 0;
  display: flex; flex-direction: column; gap: clamp(8px, 1.2vw, 12px);
}
.layout-two_one.has-panel .layout-col-charts { grid-column: 1; }
.layout-two_one.has-panel .layout-col-map { grid-column: 2; }

@media (max-width: 720px) {
  .layout-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
  .layout-grid .layout-item,
  .layout-grid .layout-col { grid-column: 1 !important; grid-row: auto !important; position: static !important; }
}

.data-table-wrap { margin-top: clamp(28px, 4vw, 40px); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.data-table th {
  text-align: left;
  padding: 10px 16px 10px 0;
  white-space: nowrap;
  border-top: 1px solid var(--plum);
  border-bottom: 1px solid var(--rule);
  font: 400 10.5px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--plum);
}
.data-table td {
  padding: 9px 16px 9px 0;
  border-bottom: 1px solid var(--rule-light);
  color: var(--ink-soft);
}
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover,
.data-table tbody tr.hovered { background: var(--rule-light); }
.data-table tbody tr.selected { background: var(--plum-wash); }

/* ---- Asset viewer: sortable table + drill-down detail panel (chart_type
   "asset_viewer", see charts.js drawAssetViewer). Reuses .data-table's row
   conventions for its own table; the detail panel's Asset/Financial/
   Location columns are each a plain vertical stack (not a 2-col grid), so
   row breaks never depend on value length. No semantic red/amber/green -
   this site's palette is plum/ink/grey only (see :root) - so the
   generation-headroom RAG state is conveyed by dot fill density
   (solid/tinted/hollow) plus its text label, not by hue. */
.asset-viewer {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 32px); margin-top: clamp(12px, 2vw, 20px); align-items: start;
}
@media (max-width: 760px) { .asset-viewer { grid-template-columns: 1fr; } }

/* Fixed (not max-) height, generous enough to match the tallest detail
   panel (an asset with both generation and demand headroom populated) -
   so switching between a "full" and a "sparse" asset never grows/shrinks
   the overall block height and makes the page jump under the cursor. */
.av-table-wrap { height: 720px; overflow-y: auto; overflow-x: hidden; border-top: 1px solid var(--plum); }
.av-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; }
.av-table th:nth-child(1) { width: 34%; }
.av-table th:nth-child(2) { width: 29%; }
.av-table th:nth-child(3) { width: 37%; }
.av-table th {
  position: sticky; top: 0; background: var(--paper); text-align: left;
  padding: 9px 10px 9px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--rule);
  font: 400 11px var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--plum); cursor: pointer; user-select: none;
}
.av-table th.num { text-align: right; }
.av-arrow { margin-left: 4px; }
.av-arrow svg { fill: var(--grey-muted); vertical-align: 1px; }
.av-table td {
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-light); color: var(--ink-soft); font-size: 15px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--plum); }
.av-table tbody tr { cursor: pointer; }
.av-table tbody tr:hover, .av-table tbody tr.hovered { background: var(--rule-light); }
.av-table tbody tr.selected { background: var(--plum-wash); }

.av-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.av-detail-name { font: 400 26px var(--serif); color: var(--plum); margin: 0 0 4px; }

.av-pctile-row { display: flex; gap: 8px; flex: none; }
.av-pctile-card { border: 1px solid var(--rule); padding: 7px 14px; display: flex; align-items: center; gap: 9px; }
.av-pctile-num { font: 400 22px var(--serif); color: var(--plum); line-height: 1; }
.av-pctile-text { display: flex; flex-direction: column; gap: 1px; }
.av-pctile-cap {
  font: 400 10.5px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-muted); white-space: nowrap;
}
.av-pctile-val { font: 400 14px var(--serif); color: var(--ink-soft); }

.av-grid {
  display: grid; grid-template-columns: 1.1fr 1.1fr 0.7fr;
  gap: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--rule-light); margin-bottom: 18px;
}
@media (max-width: 620px) { .av-grid { grid-template-columns: 1fr 1fr; } }
.av-section-title {
  font: 500 13px var(--sans); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 9px;
}
.av-col { display: flex; flex-direction: column; gap: 11px; }
.av-item-label {
  font: 400 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-muted); margin-bottom: 2px;
}
.av-item-value { font: 400 16px var(--serif); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.av-item-value.dash { color: var(--grey-muted); font-style: italic; font-size: 14px; }

.av-map-wrap { display: flex; justify-content: center; }
.av-map-wrap svg { width: 100%; max-width: 88px; height: auto; }
.av-flow-title {
  font: 400 11px var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--grey-muted); text-align: center; margin-top: 14px;
}
.av-flow-row { display: flex; align-items: flex-start; justify-content: center; margin-top: 6px; gap: 4px; }
.av-flow-item { display: flex; flex-direction: column; align-items: center; width: 62px; }
.av-flow-tier {
  font: 400 10.5px var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--plum-tint); margin-bottom: 2px;
}
.av-flow-item.placeholder .av-flow-tier { color: var(--grey-muted); }
.av-flow-name {
  font: 400 13.5px var(--serif); color: var(--ink-soft); text-align: center;
  white-space: normal; word-break: break-word; line-height: 1.25;
}
.av-flow-item.placeholder .av-flow-name { color: var(--grey-muted); font-style: italic; font-size: 12.5px; }
/* short line joining the two connection points (replaces an arrow glyph) */
.av-flow-link { flex: none; width: 14px; margin-top: 24px; border-top: 1px solid var(--grey-light); }

.av-subsection { margin-bottom: 18px; }
/* Generation/Demand headroom titles are direct children of .av-subsection -
   the Asset/Financial/Location column headers above use the same
   .av-section-title class but sit one level deeper (inside .av-grid's
   column divs), so this doesn't touch those. */
.av-subsection > .av-section-title { font-size: 17px; }
/* Same divider .av-grid already has on its own border-bottom (the line
   above "Generation headroom"), applied between subsections too. */
.av-subsection + .av-subsection { padding-top: 18px; border-top: 1px solid var(--rule-light); }
.av-rag-row { display: flex; align-items: center; gap: 9px; font: 400 17px var(--serif); color: var(--ink-soft); margin-bottom: 4px; }
.av-rag-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.av-rag-dot.constrained { background: var(--plum); }
.av-rag-dot.moderate { background: var(--plum-tint); }
.av-rag-dot.available { background: none; border: 1px solid var(--plum); }
.av-rag-dot.unknown { background: none; border: 1px solid var(--grey-light); }
.av-note { font: 400 12.5px var(--sans); color: var(--grey-muted); margin: 5px 0 0; }
.av-empty { font: 400 14px var(--serif); font-style: italic; color: var(--grey-muted); padding: 6px 0; }
.av-headroom-caption { font: 400 13px var(--sans); color: var(--grey-muted); margin-top: 6px; }
.av-headroom-caption strong { color: var(--ink-soft); font-weight: 500; }

/* ---- Grid headroom shortlist (card stack + linked mini map) ---- */

.gh-block { display: flex; gap: 24px; align-items: flex-start; }
.gh-cards { flex: 0 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.gh-map-col { flex: 0 0 235px; max-width: 100%; position: sticky; top: 16px; }
.gh-map-col svg { width: 100%; height: auto; }
@media (max-width: 900px) {
  .gh-block { flex-wrap: wrap; }
  .gh-cards { flex: 1 1 300px; }
  .gh-map-col { flex: 1 1 100%; position: static; order: 3; }
}
@media (max-width: 520px) {
  .gh-cards { flex-basis: 100%; }
}

.gh-card {
  border: 1px solid var(--rule);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out;
}
.gh-card:hover, .gh-card.hovered { border-color: var(--plum); box-shadow: 0 0 0 1px var(--plum); }
.gh-card.selected { border-color: var(--plum); box-shadow: 0 0 0 2px var(--plum); }

.gh-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.gh-card-name { font: 400 18px var(--serif); color: var(--plum); }
.gh-card-capacity { font: 400 13px var(--serif); color: var(--grey-muted); white-space: nowrap; }
.gh-card-loc { font: 400 10.5px var(--sans); letter-spacing: 0.04em; color: var(--grey-muted); white-space: nowrap; }

.gh-tags-label { font: 400 10px var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-muted); }
.gh-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-tag {
  display: inline-flex; align-items: center;
  font: 400 11px var(--sans); letter-spacing: 0.02em;
  padding: 4px 10px; border-radius: 20px; background: var(--plum-wash);
  color: var(--plum);
}

.gh-sub-row { font: 400 12px var(--sans); color: var(--grey-muted); padding-top: 2px; border-top: 1px solid var(--rule-light); }
.gh-sub-row strong { color: var(--ink-soft); font-weight: 500; }

/* ---- Research (handoff v2): hero, Notes, Data, access band ---- */

.research-hero { max-width: 760px; padding: clamp(24px, 3.4vw, 40px) 0 clamp(36px, 5vw, 60px); }
.h1-lg { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.25; }
.research-hero .lead { margin-top: clamp(20px, 2.8vw, 28px); }
.hero-links { display: flex; flex-wrap: wrap; gap: 14px 32px; margin-top: 28px; }
.hero-links .cta-link { font-size: 12.5px; }

.research-section { padding-bottom: clamp(48px, 7vw, 88px); scroll-margin-top: 24px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--plum); }
.section-head h2 { margin: 0; font: 400 13px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum); }
.section-head span { font: 300 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey-muted); }

.note-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 300 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: #6E6664; }
.note-meta .topic { color: var(--plum); }
.note-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(24px, 4vw, 48px); padding: clamp(28px, 4vw, 40px) 0; border-bottom: 1px solid var(--rule); }
.note-featured h3 { margin: 14px 0 0; font-weight: 400; font-size: clamp(24px, 3vw, 30px); line-height: 1.25; text-wrap: pretty; }
.note-featured p { margin: 16px 0 0; font-size: 19px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.note-featured .cta-link.small { margin-top: 20px; font-size: 12px; letter-spacing: 0.16em; padding-bottom: 4px; }
.note-featured-img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; }
.note-row { display: flex; flex-wrap: wrap; gap: 8px 40px; padding: clamp(20px, 2.8vw, 28px) 0; border-bottom: 1px solid var(--rule); }
.note-meta.col { flex: 0 0 150px; flex-direction: column; gap: 8px; padding-top: 4px; }
.note-body { flex: 1 1 340px; }
.note-body h3 { margin: 0; font-weight: 400; font-size: clamp(20px, 2.4vw, 23px); line-height: 1.3; text-wrap: pretty; }
.note-body h3 a { color: var(--ink); }
.note-body h3 a:hover { color: var(--plum); }
.note-body p { margin: 10px 0 0; font-size: 18px; line-height: 1.6; color: var(--grey-text); max-width: 62ch; text-wrap: pretty; }
.empty-notes { padding-top: clamp(24px, 3.5vw, 34px); }

.data-intro { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px clamp(24px, 4vw, 48px); padding-top: clamp(28px, 4vw, 40px); }
.data-name { display: flex; align-items: baseline; gap: 14px; }
.data-name h3 { margin: 0; font-weight: 400; font-size: clamp(28px, 3.4vw, 36px); color: var(--plum); }
.data-name span { font: 400 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--plum); }
.data-sub { margin-top: 8px; font-size: 19px; color: var(--grey-text); }
.data-intro p { margin: 0; font-size: 18px; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }
.shot { width: 100%; border: 1px solid var(--rule); background: #FCFCFC; }
.shot-hero { aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; margin-top: clamp(24px, 3.4vw, 36px); }
.shot-feature { aspect-ratio: 4 / 3; object-fit: cover; object-position: top left; }
/* a feature screenshot is a button: click to see it full size in .shot-view */
.shot-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.shot-open img { display: block; transition: border-color .15s; }
.shot-open:hover img, .shot-open:focus-visible img { border-color: var(--plum-tint); }
.shot-open:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.shot-view { max-width: min(1400px, calc(100vw - 48px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--rule); background: #FFFFFF;
  box-shadow: 0 24px 60px rgba(32, 28, 28, .3); cursor: zoom-out; overflow: hidden; }
.shot-view::backdrop { background: rgba(32, 28, 28, .55); }
.shot-view img { display: block; max-width: 100%; max-height: calc(100vh - 50px); width: auto; height: auto; }
.shot-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: #FFFFFF; color: var(--ink); cursor: pointer; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(24px, 3.4vw, 36px); }
.feature-name { margin-top: 16px; font: 400 12px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum); }
.feature-grid p { margin: 8px 0 0; font-size: 17px; line-height: 1.55; color: var(--grey-text); text-wrap: pretty; }
.coverage { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 28px; }
.coverage span { font: 400 12px var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); border: 1px solid #C9C1C6; padding: 6px 11px; }

.access-band { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; padding: clamp(28px, 4vw, 40px) 0; border-top: 1px solid var(--plum); border-bottom: 1px solid var(--rule); }
.access-title { font-size: clamp(21px, 2.6vw, 26px); color: var(--plum); }
.access-sub { margin-top: 6px; font-size: 18px; color: var(--grey-text); }
.access-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-solid, .btn-line { display: inline-flex; align-items: center; height: 48px; padding: 0 24px; font: 500 12.5px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.btn-solid { background: var(--plum); color: #FFFFFF; }
.btn-solid:hover { background: #3A0931; color: #FFFFFF; }
.btn-ext { gap: 9px; }                  /* opens in a new window: drawn icon after the label */
.btn-ext svg { flex: none; margin-top: -1px; }
.btn-line { border: 1px solid var(--plum-tint); color: var(--plum); }
.btn-line:hover { border-color: var(--plum); color: var(--plum); }

/* ---- Account pages (django-allauth) ---- */
/* allauth renders its form fields via Django's plain form.as_p(), so these
   are scoped, generic element selectors rather than custom classes. */

.site-messages {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
}
.site-messages li {
  font: 400 16.5px var(--serif);
  color: var(--ink-soft);
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

main.account {
  max-width: 500px;
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(36px, 6vw, 72px);
}
main.account form { margin-top: clamp(24px, 3.5vw, 34px); }
main.account form p { margin: 20px 0 0; }
main.account form p:first-child { margin-top: 0; }

main.account label {
  display: block;
  font: 400 11px var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-muted);
}

/* Checkbox fields (e.g. the terms acceptance): box first, label beside it.
   Django renders <label> then <input> inside the <p>, so reverse the row. */
main.account p:has(> input[type="checkbox"]) { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 10px; }
main.account p:has(> input[type="checkbox"]) label { margin: 0; }
main.account input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--plum); flex: none; }

main.account input[type="text"],
main.account input[type="email"],
main.account input[type="password"],
main.account input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 6px;
  font: 400 17px var(--serif);
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 8px 0;
  outline: none;
}
main.account input[type="text"]:focus,
main.account input[type="email"]:focus,
main.account input[type="password"]:focus,
main.account input[type="number"]:focus {
  border-bottom-color: var(--plum);
}

main.account input[type="checkbox"],
main.account input[type="radio"] {
  width: auto;
  margin-right: 8px;
}

main.account ul.errorlist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  color: #B03A2E;
  font: 400 13px var(--sans);
  letter-spacing: 0.02em;
}

main.account .helptext {
  display: block;
  margin-top: 6px;
  font-size: 14.5px;
  color: var(--grey-muted);
}

main.account button.cta-link {
  background: none;
  border: none;
  border-bottom: 1px solid var(--plum-tint);
  padding: 0 0 5px;
  cursor: pointer;
  font: inherit;
}
main.account a.cta-link { margin-top: 16px; }