/*
 * Layout of the judge's pages, on top of the AI Innovation Box design system, which
 * every page loads first, live, from app.ai-innovation-box.com.
 *
 * Rules, enforced by test/design-system.test.js:
 * - every selector starts with a .jg- class: this file can arrange, never restyle a
 *   design-system class or element;
 * - colours, spacing, radii, shadows, font sizes and weights are tokens (var(--…));
 *   only 0, 1px and 2px are written as such (hairlines);
 * - no !important.
 * Anything that looks like a component (a button, a field, a badge) comes from the DS.
 * If the DS lacks it, it is added to the DS, not here.
 */

/* Pages are a column so that .page can take the remaining height (as in the app). */
.jg-corps { min-height: 100vh; display: flex; flex-direction: column; }
/* DS classes set display (.encart, .champ-groupe…), which beats the hidden attribute. */
.jg-corps [hidden] { display: none; }

/* The form card: the one card the DS allows a resting shadow ("card de formulaire"). */
.jg-carte {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--e-10) var(--e-8);
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}
.jg-carte--etroite { max-width: var(--largeur-forme); }
.jg-carte-titre { font-size: var(--t-2xl); line-height: var(--line-height-snug); color: var(--text-primary); }
.jg-carte-sous { font-size: var(--t-base); line-height: var(--line-height-relaxed); color: var(--text-secondary); }

/* Top bar of the main page: brand lock on the left, account on the right. */
.jg-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-4);
  padding: var(--e-4) var(--gouttiere-page);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.jg-compte { display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }

.jg-intro { display: flex; flex-direction: column; gap: var(--e-3); }
.jg-retour { align-self: flex-start; }
.jg-intro-titre { font-size: var(--t-titre-page); line-height: var(--line-height-tight); color: var(--text-primary); }

.jg-ligne { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--e-3); }
.jg-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--e-4); align-items: end; }
.jg-case { display: flex; align-items: center; gap: var(--e-2); min-height: var(--e-11); }
.jg-code { font-family: ui-monospace, Consolas, monospace; font-size: var(--t-sm); min-height: var(--e-20); }

/* Results */
.jg-resultats { display: flex; flex-direction: column; gap: var(--e-4); }
.jg-liste { list-style: none; display: flex; flex-direction: column; gap: var(--e-3); padding: 0; }
.jg-concept {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--e-4) var(--e-5);
}
.jg-concept-tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); cursor: pointer; }
.jg-rang { font-size: var(--t-sm); color: var(--text-muted); min-width: var(--e-6); }
.jg-moyennes { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-4); }
.jg-personas { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.jg-details > summary { cursor: pointer; }
.jg-details > ul { margin-top: var(--e-3); padding-left: var(--e-5); }

/* Home menu: one block per group (Test methods, Legacy), one link card per method. */
.jg-menu { display: flex; flex-direction: column; gap: var(--e-8); }
.jg-groupe { display: flex; flex-direction: column; gap: var(--e-3); }
.jg-methode {
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--e-5) var(--e-6);
  color: inherit;
  text-decoration: none;
}
.jg-methode:hover, .jg-methode:focus-visible { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }