/* The form table, styled once for both pages (feature 035).
 *
 * Feature 033 gave the two pages one RENDERER and left them two stylesheets —
 * except the study page never got the second half, so a learner exploring a
 * verb met a bare HTML table: no borders, no padding, four columns of Greek
 * floating in the page. One renderer with one stylesheet is what was meant.
 *
 * Every colour here is a token, so this file inherits whichever palette the
 * page is running — including a theme the reader chose rather than the one
 * their device prefers.
 *
 * What is NOT here: the admin page's editing affordances (the gap button, the
 * remove control). Those belong to the page that can author, and the renderer
 * only builds them when it is handed callbacks.
 */

/* Scrolls inside itself rather than widening the column it lives in — a verb's
   five tenses on a phone would otherwise push the whole page sideways. */
.paradigm-forms { overflow-x: auto; }

table.paradigm {
  border-collapse: collapse;
  width: 100%;
  font-size: .85rem;
  margin: .2rem 0 .9rem;
  /* FIXED, so a column's width comes from the layout rather than from what
     happens to be in it. A verb shows one table per tense and they are separate
     tables, so with auto layout each sized itself: the wide `μέτρησαν /
     μέτρησανε` squeezed its neighbour, and the plural column started 55px
     further left in one table than the next. */
  table-layout: fixed;
  /* The rounded frame is the table's own, not a wrapper's: a wrapper with
     `overflow: hidden` would cut off the horizontal scroll above. */
  border: 1px solid var(--border);
  border-radius: var(--radius, 10px);
  overflow: hidden;
}

table.paradigm.verb  tr > *:first-child { width: 4.5rem; }
table.paradigm.noun  tr > *:first-child { width: 5.5rem; }
table.paradigm.adjective tr > *:first-child,
table.paradigm.pronoun   tr > *:first-child { width: 7.5rem; }

table.paradigm th,
table.paradigm td {
  border-bottom: 1px solid var(--border);
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: baseline;
  /* A fixed column cannot grow to fit, so a two-variant form like `μέτρησαν /
     μέτρησανε` must be allowed to wrap rather than spill into the cell beside
     it. */
  overflow-wrap: anywhere;
}
table.paradigm tr:last-child th,
table.paradigm tr:last-child td { border-bottom: 0; }

/* The header reads as a band rather than as a first row of data. */
table.paradigm thead th {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}

/* The row headings are labels, not content: quieter than the Greek they
   introduce, so the eye lands on the forms. */
table.paradigm tbody th {
  color: var(--muted);
  font-weight: 600;
  font-size: .76rem;
  white-space: nowrap;
}

/* Faint, and faint on purpose: enough to hold the eye across four columns of
   Greek, not enough to read as a second kind of row. */
table.paradigm tbody tr:nth-child(even) { background: color-mix(in srgb, var(--text) 2.5%, transparent); }

table.paradigm .form-text { color: var(--accent); }

/* Derived at read time and stored nowhere: shown because it is true, set apart
   because nobody wrote it down. GREEN, not grey — grey already means 'nothing
   here', and a derived value is the opposite of absent.
   SPECIFICITY MATTERS: `table.paradigm .form-text` is two classes plus an
   element and outranks a bare `.form-text.generated`, so the table selector has
   to be matched or nothing changes. */
table.paradigm .form-text.generated,
.chip.generated { color: var(--ok); }

/* Turned off by a reader who does not want it (feature 035). Every one of an
   adjective's 24 forms is derived, so for a learner the distinction is a wall
   of green saying nothing — while for an author it is the point. A preference,
   not a page-level constant, because the two want opposite defaults. */
:root[data-plain-forms] table.paradigm .form-text,
:root[data-plain-forms] table.paradigm .form-text.generated,
:root[data-plain-forms] .chip.generated { color: inherit; }

table.paradigm td.empty { color: var(--muted); }

/* A gap the reader cannot fill: a mark, never a control. The renderer builds no
   button without callbacks, so this only ever styles text. */
table.paradigm .gap-mark { color: var(--muted); }

h5.paradigm-tense {
  margin: .9rem 0 .2rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

/* ------------------------------- a cell holding two readings (040) */
/* Marked, not decorated. The text already reads as the `a / b` this collection
   writes for two spellings of one slot; the dotted underline says there is
   something to hover for, and nothing more. ONE cell in eight has it. */
table.paradigm .form-text.two-readings {
  text-decoration: underline dotted;
  text-underline-offset: .2em;
  cursor: help;
}