/* Calldrop — a harbour channel by day, in pixel type on sailcloth paper. The call form IS the dock: berth one holds
   the waiting call, berth two is your field. The channel log prints under it like a radio chat. The CA rides a
   gangway strip pinned across the foot of the screen at every width. */
:root {
  --sail: #EFE9DA; --canvas: #F8F4EA; --sand: #E2D9C3; --tar: #13203A; --tar-2: #2B3A57; --salt: #6A7489; --fog: #A4A99F;
  --buoy: #C8248E; --buoy-ink: #FFF3FA; --buoy-deep: #6E0E4C; --plank: #8A5E36; --plank-hi: #AE7C4C; --plank-lo: #5B3B1F;
  --sea: #1E5C6E; --sea-hi: #2F7C8F;
  --px: "Jersey 10", ui-monospace, monospace; --tx: "Chivo", system-ui, sans-serif; --mn: "Fragment Mono", ui-monospace, monospace;
  --deck: 92px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--sail); }
body { background: var(--sail); color: var(--tar); font: 400 15px/1.5 var(--tx); -webkit-font-smoothing: antialiased; min-height: 100vh; overflow-x: hidden; }
a { color: inherit; }
.mono { font-family: var(--mn); font-size: .92em; }
b { font-weight: 800; }

.quay { padding: 10px 12px calc(var(--deck) + 22px); max-width: 100%; }

