/* =====================================================================
   A solar system of food: el lienzo con las órbitas y los botones de cada alimento.
   Todo en blanco y negro (sin el rojo de acento). Botones y pistas, de css/catch-poem.css.
   ===================================================================== */
.fo-stage { height: var(--fo-stage-h); margin: var(--space-4xl) 0; border-block: var(--border-hair) solid var(--color-rule); }
.fo-stage canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }

.fo-controls { margin-bottom: var(--space-5xl); }
.fo-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* cada alimento, como las etiquetas de los filtros: en el sistema, relleno de tinta */
.fo-chip {
  padding: var(--space-2xs) var(--space-md);
  font: inherit; font-size: var(--text-sm); color: var(--color-text-soft); background: none; cursor: pointer;
  border: var(--border-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fo-chip span { margin-left: var(--space-2xs); opacity: 0.6; font-variant-numeric: tabular-nums; }
.fo-chip:hover { border-color: var(--color-ink); color: var(--color-ink); }
.fo-chip[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.fo-chip:focus-visible { outline: var(--border-strong) solid var(--color-ink); outline-offset: var(--focus-offset); }
/* en esta página el foco tampoco usa rojo */
.fo-controls .btn.primary:hover, .fo-controls .btn:focus-visible { background: var(--color-ink); border-color: var(--color-ink); outline-color: var(--color-ink); }

.fo-data summary { cursor: pointer; font-size: var(--text-base); }
.fo-table-wrap { overflow-x: auto; margin-top: var(--space-xl); }
.fo-data table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.fo-data th, .fo-data td { padding: var(--space-2xs) var(--space-md) var(--space-2xs) 0; text-align: left; border-bottom: var(--border-hair) solid var(--color-rule); }
.fo-data td:nth-child(2) { font-variant-numeric: tabular-nums; }

/* Footprint (thoughts/footprint-orbits.html): la forma de cada planeta dice qué es, también en el filtro y en los botones */
.fo-chip.food::before, .fo-chip.travel::before, .fo-chip.things::before,
.fo-filter .food::before, .fo-filter .travel::before, .fo-filter .things::before,
.fo-group-title.food::before, .fo-group-title.travel::before, .fo-group-title.things::before {
  content: ''; display: inline-block; width: 0.6em; height: 0.6em; margin-right: var(--space-2xs); background: currentColor; vertical-align: 0.05em;
}
.fo-chip.food::before, .fo-filter .food::before, .fo-group-title.food::before { border-radius: 50%; }
.fo-chip.travel::before, .fo-filter .travel::before, .fo-group-title.travel::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }

/* el filtro, encima del sistema: como las etiquetas de la lista de pensamientos, en tinta */
.fo-filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-4xl) 0 var(--space-3xl); }
.fo-filter button {
  padding: var(--space-2xs) var(--space-md);
  font: inherit; font-size: var(--text-sm); color: var(--color-text-soft); background: none; cursor: pointer;
  border: var(--border-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fo-filter button:hover { border-color: var(--color-ink); color: var(--color-ink); }
.fo-filter button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.fo-filter button:focus-visible { outline: var(--border-strong) solid var(--color-ink); outline-offset: var(--focus-offset); }
.fo-filter + .fo-stage { margin-top: 0; }

/* los botones de los planetas, en un grupo por tipo */
.fo-group { margin-bottom: var(--space-3xl); }
.fo-group[hidden] { display: none; }
.fo-group-title { margin: 0 0 var(--space-xs); font-size: var(--text-sm); color: var(--color-text-soft); }
.fo-chips-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fo-chips:has(.fo-group) { display: block; }

/* los tres con más huella de cada tipo: su forma, en rojo (también en el botón) */
.fo-chip.top::before { background: var(--color-accent); }