/* FXR Data section (Oct 6, 2026): landing cards and fit-to-viewport tool pages. Linked from data/*.html only. */

/* ---------- Landing: one card per tool ---------- */
.data-landing-head { margin-bottom: 1rem; }
.data-landing-head h1 { margin: 0; }
.data-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin: 0 0 2rem; }
@media (max-width: 999.98px) { .data-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
@media (max-width: 599.98px) { .data-cards { grid-template-columns: minmax(0, 1fr); gap: .9rem; } }
.data-card {
  display: flex; flex-direction: column; background: var(--surface, #fff); border: 1px solid var(--line, #dcdcd7);
  border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none;
  box-shadow: 0 10px 30px rgba(28,29,32,.07), 0 1px 0 rgba(28,29,32,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.data-card:hover, .data-card:focus-visible { transform: translateY(-2px); border-color: #1c1d20; box-shadow: 0 16px 40px rgba(28,29,32,.12); }
.data-card:focus-visible { outline: 3px solid var(--accent, #ff5a1f); outline-offset: 2px; }
.data-card-img { display: block; aspect-ratio: 16 / 10; background: #f4f4f2; border-bottom: 1px solid var(--line, #dcdcd7); }
.data-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.data-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .85rem 1rem 1rem; }
.data-card-title { font-size: 1.15rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
.data-card-text { font-size: .98rem; line-height: 1.45; color: #2c2d31; }

/* ---------- Tool pages: the stage fills the screen below the header ---------- */
/* --data-top (stage top: header, breadcrumbs) and --data-bot (phone tab bar) are measured by the inline script. */
.data-stage {
  --data-top: 110px; --data-bot: 0px;
  display: flex; flex-direction: column; box-sizing: border-box; margin: 0; padding: 0 0 10px;
  height: calc(100vh - var(--data-top) - var(--data-bot));
  height: calc(100dvh - var(--data-top) - var(--data-bot));
  min-height: 220px;
}
.data-head { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; flex-wrap: wrap; margin: .15rem 0 .5rem; }
.data-head h1 { font-size: 1.45rem; line-height: 1.15; margin: 0; letter-spacing: -.01em; }
.data-beta {
  font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: .16rem .42rem; border-radius: 999px; background: rgba(200,16,46,.95); color: #fff;
}
.data-how { margin-left: auto; font-weight: 700; font-size: .92rem; }
.data-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.data-body > .fxrmap-host, .data-body > .fxrhm-host, .data-body > .fxrii-deck { flex: 1 1 auto; min-height: 0; height: auto; }
.data-below { padding-top: .75rem; }
.data-intro { margin: 0 0 .5rem; }
.data-intro p { max-width: 760px; }
.data-explore { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 1.25rem; }
.data-explore-btn { flex: 0 1 auto; }

/* Phone: the app bar already shows the page name, so the title row is for screen readers only */
@media (max-width: 767.98px) {
  .data-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .data-stage { padding: .5rem 0 8px; }
  .data-explore-btn { flex: 1 1 100%; }
}
/* Short landscape screens (phones on their side): drop the breadcrumb and title row to give the chart the room */
@media (min-width: 768px) and (max-height: 560px) {
  body[data-section="data"] .crumbs { display: none; }
  .data-head { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .data-stage { padding: .4rem 0 6px; }
}

/* ---------- FXR Interest Index chart in the stage ---------- */
.data-tool .fxrii-deck { display: flex; flex-direction: column; gap: 0; margin: 0; }
.data-tool .fxrii-chart-frame { flex: 1 1 auto; min-height: 0 !important; gap: .45rem; }
.data-tool .fxrii-chart-brand { display: none; }
.data-tool .fxrii-stats { order: 0; }
.data-tool .fxrii-chart { order: 1; position: relative; flex: 1 1 auto; display: block; min-height: 0 !important; }
.data-tool .fxrii-chart .fxrii-svg { position: absolute; inset: 0; width: 100%; height: 100% !important; min-height: 0 !important; max-height: none !important; }
.data-tool .fxrii-empty { order: 1; }
.data-tool .fxrii-legend { order: 2; margin: 0; }
.data-tool .fxrii-status { order: 3; margin: 0; }
@media (max-width: 899.98px) {
  .data-tool .fxrii-chart-frame { padding: .5rem .45rem .55rem; }
  .data-tool .fxrii-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .data-tool .fxrii-stat { padding: .32rem .4rem .36rem; }
  .data-tool .fxrii-stat-lab { font-size: .68rem; }
  .data-tool .fxrii-stat-val { font-size: 1.02rem; margin-top: .15rem; }
  .data-tool .fxrii-stat-primary .fxrii-stat-val { font-size: 1.18rem; }
  .data-tool .fxrii-stat-base { font-size: .86rem !important; }
  .data-tool .fxrii-stat-sub { font-size: .64rem; margin-top: .1rem; }
  .data-tool .fxrii-legend { font-size: .76rem; gap: .2rem .7rem; }
  .data-tool .fxrii-status { font-size: .7rem; }
}
@media (max-height: 560px) {
  .data-tool .fxrii-chart-frame { gap: .3rem; padding-top: .4rem; padding-bottom: .4rem; }
  .data-tool .fxrii-stat { padding: .22rem .5rem .26rem; }
  .data-tool .fxrii-stat-val { font-size: 1rem !important; margin-top: .05rem; }
  .data-tool .fxrii-stat-base { font-size: .86rem !important; }
  .data-tool .fxrii-stat-sub { font-size: .6rem; margin-top: 0; }
  .data-tool .fxrii-legend { font-size: .72rem; gap: .15rem .7rem; }
  .data-tool .fxrii-status { display: none; }
}
/* Short, wide screens (phones on their side): headline stats in a column beside the chart */
@media (max-height: 560px) and (min-aspect-ratio: 3/2) {
  .data-tool .fxrii-chart-frame { display: grid; grid-template-columns: clamp(130px, 19vw, 170px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: .3rem .6rem; }
  .data-tool .fxrii-stats { grid-column: 1; grid-row: 1 / span 2; grid-template-columns: minmax(0, 1fr) !important; align-content: start; gap: .3rem; }
  .data-tool .fxrii-chart, .data-tool .fxrii-empty { grid-column: 2; grid-row: 1; }
  .data-tool .fxrii-legend { grid-column: 2; grid-row: 2; }
  .data-tool .fxrii-stat-lab { display: inline; margin-right: .35rem; }
  .data-tool .fxrii-stat-val { display: inline; }
  .data-tool .fxrii-stat-sub { display: block; }
}