/* Link affordance: one pill, one hover, one arrow turned four ways.
   ------------------------------------------------------------------
   Every standalone link control in the archive resolves to this component,
   so that a reader who learns the shape once on the Timeline can read it
   without relearning it on Money or on Claims-makers. The sign is a single
   arrow drawn at four angles, because a reader tracks one rotating form
   more easily than four separate marks.

     data-link-kind="up"        a target earlier in this same page
     data-link-kind="down"      a target later in this same page
     data-link-kind="chapter"   another page inside the archive
     data-link-kind="external"  a source outside the archive
     data-link-kind="page"      a target this chapter has not mounted yet

   `link-affordance.js` stamps the attribute, since the direction of a
   same-page link is a fact about document order rather than about markup,
   and since several chapters compose their link controls at render time.
   Should the script never run, the unstamped default is the chapter arrow,
   which is the commonest case and which never points a reader wrongly on a
   page they have already reached.

   The four marks are four masks rather than one mask under a CSS rotation.
   A rotation would need an atomic inline box, and an atomic box set after a
   word in running prose may wrap onto the next line without it, which leaves
   an arrow stranded at the head of a line. The inline sign is therefore an
   ordinary inline run opening on a no-break space, and it stays with the
   words it belongs to. */

:where(:root) {
  --mhc-chapter-field: var(--mhc-accent, #f26419);
  --mhc-link-ease: cubic-bezier(.22, 1, .36, 1);
  --mhc-link-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --mhc-link-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' transform='rotate(-90 10 10)'/%3E%3C/svg%3E");
  --mhc-link-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' transform='rotate(90 10 10)'/%3E%3C/svg%3E");
  --mhc-link-arrow-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13m-5-5 5 5-5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' transform='rotate(-45 10 10)'/%3E%3C/svg%3E");
}

/* The directional sign is the archive's link marker. This shared rule also
   covers linked headings and labels whose chapter styles draw an underline
   only on hover. Row separators and control borders remain structural. */
a[href], a[href] * {
  text-decoration: none !important;
}
a[href]:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
}
:is(a.mhc-link-inline, a.inline-xref, a.chapter-xref, a.srclink)[href],
.owg-ml a[href] {
  border-bottom: 0 !important;
}

/* The destination chooses the mark and the direction of its hover travel.
   Both are held on the link, so that one declaration turns a whole control. */
:where(.mhc-link, .mhc-link-inline, .mhc-link-row,
    .inline-xref[href], .chapter-xref[href], .srclink[href], .xref-link[href],
    .source-cite[href], .profile-evidence-link[href], .profile-relation[href], .search-result[href]) {
  --mhc-link-sign: var(--mhc-link-arrow-right);
  --mhc-link-glyph: '\00a0→';
  --mhc-link-glyph-rise: .09em;
  --mhc-link-angle: 0deg;
  --mhc-link-nudge: translateX(3px);
  --mhc-link-field: var(--mhc-chapter-field);
}
[data-link-kind="up"] { --mhc-link-sign: var(--mhc-link-arrow-up); --mhc-link-glyph: '\00a0↑'; --mhc-link-glyph-rise: .12em; --mhc-link-angle: -90deg; --mhc-link-nudge: translateY(-3px); }
[data-link-kind="down"] { --mhc-link-sign: var(--mhc-link-arrow-down); --mhc-link-glyph: '\00a0↓'; --mhc-link-glyph-rise: .12em; --mhc-link-angle: 90deg; --mhc-link-nudge: translateY(3px); }
[data-link-kind="external"] { --mhc-link-sign: var(--mhc-link-arrow-out); --mhc-link-glyph: '\00a0↗'; --mhc-link-glyph-rise: 0em; --mhc-link-angle: -45deg; --mhc-link-nudge: translate(2.1px, -2.1px); }

/* ---- the pill --------------------------------------------------------- */

/* Shape, size and typography belong to the shared component. Evidence
   references use the archive's 13px supporting tier, regardless of the prose
   around them. Inline citations and linked records keep their own hierarchy. */
