/*
 * The OFC points helper: the app's component (OfcPointsHelper.tsx) and the
 * public page's own script (site/static/ofc/client.ts) draw the same
 * markup, and this file styles both. MIX-05, UI-01, UI-06.
 *
 * scripts/prerender-site.mjs copies it as written for the public page, as
 * it copies pages.css, so it keeps to plain CSS: no nesting and nothing a
 * browser of 2023 cannot read. It uses the app's colours (styles.css), which
 * every page loads. Every control is at least 44 pixels tall, on any screen.
 */

.ofc-helper { display: grid; gap: 22px; min-width: 0; color: var(--ink); }
.ofc-helper h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; }
.ofc-helper h4 { margin: 0 0 8px; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.ofc-helper p { margin: 0; }
/* The public page's script hides a part with the hidden attribute; a part's own display must not show it. */
.ofc-helper [hidden] { display: none !important; }
.ofc-helper button { min-height: 44px; font: inherit; }
.ofc-note { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
/* A box of the public page's script that only groups what it draws again. */
.ofc-contents { display: contents; }
.ofc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The mode, the players, the price per point and the dealer. */
.ofc-settings { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; }
.ofc-field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.ofc-label { color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.ofc-helper input[type="text"],
.ofc-helper select { width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; color: var(--ink); font-size: 16px; }
/* Safari draws a list at its own height and leaves out min-height: a set height keeps it at 44 pixels. */
.ofc-helper select { height: 44px; }
.ofc-helper input[aria-invalid="true"] { border-color: var(--danger); background: var(--danger-soft); }
.ofc-problem { color: var(--warn); font-size: 14px; font-weight: 500; }

/* A row of choices: one is pressed, to the eye (bold, a green edge) and to a screen reader (aria-pressed). */
.ofc-pills { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ofc-pills button {
  min-width: 44px;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-soft);
  font-size: 14px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ofc-pills button:hover { color: var(--ink); border-color: var(--accent); }
.ofc-pills button[aria-pressed="true"] { color: var(--ink); background: var(--accent-soft); border-color: var(--accent); font-weight: 650; }
.ofc-pills button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The players, side by side when there is room. */
.ofc-players { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.ofc-player {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.ofc-player h3 { margin: 0; overflow-wrap: anywhere; }
.ofc-player-fields { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.ofc-tick { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.ofc-tick input { flex: none; width: 22px; height: 22px; margin: 0; }
.ofc-choices { display: grid; gap: 10px; }
.ofc-foul {
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: 10px;
  background: var(--danger-soft);
  color: var(--ink);
  font-size: 14px;
}
.ofc-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--ink-soft); font-size: 14px; }
.ofc-facts strong { color: var(--ink); font-weight: 650; }

/* Who won each row. */
.ofc-pairs { display: grid; gap: 14px; }
.ofc-pairs > .ofc-note { margin-top: -4px; }
.ofc-pair { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); min-width: 0; }
.ofc-answer { display: grid; grid-template-columns: minmax(64px, auto) minmax(0, 1fr); align-items: center; gap: 6px 12px; }
.ofc-answer-row { font-weight: 600; }

/* The cards of each player. */
.ofc-cards { display: grid; gap: 14px; min-width: 0; container-type: inline-size; }
.ofc-rows { display: grid; gap: 10px; }
.ofc-row {
  display: grid;
  grid-template-columns: minmax(104px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.ofc-row.is-target { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ofc-row-target {
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--card-raised);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.ofc-row-target[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.ofc-row-name { font-weight: 650; }
.ofc-row-count { color: var(--ink-soft); font-size: 13px; font-variant-numeric: tabular-nums; }
.ofc-slots { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.ofc-slot { width: 44px; height: 44px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.ofc-clear { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card-raised); color: var(--ink); cursor: pointer; }
.ofc-row-hand { grid-column: 2 / -1; color: var(--ink-soft); font-size: 14px; }
.ofc-next { color: var(--ink); font-weight: 600; }

/* A card: its rank and its suit. Hearts and diamonds are red; the symbol also says the suit. */
.ofc-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 0;
  height: 44px;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: #f4f6f5;
  color: #111a16;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.ofc-slots .ofc-card { width: 44px; }
.ofc-card.ofc-red { color: #c0262f; }
.ofc-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofc-deck { display: grid; gap: 10px; }
.ofc-suit { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
/* A card of the player shown: a green card with a green ring. It keeps its red or black. */
.ofc-deck .ofc-card[aria-pressed="true"] { background: #cdeedd; border-color: var(--accent); box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--accent); }
/* A card that another player holds: grey and struck through, and it cannot be pressed. */
.ofc-deck .ofc-card:disabled { background: var(--card-raised); color: var(--ink-soft); text-decoration: line-through; opacity: 0.5; cursor: not-allowed; }
@container (min-width: 600px) {
  .ofc-suit { grid-template-columns: repeat(13, minmax(0, 1fr)); }
}

/* The points, the chips and the payments. */
.ofc-result { display: grid; gap: 14px; min-width: 0; }
.ofc-waiting { display: grid; gap: 6px; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--ink-soft); }
.ofc-waiting p:first-child { color: var(--ink); font-weight: 600; }
.ofc-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ofc-table th, .ofc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; }
.ofc-table th:first-child { text-align: left; overflow-wrap: anywhere; }
.ofc-table thead th { color: var(--ink-soft); font-size: 13px; font-weight: 600; }
.ofc-table tbody td { font-weight: 650; }
.ofc-plus { color: var(--accent); }
.ofc-minus { color: var(--danger); }
.ofc-lines { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ofc-lines li { display: grid; gap: 2px; overflow-wrap: anywhere; }
.ofc-lines .ofc-detail { color: var(--ink-soft); font-size: 14px; }
.ofc-again { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ofc-again button { padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card-raised); color: var(--ink); cursor: pointer; }

@media (max-width: 520px) {
  .ofc-row { grid-template-columns: minmax(0, 1fr) auto; }
  .ofc-slots { grid-column: 1 / -1; grid-row: 2; }
  .ofc-row-hand { grid-column: 1 / -1; }
  .ofc-answer { grid-template-columns: minmax(0, 1fr); }
}