/* HOD-495 ARK model pages. Site tokens only. Loaded after the shared panel styles. */
#main { --ark-caption: #bec5cf; --cap: var(--ark-caption); --ark-hi: #fff; }
#main .ark-cap,
#main .ark-byline,
#main .ark-k,
#main .ark-swipe,
#main caption,
#main .ark-quad dt {
  color: var(--ark-caption, #bec5cf);
  color: color-mix(in srgb, var(--txt) 55%, var(--dim));
}
.ark-byline { margin: 0 0 12px; font-size: 13px; }
.ark-byline a, .ark-links a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--gold);
}
.ark-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
#main a:focus-visible, #main summary:focus-visible, #main button:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}
#main summary {
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  min-height: 44px; padding: 8px 0; cursor: pointer;
}
.ark-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ark-h { margin: 22px 0 8px; font-size: 18px; }
.ark-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.ark-stats { display: block; }
.ark-statline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.ark-stat { margin: 0; min-width: 0; }
.ark-stat > .ark-cap { display: block; }
.ark-stat b { display: block; font-size: clamp(30px, 9vw, 44px); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; white-space: nowrap; }
.ark-dates { margin: 8px 0; font-weight: 700; }
#ark-banner { background: var(--panel2); border: 1px solid var(--blue); border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; }
#ark-banner p { margin: 0; }
#main .ark-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; min-width: 0; }
#main .ark-card h3 { margin: 0 0 8px; font-size: 16px; }
.ark-groups { display: grid; gap: 12px; }
.ark-driver { font-weight: 700; }
.ark-minmax { display: block; font-size: 13px; margin-top: 4px; }
.ark-range { display: block; margin: 6px 0; }
.ark-range-track, .ark-trackline, .ark-hbar { position: relative; display: block; height: 8px; background: var(--line); border-radius: 99px; }
.ark-range-seg, .ark-seg, .ark-hbar > span { position: absolute; top: 0; height: 8px; background: var(--gold); border-radius: 99px; }
.ark-hbar > span { position: relative; display: block; }
.ark-range-tick { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--txt); }
.ark-range-tick[style*="left:100%"] { margin-left: -2px; }
.ark-trackline, .ark-hbar { margin: 6px 0 0; }
.ark-seg { opacity: 0.85; }
.ark-pin { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--gold); }
.ark-hrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; align-items: baseline; margin: 0 0 8px; }
.ark-hbar { grid-column: 1 / -1; overflow: hidden; }
.ark-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.ark-quad div { background: var(--panel2); border-radius: 8px; padding: 8px; }
.ark-quad dd { margin: 0; text-align: right; font-weight: 800; font-size: 16px; }
.ark-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0; padding: 0; }
.ark-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ark-key { display: inline-block; width: 12px; height: 12px; flex: none; }
.ark-key-sq { background: var(--txt); }
.ark-key-dot { background: var(--gold); border-radius: 50%; }
.ark-key-tri { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--txt); background: transparent; }
.ark-key-ring { box-sizing: border-box; border: 2px solid var(--txt); border-radius: 50%; background: transparent; }
.ark-key-dash, .ark-key-solid, .ark-key-dotline, .ark-key-0, .ark-key-1, .ark-key-2 { width: 18px; height: 0; }
.ark-key-dash { border-top: 2px dashed var(--txt); }
.ark-key-solid { border-top: 3px solid var(--ark-hi); }
.ark-key-dotline { border-top: 2px dotted var(--txt); }
.ark-key-0 { border-top: 2px solid var(--txt); }
.ark-key-1 { border-top: 2px dashed var(--gold); }
.ark-key-2 { border-top: 2px dotted var(--blue); }
.ark-svg { display: block; width: 100%; max-width: 100%; height: auto; color: var(--txt); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.ark-svg text { fill: currentColor; font-family: inherit; }
.ark-rangebar { position: relative; color: var(--txt); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 0 6px; }
.ark-rangebar-plot { position: relative; }
.ark-track, .ark-band, .ark-dash, .ark-stem, .ark-mk, .ark-lbl, .ark-tick { position: absolute; }
.ark-track, .ark-band { height: 8px; border-radius: 99px; transform: translateY(-50%); }
.ark-track { background: var(--line); }
.ark-band { background: var(--gold); opacity: 0.45; }
.ark-dash { height: 0; border-top: 2px dashed var(--blue); transform: translateY(-1px); }
.ark-stem { width: 2px; background: var(--blue); transform: translateX(-50%); z-index: 1; }
.ark-mk { transform: translate(-50%, -50%); }
.ark-mk-sq { width: 10px; height: 10px; background: var(--txt); }
.ark-mk-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); }
.ark-mk-ring { box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--txt); border-radius: 50%; background: transparent; z-index: 1; }
.ark-mk-tri { width: 14px; height: 12px; }
.ark-mk-tri span { display: block; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid var(--txt); }
.ark-mk.ark-today { width: 12px; height: 12px; background: var(--blue); transform: translate(-50%, -50%) rotate(45deg); z-index: 3; }
.ark-mk.ark-today.ark-halo { box-shadow: 0 0 0 2px var(--panel), 0 0 0 3.5px var(--txt); }
.ark-lbl { text-align: center; white-space: nowrap; }
.ark-lbl-name { display: block; font-size: 13px; line-height: 16px; font-weight: 700; }
.ark-lbl-val, .ark-lbl-date { display: block; font-size: 12px; line-height: 15px; }
.ark-axis { position: relative; height: 22px; }
.ark-tick { top: 6px; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--cap, var(--ark-caption, #bec5cf)); }
.ark-tick-mark { position: absolute; top: 0; width: 1px; height: 4px; background: var(--cap, var(--ark-caption, #bec5cf)); transform: translateX(-50%); }
.ark-key-dia { width: 8px; height: 8px; background: var(--blue); transform: rotate(45deg); }
#ark-ours { grid-column: 1 / -1; background: var(--panel2); border: 1px solid var(--blue); border-radius: 8px; padding: 10px 12px; margin: 4px 0 0; }
#ark-ours .ark-ours-rate { margin: 2px 0 4px; font-size: 28px; font-weight: 800; line-height: 1.1; }
#ark-ours .ark-ours-cases { margin: 0 0 6px; white-space: normal; }
#ark-today-note { margin: 8px 0 0; }
.ark-sq { fill: var(--txt); }
.ark-dot { fill: var(--gold); }
.ark-tri { fill: var(--txt); }
.ark-ring { fill: none; stroke: var(--txt); stroke-width: 2; }
.ark-bin { fill: var(--gold); opacity: 0.55; }
.ark-mark-bear { stroke: var(--txt); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ark-mark-exp { stroke: var(--ark-hi); stroke-width: 2.5; }
.ark-hist-exp-tag rect { fill: var(--panel); stroke: var(--ark-hi); stroke-width: 1; }
.ark-svg text.ark-hist-exp-label { fill: var(--ark-hi); font-size: 11px; font-weight: 700; }
.ark-hist-y, .ark-hist-peak, .ark-hist-y-title, .ark-hist-tick { fill: var(--ark-caption, #bec5cf); font-size: 11px; }
.ark-hist-yaxis { stroke: var(--ark-caption, #bec5cf); stroke-width: 1; opacity: 0.85; }
.ark-mark-bull { stroke: var(--txt); stroke-width: 1.5; stroke-dasharray: 1.5 3; }
.ark-line, .ark-line-a { stroke: var(--txt); fill: none; }
.ark-line-b { stroke: var(--gold); stroke-dasharray: 6 3; fill: none; }
.ark-line-c { stroke: var(--blue); stroke-dasharray: 2 2; fill: none; }
.ark-guide { stroke: var(--blue); stroke-dasharray: 4 3; fill: none; }
#main .ix-scroll { max-width: 100%; }
#main .ix-scroll td { text-align: right; }
#main .ix-scroll th:first-child, #main .ix-scroll td:first-child { text-align: left; }
.ix-scroll.ark-fit table { min-width: 0; width: 100%; }
.ark-scrollwrap { position: relative; }
.ark-scrollwrap::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 1.6em; width: 28px;
  background: linear-gradient(90deg, transparent, var(--panel)); pointer-events: none;
}
.ark-swipe { margin: 4px 0 0; font-size: 12px; text-align: right; }
section#ark-credit { background: var(--panel2); border-left: 3px solid var(--gold); border-radius: 8px; padding: 14px 16px; margin-top: 18px; }
#ark-advice { font-weight: 700; }
/* Below a 640 px plot the 11-unit labels shrink under 11 px. Scale them by
   viewBox width / rendered width, and only while the plot is narrower than the viewBox. */
#ark-histogram .ark-hist-plot { container-type: inline-size; }
@container (max-width: 639px) {
  #ark-histogram .ark-hist-svg { overflow: visible; }
  #ark-histogram .ark-hist-tick,
  #ark-histogram .ark-hist-y,
  #ark-histogram .ark-hist-peak,
  #ark-histogram .ark-hist-y-title,
  #ark-histogram .ark-hist-exp-tag {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(calc(640px / 100cqw));
  }
}
@media (min-width: 900px) {
  .ark-hero { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 18px 28px; align-items: start; }
  .ark-hero .ark-stats { display: flex; flex-direction: column; width: max-content; max-width: 100%; }
  #ark-ours { width: 0; min-width: 100%; }
  .ark-hero .ark-statline { grid-template-columns: max-content max-content; column-gap: 32px; }
  .ark-groups { grid-template-columns: 1fr 1fr; }
  .ark-mini { max-width: 520px; }
  #ark-histogram .ark-hist-plot { max-width: none; width: 100%; }
  .ark-swipe, .ark-scrollwrap::after { display: none; }
}