/* ---- three sizes, and only three ---------------------------------------

   The archive drifted to nine button heights, one per chapter, which read as
   nine different components rather than one. The scale is therefore stated
   here rather than in the chapters: medium is the button, small is a chip
   inside a register or a control panel, and large is a section's own call to
   enter the next movement. A chapter chooses a step by joining one of the
   two lists below; it does not invent a fourth height.

   Every step carries no specificity, so a chapter that genuinely needs a
   deviation can still state one without reaching for `!important`. */

:where(.mhc-link) {
  --mhc-link-height: 44px;
  --mhc-link-pad-y: 10px;
  --mhc-link-pad-x: 18px;
  --mhc-link-gap: 14px;
  --mhc-link-sign-size: .92em;
  --mhc-link-font-size: 13px;
}

/* Small: a chip that sits inside a denser surface and must stay subordinate
   to the reading it annotates. */
:where(.mhc-link-sm,
       .ap-xr,
       .chapter-ref,
       .frame-source-links .xref,
       .context-timeline a,
       .context-source) {
  --mhc-link-height: 32px;
  --mhc-link-pad-y: 5px;
  --mhc-link-pad-x: 12px;
  --mhc-link-gap: 8px;
}

/* Large: the one control that carries a reader from one movement to the
   next, and the credit action that closes an image row. */
:where(.mhc-link-lg,
       .text-advance,
       .frame-table-primer-enter,
       .constellation-primer-enter,
       .source-action) {
  --mhc-link-height: 56px;
  --mhc-link-font-size: 15px;
  --mhc-link-pad-y: 14px;
  --mhc-link-pad-x: 22px;
  --mhc-link-gap: 18px;
}

.mhc-link {
  font: 400 var(--mhc-link-font-size, 13px)/1.35 var(--mhc-font-sans, Helvetica, Arial, sans-serif);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--mhc-link-gap);
  width: fit-content;
  max-width: 100%;
  min-height: var(--mhc-link-height);
  box-sizing: border-box;
  padding: var(--mhc-link-pad-y) var(--mhc-link-pad-x);
  border: 1px solid var(--mhc-hairline-soft, rgba(16, 17, 15, .12));
  border-radius: 999px;
  background: color-mix(in srgb, var(--mhc-link-field) 15%, transparent);
  color: inherit;
  text-align: left;
  text-decoration: none;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    transform .3s var(--mhc-link-ease);
}

.mhc-link::after {
  content: '';
  flex: none;
  width: var(--mhc-link-sign-size);
  height: var(--mhc-link-sign-size);
  background: currentColor;
  mask: var(--mhc-link-sign) center / contain no-repeat;
  -webkit-mask: var(--mhc-link-sign) center / contain no-repeat;
  transition: transform .32s var(--mhc-link-ease);
}

/* The mark is pushed to the trailing edge only where the label and the sign
   are the whole of the control. A control carrying its own trailing
   furniture opts out with `data-link-arrow="inline"`. */
.mhc-link:not([data-link-arrow="inline"])::after { margin-left: auto; }

.mhc-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--mhc-link-field) 34%, transparent);
  border-color: var(--mhc-on-plate, currentColor);
  transform: translateY(-2px);
}

/* One hover motion for every kind: the arrow travels along its own axis, so
   an upward link lifts, a downward link falls, and an outward link leaves at
   the corner. */
.mhc-link:is(:hover, :focus-visible)::after { transform: var(--mhc-link-nudge); }
.mhc-link:active { transform: translateY(0) scale(.98); }
.mhc-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---- the sign alone, in running prose --------------------------------- */

/* The component carries its own ink, for the same reason the pill above does.
   An inline link that states no color is left to the user agent, which paints
   it #0000ee on paper and #9e9eff on black, and those are the only two colors
   in the archive that belong to no chapter and answer to no token. A page that
   happens to declare an anchor color of its own was hiding that, so the rule
   sits on the component rather than on the pages that had remembered it. The
   affordance is the directional mark, which is what the reader learns
   once and then recognises on every surface. */
