/* ===========================================================================
   SKILL DECKS — the chips at the top of the French room, and a picked skill's
   page. 15 October. Screen code: app/rooms/skills.js. Plan: docs/SKILLS-PLAN.md.
   ===========================================================================
   NO NEW COLOURS. Everything here is the notebook's own --fr-* ink and rule
   (french.css) or the kit's parts (app/kit/kit.css). The skill's page reuses
   French's classes — fr-head, fr-title, fr-phrase, fr-en, fr-grades, fr-foot —
   so a chord is written on the same paper as a phrase.

   ON THE GRID. The row sits on the Seyès ruling: 3u above, a 4u (one major)
   row, and the page under it starts 2u lower, so everything below moves down
   by exactly one major and still lands on its lines.
   =========================================================================== */

#view-french .sk-row {
  position: relative;
  z-index: 2;
  max-width: 880px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fr-u);
  min-height: calc(var(--fr-u) * 4);
  padding: calc(var(--fr-u) * 3) var(--space-6) 0 calc(var(--fr-margin-x) + var(--space-6));
}
#view-french .sk-row + .fr-col,
#view-french .sk-row ~ .sk-col { padding-top: calc(var(--fr-u) * 2); }
#view-french #frBody[hidden],
#view-french #skBody[hidden] { display: none; }

/* The kit's chip, inked for the paper: rule-coloured edge, ink when pressed. */
#view-french .sk-row .k-btn--chip {
  height: calc(var(--fr-u) * 4);
  padding: 0 var(--space-4);
  color: var(--fr-ink-soft);
  border-color: var(--fr-rule-strong);
}
#view-french .sk-row .k-btn--chip:hover:not(:disabled) { color: var(--fr-ink); background: transparent; border-color: var(--fr-zinc); }
#view-french .sk-row .k-btn--chip[aria-pressed="true"] {
  color: var(--fr-ink);
  border-color: var(--fr-marron);
  background: color-mix(in srgb, var(--fr-marron) 14%, transparent);
  box-shadow: none;
}
#view-french .sk-row .k-btn--chip:focus-visible { outline: var(--ring-width) solid var(--fr-marron); outline-offset: var(--ring-gap); }

@media (max-width: 720px) {
  #view-french .sk-row { padding-left: calc(var(--fr-margin-x) + var(--space-4)); padding-right: var(--space-4); }
}

/* ---- THE CARD: a chord written like a phrase ------------------------------ */
#view-french .sk-front {
  font-family: var(--font-display);
  font-weight: var(--weight-body);
  font-size: clamp(var(--type-figure), 6vw, var(--type-hero));
  line-height: calc(var(--fr-seyes) * 2);
  letter-spacing: -.012em;
  color: var(--fr-ink);
  margin: 0;
}
#view-french .sk-back {
  font-family: var(--font-body);
  font-size: var(--type-title);
  line-height: var(--fr-seyes);
  color: var(--fr-ink);
  margin: 0;
  max-width: 52ch;
}
#view-french .sk-tip {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: var(--fr-seyes);
  color: var(--fr-ink-soft);
  font-style: italic;
  margin: 0;
  max-width: 52ch;
}
#view-french .sk-acts {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: calc(var(--fr-u) * 4);
  margin: var(--fr-u) 0 0;
}
#view-french .sk-key {
  font-family: var(--font-mono);
  font-size: var(--type-label);
  color: var(--fr-ink-faint);
  border: 1px solid var(--fr-rule-strong);
  border-radius: var(--radius-tight);
  padding: 0 var(--space-1);
}

/* The one line after a press — "Back in 6 days". */
#view-french .sk-line {
  font-family: var(--font-body);
  font-size: var(--type-lead);
  line-height: var(--fr-seyes);
  color: var(--fr-vert);
  margin: calc(var(--fr-u) * -2) 0 calc(var(--fr-u) * 2);
}
#view-french .sk-line--bad { color: var(--fr-margin-line); }

/* The kit's states, on the paper's ink rather than the glass's. */
#view-french .sk-col .k-fail__title,
#view-french .sk-col .k-empty__title { color: var(--fr-ink); }
#view-french .sk-col .k-fail__why,
#view-french .sk-col .k-empty__sub,
#view-french .sk-col .k-loading { color: var(--fr-ink-soft); }
#view-french .sk-col .k-empty { text-align: left; padding-left: 0; padding-right: 0; }
#view-french .sk-col .k-empty__sub { margin: 0; }
#view-french .sk-col .k-state,
#view-french .sk-col .sk-state { margin: 0 0 calc(var(--fr-u) * 3); }

/* "+ Add": one deck per entry, named in Outfit like a heading on the page. */
#view-french .sk-offer { margin: 0 0 calc(var(--fr-u) * 4); }
#view-french .sk-offer-name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-page);
  line-height: var(--fr-seyes);
  color: var(--fr-ink);
  margin: 0;
}

/* "Not switched on yet" is a step left to do, not a fault: the kit's failed
   shape (so it can never pass for an empty deck) in the paper's grey, not red. */
#view-french .sk-col .sk-setup {
  border-color: var(--fr-rule-strong);
  border-left-color: var(--fr-zinc);
  background: transparent;
}
#view-french .sk-col .sk-setup .k-fail__mark { background: var(--fr-zinc); }

/* The empty part sits on the page like a line of writing, not centred in air. */
#view-french .sk-col .k-empty { padding-top: 0; padding-bottom: calc(var(--fr-u) * 3); }

/* No keyboard, no key hints: on a touch screen they would describe nothing. */
@media (hover: none) and (pointer: coarse) {
  #view-french .sk-key,
  #view-french .sk-foot { display: none; }
}