/* ---------- strip ---------- */
.quay-strip { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.quay-id { display: flex; align-items: center; gap: 7px; text-decoration: none; font: 400 26px/1 var(--px); letter-spacing: .04em; color: var(--tar); }
.quay-id img { image-rendering: pixelated; box-shadow: 0 0 0 2px var(--tar); }
.quay-go { display: flex; gap: 2px; margin-left: auto; font: 400 17px/1 var(--px); letter-spacing: .05em; }
.quay-go a { text-decoration: none; color: var(--salt); padding: 5px 6px; }
.quay-go a.is-on { color: var(--buoy); box-shadow: inset 0 -3px 0 var(--buoy); }
.quay-radio { font: 400 17px/1 var(--px); letter-spacing: .05em; color: var(--canvas); background: var(--tar); border: 0; padding: 7px 10px; cursor: pointer; }
.quay-radio.is-in { background: var(--buoy); }
@media (max-width: 519px) { .quay-radio { display: none; } .quay-go { font-size: 16px; } }

/* ---------- the dock form ---------- */
.hail { margin-top: 12px; background: var(--canvas); box-shadow: 0 0 0 3px var(--tar), 5px 5px 0 3px var(--tar); padding: 14px 12px; }
.hail-live { font: 600 15px/1.42 var(--tx); color: var(--tar); min-height: 3.4em; }
.hail-live b { color: var(--buoy); }
.berths { display: grid; grid-template-columns: 1fr 26px 1fr; align-items: stretch; margin-top: 12px; }
.slip { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px 9px 30px; background: var(--sea); color: var(--canvas); min-height: 150px; overflow: hidden;
  box-shadow: inset 0 0 0 3px var(--tar); }
.slip::before { content: ""; position: absolute; left: 0; right: 0; bottom: 24px; height: 4px; opacity: .3;
  background: repeating-linear-gradient(90deg, var(--canvas) 0 6px, transparent 6px 14px); pointer-events: none; }
.slip-tag { font: 400 15px/1 var(--px); letter-spacing: .06em; text-transform: uppercase; color: #CFE3E7; position: relative; }
.slip-size { font: 400 40px/.95 var(--px); color: var(--canvas); word-break: break-all; position: relative; }
.slip-who { font: 400 12.5px/1.35 var(--tx); color: #DCEBEE; position: relative; z-index: 1; }
.slip-water { position: absolute; left: 0; right: 0; bottom: 0; height: 22px;
  background: repeating-linear-gradient(90deg, var(--plank) 0 10px, var(--plank-hi) 10px 12px, var(--plank) 12px 22px, var(--plank-lo) 22px 24px);
  box-shadow: inset 0 3px 0 var(--plank-lo); }
.slip.is-first { background: var(--buoy); animation: beacon 1.6s steps(2) infinite; }
.slip.is-first .slip-size { color: var(--buoy-ink); }
.slip.is-waiting { background: var(--tar); }
.slip.is-taken { background: var(--fog); }
.slip.is-taken .slip-field input { text-decoration: line-through; text-decoration-thickness: 3px; }
.slip.is-taker { background: var(--buoy); }
@keyframes beacon { 50% { background: var(--buoy-deep); } }
.slip-field { display: flex; align-items: baseline; gap: 5px; border-bottom: 3px solid var(--canvas); position: relative; }
.slip-field input { width: 100%; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--canvas); font: 400 40px/1 var(--px); padding: 0; }
.slip-field input::placeholder { color: #8DB3BC; }
.slip-tk { font: 400 13px/1 var(--px); color: #CFE3E7; letter-spacing: .05em; }
.slip-you:focus-within { box-shadow: inset 0 0 0 3px var(--buoy); }
.bollard { display: flex; align-items: center; justify-content: center; }
.bollard span { font: 400 16px/1 var(--px); color: var(--canvas); background: var(--tar); padding: 6px 3px; letter-spacing: .05em; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips button { font: 400 17px/1 var(--px); color: var(--tar); background: var(--sand); border: 0; box-shadow: inset 0 0 0 2px var(--tar); padding: 7px 10px; cursor: pointer; }
.chips button:hover { background: var(--canvas); }
.horn { display: block; width: 100%; margin-top: 12px; font: 400 28px/1 var(--px); letter-spacing: .06em; color: var(--buoy-ink); background: var(--buoy); border: 0; padding: 13px 10px 12px; cursor: pointer; box-shadow: 4px 4px 0 var(--tar); }
.horn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tar); }
.horn:disabled { background: var(--sand); color: var(--salt); box-shadow: none; cursor: default; }
.slate { margin-top: 10px; font: 600 14px/1.4 var(--tx); color: var(--buoy); }
.slate-go { font: 400 16px/1 var(--px); background: var(--buoy); color: var(--buoy-ink); border: 0; padding: 5px 8px; cursor: pointer; }
.lasttake { margin-top: 12px; font: 400 13.5px/1.45 var(--tx); color: var(--tar-2); border-top: 3px dotted var(--tar); padding-top: 10px; }
.lasttake b { font: 400 15px/1 var(--px); text-transform: uppercase; letter-spacing: .06em; color: var(--buoy); margin-right: 4px; }
.lasttake.is-hot { animation: flare 1.2s steps(3) 2; }
@keyframes flare { 50% { background: var(--sand); } }

/* ---------- channel log (chat) ---------- */
.channel { margin-top: 22px; }
.channel-h, .pane-h { font: 400 22px/1 var(--px); letter-spacing: .05em; color: var(--tar); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.channel-dot { width: 8px; height: 8px; background: var(--buoy); animation: beacon2 1s steps(2) infinite; }
@keyframes beacon2 { 50% { opacity: .2; } }
.chat { list-style: none; display: flex; flex-direction: column; gap: 8px; max-height: 520px; overflow-y: auto; padding: 2px 4px 2px 2px; }
.msg { max-width: 88%; padding: 8px 10px; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--tar); font-size: 13.5px; line-height: 1.4; }
.msg-who { display: block; font: 400 14px/1 var(--px); letter-spacing: .05em; color: var(--salt); margin-bottom: 3px; }
.msg.is-caller { align-self: flex-start; }
.msg.is-answer { align-self: flex-end; background: var(--sand); }
.msg.is-master { align-self: center; max-width: 96%; background: var(--tar); color: var(--canvas); box-shadow: none; }
.msg.is-master .msg-who { color: #F4A9D8; }
.msg.is-new { animation: dropin .5s steps(4); }
@keyframes dropin { from { transform: translateY(-8px); opacity: 0; } }
.quiet { color: var(--salt); font-size: 13.5px; list-style: none; }

/* ---------- panes, rules ---------- */
.pane { margin-top: 18px; }
.ledger { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.ledger li { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--tar); padding: 8px 10px; word-break: break-all; }
.mine-owed { font: 400 26px/1.1 var(--px); color: var(--buoy); margin-bottom: 10px; }
.rules { margin-top: 24px; }
.rules-list { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.rules-list b { color: var(--buoy); }
.worked { margin-top: 14px; background: var(--canvas); box-shadow: inset 0 0 0 2px var(--tar); padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.worked-h { font: 400 19px/1 var(--px); letter-spacing: .05em; color: var(--buoy); }
.terms { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.terms div { background: var(--sand); padding: 7px 9px; }
.terms dt { font: 400 13px/1 var(--px); text-transform: uppercase; letter-spacing: .06em; color: var(--salt); }
.terms dd { font: 600 13.5px/1.3 var(--tx); }

/* ---------- footer ---------- */
.quay-foot { margin-top: 26px; border-top: 3px dotted var(--tar); padding-top: 12px; font-size: 12px; color: var(--salt); display: flex; flex-direction: column; gap: 4px; word-break: break-all; }

/* ---------- the gangway: the CA, pinned across the foot of the screen ---------- */
.gangway { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; min-height: var(--deck);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 4px 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--tar); color: var(--canvas);
  border-top: 6px solid var(--plank); }
.gangway-k { grid-row: 1 / span 2; font: 400 22px/1 var(--px); color: var(--buoy-ink); background: var(--buoy); padding: 8px 7px 6px; align-self: center; }
.gangway-a { grid-column: 2; grid-row: 1 / span 2; font: 400 12.5px/1.35 var(--mn); color: var(--canvas); word-break: break-all; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.gangway-a.is-wait { color: #AEB8CC; font-style: italic; user-select: none; -webkit-user-select: none; word-break: normal; }
.gangway-copy { grid-column: 3; grid-row: 1; font: 400 19px/1 var(--px); letter-spacing: .05em; color: var(--tar); background: var(--canvas); border: 0; padding: 8px 14px 7px; cursor: pointer; }
.gangway-copy:disabled { background: var(--tar-2); color: #7F8AA0; cursor: default; }
.gangway-copy.is-done { background: var(--buoy); color: var(--buoy-ink); }
.gangway-gm { grid-column: 3; grid-row: 2; font: 400 10.5px/1 var(--mn); color: #C9D1E0; text-align: center; }

/* ---------- veil + toast ---------- */
.veil { position: fixed; inset: 0; background: rgba(19, 32, 58, .55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.veil-box { background: var(--canvas); box-shadow: 0 0 0 3px var(--tar), 5px 5px 0 3px var(--tar); padding: 16px; width: min(360px, 100%); display: flex; flex-direction: column; gap: 8px; }
.veil-t { font: 400 22px/1 var(--px); }
#veilBody button { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--sand); color: var(--tar); border: 0; padding: 9px; font: 600 14px/1 var(--tx); cursor: pointer; margin-bottom: 4px; }
#veilBody img { width: 22px; height: 22px; }
.veil-x { background: none; border: 0; color: var(--salt); font: 400 16px/1 var(--px); cursor: pointer; align-self: flex-end; }
.toast { position: fixed; left: 50%; bottom: calc(var(--deck) + 14px); transform: translateX(-50%); background: var(--buoy); color: var(--buoy-ink); font: 400 18px/1 var(--px); padding: 9px 14px; z-index: 70; }

/* ---------- 720–1000: one column, wider measure, bigger dock ---------- */
@media (min-width: 720px) {
  :root { --deck: 70px; }
  .quay { padding: 18px 28px calc(var(--deck) + 30px); max-width: 860px; margin: 0 auto; }
  .hail { padding: 20px; }
  .hail-live { font-size: 18px; }
  .berths { grid-template-columns: 1fr 40px 1fr; }
  .slip { min-height: 190px; padding: 14px 14px 34px; }
  .slip-size, .slip-field input { font-size: 58px; }
  .slip-who { font-size: 14px; }
  .terms { grid-template-columns: repeat(3, 1fr); }
  .gangway { grid-template-columns: auto auto auto auto; grid-template-rows: auto; justify-content: center; gap: 14px; }
  .gangway-k, .gangway-a, .gangway-copy, .gangway-gm { grid-row: 1; grid-column: auto; }
  .gangway-a { font-size: 15px; }
}

/* ---------- ≥1000: the page recomposes — the dock left, the channel beside it, rules under the dock ---------- */
@media (min-width: 1000px) {
  .quay { max-width: 1180px; padding: 22px 32px calc(var(--deck) + 36px); }
  .quay-main { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 32px; align-items: start; }
  .hail { grid-column: 1; grid-row: 1; margin-top: 18px; padding: 24px; }
  .channel { grid-column: 2; grid-row: 1 / span 2; margin-top: 18px; position: sticky; top: 16px; }
  .chat { max-height: calc(100vh - var(--deck) - 110px); }
  .pane { grid-column: 1 / -1; }
  .rules { grid-column: 1; grid-row: 2; }
  .hail-live { font-size: 20px; }
  .slip { min-height: 230px; }
  .slip-size, .slip-field input { font-size: 72px; }
  .horn { font-size: 34px; padding: 16px; }
  .quay-id { font-size: 32px; }
  .gangway-a { font-size: 17px; }
  .gangway-copy { font-size: 22px; padding: 9px 18px 8px; }
  .terms { grid-template-columns: 1fr 1fr; }
  .quay-main[data-v="rules"] .rules { grid-column: 1 / -1; grid-row: 1; max-width: 760px; }
}
@media (max-width: 519px) { .slip-tk { display: none; } .slip-size, .slip-field input { font-size: 36px; } }