@charset "utf-8";

/* Scoped to the ranking page; the market search keeps its existing styles. */
.ranking-page { max-width: 1280px; margin: 16px auto; padding: 0 16px; }
.ranking-page * { box-sizing: border-box; }
.ranking-page [hidden] { display: none !important; }
.ranking-page .site-title a { color: black; font-size: 24pt; }
.ranking-page button { cursor: pointer; }
.ranking-page button, .ranking-page input, .ranking-page select { font-family: inherit; }
.ranking-page button, .ranking-page select { padding: 7px 10px; }
.ranking-page input[type="text"], .ranking-page input[type="search"] {
  min-width: 0; width: 100%; padding: 8px; border: 1px solid #8099ac; border-radius: 4px;
}
.ranking-page :focus-visible { outline: 3px solid #125fa6; outline-offset: 3px; }
.ranking-page .ranking-filters { margin: 0; padding: 14px; width: 100%; background: #f5ffff; }
.ranking-page .primary-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.ranking-page .primary-filters > label:not(.check-label) { display: grid; gap: 6px; }
.ranking-page .keyword-field { flex: 1; min-width: 220px; }
.ranking-page .check-label { display: flex; gap: 6px; align-items: center; align-self: center; }
.ranking-page .primary-button { background: #174f80; color: white; border: 1px solid #174f80; border-radius: 4px; }
.ranking-page details summary { cursor: pointer; padding: 10px 0; font-weight: bold; }
.ranking-page .advanced-filters { margin-top: 12px; border-top: 1px solid #bfced7; }
.ranking-page .advanced-content { padding-bottom: 4px; }
.ranking-page .filter-options { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0; }
.ranking-page .filter-options label { display: inline-flex; align-items: center; gap: 5px; padding: 4px 0; }
.ranking-page .exclude-field { display: grid; gap: 6px; max-width: 520px; margin-top: 12px; }
.ranking-page .range-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 14px; }
.ranking-page .range-field > span { display: block; margin-bottom: 5px; }
.ranking-page .range-field > div { display: flex; gap: 8px; align-items: center; }
.ranking-page .filter-hint { color: #435665; line-height: 1.6; }
.ranking-page .feedback { line-height: 1.6; }
.ranking-page .feedback:empty { display: none; }
.ranking-page .error { color: #a02020; font-weight: bold; }
.ranking-page .metric-guide { margin: 12px 0; }
.ranking-page .metric-guide dl { line-height: 1.6; margin-top: 0; }
.ranking-page .metric-guide dt { font-weight: bold; }
.ranking-page .metric-guide dd { margin: 0 0 10px 16px; }
.ranking-page .ranking-layout { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 20px; align-items: start; }
.ranking-page .ranking-ads { text-align: right; overflow: hidden; }
.ranking-page .results-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ranking-page #viewToggle { display: none; }
.ranking-page .ranking-scroll { overflow-x: auto; }
.ranking-page .ranking-table { border-spacing: 1px; }
.ranking-page .ranking-table th, .ranking-page .ranking-table td { padding: 7px; }
.ranking-page .ranking-table th { white-space: nowrap; }
.ranking-page .metric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ranking-page .item-name { overflow-wrap: anywhere; }
.ranking-page .description-button { padding: 3px 7px; margin-left: 8px; border: 1px solid #a5b6c4; border-radius: 4px; background: #f2f7fb; color: #25485f; }
.ranking-page .more-button { width: 100%; padding: 12px; margin-top: 12px; }
.ranking-page #baloon { position: fixed; z-index: 10; max-width: min(600px, calc(100vw - 16px)); max-height: 60vh; overflow: auto; border: 3px solid gray; background: #e0e0ff; padding: 10px; line-height: 1.5; }
.ranking-page dialog { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 32px); padding: 18px; border: 1px solid #8196a6; border-radius: 10px; background: #f5ffff; }
.ranking-page dialog::backdrop { background: rgb(0 0 0 / 45%); }
.ranking-page .description-header { display: flex; gap: 16px; align-items: start; justify-content: space-between; position: sticky; top: -18px; padding: 8px 0; background: #f5ffff; }
.ranking-page .description-header h2 { margin: 0; overflow-wrap: anywhere; font-size: 18px; }
.ranking-page .description-header button { white-space: nowrap; }
.ranking-page #descriptionContent { line-height: 1.7; overflow-wrap: anywhere; margin: 12px 0; }
.ranking-page .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (min-width: 761px) {
  .ranking-page .ranking-table th, .ranking-page .ranking-table td { padding: 2px 7px; }
}

@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .ranking-page .description-button { display: none; }
  .ranking-page .metric-guide { display: none; }
  .ranking-page .metric-heading { cursor: help; }
}

@media (max-width: 760px) {
  .ranking-page { margin: 12px 0; padding: 0 12px; }
  .ranking-page, .ranking-page a, .ranking-page input, .ranking-page select,
  .ranking-page button, .ranking-page td, .ranking-page th, .ranking-page p { font-size: 16px; }
  .ranking-page .site-title { margin: 0; line-height: 1.4; }
  .ranking-page .site-title a { font-size: 21px; }
  .ranking-page .world-form table { width: 100%; }
  .ranking-page .world-form td:first-child { display: none; }
  .ranking-page .world-form select { width: 100%; }
  .ranking-page button, .ranking-page select, .ranking-page input[type="submit"], .ranking-page input[type="text"],
  .ranking-page input[type="search"] { min-height: 44px; }
  .ranking-page input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; }
  .ranking-page .ranking-filters { padding: 12px; }
  .ranking-page .primary-filters { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  .ranking-page .keyword-field { grid-column: 1 / -1; min-width: 0; }
  .ranking-page .primary-filters > label:nth-child(2) { grid-column: 1 / -1; }
  .ranking-page .range-filters { grid-template-columns: minmax(0, 1fr); }
  .ranking-page .filter-options > span { width: 100%; }
  .ranking-page .filter-options label { min-height: 44px; }
  .ranking-page .ranking-layout { display: block; }
  .ranking-page .ranking-ads { width: 160px; margin: 24px auto 0; }
  .ranking-page #viewToggle { display: block; font-size: 14px; }
  .ranking-page .results-toolbar p { font-size: 14px; }
  .ranking-page .description-button { margin-left: 0; min-width: 52px; font-size: 14px; }
  .ranking-page #rankingResults:not(.table-view) .ranking-table { display: block; background: transparent; }
  .ranking-page #rankingResults:not(.table-view) .ranking-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ranking-page #rankingResults:not(.table-view) .ranking-table tbody { display: grid; gap: 12px; }
  .ranking-page #rankingResults:not(.table-view) .ranking-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; border: 1px solid #bfd0dd; border-radius: 8px; padding: 12px; background: white; }
  .ranking-page #rankingResults:not(.table-view) .ranking-table td { padding: 0; min-width: 0; }
  .ranking-page #rankingResults:not(.table-view) .item-name { grid-column: 1 / -1; display: flex; align-items: start; justify-content: space-between; gap: 10px; }
  .ranking-page #rankingResults:not(.table-view) .item-link { font-weight: bold; line-height: 1.5; padding: 8px 0; }
  .ranking-page #rankingResults:not(.table-view) .metric { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 15px; }
  .ranking-page #rankingResults:not(.table-view) .metric::before { content: attr(data-label); font-size: 13px; font-weight: normal; color: #536876; }
  .ranking-page #rankingResults:not(.table-view) .metric-p { grid-column: 1 / -1; font-size: 21px; font-weight: bold; border-bottom: 1px solid #e2ebf1; padding-bottom: 10px; }
  .ranking-page #rankingResults:not(.table-view) .metric-s { grid-column: 1; grid-row: 3; }
  .ranking-page .table-view .ranking-table { min-width: 700px; }
  .ranking-page .table-view .ranking-table th, .ranking-page .table-view .ranking-table td { font-size: 14px; }
  .ranking-page .table-view .item-name { min-width: 200px; }
}