/* Ferry board. Inherits the existing theme tokens (--text, --muted, --line, --accent, --action-text). */
.ferry { display: grid; justify-items: center; gap: .9rem; width: min(100%, 30rem); margin-inline: auto; color: inherit; }
.ferry-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; width: 100%; min-height: 56px; padding: .5rem; border: 1px solid var(--line, #c2ccbd); border-radius: 6px; background: color-mix(in srgb, currentColor 3%, transparent); }
.ferry-traveller { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin: 0; padding: .3rem .6rem; font: inherit; line-height: 1; color: inherit; background: transparent; border: 1px solid var(--line, #c2ccbd); border-radius: 4px; cursor: pointer; }
.ferry-symbol { font-size: 1.35rem; }
.ferry-name { font-size: .875rem; }
/* Somebody who can row is somebody who is watching, and the board says so in one mark rather
   than in a legend the visitor has to remember. */
.ferry-traveller.can-row { border-style: solid; border-width: 2px; }
.ferry-traveller.is-chosen { color: var(--action-text, var(--canvas, #fff)); background: var(--accent, currentColor); border-color: var(--accent, currentColor); }
.ferry-traveller:hover:not(:disabled) { border-color: var(--accent, currentColor); }
.ferry-traveller:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 3px; }
.ferry-traveller:disabled { cursor: default; opacity: .55; }
/* The river reads as the gap between the banks, and the boat sits on the side it is actually on,
   so the visitor never has to read which bank they are rowing from. */
.ferry-river { position: relative; width: 100%; height: 34px; border-radius: 4px; background: repeating-linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent) 0 10px, transparent 10px 20px); }
.ferry-boat { position: absolute; top: 50%; font-size: 1.5rem; line-height: 1; transform: translateY(-50%); }
.ferry-river[data-boat="left"] .ferry-boat { left: .5rem; }
.ferry-river[data-boat="right"] .ferry-boat { right: .5rem; }
.ferry-cross { min-height: 44px; margin: 0; padding: .5rem 1.6rem; font: inherit; color: var(--action-text, var(--canvas, #fff)); background: var(--accent, currentColor); border: 1px solid var(--accent, currentColor); border-radius: 4px; cursor: pointer; }
.ferry-cross:disabled { color: var(--muted, currentColor); background: transparent; border-color: var(--line, #c2ccbd); cursor: default; }
.ferry-cross:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: 3px; }
.ferry-choice { min-height: 1.4rem; max-width: 34rem; margin: 0; font-size: .9375rem; line-height: 1.4; text-align: center; color: var(--muted, currentColor); }
.ferry-choice[data-refused="true"] { color: var(--text, currentColor); }
.ferry-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin: 0; font-size: .875rem; }
.ferry-metric { display: inline-flex; align-items: baseline; gap: .5rem; }
.ferry-label { color: var(--muted, currentColor); }
.ferry-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.ferry-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; text-align: center; color: var(--muted, currentColor); }
.ferry[data-state="solved"] .ferry-bank { border-color: var(--accent, currentColor); }
.ferry[data-state="blocked"] .ferry-traveller, .ferry[data-state="waiting"] .ferry-traveller { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .ferry-traveller, .ferry-cross { transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
  .ferry-boat { transition: left .28s ease, right .28s ease; }
}
@media (max-width: 380px) {
  .ferry { gap: .7rem; width: 100%; }
  .ferry-name { display: none; }
  .ferry-traveller { padding: .3rem .5rem; }
  .ferry-tally { gap: .3rem 1.1rem; }
}
@media (forced-colors: active) {
  .ferry-traveller, .ferry-cross, .ferry-bank { border-color: CanvasText; background: Canvas; }
  .ferry-traveller.is-chosen { background: Highlight; color: HighlightText; }
}