.mhc-link-inline,
:is(.inline-xref, .chapter-xref, .srclink)[href] {
  color: inherit;
}

/* An ordinary inline run opening on a no-break space, so that the mark
   cannot be carried to the next line without the words it belongs to.

   The mark is smaller than the words it follows, and a smaller glyph left on
   their baseline sits low, which under a display heading put the arrow at the
   foot of the line. It is therefore centred on the x-height of the link it
   closes, which is where a full-size arrow in the reading face already sits.
   `middle` places the centre of the glyph's own box there, and since the four
   arrows are drawn by fonts whose ink centres differ from that box, each kind
   states the small rise that brings its ink to the same line. The run takes no
   line height of its own, so a raised mark never opens a gap between two lines
   of prose. */
.mhc-link-inline::after,
:is(.inline-xref, .chapter-xref, .srclink)[href]::after {
  content: var(--mhc-link-glyph, '\00a0→');
  padding: 0;
  background: none;
  mask: none;
  -webkit-mask: none;
  font-size: .75em;
  line-height: 0;
  vertical-align: middle;
  position: relative;
  top: calc(-1 * var(--mhc-link-glyph-rise, .09em));
}

/* Heading and credit references keep the sign too. Cap it so a large title
   cannot turn a small reference mark into another display-size character. */
:is(h1, h2, h3, h4, h5, h6, .record-source, .rec-source, .source-caption, figcaption)
  :is(.mhc-link-inline, .inline-xref, .chapter-xref, .srclink)[href]::after {
  font-size: min(.75em, 14px);
}

/* ---- the sign alone, on a full-width row ------------------------------ */

/* A record row, a bibliography line, a relationship row. These already read
   as controls, so they take the mark rather than a second surface, and it is
   set against the trailing edge so that a row built on its own grid does not
   gain a column it did not plan for. */
.mhc-link-row,
:is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href] {
  position: relative;
}
.mhc-link-row::after,
:is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href]::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: currentColor;
  mask: var(--mhc-link-sign) center / contain no-repeat;
  -webkit-mask: var(--mhc-link-sign) center / contain no-repeat;
  opacity: .58;
  transition: transform .32s var(--mhc-link-ease), opacity .25s ease;
}
.mhc-link-row:is(:hover, :focus-visible)::after,
:is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href]:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: var(--mhc-link-nudge);
}

/* ---- a set of buttons shares one width -------------------------------

   A button on its own hugs its label, because a short label inside a wide
   pill reads as a mistake. A button standing with others does not: a card
   whose references each stop at a different place presents a ragged edge
   where it should present one. Members of a set therefore grow equally from
   a common basis, and the set still wraps on a narrow screen, since these
   containers already lay themselves out as wrapping rows. */
:where(.beat-links,
       .spending-related,
       .context-timeline,
       .spending-policy nav,
       .chapter-refs,
       .frame-source-links,
       .historic-source-list,
       .mhc-link-set) > .mhc-link {
  flex: 1 1 var(--mhc-link-set-basis, 170px);
  width: auto;
  min-width: 0;
  /* A set inside a wide column would otherwise grow its members to half the
     column, which turns a reference into a banner. */
  max-width: var(--mhc-link-set-max, 340px);
}

/* ---- a label that runs to several lines is not a pill ----------------

   The stadium radius is a statement about a single line of text. Put four
   lines of a record title inside it and it reads as a lozenge, which is what
   the Frames register became when its supporting records joined the
   component. Such a control keeps the surface, the hover and the sign, and
   takes a card radius instead. Its members match heights as well as widths,
   because a row of cards each stopping at a different depth is the ragged
   edge again, turned through ninety degrees. Nothing here caps the width:
   the narrower these are, the more they wrap, and the wrapping is the
   problem. */
:where(.frame-source-links) { align-items: stretch; }

