/* Compact navigation; wrap whole tabs instead of clipping the last label. */
header { gap: 10px; }
header > h1 { flex-shrink: 0; }
header > h1 > span:not(.tagline) { white-space: nowrap; }
header .tagline { max-width: 180px; }
header .tabs { gap: 2px; flex: 0 0 auto; overflow: visible; }
header .tab { flex-shrink: 0; padding: 6px 8px; gap: 4px; white-space: nowrap; }
header .search { min-width: 120px; }
@media(max-width:1500px) { header .tagline { display: none; } }
@media(max-width:1250px) {
  header { flex-wrap: wrap; }
  header .tabs { order: 5; flex: 0 0 100%; width: 100%; flex-wrap: wrap; row-gap: 4px; }
}
@media(max-width:500px) { header { padding-inline: 10px; gap: 8px; } header .search { min-width: 80px; } }
#models-view { height: calc(100vh - 55px); overflow: auto; background: var(--bg); }
#models-view a { color: var(--accent); text-decoration: none; }
#models-view a:hover { text-decoration: underline; }
#models-view button, #models-view select { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border); padding: 8px 12px; border-radius: 7px; cursor: pointer; }
#models-view button:hover { border-color: var(--accent); }
#models-view :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.models-shell { padding: 28px 30px 60px; max-width: 1800px; margin: auto; }
.models-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.models-heading h1 { display: block; font-size: 30px; letter-spacing: -.8px; color: var(--text); margin: 6px 0 8px; }
.models-heading h1 span { font-size: 14px; padding: 4px 9px; border-radius: 8px; background: var(--panel2); color: var(--accent); vertical-align: middle; }
.models-heading p, .models-muted { color: var(--muted); line-height: 1.7; }
.models-eyebrow { color: var(--accent2); font-size: 11px; letter-spacing: 1.8px; font-weight: 600; }
.models-stamp { color: var(--muted); padding: 7px 12px; border: 1px solid var(--border); border-radius: 20px; white-space: nowrap; }
.models-disclaimer { display: flex; align-items: baseline; gap: 16px; padding: 13px 17px; background: #7cc4ff09; border: 1px solid #7cc4ff25; border-radius: 10px; margin-bottom: 20px; line-height: 1.7; }
.models-disclaimer strong { color: var(--accent); white-space: nowrap; }
.models-disclaimer span { color: var(--muted); }
.models-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 14px; }
.models-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-right: auto; }
#models-view .models-pills button { border-color: transparent; color: var(--muted); background: transparent; }
#models-view .models-pills button.active { color: var(--accent); background: var(--panel2); border-color: var(--border); }
.models-table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 12px; max-height: 67vh; scrollbar-width: thin; background: var(--panel); }
#models-view table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
#models-view caption { text-align: left; padding: 10px 14px; color: var(--muted); font-size: 11px; }
#models-view th, #models-view td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
#models-view thead th { position: sticky; top: 0; background: var(--panel2); z-index: 2; font-weight: 500; white-space: nowrap; }
#models-view thead th button { border: none; padding: 0; background: transparent; color: var(--muted); border-radius: 0; text-align: left; }
#models-view .models-table th:first-child { position: sticky; left: 0; background: var(--panel); z-index: 3; min-width: 235px; box-shadow: 1px 0 var(--border); }
#models-view .models-table thead th:first-child { z-index: 4; background: var(--panel2); }
#models-view tbody tr:hover td, #models-view .models-table tbody tr:hover th { background: var(--panel2); }
#models-view .models-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
#models-view small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; line-height: 1.6; margin-top: 5px; }
.model-value.derived { color: #97c6ed; }
.model-value.provided sup { color: var(--star); padding-left: 2px; }
.model-value.unknown { color: var(--muted); }
.models-definitions { margin-top: 20px; color: var(--muted); }
#models-view summary { cursor: pointer; padding: 12px 0; color: var(--accent); }
.models-definitions dl { display: grid; grid-template-columns: minmax(160px, 230px) 1fr; line-height: 1.8; }
.models-definitions dt, .models-definitions dd { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.models-message { padding: 60px 30px; text-align: center; }
.models-detail { max-width: 1440px; }
.models-back { display: inline-block; margin-bottom: 26px; }
.models-stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.models-stat-grid > div { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
.models-stat-grid strong { display: block; margin-top: 8px; font-size: 23px; font-variant-numeric: tabular-nums; }
.models-detail-nav { display: flex; flex-wrap: wrap; gap: 24px; padding: 18px 0; margin-top: 12px; border-bottom: 1px solid var(--border); }
.models-detail section { padding-top: 30px; scroll-margin-top: 20px; }
.models-detail h2 { font-size: 20px; margin: 0 0 18px; }
.models-detail h3 { font-size: 14px; margin: 10px 0; }
.models-flow { display: flex; align-items: stretch; gap: 12px; overflow: auto; padding: 12px 0; }
.models-flow > span { flex: 1; min-width: 145px; padding: 15px; border: 1px solid #7cc4ff30; border-radius: 9px; color: var(--muted); background: linear-gradient(120deg,#7cc4ff0b,#a970ff08); line-height: 1.9; }
.models-flow b { color: var(--text); font-size: 12px; }
.models-layer-map { display: grid; grid-template-columns: repeat(auto-fill,minmax(29px,1fr)); gap: 5px; margin-top: 22px; }
.models-layer-map span { text-align: center; border-radius: 5px; border: 1px solid var(--layer-color); color: var(--layer-color); padding: 7px 0; font-size: 10px; }
.models-layer-legend { display: flex; gap: 22px; flex-wrap: wrap; margin: 14px 0 22px; font-size: 12px; color: var(--muted); }
.models-layer-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }
.models-notes { color: var(--muted); line-height: 1.9; padding-left: 20px; }
.models-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.models-specs { display: grid; grid-template-columns: minmax(140px, .65fr) 1fr; margin: 0; line-height: 1.7; }
.models-specs dt, .models-specs dd { padding: 12px 0; margin: 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.models-specs dt { color: var(--muted); padding-right: 18px; }
.models-insights article { padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; background: var(--panel); }
.models-insights p { line-height: 1.9; margin: 8px 0; }
.models-status { font-size: 10px; color: var(--accent2); }
#model-sources { line-height: 2; }
#model-sources pre { max-height: 420px; overflow: auto; padding: 20px; border: 1px solid var(--border); background: var(--panel); border-radius: 10px; font-size: 12px; line-height: 1.6; }
@media(max-width:900px) { .models-shell { padding: 20px 16px 40px; } .models-heading { align-items: flex-start; } .models-stamp { display: none; } .models-stat-grid { grid-template-columns: repeat(3,1fr); } .models-two-col { grid-template-columns: 1fr; } .models-disclaimer { display: block; } .models-disclaimer strong { display: block; margin-bottom: 4px; } header { flex-wrap: wrap; gap: 8px; } header .tabs { order: 5; width: 100%; } #models-view { height: calc(100vh - 100px); } }
@media(max-width:500px) { .models-heading h1 { font-size: 24px; } .models-stat-grid { grid-template-columns: repeat(2,1fr); } .models-specs { grid-template-columns: 120px 1fr; } #models-view .models-table th:first-child { min-width: 180px; max-width: 180px; white-space: normal; } }

#models-view .models-table td.models-training-cell { white-space: normal; min-width: 230px; max-width: 340px; overflow-wrap: anywhere; line-height: 1.7; }