/* Docking — page layout on the Marina Sailing design system. Tokens only, no hex. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; background: var(--ms-surface-inverse); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* header: brand surface, the mark, the lesson under the wordmark, the menu behind the level readout */
.ms-header--app { position: static; }
.dk-head { min-height: 3.25rem; padding-inline: var(--ms-space-3); }
.dk-head .ms-header__brand img { height: 1.75rem; }
.dk-head .ms-header__brand-text { font-size: var(--ms-size--1); }
.dk-head .ms-header__brand-text small { font-family: var(--ms-font-sans); font-size: var(--ms-size--1); font-weight: var(--ms-weight-semibold); color: var(--ms-blue-100); margin-top: 0.15em; }
#lvlbtn { color: var(--ms-white); border-color: var(--ms-border-on-inverse); font-variant-numeric: tabular-nums; }
#lvlbtn b { font-weight: var(--ms-weight-semibold); }
.dk-brief { margin: 0; padding: 0 var(--ms-space-3) var(--ms-space-2); color: var(--ms-blue-100); line-height: var(--ms-leading-snug); }

/* instruments */
#hud { display: flex; justify-content: space-around; padding: var(--ms-space-2) var(--ms-space-2); border-bottom: 1px solid var(--ms-border-on-inverse); }
#hud span { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 3.5rem; }
#hud b { font-size: var(--ms-size-0); font-weight: var(--ms-weight-semibold); color: var(--ms-text-strong); line-height: 1.1; }
#hud .ms-overline { font-size: 0.6rem; color: var(--ms-text-muted); }