.mhc-link-card,
:where(.frame-source-links) > .mhc-link {
  --mhc-link-pad-y: 9px;
  --mhc-link-pad-x: 14px;
  align-items: flex-start;
  border-radius: 16px;
  /* Wider than the general cap, because narrowness is what made these wrap
     to four lines, and still bounded, because a reference filling a whole
     panel stops being a reference. */
  max-width: var(--mhc-link-set-max, 420px);
}
.mhc-link-card::after,
:where(.frame-source-links) > .mhc-link::after { margin-top: .18em; }

/* The image credits lay one action per row in a grid track. A lone button
   would hug its label and leave each row stopping at a different place, so
   it takes the track it was given. */
:where(.source-actions) > .mhc-link {
  width: auto;
  max-width: none;
}

/* Money's supporting records carry a Timeline reference and a source on
   separate rows of the same card, so they take the card's own width and
   close on one edge rather than two. */
:where(.support-record) :is(.context-timeline a, .context-source) {
  flex-basis: 100%;
  width: 100%;
  max-width: none;
}

/* A link into this page whose target has not been mounted yet: no direction
   is known, so none is drawn. `link-affordance.js` clears the state as soon
   as the target appears. */
[href][data-link-kind="page"]::after { content: none; }
[data-link-kind="page"] .search-result-arrow { visibility: hidden; }

/* ---- chapter tint ----------------------------------------------------- */

/* The pill carries its chapter's field color, so that the component is one
   shape everywhere while a reader still sees which room they are standing
   in. The key is the chapter the document declares on its root, and the
   route container declares its own on the body once a chapter opens. */
:root[data-scrollbar-chapter="timeline"] { --mhc-chapter-field: var(--mhc-chapter-timeline-field); }
:root[data-scrollbar-chapter="measurement"] { --mhc-chapter-field: var(--mhc-chapter-measurement-field); }
:root[data-scrollbar-chapter="claims-makers"] { --mhc-chapter-field: var(--mhc-chapter-claims-field); }
:root[data-scrollbar-chapter="money"] { --mhc-chapter-field: var(--mhc-chapter-money-field); }
:root[data-scrollbar-chapter="sources"] { --mhc-chapter-field: var(--mhc-chapter-sources-field); }
:root[data-scrollbar-chapter="methodology"] { --mhc-chapter-field: var(--mhc-chapter-method-field); }
body[data-chapter="frames"] { --mhc-chapter-field: var(--mhc-chapter-frames-field); }
body[data-chapter="summary"] { --mhc-chapter-field: var(--mhc-chapter-summary-field); }
body[data-chapter="about"] { --mhc-chapter-field: var(--mhc-chapter-about-field); }

@media (max-width: 600px) {
  :where(.mhc-link) { --mhc-link-gap: 10px; --mhc-link-pad-x: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .mhc-link,
  .mhc-link::after,
  .mhc-link-row::after,
  :is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href]::after { transition: none; }
  .mhc-link:is(:hover, :focus-visible) { transform: none; }
  .mhc-link:is(:hover, :focus-visible)::after,
  .mhc-link-row:is(:hover, :focus-visible)::after,
  :is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href]:is(:hover, :focus-visible)::after { transform: none; }
}

/* A masked sign is painted by its background, so it takes the link color
   there. The inline sign is a glyph, which forced colors already inks; a
   background behind it would fill the run and leave a solid block where the
   arrow should be. */
@media (forced-colors: active) {
  .mhc-link { border-color: LinkText; }
  .mhc-link::after,
  .mhc-link-row::after,
  :is(.xref-link, .source-cite, .profile-evidence-link, .profile-relation)[href]::after { background: LinkText; }
}

/* Evidence controls are one typographic tier across authored and dynamic
   surfaces. Separate metadata spans and full linked rows retain their type. */
.mhc-link.mhc-link-ref,
.mhc-link.inspector-source,
.mhc-link.text-link,
#sec-method a.mhc-link.ap-xr,
.institution-actions a.mhc-link,
.historic-source-list a.mhc-link,
#sec-summary a.chapter-ref,
#timeline .record-card a.source-link {
  font: 400 13px/1.35 var(--mhc-font-sans, Helvetica, Arial, sans-serif);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

