/* Build 44 · the waterfront (waterfront.js), restyled for the new look. Flat color, 1px rules, square corners, no shadows or
   gradients. Tokens come from new-look.css with fallbacks; this file defines none of them.
   Two parts: the phone's full-screen list (.wf-sheet) and the quay in the desktop masthead (.wf-strip). The masthead around
   the quay, the room tabs and the desktop Waterfront screen are in nl-shell.css. */

/* ── phone: the full-screen list (docs/new-look/mockups/pages/aaa-front.js, "Waterfront-phone") ── */
.hos-places .wf-sheet { position: fixed; inset: 0; z-index: var(--ph-z-menu, 90); display: flex; flex-direction: column; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px);
  background: var(--nl-ink, #0f2027); color: var(--nl-snow, #eef2f1); font-family: var(--nl-sans, system-ui, sans-serif); }
.wf-head { flex: none; display: flex; align-items: center; min-height: 56px; padding: 0 8px 0 16px; border-bottom: 1px solid #2a454d; }
.wf-head h1 { margin: 0; font-family: var(--nl-serif, Georgia, serif); font-weight: 500; font-size: 24px; letter-spacing: 0; text-transform: none; color: var(--nl-snow, #eef2f1); }
.hos-places .wf-sheet button { box-sizing: border-box; margin: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; font-family: inherit; cursor: pointer; text-transform: none; letter-spacing: 0; }
.hos-places .wf-sheet .wf-x { margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; font-size: 28px; line-height: 1; }
.wf-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling: touch; }
.wf-building { border-bottom: 1px solid #2a454d; padding: 4px 0 4px; }
.hos-places .wf-sheet .wf-name { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0; border: 0; text-align: left; }
.wf-glyph { flex: none; display: block; }
.wf-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 16px; }
.wf-state { flex: none; margin-left: auto; font-style: normal; font-size: 13px; white-space: nowrap; color: var(--nl-pale, #9db3b6); }
.wf-state.waiting { color: var(--nl-sun, #f2c230); font-weight: 700; }
/* the rooms are one wrapping line of text links separated by middle dots. Each link is its own 44px-high button (padding makes
   the hit area; the text stays small), so wrapped lines sit 44px apart and no button covers another's centre */
.wf-rooms { display: flex; flex-wrap: wrap; align-items: center; padding: 0 0 2px 54px; }
.hos-places .wf-sheet .wf-room { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; margin: 0; padding: 0 1px; border: 0; font-size: 13px; line-height: 20px; color: #b9cbcd; text-align: left; }
.hos-places .wf-sheet .wf-room:not(:last-child)::after { content: '\00b7'; margin-left: 5px; color: var(--nl-pale, #9db3b6); }
.hos-places .wf-sheet .wf-room:hover:not(:disabled), .hos-places .wf-sheet .wf-room:active:not(:disabled) { background: none; border: 0; color: var(--nl-snow, #eef2f1); text-decoration: underline; }
.hos-places .wf-sheet .wf-name:hover:not(:disabled), .hos-places .wf-sheet .wf-name:active:not(:disabled) { background: #16313a; border: 0; }
.hos-places .wf-sheet .wf-x:hover:not(:disabled) { background: none; border: 0; }
.hos-places .wf-sheet button:focus-visible { outline: 2px solid var(--nl-sun, #f2c230); outline-offset: -2px; }

/* ── desktop: the quay, eleven buildings on the water (the second row of the masthead, "mast()" in the boards) ── */
.nls-quay { position: relative; flex: 1 1 auto; min-width: 0; height: 144px; font-family: var(--nl-sans, system-ui, sans-serif); color: var(--nl-snow, #eef2f1); }
.nls-shore { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.wf-quay { position: relative; display: flex; height: 100%; margin: 0; padding: 0 12px; }
.hos-places .wf-strip .wf-pier { flex: 1 1 0; min-width: 0; position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding: 106px 0 0; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; background: none; color: inherit; font-family: inherit; text-align: center; cursor: pointer; text-transform: none; }
.hos-places .wf-strip .wf-pier:hover:not(:disabled) { background: rgba(238, 242, 241, .07); border: 0; }
.hos-places .wf-strip .wf-pier:focus-visible { outline: 2px solid var(--nl-sun, #f2c230); outline-offset: -2px; }
/* the glyph's ground line sits on the quay line (96px down) at every width: the drawing is 112 wide and scales with its column */
.hos-places .wf-strip .wf-pier.here::before { content: ''; position: absolute; top: calc(96px - 0.625 * min(112px, 100cqw)); left: 50%; width: min(64px, 70cqw); height: 3px; transform: translateX(-50%); background: var(--nl-sun, #f2c230); }
.wf-strip .wf-glyph-quay { position: absolute; left: 50%; bottom: calc(48px - 0.125 * min(112px, 100cqw)); display: block; width: min(112px, 100cqw); height: auto; transform: translateX(-50%); }
.hos-places .wf-strip .wf-label { display: block; margin-top: -2px; max-width: 100%; color: #e9f1f0; font-size: 12px; font-weight: 600; letter-spacing: .08em; line-height: 16px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.hos-places .wf-strip .wf-pier.here .wf-label { color: var(--nl-sun, #f2c230); }
.hos-places .wf-strip .wf-st { display: block; max-width: 100%; margin-top: 0; font-size: 12px; line-height: 16px; white-space: nowrap; color: var(--nl-pale, #9db3b6); }
.hos-places .wf-strip .wf-st.waiting { color: var(--nl-sun, #f2c230); font-weight: 400; }
/* narrower screens: the pale second line goes first, then the tracking and the capitals */
@media (max-width: 1239px) { .hos-places .wf-strip .wf-label { letter-spacing: .03em; } }
@media (max-width: 1199px) { .hos-places .wf-strip .wf-st { display: none; } .hos-places .wf-strip .wf-label { letter-spacing: 0; } }
@media (max-width: 1099px) { .hos-places .wf-strip .wf-label { text-transform: none; font-size: 12px; } .wf-quay { padding: 0 4px; } }
html.hos-phone .wf-strip { display: none; }

/* the room tabs above every page of a building with more than one room (mockups: rooms() on desktop, prooms() on the phone) */
.hos-places .wf-tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 0 0 14px; border-bottom: 1.5px solid var(--nl-ink, #0f2027); }
.hos-places .wf-tabs .wf-tab { box-sizing: border-box; min-height: 44px; margin: 0 -1.5px 0 0; padding: 0 18px; border: 1.5px solid var(--nl-ink, #0f2027); border-bottom: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--nl-ink, #0f2027);
  font: 600 15px/1 var(--nl-sans, system-ui, sans-serif); letter-spacing: 0; text-transform: none; white-space: nowrap; cursor: pointer; }
.hos-places .wf-tabs .wf-tab:hover:not(:disabled) { background: var(--nl-card, #fbfcfb); border-color: var(--nl-ink, #0f2027); }
.hos-places .wf-tabs .wf-tab.on, .hos-places .wf-tabs .wf-tab.on:hover:not(:disabled) { background: var(--nl-ink, #0f2027); color: var(--nl-snow, #eef2f1); }
.hos-places .wf-tabs .wf-tab:focus-visible { outline: 3px solid var(--nl-sun, #f2c230); outline-offset: -3px; }
.hos-places .wf-tabs-phone { flex-wrap: nowrap; overflow-x: auto; margin: 0; background: var(--nl-snow, #eef2f1); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hos-places .wf-tabs-phone::-webkit-scrollbar { display: none; }
.hos-places .wf-tabs-phone .wf-tab { flex: none; border: 0; margin: 0; }
.hos-places .wf-tabs-phone .wf-tab.on, .hos-places .wf-tabs-phone .wf-tab.on:hover:not(:disabled) { background: var(--nl-ink, #0f2027); color: var(--nl-snow, #eef2f1); }
.hos-places.hx-mode .wf-tabs:not(.wf-tabs-phone) { margin: 14px 22px 0; }