/* Finale contact (email only), and a few small content rules: the source links in the captions' .src lines, the
   engine chart's 10ⁿ scale and growth-rate note (labels.js), and a chart title's sub-caption. (.sr-only has its one
   definition in tokens.css.)
   The primary action is Apple's solid blue capsule; "Copy address" is a quiet blue text button.
   Loads after components.css and hud.css, so equal-specificity rules here win. */

/* Source links: the caption's own grey, a faint underline that firms up on hover, and a focus ring.
   They open in a new tab (each says so to screen readers). */
.src a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: rgba(142,142,147,.45); border-radius: 3px; transition: text-decoration-color .2s ease, color .2s ease;
}
.src a:hover { color: var(--kicker); text-decoration-color: currentColor }
.src a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; text-decoration-color: currentColor }
.src a:focus:not(:focus-visible) { outline: none }

/* The engine chart's 10ⁿ scale: the light caption grey (7.9:1 on the page) at 12px, with the exponent a real
   <sup> at three quarters of that (labels.js), so the raised digits stay readable over the particles */
#labels .lbl.grid { font-size: 12px; font-weight: 500; color: var(--kicker) }
#labels .lbl.grid sup { font-size: .75em; line-height: 0; vertical-align: .5em; margin-left: .05em }
/* the rows layout (phones, narrow windows) sets its five labels side by side along the scale: a touch smaller, so
   they keep clear of each other even where the chart is drawn small (375×667) */
#labels .lbl.grid.gx { font-size: 11px }
#labels .lbl.grid.gx sup { font-size: .72em; margin-left: 0 }
@media (max-width:340px) { #labels .lbl.gx2 { visibility: hidden } }   /* 320px phones: 10⁵, 10¹⁵, 10²⁵ only */
/* The engine chart's growth rate (desktop, labels.js), beside its steep recent bars: caption grey, opened by a thin
   bracket that faces the bars, so it reads as a note on them rather than a bar's name. The padding gives the
   bracket its height inside the label's own box (frames.js measures that box to keep everything apart). */
#labels .lbl.rate { padding: 3px 0 3px 12px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--kicker); text-align: left }
#labels .lbl.rate .sub { margin-top: 0 }
#labels .lbl.rate::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border: solid rgba(235,235,245,.3); border-width: 1px 1px 1px 0; border-radius: 0 3px 3px 0;
}

/* A chart title's grey sub-caption (the task-horizon chart): its own line under the title, so the title stays short */
.panel h3:has(+ .panel-sub) { margin-bottom: 0 }
.panel-sub { margin: 0 0 var(--s-3); font-size: 12px; line-height: 16px; letter-spacing: -.005em; color: var(--grey-2) }
@media (orientation:landscape) and (max-height:500px) { .panel-sub { margin-bottom: var(--s-1) } }

.contact { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 28px }

/* Primary: solid Apple-blue capsule */
.btn-email {
  appearance: none; -webkit-appearance: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 26px; border-radius: 980px;
  font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.18; letter-spacing: -.022em;
  color: #fff; background: #0071e3;
  transition: background-color .2s ease, transform .2s cubic-bezier(.2,.7,.1,1);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-email .arr { display: inline-block; transition: transform .3s cubic-bezier(.2,.7,.1,1) }
.btn-email:hover { background: #0077ed }
.btn-email:hover .arr { transform: translateX(3px) }
.btn-email:active { background: #006edb; transform: scale(.97) }

/* Secondary: text button in the accent blue */
.btn-copy {
  appearance: none; -webkit-appearance: none; border: 0; background: none; cursor: pointer;
  min-height: 44px; padding: 10px 6px; border-radius: 10px;
  font-family: var(--body); font-weight: 400; font-size: 17px; line-height: 1.18; letter-spacing: -.022em;
  color: var(--blue); text-underline-offset: .18em;
  position: relative; isolation: isolate;
  transition: color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn-copy:hover { text-decoration: underline }
.btn-copy:active { opacity: .6 }
.btn-copy.done { color: var(--white); text-decoration: none }
/* After "Email Mishari" (contact.js adds .nudge for a moment): a soft blue pill tint fades in behind the words and
   out again, saying "or copy it here". It reaches 8px past the button on each side, so nothing moves, and it has
   no edge, so it never reads as a focus ring. Nothing scales or slides; with reduced motion it simply shows and goes. */
.btn-copy::before {
  content: ""; position: absolute; inset: 4px -8px; z-index: -1; border-radius: 980px;
  background: rgba(41,151,255,.14); opacity: 0; pointer-events: none;
  transition: opacity .5s cubic-bezier(.28,.11,.32,1);
}
.btn-copy.nudge::before { opacity: 1; transition-duration: .35s }
/* tokens.css stills every element's transitions under reduced motion, but its `*` never reaches a ::before */
@media (prefers-reduced-motion: reduce) { .btn-copy::before, .btn-copy.nudge::before { transition: none } }

/* A visible focus ring for keyboard users (never on mouse clicks) */
.btn-email:focus-visible, .btn-copy:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px }
.btn-email:focus:not(:focus-visible), .btn-copy:focus:not(:focus-visible) { outline: none }

.contact-sub { font-family: var(--body); font-weight: 400; font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: var(--grey) }

/* Live region: hidden while it only speaks to screen readers. Shown (.show), it takes the sub-line's place for a
   moment (contact.js sets its top to the sub-line's; the sub-line hides meanwhile), out of the flow so nothing on
   the page moves: as a grey tip for a few seconds after "Email Mishari" (.tip, not .hint, a class layout.css hides
   on touch screens), or, if a copy fails, as the address itself, white and selectable in one tap. */
.contact-status:not(.show) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.contact-status.show {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin: 0;
  width: max-content; max-width: min(88vw, 30em); text-align: center; text-wrap: balance;
  font-family: var(--body); font-size: 14px; line-height: 20px; letter-spacing: -.016em; color: var(--white);
  user-select: all; -webkit-user-select: all;
}
.contact-status.show.tip { color: var(--grey); user-select: auto; -webkit-user-select: auto; animation: status-in .3s ease both }
@keyframes status-in { from { opacity: 0 } }
.contact-status .part { display: inline-block }
.contact.saying .contact-sub { visibility: hidden }

@media (max-width:734px) {
  .contact { gap: 10px }
  .contact-actions { gap: 8px 22px }
}

/* Chapter 10: today's #1-ranked model. A blue badge in the card (every screen) and a glowing callout in the chart (desktop) */
.rank { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s-4); padding: 5px 14px 5px 5px; border-radius: 999px;
  background: rgba(41,151,255,.12); box-shadow: inset 0 .5px 0 rgba(160,210,255,.35), 0 0 24px rgba(41,151,255,.16);
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -.01em; color: #cfe3ff }
.rank b { color: #fff; font-weight: 600 }
.rank-n { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 7px; border-radius: 999px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: 12px; letter-spacing: 0; box-shadow: 0 0 14px rgba(41,151,255,.55) }
#labels .lbl.opus { padding: 6px 12px; border-radius: 12px; background: rgba(41,151,255,.14); text-shadow: none;
  box-shadow: inset 0 .5px 0 rgba(160,210,255,.4), 0 0 26px rgba(41,151,255,.3);
  color: #fff; font-size: 12px; line-height: 16px; font-weight: 600; text-align: right }
#labels .lbl.opus .sub { color: #9fc6ff; font-weight: 500; font-size: 11px }