/* ---- the destination window ------------------------------------------

   The arrow above tells a reader that a link leaves this page. It does not
   tell them where the link lands, and in the Timeline's record prose a
   cross-reference is usually a person's name rather than a chapter's, so a
   reader who followed one arrived somewhere they had not been told they were
   going. On hover and on keyboard focus an in-text link to another chapter
   therefore names its destination, in the archive's own terms: the chapter's
   number and title, and, where the link carries an actor card, the profile
   it opens on a second line.

   The window is one floating element held on the body rather than a pseudo
   element on the link, for two reasons. A record card clips its own overflow,
   so a panel drawn inside the prose would be cut off at the card's edge; and
   an inline link that wraps across a line break has two boxes rather than
   one, which a pseudo element has no way to choose between.

   `link-affordance.js` composes it and places it. It is never shown for a
   touch, so the first tap on a phone opens the link it was aimed at rather
   than being spent on a panel the reader did not ask for. */

.mhc-link-destination {
  position: fixed;
  z-index: 1030;
  left: var(--mhc-destination-x, 0px);
  top: var(--mhc-destination-y, 0px);
  display: grid;
  gap: 3px;
  justify-items: start;
  max-width: min(260px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid var(--elastic-glass-edge, color-mix(in srgb, var(--mhc-ink) 22%, transparent));
  border-radius: 12px;
  background: var(--elastic-glass-surface,
    linear-gradient(135deg, rgba(var(--mhc-float-rgb), .9), rgba(var(--mhc-float-rgb), .66)));
  color: var(--mhc-on-plate, var(--mhc-ink));
  box-shadow: var(--elastic-glass-shadow, 0 18px 44px rgba(var(--mhc-shadow-rgb), .18));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -100%) translateY(4px);
  transition:
    opacity .16s ease,
    transform .24s var(--mhc-link-ease),
    visibility 0s linear .24s;
}

/* Below the link, for a link close enough to the top of the viewport that the
   window would otherwise be drawn off the screen. */
.mhc-link-destination[data-destination-place="below"] { transform: translate(-50%, 0) translateY(-4px); }

.mhc-link-destination[data-destination-shown] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -100%);
  transition: opacity .16s ease, transform .24s var(--mhc-link-ease), visibility 0s;
}
.mhc-link-destination[data-destination-shown][data-destination-place="below"] { transform: translate(-50%, 0); }

.mhc-link-destination__chapter {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}

/* The chapter's place in the sequence is notation rather than a word, so it
   takes the archive's label tier; its title is a name and stays in the
   reading face. */
.mhc-link-destination__index {
  font: 500 11px/1.3 var(--mhc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.mhc-link-destination__name {
  font: 500 12px/1.3 var(--mhc-font-sans, Helvetica, Arial, sans-serif);
  letter-spacing: .02em;
}

/* The profile a cross-reference opens on. It is subordinate to the chapter
   line, and it is softened by mixing the ink rather than by dimming the box,
   so the whole window never drops below the floor small type needs. */
.mhc-link-destination__actor {
  max-width: 100%;
  font: 400 12px/1.35 var(--mhc-font-sans, Helvetica, Arial, sans-serif);
  letter-spacing: .01em;
  color: color-mix(in srgb, currentColor 76%, transparent);
}
.mhc-link-destination__actor:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .mhc-link-destination,
  .mhc-link-destination[data-destination-place="below"] { transform: translate(-50%, -100%); transition: opacity .12s ease, visibility 0s linear .12s; }
  .mhc-link-destination[data-destination-place="below"],
  .mhc-link-destination[data-destination-shown][data-destination-place="below"] { transform: translate(-50%, 0); }
  .mhc-link-destination[data-destination-shown] { transition: opacity .12s ease, visibility 0s; }
}

@media (forced-colors: active) {
  .mhc-link-destination { border-color: CanvasText; background: Canvas; backdrop-filter: none; -webkit-backdrop-filter: none; }
}