/* SpinStop shared top bar + "where you are" strip.  Used by every public page (see spinstop-nav.js). */
.ss-head { position: sticky; top: 0; z-index: 35; font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
           text-align: left; letter-spacing: normal; }
.ss-head *, .ss-head *::before, .ss-head *::after { box-sizing: border-box; }
.ss-bleed { width: 100vw; margin-left: calc(50% - 50vw); }      /* full width on pages with a centred body */
.ssnav { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; background: #1f3b5c; color: #fff; }
.ssnav a { text-decoration: none; }
.ssnav-logo { flex: none; font-weight: 800; font-size: 19px; color: #fff !important; letter-spacing: .3px; margin-right: 6px; }
.ssnav-logo span { color: #e8a33d; }
.ssnav-steps { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.ssnav-steps::-webkit-scrollbar { display: none; }
.ssnav-steps a { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 16px;
                 color: #dfe8f3 !important; white-space: nowrap; }
.ssnav-steps a b { display: inline-block; width: 19px; height: 19px; line-height: 19px; border-radius: 50%; text-align: center;
                   font-size: 11.5px; background: rgba(255,255,255,.16); color: #fff; }
.ssnav-steps a:hover { background: rgba(255,255,255,.10); color: #fff !important; }
.ssnav-steps a.ss-active, .ssnav-steps a[aria-current] { background: #fff; color: #1f3b5c !important; font-weight: 600; }
.ssnav-steps a.ss-active b, .ssnav-steps a[aria-current] b { background: #e8a33d; color: #fff; }
.ssnav-help { position: relative; flex: none; overflow: visible !important; }
.ssnav-help > summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 6px; color: #dfe8f3; white-space: nowrap; user-select: none; }
.ssnav-help > summary::-webkit-details-marker { display: none; }
.ssnav-help > summary:hover, .ssnav-help[open] > summary { background: rgba(255,255,255,.12); color: #fff; }
.ssnav-help > summary:focus-visible, .ssnav a:focus-visible { outline: 2px solid #e8a33d; outline-offset: 1px; }
.ssnav-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: #fff; color: #222; border: 1px solid #d5dbe3;
              border-radius: 8px; box-shadow: 0 8px 24px rgba(15,23,42,.18); padding: 6px; z-index: 60; }
.ssnav-menu a { display: block; padding: 7px 10px; border-radius: 5px; color: #1f3b5c !important; white-space: nowrap; }
.ssnav-menu a:hover, .ssnav-menu a:focus { background: #eef2f7; outline: none; }
.ssnav-menu hr { border: 0; border-top: 1px solid #e3e8ef; margin: 5px 4px; }
.ssnav-menu .ss-sub { display: block; padding: 4px 10px 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #64748b; }
.ssnav-account { flex: none; padding: 5px 11px; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; color: #fff !important; white-space: nowrap; }
.ssnav-account:hover { background: rgba(255,255,255,.12); }
/* "where you are" strip on the tool pages */
.ss-where { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; background: #eef2f7; color: #334;
            border-bottom: 1px solid #d5dbe3; font-size: 13px; white-space: nowrap; overflow: hidden; }
.ss-where .ss-crumb { color: #64748b; overflow: hidden; text-overflow: ellipsis; }
.ss-where .ss-crumb a { color: #1f6feb; text-decoration: none; } .ss-where .ss-crumb b { color: #1f3b5c; }
.ss-where .ss-gap { flex: 1; }
.ss-where a.ss-back { color: #1f6feb !important; text-decoration: none; font-weight: 600; background: none !important; border: 0 !important; padding: 0 !important; }
.ss-where a.ss-back:hover { text-decoration: underline; }
.ss-where a.ss-next { flex: none; padding: 3px 11px; border-radius: 5px; border: 1px solid #16a34a !important; color: #15803d !important;
                      background: #fff !important; text-decoration: none; font-weight: 600; }
.ss-where a.ss-next:hover { background: #f0fdf4 !important; }
.ss-where a.ss-next.ss-ready, body[data-gcode] .ss-where a.ss-next { background: #16a34a !important; color: #fff !important;
                      box-shadow: 0 0 0 3px rgba(22,163,74,.25); }
@media (max-width: 700px) {
  .ssnav { gap: 6px; padding: 0 8px; }
  .ssnav-logo { font-size: 17px; margin-right: 0; }
  .ssnav-steps a { padding: 5px 8px; gap: 4px; }
  .ssnav-help > summary, .ssnav-account { padding: 5px 7px; }
  .ss-where { padding: 0 8px; gap: 8px; font-size: 12px; }
  .ss-where .ss-crumb { display: none; }
}
@media print { .ss-head { display: none; } }