/* Pilot compass (Pilot UI 2.0, Guide pattern). The page is built from
   ui/ components; this file only adds what is the compass's own: the
   four move colours, the how-it-works steps and the save panel's forms.
   Tokens only. */

.compass-cluster,.compass-summary__item{--compass-move:var(--ui-ink-2)}
.compass-cluster--stay,.compass-summary__item--stay{--compass-move:var(--ui-move-stay)}
.compass-cluster--step_up,.compass-summary__item--step_up{--compass-move:var(--ui-move-stepup)}
.compass-cluster--sideways,.compass-summary__item--sideways{--compass-move:var(--ui-move-sideways)}
.compass-cluster--pivot,.compass-summary__item--pivot{--compass-move:var(--ui-move-pivot)}

/* The intake: the main action sits right under the skills. */
.compass-intake{max-width:860px}
.compass-intake__actions .ui-link{font-size:var(--ui-text-small)}
@media (max-width:599px){
    .compass-intake .jp-pp__cloud{max-height:136px}
    .compass-intake__actions .ui-btn--primary{flex:1 1 100%}
}

/* The intake is the page's task: it follows its header closely. */
.compass > .ui-page-header{margin-bottom:calc(-1 * var(--ui-space-6))}

/* Before any input: intake and how-it-works side by side. */
.compass-start{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:var(--ui-space-5);align-items:start}
.compass-start .compass-intake{max-width:none}
.compass-hint{
    display:flex;flex-direction:column;gap:var(--ui-space-4);
    padding:var(--ui-space-5);
    border-radius:var(--ui-radius-card);
    background:var(--ui-gold-wash);
}
.compass-hint .ui-steps li{font-size:15px;color:var(--ui-ink)}
.compass-hint .ui-steps__num{background:var(--ui-panel)}
.compass-legend{display:flex;flex-direction:column;gap:var(--ui-space-2);list-style:none;margin:0;padding-top:var(--ui-space-4);border-top:1px solid var(--ui-line);font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.compass-legend .compass-summary__item{align-items:baseline}
.compass-legend strong{color:var(--ui-ink);font-weight:var(--ui-weight-strong);margin-right:4px}
@media (max-width:1023px){.compass-start{grid-template-columns:minmax(0,1fr)}}

/* Moves by kind */
.compass-summary{display:flex;flex-wrap:wrap;gap:var(--ui-space-2) var(--ui-space-5);list-style:none;margin:0;padding:0;font-size:var(--ui-text-small);color:var(--ui-ink-2)}
.compass-summary__item{display:inline-flex;align-items:center;gap:var(--ui-space-2)}
.compass-summary__item strong{color:var(--ui-ink);font-variant-numeric:tabular-nums}
.compass-summary__item.is-empty{color:var(--ui-muted)}
.compass-summary__dot,.compass-cluster__dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--compass-move);flex:none}
.compass-summary__item.is-empty .compass-summary__dot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ui-control)}

.compass-cluster__title{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-space-2) var(--ui-space-3)}
.compass-cluster__count{font-family:var(--ui-font-body);font-size:var(--ui-text-small);font-weight:var(--ui-weight-medium);letter-spacing:0;color:var(--compass-move)}

/* Save panel */
.compass-savepanel__form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--ui-space-3)}
.compass-savepanel__form .ui-field{flex:1 1 260px;max-width:420px}
.compass-savepanel-switcher{display:flex;flex-direction:column;gap:var(--ui-space-2)}
.compass-savepanel-switcher__list{display:flex;flex-wrap:wrap;gap:var(--ui-space-2);list-style:none;margin:0;padding:0}
.compass-savepanel-switcher__link{
    display:inline-flex;align-items:center;min-height:var(--ui-target-compact);padding:0 14px;
    border:1px solid var(--ui-control);border-radius:var(--ui-radius-pill);
    color:var(--ui-ink);text-decoration:none;font-size:var(--ui-text-small);
}
.compass-savepanel-switcher__link:hover{border-color:var(--ui-ink)}
.compass-savepanel-switcher__link[aria-current="page"]{background:var(--ui-action);border-color:var(--ui-action);color:var(--ui-on-action)}
.compass-savepanel-switcher__link:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
@media (max-width:599px){.compass-savepanel-switcher__link{min-height:var(--ui-target)}}