/* Translation model dashboard (models.js): soft cards on a charcoal / white page, pastel chart colours.
   Colours are the --lt-* tokens from site.css, so it follows the site's light / dark scheme. */

#lt-dashboard { color: var(--lt-text); }

.lt-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 1rem; }
.lt-chip { padding: .2rem .6rem; border-radius: .3rem; font-size: .62rem; background: var(--lt-card); color: var(--lt-muted); }

/* Summary cards: big number, label above, detail below; two of them highlighted in pale blue */
.lt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1rem; }
@media (max-width: 60em) { .lt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lt-kpi { padding: 1.05rem 1.1rem; border-radius: .55rem; background: var(--lt-card); min-width: 0; }
.lt-kpi.lt-hi-1 { background: var(--lt-hi-1); color: var(--lt-hi-text); }
.lt-kpi.lt-hi-2 { background: var(--lt-hi-2); color: var(--lt-hi-text); }
.lt-kpi-label { font-size: .66rem; font-weight: 600; }
.lt-kpi-value { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; margin: .55rem 0 .35rem; line-height: 1.1; }
.lt-kpi-value small { font-size: .62rem; font-weight: 500; opacity: .6; margin-left: .25rem; letter-spacing: 0; }
.lt-kpi-sub { font-size: .6rem; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-kpi-model { font-size: .66rem; font-weight: 600; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panels */
.lt-panel { background: var(--lt-card); border-radius: .55rem; padding: 1rem 1.1rem 1.1rem; margin: 0 0 1rem; }
.lt-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem 1rem; margin-bottom: .6rem; }
.md-typeset .lt-panel h2 { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: 0; color: var(--lt-text); }
.md-typeset .lt-sub { margin: .2rem 0 0; font-size: .62rem; color: var(--lt-muted); max-width: 38rem; }
.lt-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; }
.lt-seg { display: inline-flex; padding: .15rem; border-radius: .4rem; background: var(--lt-card-2); }
.lt-seg button { border: 0; background: transparent; color: var(--lt-muted); font: inherit; font-size: .6rem; font-weight: 600;
  padding: .28rem .6rem; border-radius: .28rem; cursor: pointer; white-space: nowrap; }
.lt-seg button.lt-on { background: var(--lt-bg); color: var(--lt-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.lt-seg button:focus-visible { outline: 2px solid var(--lt-accent); outline-offset: 1px; }
.lt-chart { position: relative; height: 19rem; }
.lt-chart-tall { height: 21rem; }

/* Model toggles for the language chart */
.lt-legend { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 .7rem; }
.lt-legend button { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--lt-line); background: transparent;
  color: var(--lt-text); font: inherit; font-size: .6rem; padding: .22rem .6rem; border-radius: .3rem; cursor: pointer; }
.lt-legend button .lt-dot { width: .5rem; height: .5rem; border-radius: 50%; }
.lt-legend button[aria-pressed="false"] { color: var(--lt-muted); opacity: .6; }
.lt-legend button[aria-pressed="false"] .lt-dot { background: transparent !important; box-shadow: inset 0 0 0 1.5px currentColor; }

/* Language chart tooltip: the model name and its score in separate columns, best first. When a line is
   hovered its row is picked out and the rest fade, like the lines. */
.lt-tip { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .12s;
  min-width: 13.5rem; padding: .55rem .35rem .4rem; border-radius: .4rem; background: var(--lt-tooltip); color: var(--lt-tooltip-text);
  border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 28px rgba(0, 0, 0, .45); font-size: .62rem; line-height: 1.25; }
.lt-tip-head { display: flex; align-items: baseline; gap: .45rem; padding: 0 .4rem .4rem; margin-bottom: .25rem;
  border-bottom: 1px solid rgba(255, 255, 255, .12); font-weight: 600; font-size: .66rem; }
.lt-tip-note { font-weight: 500; font-size: .56rem; color: #fbbf24; }
.lt-tip-unit { margin-left: auto; font-weight: 500; font-size: .56rem; color: rgba(255, 255, 255, .55); }
.lt-tip-row { display: grid; grid-template-columns: .55rem 1fr auto; align-items: center; column-gap: .55rem;
  padding: .2rem .4rem; border-radius: .25rem; transition: opacity .12s; }
.lt-tip-row .lt-dot { width: .55rem; height: .55rem; border-radius: 50%; }
.lt-tip-name { white-space: nowrap; }
.lt-tip-q { margin-left: .3rem; color: rgba(255, 255, 255, .55); }
.lt-tip-val { min-width: 2.4rem; margin-left: .8rem; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.lt-tip-hot { background: rgba(255, 255, 255, .12); }
.lt-tip-dim { opacity: .5; }

/* Results table: quiet header, hairline rows, rings for chrF */
.lt-table-wrap { overflow-x: auto; }
.md-typeset table.lt-table:not([class*="highlight"]) { display: table; width: 100%; border: 0; box-shadow: none; background: none;
  font-size: .66rem; border-collapse: collapse; }
.md-typeset .lt-table th { background: none; color: var(--lt-muted); font-weight: 500; font-size: .6rem; padding: .5rem .45rem;
  border-bottom: 1px solid var(--lt-line); cursor: pointer; user-select: none; white-space: nowrap; }
.md-typeset .lt-table td { padding: .55rem .45rem; border-top: 0; border-bottom: 1px solid var(--lt-line); white-space: nowrap; vertical-align: middle; }
.md-typeset .lt-table tr:last-child td { border-bottom: 0; }
.md-typeset .lt-table tbody tr:hover td { background: var(--lt-card-2); }
.md-typeset .lt-table .lt-num { text-align: right; font-variant-numeric: tabular-nums; }
.md-typeset .lt-table th.lt-sorted { color: var(--lt-text); }
.md-typeset .lt-table th.lt-sorted::after { content: " ↓"; }
.md-typeset .lt-table th.lt-sorted.lt-asc::after { content: " ↑"; }
.lt-model { display: flex; align-items: center; gap: .5rem; }
.lt-model .lt-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }
.lt-name { font-weight: 600; }
.lt-q { margin-left: .3rem; font-size: .58rem; color: var(--lt-muted); }
.lt-tag { display: inline-block; margin-top: .15rem; padding: .05rem .45rem; border-radius: .25rem; font-size: .52rem; font-weight: 600;
  background: var(--lt-hi-1); color: var(--lt-hi-text); }
.lt-tag-fastest { background: color-mix(in srgb, var(--lt-positive) 22%, transparent); color: var(--lt-text); }
.lt-tag-most { background: var(--lt-hi-2); }
.lt-ring { display: inline-flex; align-items: center; gap: .4rem; justify-content: flex-end; }
.lt-ring svg { width: .95rem; height: .95rem; transform: rotate(-90deg); flex: none; }
.lt-ring .lt-track { stroke: var(--lt-line); }
.lt-ring .lt-fill { stroke: var(--lt-positive); }
.lt-slow { color: var(--lt-muted); margin-left: .25rem; }
.lt-warn { color: var(--lt-warn); cursor: help; }