/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

html {
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

/* Weekly LLM usage. Custom CSS rather than utilities: the series colours and dash
   patterns are carried by SVG <polyline>/<line> children of a grouping <g>, which
   utilities cannot reach without becoming unreadable. Every value below is a charte
   token, so a charte update still propagates. */
.llm-usage { display: grid; gap: 1.5rem; max-width: 1280px; margin: auto; color: var(--text-primary); }
.llm-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.llm-usage h1 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 700; letter-spacing: -.035em; }
.llm-usage h2 { font-size: 1rem; font-weight: 650; margin-bottom: .4rem; }
.llm-eyebrow { font: .75rem var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: .5rem; }
.llm-panel { background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.25rem; min-width: 0; }
.llm-muted { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }
.llm-small { font-size: .75rem; }
.llm-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.llm-measure { display: block; margin: 1rem 0 .4rem; font: 600 clamp(1.4rem, 2.4vw, 2rem) var(--font-mono); overflow-wrap: anywhere; }
.llm-filters { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.llm-filters label { display: grid; gap: .4rem; font-size: .8rem; flex: 1 1 135px; min-width: 0; }
.llm-filters select { min-height: 44px; width: 100%; min-width: 0; max-width: 100%; border: 1px solid var(--border-control); background: var(--surface); padding: .5rem; color: var(--text-primary); }
.llm-usage :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.llm-notice { border-left: 3px solid var(--tension); }
.llm-notice ul { padding-left: 1.2rem; list-style: disc; font-size: .875rem; line-height: 1.65; }
/* Sans min-width: 0, la largeur min-content d'une table dense traverse le
   conteneur de défilement et étire toute la chaîne d'ancêtres jusqu'à faire
   déborder la page sur téléphone. */
.llm-chart-scroll, .llm-table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }
.llm-usage, .llm-usage > * { min-width: 0; }
.llm-chart { width: 100%; min-width: 560px; margin-top: 1rem; }
.llm-axis { fill: var(--text-secondary); font: 11px var(--font-mono); }
.llm-gridline { stroke: var(--border); stroke-width: 1; }
.llm-series { stroke: var(--series-color); fill: var(--series-color); }
.llm-series-1 { --series-color: var(--chart-1); } .llm-series-2 { --series-color: var(--chart-2); }
.llm-series-3 { --series-color: var(--chart-3); } .llm-series-4 { --series-color: var(--chart-4); }
.llm-series-5 { --series-color: var(--chart-5); } .llm-series-6 { --series-color: var(--chart-6); }
.llm-series-7 { --series-color: var(--chart-7); } .llm-series-8 { --series-color: var(--chart-8); }
.llm-dash-1 polyline, .llm-dash-1 line { stroke-dasharray: 7 4; }
.llm-dash-2 polyline, .llm-dash-2 line { stroke-dasharray: 2 4; }
.llm-legend { display: flex; flex-wrap: wrap; gap: .65rem 1.5rem; font-size: .8rem; margin-top: .5rem; }
.llm-legend li { display: flex; align-items: center; gap: .5rem; overflow-wrap: anywhere; }
.llm-legend svg { flex-shrink: 0; }
.llm-usage table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: 1rem; }
.llm-usage th, .llm-usage td { text-align: left; padding: .8rem .7rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.llm-usage td { font-family: var(--font-mono); font-size: .75rem; }
.llm-usage thead th { color: var(--text-secondary); font-weight: 500; }
.llm-partial { display: block; color: var(--text-secondary); font-size: .7rem; font-weight: 400; }
.llm-empty { padding: 1.5rem 0; color: var(--text-secondary); }
.llm-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 640px) { .llm-kpis { grid-template-columns: 1fr; } .llm-panel { padding: 1rem; } .llm-heading .ops-btn { width: 100%; justify-content: center; } }

/* HUD de consommation LLM. Les niveaux de chaleur utilisent la rampe séquentielle
   de la charte (--seq-1 clair → --seq-6 foncé). Elle n'est définie qu'une fois :
   en thème sombre on la parcourt à l'envers, pour que « plus intense » reste
   « plus visible » des deux côtés. */
