/* Atlas craft lift · 6 November 2026. Geometry carries the marina's meaning. */
#app {
  --ink:#18394d; --ink-2:#526d7c; --ink-3:#607987;
  --acc:#245ee5; --acc-txt:#245ee5; --acc-soft:#e8efff;
  color:#203e50;
  background:radial-gradient(ellipse at 66% -10%,#fff 0,transparent 56%),#edf2f5;
  -webkit-font-smoothing:antialiased;
}
.shell { padding:1.6rem; gap:2rem; grid-template-columns:20rem minmax(0,1fr); }
.rail { border-radius:2.8rem; padding:2.6rem 1.2rem 2rem; background:linear-gradient(160deg,#fff,#f9fbfc); box-shadow:0 3px 5px #33516a03,0 20px 50px #33516a06,inset 0 1px 0 #fff; }
.brand { margin:.2rem .8rem 4rem; gap:1rem; }
.brand>span { font-size:2.5rem; letter-spacing:-.09rem; }
.brand img { width:4rem; height:4rem; }
.brand small { font-size:1.12rem; }
.rail-label { margin:0 1.4rem 1.4rem; color:#526b7b; }
.nav { gap:.7rem; }
.nav>button { border-radius:1.4rem; min-height:5.2rem; padding:1.1rem 1.3rem; font-size:1.4rem; transition:background 180ms,color 180ms,box-shadow 180ms; opacity:1!important; filter:none!important; animation:none!important; }
.nav>button[aria-current=page] { color:#245ee5; background:linear-gradient(120deg,#e8f0ff,#edf3ff); box-shadow:inset 0 1px 0 #ffffffb0,0 5px 15px #2e61b708; }
.nav-count { background:#e7edf3; color:#506c80; }
.workspace { padding:0; grid-template-rows:8.8rem minmax(0,1fr) 3.4rem; }
.top { padding:0 .8rem; opacity:1!important; filter:none!important; animation:none!important; }
.top h1 { font-size:2.7rem; font-weight:650; letter-spacing:-.08rem; }
.top .eyebrow { font-size:1.15rem; color:#526b7b; }
.search-button { border-radius:99px; background:#ffffffb0; box-shadow:0 3px 12px #2c526406,inset 0 1px 0 #fff; }
.demo-label { background:#e4ecf1; padding:.55rem .85rem; border-radius:99px; color:#526b7b; font-size:1rem; }
#content { padding:.3rem .4rem 1.6rem; }
.card { border-radius:2.6rem; background:linear-gradient(145deg,#fff,#fcfdff); box-shadow:0 2px 4px #29486303,0 16px 40px -22px #29486326,inset 0 1px 0 #fff; padding:2.6rem; }
.card h2 { color:#244253; font-size:1.8rem; font-weight:650; letter-spacing:-.035rem; }
.card p { color:#526b7b; }
.btn { border-radius:99px; font-size:1.3rem; padding:1.15rem 1.8rem; transition:background 170ms,box-shadow 170ms,transform 170ms; }
.btn.primary { background:linear-gradient(115deg,#2868ee,#2459d7); box-shadow:0 4px 8px #245dd711,0 10px 22px -10px #245dd77a,inset 0 1px 0 #ffffff30; }
.btn.primary:where(:hover,[data-ph-hover]) { background:#1c53ce; box-shadow:0 6px 18px -7px #245dd780; }
.btn.secondary { background:#eaf0f5; color:#42667e; }
.btn:active { transform:translateY(1px); }
.text-btn { font-size:1.2rem; font-weight:600; color:#2d64cf; }
.chip { border-radius:99px; padding:.5rem .9rem; font-size:1.05rem; font-weight:600; }
.chip.afventer { background:#fff1dc; color:#93611d; }
.chip.reserveret { background:#e9efff; color:#325dc1; }
.chip.ankommet { background:#edf3f5; color:#486f80; }
.chip.ledig { background:#e8f3ef; color:#3a7566; }
.statusbar { font-size:1.05rem; color:#526b7b; padding:0 .7rem; opacity:1!important; filter:none!important; animation:none!important; }

/* The first screen is a chart with a compact task rail. */
.craft-overview { grid-template-columns:minmax(0,1fr) 31rem; grid-template-areas:'map next' 'map today' 'ready ready'; align-items:stretch; gap:1.7rem; }
.map-card { grid-area:map; padding:0; overflow:hidden; display:flex; flex-direction:column; }
.map-title { padding:2.1rem 2.5rem 1.8rem; gap:1.5rem; }
.map-kicker { display:block; font-size:1.05rem; color:#526b7b; margin-bottom:.55rem; }
.map-title h2 { font-size:2.15rem; font-weight:650; letter-spacing:-.06rem; display:flex; align-items:center; gap:1.1rem; margin:0; }
.map-title h2>span { font-size:1.1rem; font-weight:500; color:#526b7b; background:#eaf4ee; border-radius:99px; padding:.5rem .9rem; margin:0; letter-spacing:0; white-space:nowrap; }
.map-list-link { display:flex; align-items:center; gap:.7rem; min-height:44px; background:#eef3f6; color:#536f80; border:0; border-radius:99px; padding:.8rem 1.3rem; font-size:1.15rem; }
.map-list-link .pd-i { width:1.6rem; height:1.6rem; }
.chart-surface { position:relative; background:#b1d2dc; isolation:isolate; }
.chart-scroll { height:46rem; overflow:auto; scrollbar-width:thin; scrollbar-color:#81aab8 #b1d2dc; }
.chart-plane { position:relative; min-width:700px; aspect-ratio:1000/520; transform-origin:0 0; }
.chart-drawing { position:absolute; inset:0; width:100%; height:100%; font-family:Figtree,sans-serif; }
.chart-building-label { fill:#5a746d; font-size:12px; font-weight:550; }
.chart-pier-label { fill:#587273; font-size:15px; font-weight:650; }
.chart-direction { fill:#467888; font-size:11px; }
.chart-controls { position:absolute; right:1.8rem; bottom:1.9rem; z-index:5; display:flex; align-items:center; padding:.35rem; background:#ffffffed; border-radius:99px; box-shadow:0 3px 6px #385e6b10,0 10px 28px #385e6b1a; }
.chart-controls button { min-width:44px; min-height:44px; border:0; background:transparent; color:#3b647a; border-radius:50%; font-size:2rem; }
.chart-controls .chart-fit { font-size:1.05rem; border-radius:99px; min-width:6rem; }
.chart-controls button:where(:hover,[data-ph-hover]) { background:#edf4f8; }
.chart-controls button:disabled { color:#526b7b; opacity:.55; }
.chart-caption { position:absolute; left:2rem; bottom:1.6rem; padding:.55rem .9rem; background:#eaf4f4b8; color:#526b7b; font-size:.9rem; border-radius:99px; pointer-events:none; }
.berth-hotspot { position:absolute; width:13.4%; height:9.7%; min-height:44px; transform:translate(-50%,-50%); padding:0; border:0; background:none; cursor:pointer; outline-offset:3px; z-index:2; }
.mooring-pocket { position:absolute; inset:0 2%; border-radius:1.2rem; border:1px dashed #57909c42; transition:background 170ms,border-color 170ms,box-shadow 170ms; }
.berth-hotspot.ankommet .mooring-pocket { border-color:transparent; }
.berth-hotspot:where(:hover,[data-ph-hover]) .mooring-pocket { border-color:#dce6ee; background:#d8ebf72e; box-shadow:0 0 0 3px #f0f8fd38; }
.berth-hotspot.chosen { z-index:3; }
.berth-hotspot.chosen .mooring-pocket { background:#d8ebff79; border:2px solid #2461df; box-shadow:0 0 0 4px #f6fbff8a,0 8px 16px #295f9d18; }
.berth-number { position:absolute; bottom:-1.45rem; display:grid; place-items:center; min-width:2.8rem; height:1.5rem; padding:0 .35rem; border-radius:.35rem; background:#e9dfc9; color:#5c6c65; font-size:.93rem; font-weight:650; box-shadow:0 1px 2px #506b6410; }
.port .berth-number { right:.1rem; }
.starboard .berth-number { left:.1rem; }
.chosen .berth-number { color:#fff; background:#2461df; box-shadow:0 2px 5px #225fd333; }
.vessel { position:absolute; left:50%; top:50%; display:block; width:100%; height:185%; object-fit:contain; transform:translate(-50%,-50%) rotate(var(--vessel-turn,0deg)); pointer-events:none; }
.drawn-yacht { width:100%; height:100%; overflow:visible; }
.sailboat { height:172%; filter:drop-shadow(2px 3px 2px #244c6424); }
.motorboat { height:174%; }
.port .vessel { left:61%; }
.starboard .vessel { left:39%; }
.reservation-pin { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); height:1.5rem; width:1.5rem; border-radius:50%; background:#648ce0; border:3px solid #e4eeff; box-shadow:0 2px 6px #4c74a51a; }
.reserveret .mooring-pocket { border-color:#628fe1aa; background:#cae0ff20; }
.blocked-lines { position:absolute; inset:15% 10%; border-radius:.5rem; background:repeating-linear-gradient(135deg,#bfad8d77 0,#bfad8d77 4px,transparent 4px,transparent 12px); }
.spaerret .mooring-pocket { border-color:#a99e8580; }
.selection-pin { position:absolute; left:50%; top:50%; width:.6rem; height:.6rem; border-radius:50%; background:#2461df; box-shadow:0 0 0 5px #f7fbffa6; transform:translate(-50%,-50%); pointer-events:none; }
.ankommet .selection-pin { display:none; }
.map-legend { padding:1.5rem 2.5rem; gap:1.8rem; font-size:1.05rem; background:#fbfdfe; }
.dot { border-radius:50%; height:.7rem; width:.7rem; background:transparent; box-shadow:inset 0 0 0 1px #90adae; }
.dot.ankommet { background:#567e8d; }
.dot.reserveret { background:#6c91df; }
.dot.spaerret { background:#bcaa8a; }
.map-legend .legend-total { margin-left:auto; color:#526b7b; font-size:.95rem; }
.selected-berth { margin:0; padding:1.8rem 2.5rem; gap:2rem; border-top:1px solid #eaf0f3; flex-wrap:nowrap; align-items:center; background:linear-gradient(105deg,#f2f7ff,#fbfdff 64%); }
.selected-identity { min-width:12rem; }
.selected-identity>small { font-size:.95rem; color:#526b7b; display:block; margin:0 0 .5rem; }
.selected-identity>div { display:flex; align-items:center; gap:1rem; }
.selected-identity strong { font-size:2.4rem; line-height:1.1; font-weight:600; letter-spacing:-.06rem; color:#2c5777; }
.place-capacity { display:flex; gap:2.3rem; flex:1; }
.place-capacity dt { font-size:.95rem; margin-bottom:.5rem; color:#526b7b; }
.place-capacity dd { font-size:1.65rem; color:#355d78; font-weight:550; }
.place-capacity dd>span { font-size:1rem; font-weight:400; color:#526b7b; }
.selected-action { display:flex; align-items:center; gap:1.6rem; margin-left:auto; }
.selected-action>span { font-size:1.4rem; color:#375e78; font-weight:650; white-space:nowrap; }
.selected-action>span small { font-size:.95rem; font-weight:400; color:#526b7b; }
.selected-action .btn { padding:1rem 1.4rem; font-size:1.15rem; }
.map-selection-note { display:flex; justify-content:space-between; align-items:center; gap:2rem; padding:0 2.5rem 1.2rem; background:linear-gradient(105deg,#f2f7ff,#fbfdff 64%); color:#526b7b; font-size:1rem; line-height:1.55; }
.map-selection-note .text-btn { font-size:1rem; min-height:3rem; flex:none; }
.next-card { grid-area:next; display:block; min-height:0; padding:2.5rem; align-self:start; background:linear-gradient(145deg,#fff,#f4f8ff); box-shadow:0 14px 36px -18px #335c8f28,inset 0 1px 0 #fff; }
.next-card .card-head { margin-bottom:2.2rem; }
.arrival-tag { font-size:1.15rem; font-weight:650; color:#35556f; }
.arrival-eta { display:flex; align-items:center; gap:.45rem; font-size:1.05rem; color:#526b7b; }
.arrival-eta .pd-i { width:1.3rem; height:1.3rem; }
.arrival-identity { display:flex; align-items:center; gap:1.2rem; }
.arrival-symbol { width:4.2rem; height:4.2rem; background:linear-gradient(140deg,#e4eeff,#f1f6ff); border-radius:1.4rem; display:grid; place-items:center; color:#526b7b; box-shadow:inset 0 1px 0 #fff; }
.arrival-symbol .pd-i { width:1.8rem; height:1.8rem; }
.arrival-identity h2 { font-size:2.15rem; line-height:1.3; letter-spacing:-.06rem; margin:0; }
.arrival-identity>div>span { display:block; font-size:1.05rem; color:#526b7b; margin-top:.35rem; }
.boat-measures { margin:2rem 0 0; padding:1.6rem 0 1.7rem; border-color:#dce6ee; }
.boat-measures dt { font-size:1.05rem; margin-bottom:.5rem; color:#526b7b; }
.boat-measures dd { font-size:2.1rem; font-weight:550; color:#355973; }
.boat-measures dd small { font-size:1rem; color:#526b7b; }
.next-card>.btn { margin-top:1.8rem; min-height:4.7rem; font-size:1.3rem; }
.next-card>.quiet { text-align:center; color:#526b7b; font-size:.95rem; margin-top:1rem; }
.today-card { grid-area:today; padding:2.5rem 2.4rem 1.5rem; align-self:start; }
.today-card .card-head { margin-bottom:1.7rem; }
.today-card h2 { font-size:1.65rem; }
.arrival-row { display:grid; grid-template-columns:3.6rem minmax(0,1fr); gap:.7rem 1rem; position:relative; padding:1.5rem 0; border-color:#edf1f5; }
.arrival-row>.time { grid-column:1; grid-row:1; font-size:1.1rem; min-width:0; line-height:1.7; }
.arrival-row>span:nth-child(2) { grid-column:2; grid-row:1; }
.arrival-row strong { font-size:1.2rem; line-height:1.65; }
.arrival-row strong .muted { font-size:1rem; margin-left:.2rem; }
.arrival-row small { font-size:1rem; line-height:1.6; margin-top:.2rem; }
.arrival-row>.chip { grid-column:2; width:fit-content; font-size:.9rem; padding:.3rem .7rem; }
.arrival-row .arrow { display:none; }
.today-card>.text-btn { width:100%; justify-content:space-between; margin:0; font-size:1.1rem; }
.ready-card { grid-area:ready; padding:1.8rem 2.5rem; display:flex; flex-direction:row; align-items:center; gap:3rem; background:#e3edf3; box-shadow:inset 0 1px 0 #f7fbff; border-radius:2rem; }
.capacity-summary { display:flex; align-items:center; gap:1.1rem; flex:none; }
.capacity-summary h2 { font-size:1.4rem; }
.capacity-summary p { font-size:1.05rem; margin:.4rem 0 0; }
.capacity-emblem { width:3.8rem; height:3.8rem; border-radius:50%; background:#f2f7fb; color:#526b7b; display:grid; place-items:center; }
.occupancy-track { flex:1; margin:0; gap:.4rem; min-height:1.8rem; }
.occupancy-track i { border-radius:99px; height:1.8rem; background:#f5f9fc; }
.occupancy-track i.ankommet { background:#668da0; }
.occupancy-track i.reserveret { background:#7798dd; }
.occupancy-track i.spaerret { background:#c7bca9; }
.service-summary { border:0; background:transparent; color:#526b7b; font-size:1.05rem; display:flex; align-items:center; gap:.8rem; min-height:44px; white-space:nowrap; }
.service-summary .pd-i { width:1.4rem; height:1.4rem; }
.service-dot { height:.6rem; width:.6rem; background:#bca37a; border-radius:50%; }

/* The secondary rooms and documents belong to the same product. */
.view-head { margin:.8rem .4rem 2.1rem; }
.view-head h2 { font-size:2.2rem; letter-spacing:-.055rem; }
.view-head p { font-size:1.25rem; color:#526b7b; }
.segments { border-radius:99px; background:#edf3f7; padding:.45rem; gap:.25rem; }
.segments button { border-radius:99px; font-size:1.15rem; padding:.8rem 1.4rem; transition:background 170ms,color 170ms; }
.segments button[aria-pressed=true] { color:#3064c7; background:#fff; box-shadow:0 2px 5px #456a8510; }
.booking-row { padding:2.1rem 1rem; border-color:#eef2f6; }
.booking-row .booking-main>.time { color:#526b7b; font-size:1.3rem; }
.booking-place>b { background:#edf3fa; border-radius:1.1rem; padding:1rem; font-size:1.5rem; }
.booking-row h3 { font-size:1.55rem; }
.booking-row p { font-size:1.2rem; color:#526b7b; }
.search-field input,.field input,.field select,.field textarea { border-color:#dce6ee; border-radius:1.3rem; box-shadow:inset 0 1px 2px #36536a04; transition:border-color 160ms,box-shadow 160ms; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#dce6ee; box-shadow:0 0 0 3px #edf3ff; }
.field { color:#526b7b; font-size:1.2rem; }
.field-hint { color:#526b7b!important; }
thead th { color:#526b7b; background:#f4f7fa; border-bottom:0; padding-top:1.3rem; padding-bottom:1.3rem; }
thead th:first-child { border-radius:1.2rem 0 0 1.2rem; }
thead th:last-child { border-radius:0 1.2rem 1.2rem 0; }
td,tbody th { border-color:#edf2f5; padding-top:1.4rem; padding-bottom:1.4rem; }
tbody tr:hover { background:#f8fafe; }
.guest-layout { grid-template-columns:minmax(29rem,.78fr) minmax(0,1.3fr); }
.guest-row { border-radius:1.6rem; padding:1.4rem; margin-bottom:.5rem; transition:background 170ms; }
.guest-row>b { border-radius:1.1rem; color:#526b7b; background:#edf3f7; }
.guest-row.chosen { background:linear-gradient(100deg,#edf3ff,#f4f7fe); }
.guest-row.chosen>b { background:#dfeaff; color:#3566bb; }
.document-card { padding:3.3rem; background:linear-gradient(165deg,#fff,#fbfcfe); }
.document-heading { margin-bottom:2.8rem; padding-bottom:2rem; border-bottom:1px solid #edf2f6; }
.document-card h2 { font-size:2.4rem; color:#2f536b; }
.document-card .stay-facts { margin:2.2rem 0; }
.document-card .price-lines,.reserve-price { border-radius:1.8rem; background:linear-gradient(120deg,#eef4fb,#f4f8fc); padding:1.6rem 2rem; box-shadow:inset 0 1px 0 #fff; }
.line { font-size:1.25rem; color:#526b7b; padding:1.2rem 0; }
.line strong { color:#355d77; font-weight:600; }
.line.total { color:#4b6e83; border-color:#dce6ee; font-size:1.55rem; }
.line.total strong { color:#2e5a7a; font-size:1.9rem; }
.document-note { color:#526b7b!important; font-size:1.05rem!important; }
.document-card .actions { gap:1rem; }
.document-card .actions .btn { font-size:1.2rem; }
.task-card { position:relative; overflow:hidden; }
.task-card h2 { font-size:2.1rem; margin:2rem 0 1rem; }
.task-card .task-meta { background:#f5f8fb; border-radius:1.7rem; padding:.6rem 1.6rem; }
.task-card.done { background:#f4f8f7; box-shadow:inset 0 1px 0 #fff; }
.shift-row { border-color:#edf2f5; padding:2.3rem .4rem; }
.role-symbol { border-radius:1.6rem; background:linear-gradient(140deg,#e9f1fa,#f6f9fc); color:#526b7b; }
.handover-note { background:#f5f8fc; border-radius:1.6rem; padding:1.7rem; }
.report-total { background:linear-gradient(135deg,#dceaf8,#eff5fb); }
.report-number { font-weight:450; letter-spacing:-.18rem; color:#335f80; }
.activity-list li { border-color:#edf2f5; padding:1.8rem .4rem; }
.pd-modal,.pd-drawer,.pd-ark { border-radius:2.6rem; background:linear-gradient(155deg,#fff,#fbfdff); box-shadow:0 6px 15px #1e3d5310,0 30px 90px -20px #1f405c55,inset 0 1px 0 #fff; transition:opacity 260ms,transform 260ms; }
.pd-drawer-h { padding:2.5rem 2.8rem 1.8rem; }
.pd-drawer-h h2 { font-weight:600; font-size:2.3rem; letter-spacing:-.06rem; }
.pd-drawer-h .pd-btn { background:#edf3f8; border-radius:50%; color:#526b7b; }
.pd-drawer-b { padding:0 2.8rem 2.5rem; }
.pd-drawer-f { padding:1.8rem 2.8rem; background:#f4f8fb; }
.pd-scrim { backdrop-filter:none; background:#24435855; transition:opacity 220ms; }
.pd-toast { border:0; border-radius:2rem; box-shadow:0 15px 35px -15px #20436244; animation-duration:220ms; }
.note { border-radius:1.5rem; background:#eff5fa; color:#526b7b; }
.success-banner { border-radius:1.5rem; background:#e9f5f0; }
.empty { background:#f4f8fc; border-radius:2rem; }
.search-result { border-radius:1.5rem; background:#f1f6fb; }
.check-field input { accent-color:#2b65df; }

@media(max-width:1400px){html:not(.ph-frame):not(.ph-demo){
 .shell { grid-template-columns:18rem minmax(0,1fr); gap:1.5rem; padding:1.4rem; }
 .workspace { padding:0; }
 .craft-overview { grid-template-columns:minmax(0,1fr) 29rem; gap:1.5rem; }
 .selected-berth { gap:1.5rem; padding:1.7rem 2rem; }
 .selected-identity { min-width:10rem; }
 .place-capacity { gap:1.5rem; }
 .selected-action { gap:1rem; flex-direction:column; align-items:flex-end; }
 .map-selection-note { padding-left:2rem; padding-right:2rem; }
 .next-card,.today-card { padding:2.2rem; }
 .ready-card { gap:2rem; }
 .map-title { padding:2rem; }
 .map-list-link>span { display:none; }
 .map-list-link { width:44px; justify-content:center; padding:.7rem; }
}}
@media(max-width:1120px){html:not(.ph-frame):not(.ph-demo){
 .shell { grid-template-columns:8rem minmax(0,1fr); padding:1rem; gap:1.3rem; }
 .rail { padding:2.4rem .7rem; border-radius:2.4rem; }
 .brand { margin:0 auto 3rem; }
 .nav>button { min-height:5.4rem; }
 .craft-overview { grid-template-columns:minmax(0,1fr) 28rem; gap:1.3rem; }
 .map-title h2 { font-size:1.85rem; gap:.7rem; }
 .map-title h2>span { font-size:.95rem; padding:.5rem .7rem; }
 .map-legend { gap:1.2rem; padding:1.3rem 2rem; }
 .map-legend .legend-total { display:none; }
 .selected-berth { flex-wrap:wrap; gap:1.4rem; }
 .selected-identity { flex:1; }
 .place-capacity { flex:none; }
 .selected-action { width:100%; flex-direction:row; justify-content:space-between; }
 .map-selection-note { gap:1rem; align-items:flex-start; flex-direction:column; }
 .map-selection-note .text-btn { min-height:3rem; }
 .ready-card { flex-wrap:wrap; gap:1.5rem; padding:1.7rem 2rem; }
 .occupancy-track { min-width:18rem; }
 .capacity-summary p { font-size:1rem; }
 .service-summary { min-height:3rem; }
}}
@media(max-width:820px){html:not(.ph-frame):not(.ph-demo){
 .shell { display:block; padding:0; }
 .rail { display:contents; }
 .workspace { padding:0 1.5rem 7.5rem; grid-template-rows:9rem minmax(0,1fr) 3.2rem; }
 .top { padding:0 .4rem; }
 .top h1 { font-size:2rem; letter-spacing:-.05rem; max-width:26rem; }
 .mobile-brand { font-size:1.1rem; }
 .mobile-brand img { height:1.8rem; width:1.8rem; }
 .search-button { width:4.4rem; height:4.4rem; background:#fff; }
 .nav { border-radius:2.2rem 2.2rem 0 0; padding:.7rem .6rem 1rem; box-shadow:0 -8px 26px #34556f0a; gap:.3rem; background:#fffffffa; }
 .nav>button { border-radius:1.5rem; padding:.4rem .1rem; min-height:5.4rem; font-size:1rem; }
 .nav>button[aria-current=page] { box-shadow:none; }
 .nav-count { font-size:.85rem; top:.1rem; right:1.2rem; }
 .card { padding:2rem; border-radius:2.3rem; }
 .craft-overview { display:flex; flex-direction:column; gap:1.4rem; }
 .next-card { order:-1; display:block; padding:1.8rem 2rem 1.5rem; align-self:stretch; width:auto; }
 .next-card .card-head { margin-bottom:1.5rem; }
 .arrival-tag { font-size:1.1rem; }
 .arrival-eta { font-size:1.05rem; }
 .arrival-identity { gap:1.1rem; }
 .arrival-symbol { height:3.7rem; width:3.7rem; border-radius:1.25rem; }
 .arrival-identity h2 { font-size:2rem; }
 .arrival-identity>div>span { font-size:1.05rem; margin-top:.2rem; }
 .next-card .boat-measures { margin:1.5rem 0 0; padding:1.2rem 0; }
 .next-card .boat-measures dt { font-size:1.05rem; }
 .next-card .boat-measures dd { font-size:1.85rem; }
 .next-card>.btn { margin-top:1.4rem; min-height:4.6rem; font-size:1.3rem; }
 .next-card>.quiet { text-align:center; font-size:.9rem; margin-top:.7rem; }
 .map-card { order:0; padding:0; }
 .map-title { padding:1.8rem 1.8rem 1.5rem; }
 .map-kicker { font-size:.95rem; margin-bottom:.45rem; }
 .map-title h2 { font-size:1.9rem; gap:.8rem; }
 .map-title h2>span { font-size:.9rem; padding:.45rem .7rem; }
 .map-list-link { width:44px; height:44px; min-width:44px; padding:0; justify-content:center; }
 .map-list-link>span { display:none; }
 .chart-surface { display:none; }
 .mobile-plan { display:block; padding:0 1.7rem 1.6rem; background:linear-gradient(150deg,#c4dfe5,#97c1d0); }
 .pier-tabs { padding:1.2rem 0 1rem; gap:1rem; }
 .pier-tabs button { min-height:44px; min-width:7rem; border-radius:99px; color:#526b7b; font-size:1.1rem; }
 .pier-tabs button[aria-pressed=true] { background:#f8fcff; color:#3668b4; box-shadow:0 4px 12px #3e6e8110; }
 .pier-plan { padding:1.8rem 0 1rem; gap:1.8rem 4.2rem; }
 .pier-spine { width:1.6rem; left:calc(50% - .8rem); top:.5rem; bottom:0; background:repeating-linear-gradient(0deg,#e5d8bf 0,#e5d8bf 5px,#d7c8ad 5px,#d7c8ad 6px); box-shadow:3px 4px 6px #3f6d7526; }
 .mobile-berth { min-height:8rem; background:none!important; border:none!important; border-radius:0; padding:0; box-shadow:none!important; display:block; overflow:visible; }
 .mobile-boat-art { display:block; position:absolute; top:0; left:0; right:0; height:5.6rem; border:1px dashed #4878895e; border-radius:1.2rem; }
 .mobile-berth:nth-of-type(odd) { --vessel-turn:-90deg; }
 .mobile-berth:nth-of-type(even) { --vessel-turn:90deg; }
 .mobile-berth.ankommet .mobile-boat-art { border-color:transparent; }
 .mobile-berth:before { content:''; height:.6rem; bottom:1.4rem; left:0; right:-2.1rem; background:#e9ddc6; box-shadow:2px 3px 4px #4d72791f; border-radius:3px; }
 .mobile-berth:nth-of-type(even):before { left:-2.1rem; right:0; }
 .mobile-berth-label { display:flex; justify-content:space-between; align-items:center; gap:.5rem; position:absolute; bottom:-.5rem; left:0; right:0; color:#446c7e; }
 .mobile-berth-label b { font-size:1.05rem; font-weight:650; }
 .mobile-berth-label small { font-size:.85rem; color:#526b7b; }
 .mobile-berth.chosen .mobile-boat-art { border:2px solid #2461df; background:#dbebff60; box-shadow:0 0 0 3px #f3f9ff80; }
 .mobile-berth.chosen .mobile-berth-label b { color:#2458bd; }
 .mobile-boat-art .vessel { height:180%; width:100%; }
 .mobile-boat-art .motorboat { height:170%; }
 .map-legend { gap:1.2rem; padding:1.3rem 1.8rem; font-size:.95rem; }
 .map-legend .legend-total { display:none; }
 .selected-berth { padding:1.7rem 1.8rem; margin:0; display:flex; flex-wrap:wrap; gap:1.4rem; }
 .selected-identity { min-width:10rem; flex:1; }
 .selected-identity>small { font-size:.9rem; max-width:none; }
 .selected-identity strong { font-size:2.1rem; }
 .selected-identity>div { gap:.65rem; }
 .selected-identity .chip { font-size:.9rem; padding:.4rem .65rem; }
 .place-capacity { gap:1.5rem; flex:none; }
 .place-capacity dt { font-size:.85rem; margin-bottom:.4rem; }
 .place-capacity dd { font-size:1.4rem; }
 .place-capacity dd>span { font-size:.85rem; }
 .selected-action { flex-direction:row; width:100%; justify-content:space-between; align-items:center; margin:0; }
 .selected-action>span { font-size:1.35rem; }
 .selected-action .btn { font-size:1.2rem; padding:1rem 1.7rem; }
 .map-selection-note { padding:0 1.8rem 1.2rem; font-size:1rem; gap:.6rem; }
 .map-selection-note .text-btn { min-height:44px; font-size:1.05rem; }
 .today-card { order:1; padding:2rem; align-self:stretch; width:auto; }
 .today-card h2 { font-size:1.7rem; }
 .arrival-row { grid-template-columns:3.8rem minmax(0,1fr) auto; gap:.4rem 1.1rem; padding:1.6rem 0; }
 .arrival-row>.chip { grid-column:3; grid-row:1; align-self:center; font-size:.85rem; }
 .arrival-row strong { font-size:1.2rem; }
 .arrival-row>.time { font-size:1.1rem; }
 .ready-card { order:2; padding:2rem; gap:1.5rem; display:flex; flex-wrap:wrap; }
 .capacity-summary { width:100%; }
 .occupancy-track { width:100%; flex:none; }
 .service-summary { font-size:1.05rem; min-height:44px; }
 .view-head { margin:1rem .3rem 1.8rem; }
 .view-head h2 { font-size:2rem; }
 .view-head p { font-size:1.2rem; }
 .segments { background:#edf3f7; padding:.35rem; gap:.2rem; }
 .segments button { background:transparent; font-size:1.1rem; padding:.8rem 1rem; }
 .segments button[aria-pressed=true] { background:#fff; }
 .booking-row { padding:1.7rem 0; }
 .booking-row h3 { font-size:1.35rem; }
 .booking-row p { font-size:1.1rem; }
 .booking-place>b { border-radius:.9rem; padding:.75rem; font-size:1.3rem; }
 .guest-layout { grid-template-columns:1fr; }
 .document-card { padding:2rem; }
 .document-heading { padding-bottom:1.6rem; margin-bottom:2rem; }
 .document-card h2 { font-size:2rem; }
 .document-card .price-lines { padding:1.2rem 1.6rem; border-radius:1.6rem; }
 .line { font-size:1.15rem; padding:1rem 0; }
 .line.total { font-size:1.3rem; }
 .line.total strong { font-size:1.6rem; }
 .document-note { font-size:1rem!important; }
 .task-card h2 { font-size:2rem; }
 .task-card .task-meta { padding:.6rem 1.4rem; }
 .pd-modal,.pd-drawer,.pd-ark { border-radius:2.4rem; }
 .pd-drawer-h { padding:1.8rem 2rem; }
 .pd-drawer-h h2 { font-size:1.9rem; }
 .pd-drawer-b { padding:0 2rem 2rem; }
 .pd-drawer-f { padding:1.5rem 2rem; }
 .field-grid { gap:0 1rem; }
 .field { font-size:1.15rem; }
 .reserve-price { border-radius:1.5rem; padding:1rem 1.4rem; }
 .statusbar { font-size:.9rem; padding:0 .4rem; }
}}
@media(prefers-reduced-motion:reduce){
 #app *,#app *::before,#app *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}

.map-header-actions{display:flex;align-items:center;gap:1rem}.chart-controls{position:static;box-shadow:none;background:#eff4f7;padding:.25rem}.chart-controls button{font-size:1.7rem;min-width:44px;min-height:44px}.chart-controls .chart-fit{min-width:5rem}.chart-caption{color:#345867}.chart-direction{fill:#345867}.berth-number{color:#4c5c55}.mobile-berth-label,.mobile-berth-label small{color:#345a6c}.muted{color:#526b7b}input::placeholder,textarea::placeholder{color:#5b7080;opacity:1}
@media(max-width:820px){html:not(.ph-frame):not(.ph-demo){.map-header-actions .chart-controls{display:none}.map-header-actions{gap:0}}}
.chart-direction{fill:#1f4250}.mobile-berth-label,.mobile-berth-label small{color:#274858}.berth-number{font-size:1rem}
.brand small,.nav>button:not([aria-current=page]),.duty-mark small,kbd,.arrival-row>.time,.shift-row small,.reserve-price small{color:#526b7b}

/* R1: compact working screens keep readable type instead of shrinking with rem.
   The fixed demo frame retains its established composition. */
@media(max-width:1400px),(max-height:800px){
 html:not(.ph-frame):not(.ph-demo) {
  #app { font-size:max(14px,1.5rem); }
  :is(.brand small,.rail-label,.eyebrow,.demo-label,.mobile-brand,.mobile-brand>span,.duty-mark small,
      .statusbar,kbd,.nav-count,.map-kicker,.map-title h2>span,.map-list-link,
      .chart-controls .chart-fit,.chart-caption,.map-legend,.map-legend .legend-total,
      .selected-identity>small,.place-capacity dt,.place-capacity dd>span,.selected-action>span small,
      .map-selection-note,.arrival-tag,.arrival-eta,.arrival-identity>div>span,
      .boat-measures dt,.boat-measures dd small,.next-card>.quiet,.capacity-summary p,
      .service-summary,.mobile-berth-label small,.chip,.muted,.arrival-row strong .muted,
      .arrival-row small,.arrival-row>.chip,.view-head p,.booking-row h3>span,
      .booking-place>span,.search-field>span,thead th,.guest-row small,.document-heading small,
      .shift-row small,.activity-list time,.field,.field-hint,.reserve-price small,.quiet) {
    font-size:12px;
  }
  .document-note,.field-hint { font-size:12px!important; }
  :is(.btn,.text-btn,.selected-action .btn,.map-selection-note .text-btn,
      .next-card>.btn,.today-card>.text-btn,.segments button,.pier-tabs button,
      .booking-row .btn,.document-card .actions .btn,.pd-drawer-f .btn,
      .arrival-row strong,.arrival-row>.time,.booking-row h3,.booking-row p,
      .booking-main>.time,.booking-place>b,tbody th,td,.guest-row strong,.guest-row>b,
      .document-card>p,.line,.line strong,.shift-row p,.handover-note p,
      .activity-list li,.task-card>p,.check-field,.search-result,.note,
      .selected-action>span,.place-capacity dd,.mobile-berth-label b) {
    font-size:max(14px,1.3rem);
  }
  :is(.field input,.field select,.field textarea,.search-field input) { font-size:14px; }
  .line.total strong { font-size:max(18px,1.9rem); }
  .nav>button { font-size:14px; }
  .shell { grid-template-rows:minmax(0,1fr); }
  .rail { min-height:0; overflow:auto; }
  .berth-number { font-size:12px; height:18px; min-width:30px; bottom:-18px; }
  .chart-plane { min-height:520px; }
  .chart-scroll { height:520px; }
  .chart-caption { position:static; margin:0; padding:8px 20px; border-radius:0; background:#d9e9ed; }
  .map-title { flex-wrap:wrap; }
  .map-header-actions { margin-left:auto; }
  .map-legend { flex-wrap:wrap; }
  .selected-berth { flex-wrap:wrap; }
  .place-capacity { gap:20px; }
  .map-selection-note { flex-wrap:wrap; line-height:1.55; }
  .arrival-row { grid-template-columns:44px minmax(0,1fr); gap:6px 10px; }
  .arrival-row>.chip { grid-column:2; }
  .booking-row { flex-wrap:wrap; }
  .booking-main { flex:1; }
  .booking-row>.actions { margin-left:auto; }
  .toolbar { flex-wrap:wrap; }
  .segments { flex-wrap:wrap; }
  .table-scroll { overflow:auto; }
  .table-scroll table { min-width:700px; }
  .line { gap:16px; }
  .line strong { text-align:right; }
  .pd-drawer-f { flex-wrap:wrap; }
 }
}
@media(max-width:820px){
 html:not(.ph-frame):not(.ph-demo) {
  .nav>button { font-size:12px; }
  .statusbar { align-items:flex-start; padding-top:5px; line-height:1.35; }
  .workspace { grid-template-rows:9rem minmax(0,1fr) 4.8rem; }
  .mobile-brand { gap:7px; flex-wrap:wrap; }
  .map-title h2 { flex-wrap:wrap; }
  .map-title { gap:10px; }
  .map-title>div:first-child { flex:1; }
  .place-capacity { width:100%; justify-content:space-between; }
  .mobile-berth { min-height:90px; }
  .mobile-berth-label { align-items:flex-start; bottom:-3px; line-height:1.3; }
  .mobile-berth-label small { text-align:right; }
  .arrival-row>.chip { grid-row:auto; }
  .booking-row>.actions { margin-left:4.9rem; }
  .line { flex-wrap:wrap; }
  .line strong { margin-left:auto; }
  .document-heading .chip { font-size:12px; }
 }
}