.map-alignment { margin: .5rem 0; min-width: 0; color: var(--text); }
.map-alignment details { border: 1px solid var(--border, #64748b); border-radius: .65rem; padding: .25rem .65rem; background: var(--surface, transparent); }
.map-alignment summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .75rem; font-weight: 700; font-size: .85rem; }
.map-alignment summary::before { content: '+'; }.map-alignment details[open] summary::before { content: '−'; }
.map-alignment [data-alignment-state] { font-weight: 500; font-size: .75rem; }
.map-alignment p { font-size: .78rem; line-height: 1.45; margin: .4rem 0; }
.map-alignment fieldset { min-width: 0; border: 0; padding: 0; margin: .5rem 0; }
.map-alignment label { display: grid; gap: .25rem; min-width: 0; font-size: .78rem; }
.map-alignment select { width: 100%; min-width: 0; min-height: 44px; color: inherit; background: var(--surface-2, transparent); border: 1px solid var(--border, #64748b); border-radius: .4rem; padding: .35rem; }
.map-alignment-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .5rem 0; }
/* One compact row; accessible names retain explicit cardinal directions. */
.map-alignment-arrows { display: grid; grid-template-columns: repeat(5, minmax(44px, 1fr)); gap: 3px; max-width: 360px; margin: .5rem auto; }
.map-alignment-arrows button { min-height: 44px; min-width: 44px; padding: .2rem; border: 1px solid var(--border); border-radius: .4rem; font-size: 1.1rem; color: inherit; background: var(--surface-2); }
.map-alignment [data-reset] { font-size: .75rem; }
.map-alignment label[hidden] { display: none; }
.map-alignment :is(button,select,summary):focus-visible { outline: 3px solid var(--accent, #0d9488); outline-offset: 2px; }
.map-alignment output { display: block; font-size: .78rem; font-variant-numeric: tabular-nums; text-align: center; }
.map-alignment fieldset:disabled { opacity: .65; }
.gps-map-card.is-expanded .map-alignment { flex-shrink: 0; }
.gps-map-card.is-expanded .map-alignment details[open] { max-height: 45vh; overflow-y: auto; }

/* Supporting controls use the existing desktop rail; the map keeps priority. */
.track-studio-rail { display: grid; align-self: start; gap: 20px; min-width: 0; }
.track-studio-layout > .gps-map-card { align-self: start; }
#mapAlignmentInline:empty, #mapAlignmentRail:empty { display: none; }
#mapAlignmentInline { flex-shrink: 0; min-width: 0; }
#mapAlignmentRail .map-alignment { margin: 0; }
#mapAlignmentRail .map-alignment details { padding: .65rem .85rem; border-top: 4px solid var(--teal); border-radius: 18px; }
#mapAlignmentRail .map-alignment-options { grid-template-columns: 1fr; }
#mapAlignmentRail .map-alignment-arrows { grid-template-columns: repeat(3, minmax(44px, 1fr)); grid-template-areas: '. north .' 'west reset east' '. south .'; max-width: 190px; gap: 5px; }
#mapAlignmentRail [data-move="north"] { grid-area: north; }
#mapAlignmentRail [data-move="south"] { grid-area: south; }
#mapAlignmentRail [data-move="east"] { grid-area: east; }
#mapAlignmentRail [data-move="west"] { grid-area: west; }
#mapAlignmentRail [data-reset] { grid-area: reset; }
.track-studio-rail .track-notes-card { min-height: 0; }
.track-studio-rail .track-notes-card textarea { flex: none; height: 285px; resize: vertical; }