.hud-window-list { display: grid; gap: .9rem; margin-top: 1rem; }
.hud-window { display: grid; grid-template-columns: minmax(150px, 210px) 1fr minmax(120px, auto); gap: .5rem 1rem; align-items: center; padding-bottom: .9rem; border-bottom: 1px solid var(--border); }
.hud-window:last-child { border-bottom: 0; padding-bottom: 0; }
.hud-window-id { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; min-width: 0; }
.hud-window-id strong { font-size: .9rem; overflow-wrap: anywhere; }
.hud-tag { font: .65rem var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); border: 1px solid var(--border); padding: .1rem .35rem; }
.hud-gauge { position: relative; height: 22px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.hud-fill { position: absolute; inset: 0 auto 0 0; background: var(--status-info); opacity: .85; }
.hud-clock { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text-primary); }
.hud-clock::after { content: ""; position: absolute; top: -1px; left: -3px; border: 4px solid transparent; border-top-color: var(--text-primary); }
.hud-window--ahead .hud-fill { background: var(--status-warning); }
.hud-window--spare .hud-fill { background: var(--status-success); }
.hud-window--spent .hud-fill { background: var(--status-critical); opacity: 1; }
.hud-window-read { display: flex; flex-direction: column; align-items: end; text-align: right; gap: .1rem; }
.hud-measure { font: 600 1.35rem var(--font-mono); line-height: 1.1; }
.hud-verdict { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); }
.hud-window--spent .hud-verdict, .hud-window--ahead .hud-verdict { color: var(--text-primary); font-weight: 600; }
.hud-window-note { grid-column: 1 / -1; font-size: .75rem; }
.hud-rate { text-align: right; display: grid; gap: .2rem; justify-items: end; }
.hud-night { fill: var(--text-primary); opacity: .05; }
.hud-bar { fill: var(--seq-4); }
.hud-bar--partial { fill: var(--seq-2); }
/* La grille de rythme est un SVG et non une table : une table dense dans un
   conteneur de défilement gonfle malgré tout le scrollWidth du document et fait
   déborder la page sur téléphone — mesuré, corrigé, couvert par le test système. */
.hud-rhythm { width: 100%; min-width: 560px; margin-top: 1rem; }
.dec-rate-readout { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .75rem; }
.dec-rate-readout h3 { font-size: .95rem; margin-bottom: .2rem; }
.hud-mark--price { fill: var(--accent); } .hud-mark--us { fill: var(--tension); } .hud-mark--quiet { fill: var(--surface); }
rect.hud-cell--0 { fill: var(--surface); } rect.hud-cell--1 { fill: var(--seq-1); }
rect.hud-cell--2 { fill: var(--seq-2); } rect.hud-cell--3 { fill: var(--seq-3); }
rect.hud-cell--4 { fill: var(--seq-4); } rect.hud-cell--5 { fill: var(--seq-5); }
rect.hud-cell--6 { fill: var(--seq-6); }
.hud-cell-svg { stroke: var(--surface-raised); stroke-width: 1; }
.hud-legend { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .6rem; color: var(--text-secondary); font-size: .75rem; }
/* Largeur dictée par les colonnes, pas devinée : un min-width inférieur à leur
   somme fait déborder la liste de sa propre boîte et la page avec elle. */
