/* How an importance looks. Shape says the level (partials/importance_icon.html:
 * a stop sign for Required, signal bars for Major and Minor); weight says how
 * loud it is. Major is the default and stays quiet, so only the rows that
 * differ stand out. Colour stays the app's turquoise: red, amber and green
 * are left to grades and results. Values come from app/domain/importance.py.
 *
 *   .gg-importance             a row's chip + menu (data-importance)
 *   .gg-importance-chip        the button showing the checked importance
 *   .gg-importance-menu        the popover with one option per importance
 *   .gg-importance-gate        the "N Required standards: ..." line above a table
 *   .gg-importance-icon        an importance's icon
 */
.gg-importance-icon { display: inline-flex; width: 1rem; height: 1rem; flex-shrink: 0; }
.gg-importance-icon svg { width: 100%; height: 100%; }

.gg-importance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  font-size: 0.8125rem;
  white-space: nowrap;
  cursor: pointer;
}
.gg-importance-chip:hover { background-color: var(--gg-surface-2); border-color: var(--gg-bg-300); }
.gg-importance-chip:focus-visible { outline: 2px solid var(--gg-primary); outline-offset: 2px; }

/* The chip shows only the checked importance, styled by its weight. */
.gg-importance-shown { display: none; align-items: center; gap: 0.375rem; }
.gg-importance:has(input[value="required"]:checked) [data-for="required"],
.gg-importance:has(input[value="major"]:checked) [data-for="major"],
.gg-importance:has(input[value="minor"]:checked) [data-for="minor"] { display: inline-flex; }

.gg-importance:has(input[value="required"]:checked) .gg-importance-chip {
  color: var(--gg-primary);
  border-color: color-mix(in oklab, var(--gg-primary) 45%, transparent);
  background-color: var(--gg-primary-glow);
  font-weight: 600;
}
.gg-importance:has(input[value="major"]:checked) .gg-importance-chip { color: var(--gg-text-dim); }
.gg-importance:has(input[value="minor"]:checked) .gg-importance-chip {
  color: color-mix(in oklab, var(--gg-text-dim) 70%, var(--gg-text-dimmer));
}

/* An unchecked row's importance only applies once it is attached. */
.standard-picker-row:not(:has(input[name="standards"]:checked)) .gg-importance-chip { opacity: 0.45; }

/* The menu: a top-layer popover, placed under its chip by the picker's script. */
.gg-importance-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  width: 18rem;
  padding: 0.25rem;
  border-radius: var(--radius-box, 0.5rem);
  border: 1px solid var(--gg-bg-300);
  background-color: var(--gg-bg-200);
  color: var(--gg-text);
  box-shadow: 0 10px 30px oklch(0% 0 0 / 0.45);
}
.gg-importance-option {
  display: grid;
  grid-template-columns: 1rem 1fr;
  align-items: start;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.375rem;
  cursor: pointer;
}
.gg-importance-option .gg-importance-icon { margin-top: 0.1875rem; }
.gg-importance-option:hover { background-color: var(--gg-surface-2); }
.gg-importance-option:has(input:checked) { background-color: var(--gg-primary-glow); color: var(--gg-primary); }
.gg-importance-option:has(input:focus-visible) { outline: 2px solid var(--gg-primary); outline-offset: -2px; }

.gg-importance-gate { display: flex; align-items: center; gap: 0.5rem; color: var(--gg-primary); }
.gg-importance-gate.hidden { display: none; }

/* The importance a run ran with (partials/importance_run_chip.html), in the
 * same weights as the table's chips: Required stands out, Major quiet, Minor dimmer. */
.gg-importance-run-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 0.375rem;
  border-radius: 9999px;
  font-size: 11px;
  white-space: nowrap;
  flex-shrink: 0;
}
.gg-importance-run-chip .gg-importance-icon { width: 0.75rem; height: 0.75rem; }
.gg-importance-run-chip-required {
  color: var(--gg-primary);
  background-color: var(--gg-primary-glow);
  font-weight: 600;
}
.gg-importance-run-chip-major { color: var(--gg-text-dim); }
.gg-importance-run-chip-minor { color: color-mix(in oklab, var(--gg-text-dim) 70%, var(--gg-text-dimmer)); }