:root {
  color-scheme: light;
  --bg: #e9e8d2;
  --surface: #f3f2e4;
  --surface-raised: #f6f4e8;
  --surface-well: #e4e3cf;
  --ink: #1b221d;
  --muted: #4b5a4f;
  --accent: #d8352a;
  --font-body: var(--guise-font-mono);
  --font-display: var(--guise-font-mono);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--guise-font-mono);
}

#ferry-masthead {
  box-sizing: border-box;
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

#pipeferry-board {
  max-width: none;
  margin: 1.5rem 0 0;
  padding: 0;
  background: transparent;
}

#pipeferry-board,
#pipeferry-board [data-kind="text"] {
  font-family: var(--guise-font-mono);
  color: var(--ink);
  overflow-wrap: anywhere;
}

#pipeferry-board [data-kind="text"][data-role="hint"] {
  color: var(--muted);
  line-height: 1.55;
}

#pipeferry-board [data-kind="text"][data-role="caption"] {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#pipeferry-board [data-kind="button"] {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-family: var(--guise-font-mono);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#pipeferry-board [data-kind="button"] {
  overflow-wrap: normal;
  padding-inline: 0.5rem;
}

#pipeferry-board [data-kind="button"][data-variant="accent"] {
  background: var(--accent);
  color: var(--surface-raised);
}

#pipeferry-board [data-kind="button"]:not([disabled]):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

#pipeferry-board [data-kind="button"][disabled] {
  box-shadow: none;
  opacity: 0.5;
}

#pipeferry-board input[data-kind="field"] {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface-well);
  color: var(--ink);
  font-family: var(--guise-font-mono);
}

#pipeferry-board [data-kind="box"][data-tone="card"] {
  border: 3px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 4px 4px 0 var(--ink);
}

#pipeferry-board [data-kind="box"][data-tone="raised"] {
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface-well);
  box-shadow: none;
}

#pipeferry-board [data-kind="box"][data-lead="true"] {
  --guise-lead-max: 45%;
  align-items: center;
  column-gap: 1.25rem;
}

#pipeferry-board [data-lead="true"] > [data-kind="qr"],
#pipeferry-board [data-lead="true"] > [data-kind="text"]:first-child {
  box-sizing: border-box;
  inline-size: clamp(7.5rem, 32vw, 11rem);
  aspect-ratio: 1;
  margin: 0;
  border: 3px solid var(--ink);
}

#pipeferry-board [data-lead="true"] > [data-kind="text"]:first-child {
  display: grid;
  place-items: center;
  background: #fff;
}

#pipeferry-board [data-lead="true"]:not(:has(#toggle-code[data-pressed="true"])) > [data-kind="qr"] {
  opacity: 0.22;
}

main details:has([data-sbfw-clear]) > summary,
main button:not([data-kind]) {
  display: inline-block;
  list-style: none;
  padding: 0.6rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 600 0.9rem var(--guise-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}

main details:has([data-sbfw-clear]) > summary:active,
main button:not([data-kind]):active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}

main details:has([data-sbfw-clear]) > summary:focus-visible,
main button:not([data-kind]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

main details:has([data-sbfw-clear]) > summary::-webkit-details-marker {
  display: none;
}

main button[data-sbfw-clear] {
  background: var(--accent);
  color: var(--surface-raised);
}

body > footer {
  color: var(--muted);
  font-family: var(--guise-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}