.hud-rows { display: grid; gap: .3rem; margin-top: 1rem; width: max-content; min-width: 100%; }
.hud-row { display: grid; grid-template-columns: minmax(150px, 190px) minmax(180px, 1fr) 110px repeat(3, minmax(52px, 66px)); gap: .75rem; align-items: center; }
.hud-row--head { color: var(--text-secondary); border-bottom: 1px solid var(--border); padding-bottom: .3rem; }
.hud-row-name { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-row-days svg { display: block; width: 100%; height: 16px; }
.hud-row-spark svg { display: block; width: 100%; height: 26px; }
.hud-row-spark polyline { stroke: var(--text-secondary); }
.hud-row-num { font: .72rem var(--font-mono); text-align: right; }
.hud-details, .hud-archive { margin-top: 1rem; }
.hud-archive h3 { font-size: .85rem; font-weight: 650; margin: 1.5rem 0 .5rem; }
.hud-details summary, .hud-archive summary { cursor: pointer; font-size: .8rem; color: var(--text-secondary); }
@media (max-width: 640px) {
  .hud-window { grid-template-columns: 1fr; }
  .hud-window-read { align-items: start; text-align: left; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) rect.hud-cell--1 { fill: var(--seq-6); }
  :root:not([data-theme="light"]) rect.hud-cell--2 { fill: var(--seq-5); }
  :root:not([data-theme="light"]) rect.hud-cell--3 { fill: var(--seq-4); }
  :root:not([data-theme="light"]) rect.hud-cell--4 { fill: var(--seq-3); }
  :root:not([data-theme="light"]) rect.hud-cell--5 { fill: var(--seq-2); }
  :root:not([data-theme="light"]) rect.hud-cell--6 { fill: var(--seq-1); }
  :root:not([data-theme="light"]) .hud-bar { fill: var(--seq-3); }
  :root:not([data-theme="light"]) .hud-bar--partial { fill: var(--seq-5); }
}
[data-theme="dark"] rect.hud-cell--1 { fill: var(--seq-6); }
[data-theme="dark"] rect.hud-cell--2 { fill: var(--seq-5); }
[data-theme="dark"] rect.hud-cell--3 { fill: var(--seq-4); }
[data-theme="dark"] rect.hud-cell--4 { fill: var(--seq-3); }
[data-theme="dark"] rect.hud-cell--5 { fill: var(--seq-2); }
[data-theme="dark"] rect.hud-cell--6 { fill: var(--seq-1); }
[data-theme="dark"] .hud-bar { fill: var(--seq-3); }
[data-theme="dark"] .hud-bar--partial { fill: var(--seq-5); }

/* Décision IA : mêmes panneaux que la Consommation LLM, plus les graphiques
   Chart.js (canvas dans une boîte de hauteur fixe, sinon le canvas s'étire à
   chaque redessin) et la mise en avant de la voie gagnante. */
.llm-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dec-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dec-kpi--win { border-left: 3px solid var(--status-success); }
.dec-row--win th, .dec-row--win td { background: color-mix(in srgb, var(--status-success) 12%, transparent); }
.dec-filters input[type="date"], .dec-filters input[type="range"] { min-height: 44px; width: 100%; min-width: 0; border: 1px solid var(--border-control); background: var(--surface); padding: .5rem; color: var(--text-primary); }
.dec-filters input[type="range"] { padding: 0; border: 0; background: transparent; }
.dec-filters select[multiple] { min-height: 96px; }
.dec-checks { margin-top: 1rem; border: 0; padding: 0; }
.dec-checks div { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .85rem; }
.dec-checks label { display: inline-flex; align-items: center; gap: .4rem; }
.dec-grain { display: flex; gap: .4rem; flex-wrap: wrap; }
.dec-grain [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
/* overflow hidden : Chart.js pose une largeur inline sur le canvas et ne la
   recalcule qu'après coup (ResizeObserver) — entre-temps, sur téléphone, c'est
   le canvas de 1000 px qui ferait déborder toute la page. */
.dec-chart { position: relative; width: 100%; min-width: 0; overflow: hidden; }
.dec-chart canvas { max-width: 100%; }
.dec-chart--tall { height: 420px; } .dec-chart--short { height: 240px; }
.dec-partial { font-style: italic; color: var(--text-secondary); }
@media (max-width: 900px) { .dec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dec-kpis { grid-template-columns: 1fr; } .dec-chart--tall { height: 300px; } .llm-actions .ops-btn { width: 100%; justify-content: center; } }