/* Things to do: the departure board hub (/do/water) and the ticket block on activity pages. Lab water-2026-10-20 variant A with the bay chart from B. Loaded only on these pages. */
.do h1::after,.dopage .art h1::after{content:'';display:inline-block;width:.13em;height:.13em;background:var(--accent);margin-left:.14em;vertical-align:baseline}
.do .head p{font-size:17px;max-width:34em}
.do .sec{margin-top:34px}
.do .dh,.dopage .art .main h2{font-weight:400;font-size:24px;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--ink)}
.do .sub{color:var(--ink2);font-size:14px;margin:4px 0 14px}
.do .src{margin-top:40px;padding-top:12px;border-top:1px solid var(--line)}
/* The chart: a square box on phones, 16:9 on web, hairline edges, numbered lemon pins */
.chart{position:relative;aspect-ratio:1/1;margin:12px -20px 0;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink2)}
.chart svg{width:100%;height:100%;display:block}
.chart .pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink);white-space:nowrap}
.chart .pin i{width:18px;height:18px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:11px;font-weight:600;display:grid;place-items:center;flex:0 0 auto}
.launch{margin-top:12px;display:flex;gap:10px;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none}.launch::-webkit-scrollbar{display:none}
.launch a{flex:0 0 auto;min-width:150px;padding:12px;border:1px solid var(--line);border-radius:2px;background:var(--bg2)}
.launch b{display:block;font-weight:500}.launch span{display:block;color:var(--ink2);font-size:12px;margin-top:2px}
/* The board: one row per operator, 56px square photo, name and dock, from-price and rating on the right */
.board{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.board li{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.board .ph{display:block;width:56px;height:56px;background:var(--bg2);overflow:hidden}.board .ph img{width:100%;height:100%;object-fit:cover;display:block}
.board .n{font-weight:500;line-height:1.2}.board .m{color:var(--ink2);font-size:12px;margin-top:3px}
.board .r{text-align:right;font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}.board .r .price{display:block;font-size:13px;color:var(--ink2)}.board .r .price.from{font-size:15px;color:var(--accent);font-weight:500}.board .r .rating b{color:var(--ink);font-weight:500}
/* The ticket: price, time, dock, departures, the lemon "Book on their site" */
.ticket{border:1px solid var(--line);border-radius:2px;padding:14px;background:var(--bg2);display:grid;grid-template-columns:1fr 1fr;gap:12px 10px;margin-top:18px}
.ticket b{display:block;font-size:11px;color:var(--ink2);text-transform:uppercase;letter-spacing:.08em;font-weight:500}
.ticket span{font-size:18px;font-weight:500;line-height:1.25}
.ticket .full{grid-column:1/-1}
.ticket .row{display:flex;gap:10px;flex-wrap:wrap}.ticket .row .btn{margin-top:0;flex:1 1 auto;padding:12px 16px;font-size:12px}
.ticket button.btn{background:transparent;color:var(--ink);font:inherit;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:500;cursor:pointer}
.ticket .btn.on{border-color:var(--accent);color:var(--accent)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin:12px 0 0;padding:0}
.kv div{padding:10px 0;border-bottom:1px solid var(--line)}.kv dt{font-size:12px;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em}.kv dd{margin:2px 0 0;font-size:16px}
.do .kv{grid-template-columns:1fr}.do .kv dt{font-size:15px;color:var(--ink);text-transform:none;letter-spacing:0;font-weight:500}.do .kv dd{color:var(--ink2);font-size:15px}
.art .main .bring{margin-top:12px}
@media(min-width:900px){.launchrow{display:grid;grid-template-columns:460px 1fr;gap:24px;margin-top:12px}.chart{aspect-ratio:1/1;margin:0;border:1px solid var(--line)}.launch{flex-direction:column;overflow:visible;margin:0;padding:0;gap:2px}.launch a{min-width:0;padding:14px 16px}.board li{grid-template-columns:72px 1fr auto}.board .ph{width:72px;height:72px}.do .kv{grid-template-columns:1fr 1fr 1fr;gap:0 24px}.ticket{grid-template-columns:1fr 1fr 2fr}.ticket .full{grid-column:3}.ticket .full.row{grid-column:1/-1}}