/* the basin, with the throttle running up its right-hand side */
#stage { flex: 1 1 auto; min-height: 0; display: flex; gap: var(--ms-space-2); padding: var(--ms-space-2) var(--ms-space-2) 0; position: relative; }
#cv { flex: 1 1 auto; min-width: 0; height: 100%; display: block; touch-action: none; border-radius: var(--ms-radius-md); }
#hint {
  position: absolute; left: var(--ms-space-4); right: 4.75rem; bottom: var(--ms-space-3); padding: var(--ms-space-2) var(--ms-space-3);
  border-radius: var(--ms-radius-md); background: var(--ms-status-info-bg); color: var(--ms-status-info-fg); border-left: 3px solid var(--ms-status-info-solid);
  font-size: var(--ms-size--1); line-height: var(--ms-leading-snug); pointer-events: none; box-shadow: var(--ms-elevation-2);
}
body.cat #hint { right: 7.25rem; }
#hint.bad { background: var(--ms-status-error-bg); color: var(--ms-status-error-fg); border-left-color: var(--ms-status-error-solid); }
#hint.good { background: var(--ms-status-success-bg); color: var(--ms-status-success-fg); border-left-color: var(--ms-status-success-solid); }
#throttles { flex: 0 0 auto; display: flex; gap: var(--ms-space-1); }
.track {
  position: relative; width: 3.375rem; height: 100%; border-radius: var(--ms-radius-pill); background: rgb(250 248 239 / 0.06);
  border: 1px solid var(--ms-border-on-inverse); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer;
}
body.cat .track { width: 2.875rem; }
.track::before { content: ''; position: absolute; left: 10px; right: 10px; top: 50%; border-top: 1px dashed var(--ms-border-default); }
.track small, .track b { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.track small { top: 6px; font-size: 0.55rem; color: var(--ms-text-muted); }
.track b { bottom: 6px; font-size: 0.55rem; letter-spacing: var(--ms-tracking-overline); text-transform: uppercase; font-weight: var(--ms-weight-semibold); color: var(--ms-text-default); padding: 0 3px; line-height: 1.15; }
.ball {
  position: absolute; left: 50%; width: 36px; height: 36px; margin-left: -18px; border-radius: var(--ms-radius-circle);
  background: var(--ms-sand-50); box-shadow: var(--ms-elevation-2); pointer-events: none;
}
.track.ahead .ball { background: var(--ms-data-1); }
.track.astern .ball { background: var(--ms-warning-400); }
body:not(.cat) #track1 { display: none; }

/* the helm: the top of the wheel runs the width of the basin, the readout sits under the throttle */
#pads { display: flex; gap: var(--ms-space-2); padding: var(--ms-space-2) var(--ms-space-2) 0; height: 4.25rem; }
#wheelcv { flex: 1 1 auto; min-width: 0; height: 100%; touch-action: none; cursor: grab; }
#wheelcv:active { cursor: grabbing; }
#mid { flex: 0 0 auto; width: 3.375rem; padding: 0 2px; font-size: 0.6rem; letter-spacing: var(--ms-tracking-overline); text-transform: uppercase; white-space: normal; line-height: 1.15; }
body.cat #mid { width: 6rem; }

.ms-footer--app { padding-block: var(--ms-space-2); }
.dk-foot { font-size: 0.65rem; gap: var(--ms-space-2); }
.dk-foot a { color: var(--ms-text-link); }

/* the bill, the result, and the menu: the design system's dialog on an overlay */
#modal { position: fixed; inset: 0; z-index: var(--ms-z-dialog); background: var(--ms-surface-overlay); display: flex; align-items: center; justify-content: center; padding: var(--ms-gutter); }
#modal[hidden] { display: none; }
.dk-dialog { background: var(--ms-surface-raised); color: var(--ms-text-default); border-radius: var(--ms-radius-xl); box-shadow: var(--ms-elevation-3); width: min(24rem, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.dk-dialog .ms-dialog__head, .dk-dialog .ms-dialog__foot { padding-inline: var(--ms-space-5); }
.dk-dialog .ms-dialog__body { padding: var(--ms-space-4) var(--ms-space-5); font-size: var(--ms-size--1); }
.dk-dialog .ms-dialog__body p { margin-bottom: var(--ms-space-3); }
.dk-dialog .ms-dialog__body p:last-child { margin-bottom: 0; }
.dk-dialog .ms-dialog__foot .ms-button { flex: 1 1 auto; }
#mb .tip { font-family: var(--ms-font-editorial); font-style: italic; color: var(--ms-text-muted); }
#mb .big { font-family: var(--ms-font-sans); font-size: var(--ms-size-5); font-weight: var(--ms-weight-bold); color: var(--ms-text-brand); line-height: 1; text-align: center; margin: var(--ms-space-2) 0 var(--ms-space-3); }
#mb .big small { font-size: var(--ms-size-0); color: var(--ms-text-muted); font-weight: var(--ms-weight-regular); }
#mb .rows div { display: flex; justify-content: space-between; padding: var(--ms-space-1) 0; border-bottom: 1px solid var(--ms-border-subtle); }
#mb select { font: inherit; padding: var(--ms-space-2) var(--ms-space-3); border-radius: var(--ms-radius-sm); border: 1px solid var(--ms-border-strong); background: var(--ms-surface-raised); color: var(--ms-text-default); max-width: 100%; }
.ladder { display: flex; flex-direction: column; gap: var(--ms-space-1); margin-top: var(--ms-space-3); }
.rung {
  display: flex; align-items: center; gap: var(--ms-space-2); min-height: 2.5rem; padding: 0 var(--ms-space-3); text-align: left;
  font: inherit; font-size: var(--ms-size--1); font-weight: var(--ms-weight-semibold); color: var(--ms-text-default);
  border-radius: var(--ms-radius-md); border: 1px solid var(--ms-border-subtle); background: var(--ms-surface-raised); cursor: pointer; transition: var(--ms-transition);
}
.rung:hover { background: var(--ms-blue-50); color: var(--ms-text-brand); }
.rung.done { color: var(--ms-status-success-fg); }
.rung.next { background: var(--ms-selection-bg); border-color: var(--ms-selection-border); color: var(--ms-selection-fg); }
.rung.daily { margin-top: var(--ms-space-2); border-style: dashed; border-color: var(--ms-border-default); }
.rung::before { content: ''; width: 1rem; }
.rung:not(:empty)::before { content: none; }