/* Second Summit navigation (ss-nav.js): the left menu, the phone bar and the More sheet for the main app and every full-page flow. */
.ssn-i[hidden], .nav-sub[hidden], .ssn-r[hidden], .ssn-s[hidden], .ssn-grp[hidden], .ssn-why[hidden], .ssn-more[hidden] { display: none !important; }
button.ssn-i, button.ssn-r, button.ssn-t { font: inherit; background: none; border: 0; margin: 0; cursor: pointer; text-align: left; }
button.ssn-i { width: 100%; }
.ssn-i small, .ssn-s small { font-size: 12px; }

/* keyboard: every entry is a real link or button with a visible ring (the ring takes the text color, so it reads on every theme) */
.ssn-i:focus-visible, .ssn-s:focus-visible, .ssn-r:focus-visible, .ssn-t:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; }

/* ---- main app ---- */
#sidebar .nav-item.ssn-i { min-height: 44px; }
#sidebar .nav-sub .ssn-s { min-height: 44px; display: flex; align-items: center; gap: 8px; }
#sidebar .ssn-why { font-size: 12px; line-height: 1.4; color: var(--sb-text); margin: 2px 10px 8px; }
#sidebar .ssn-group.in { color: var(--sb-text-a); }
.sb-stats { font-size: 12px; color: var(--sb-text); line-height: 1.8; }
.sb-stats strong { color: var(--sb-text-a); font-weight: 700; }
.sb-stats #stat-last-run { font-size: 12px !important; opacity: 1 !important; color: var(--sb-text); }
@media (min-width: 821px) { .ssn-more-btn { display: none; } }
@media (max-width: 820px) {
  /* the phone bar is Today, Jobs, Pipeline, Documents, More, or Today, Jobs, Headshots, Pipeline, More with Pro look (ss-nav.js toggles ssn-nobar; hs-tab is the belt and braces); everything else is in the More sheet */
  #sidebar .ssn-nobar, #sidebar .nav-sub, #sidebar .ssn-group { display: none !important; }
  #sidebar #nav-today { order: 1; } #sidebar #nav-jobs { order: 2; } #sidebar #nav-headshots { order: 3; } #sidebar #nav-pipeline { order: 4; } #sidebar #nav-docs { order: 5; } #sidebar #nav-more { order: 9; }
  #sidebar button.nav-item { font-weight: 600; }   /* More is a button: it took the browser's normal weight while the links beside it are 600 */
  body.hs-tab #sidebar #nav-docs { display: none !important; }
  #sidebar .nav-item { font-size: 12px; letter-spacing: 0; }
  #sidebar .nav-item .nav-badge { font-size: 12px; }
  #sidebar .nav-item.ssn-i:focus-visible { outline-offset: -4px; }
}
.ssn-more { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px - env(safe-area-inset-top, 0px)); }
.ssn-more .ssn-r { display: flex; align-items: center; width: 100%; min-height: 44px; box-sizing: border-box; padding: 12px 14px; border-radius: 10px; font: 600 15px var(--font-ui, system-ui, sans-serif); color: var(--text, #12233B); text-decoration: none; background: none; border: 0; text-align: left; }
.ssn-more .ssn-r:active, .ssn-more .ssn-r:hover { background: var(--bg, #F1F4FB); }
.ssn-more .ssn-r.on { background: var(--bg, #F1F4FB); }
.ssn-more .ssn-rs { padding-left: 30px; font-weight: 500; }
.ssn-more .ssn-grp { margin: 8px 14px 0; font: 700 12px var(--font-ui, system-ui, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2, #52607A); }

/* ---- full-page flows ---- */
.ssn-flow.ssn-side { overflow: hidden; }
.ssn-side .ssn-logo { padding: 4px 10px 14px; flex: none; }
.ssn-side .ssn-logo img { height: 34px; display: block; }
.ssn-side .ssn-logo a { display: inline-flex; align-items: center; min-height: 44px; }
.ssn-side .ssn-list { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.ssn-side .ssn-i { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-radius: 10px; font: 600 15px/1.2 inherit; color: #B9C4D9; text-decoration: none; box-sizing: border-box; }
.ssn-side .ssn-i svg { width: 20px; height: 20px; flex: none; }
.ssn-side .ssn-i:hover { background: rgba(255,255,255,.08); color: #fff; }
.ssn-side .ssn-i.active, .ssn-side .ssn-i.in { color: #fff; }
.ssn-side .ssn-i.active { background: rgba(255,255,255,.13); }
.ssn-side .ssn-sub { margin: 2px 0 6px 20px; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14); display: grid; gap: 2px; }
.ssn-side .ssn-s { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 9px; font-weight: 600; font-size: 14.5px; color: #B9C4D9; text-decoration: none; box-sizing: border-box; }
.ssn-side .ssn-s svg { width: 16px; height: 16px; flex: none; }
.ssn-side .ssn-s:hover { background: rgba(255,255,255,.08); color: #fff; }
.ssn-side .ssn-s.active { background: #F4B73F; color: #12233B; }
.ssn-side .ssn-s small { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.12); color: #DCE4F2; margin-left: auto; }
.ssn-side .ssn-s.active small { background: rgba(18,35,59,.15); color: #12233B; }
.ssn-side .ssn-why { margin: 2px 12px 8px 12px; font-size: 14px; line-height: 1.4; color: #B9C4D9; }
.ssn-side .ssn-foot { flex: none; margin-top: auto; padding: 12px; font-size: 14px; color: #B9C4D9; overflow-wrap: anywhere; }
.ssn-side .ssn-i:focus-visible, .ssn-side .ssn-s:focus-visible { outline-color: #F4B73F; }
/* The phone bar on a flow page is the SAME bar as the main app's (navy, 58px, 12px labels, 18px icons, white-tint current tab): scripts/nav-bar-same.test.mjs measures both and fails on any difference. */
.ssn-tabs.ssn-flow { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: stretch; box-sizing: border-box; min-height: 58px; padding: 0 0 env(safe-area-inset-bottom, 0px); background: #12233B; border-top: 1px solid rgba(255,255,255,.13); backdrop-filter: none; }
.ssn-tabs.ssn-flow .ssn-t { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 44px; margin: 0; padding: 6px 2px; border: 0; border-radius: 0; background: none; font-family: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: 0; white-space: nowrap; overflow: hidden; color: #B9C4D9; text-decoration: none; text-align: center; box-sizing: border-box; }
.ssn-tabs.ssn-flow .ssn-t svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.ssn-tabs.ssn-flow .ssn-t.on { color: #fff; background: rgba(255,255,255,.13); }
.ssn-tabs.ssn-flow .ssn-t.on svg { opacity: 1; }
.ssn-tabs.ssn-flow .ssn-t:hover { background: rgba(255,255,255,.08); color: #fff; }
.ssn-tabs.ssn-flow .ssn-t:focus-visible { outline: 3px solid #F4B73F; outline-offset: -4px; }
.ssn-more-flow { position: fixed; left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); z-index: 60; background: #fff; border: 1px solid #DCE3EE; border-radius: 18px; box-shadow: 0 12px 40px rgba(18,35,59,.22); padding: 6px; max-height: calc(100vh - 96px - env(safe-area-inset-bottom, 0px)); max-height: calc(100dvh - 96px - env(safe-area-inset-bottom, 0px)); }
.ssn-more-flow .ssn-r { color: #12233B; }
.ssn-more-flow .ssn-r:focus-visible { outline-color: #1D4ED8; }
@media (min-width: 1100px) { .ssn-tabs.ssn-flow, .ssn-more-flow { display: none !important; } }
/* the four guided flows (Career change, Website, Pro look, Headshots hub) switch to their desktop layout at 900px: hide the phone tab bar there too */
@media (min-width: 900px) { body.d .ssn-tabs.ssn-flow, body.d .ssn-more-flow { display: none !important; } }

/* a tall list scrolls inside the left menu and the stats line below it stays on screen */
@media (min-width: 821px) { #sidebar .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; } #sidebar .sb-footer { flex: none; } }
.ssn-side .ssn-s { white-space: nowrap; gap: 6px; padding: 8px 8px; }
.ssn-side .ssn-s small { padding: 2px 6px; flex: none; }
@media (max-width: 1099.98px) { .ssn-side .ssn-s { min-height: 44px; } }   /* tablet and small laptop: 44px taps (docs/UX_STANDARDS.md 3.3) */

/* ---- Resume group (Resume builder, Resume look, Documents): a disclosure on a computer, a labelled block in More on a phone ---- */
#sidebar .ssn-disc { display: flex; align-items: center; gap: 12px; width: 100%; }
#sidebar .ssn-disc > span { flex: 1; text-align: left; }
.ssn-disc .ssn-chev { flex: none; margin-left: auto; transition: transform .15s ease; }
.ssn-disc.ssn-expanded .ssn-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ssn-disc .ssn-chev { transition: none; } }
#sidebar .nav-sub .ssn-s.active { background: #F4B73F; color: #12233B; }
@media (min-width: 821px) { #sidebar #nav-docs { display: none !important; } }   /* the phone bar's Documents tab: on a computer Documents is under Resume */
.ssn-side .ssn-disc { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; }
.ssn-side .ssn-disc > span { flex: 1; }