/* Base header dropdown (10 Nov 2026): the same rules as the current styles.css, repeated here because an older styles.css
   without them makes the My Tools menu show as an open list. Identical rules, so no change where styles.css has them. */
.nav-drop { position: relative; }
.nav-drop-btn {
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: .92rem;
    font-weight: 700;
    line-height: inherit;
    padding: var(--sp-2) 10px;
    white-space: nowrap; }
.nav-drop-btn::after {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #fff;
    content: "";
    display: inline-block;
    margin-left: 7px;
    vertical-align: 2px; }
.nav-drop-btn:hover,
.nav-drop-btn:focus,
.nav-drop.is-current > .nav-drop-btn {
    background: var(--nsd-green-dark);
    outline: none; }
.nav-drop .dropdown {
    background: #fff;
    border: 1px solid var(--nsd-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(34, 58, 46, .18);
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 220px;
    padding: var(--sp-1) 0;
    position: absolute;
    top: 100%;
    z-index: 1000; }
.nav-drop:hover .dropdown,
.nav-drop:focus-within .dropdown { display: block; }
.nav-drop .dropdown a {
    color: var(--nsd-ink);
    display: block;
    font-size: .9rem;
    font-weight: 700;
    padding: 8px 14px;
    white-space: nowrap; }
.nav-drop .dropdown a:hover,
.nav-drop .dropdown a:focus {
    background: var(--nsd-tint);
    color: var(--nsd-green-dark); }
/* end base header dropdown */

/* NSD portal: "My Tools" header menu and the profile-steps show/hide (9 Nov 2026).
   Builds on the existing .nav-drop dropdown in styles.css. */

/* My Tools: two-line items (title + what it does), like the CSTRDLP Cloud menus */
.nav-tools .nav-tools-btn { display: inline-flex; align-items: center; gap: 6px; }
.nav-tools .nsd-req-badge { line-height: 18px !important; min-width: 18px !important; font-size: .7rem !important; }
.main-nav .nav-tools .dropdown.nav-tools-menu { min-width: 320px; padding: 6px; border-radius: 10px; }
.main-nav .nav-tools-menu li a {
    display: flex; gap: 12px; align-items: flex-start; white-space: normal;
    padding: 9px 12px; border-radius: 8px; color: var(--nsd-ink, #1f2d27); font-weight: 400; }
.main-nav .nav-tools-menu li a i { color: var(--nsd-green, #028742); flex: 0 0 18px; width: 18px; margin-top: 3px; text-align: center; }
.main-nav .nav-tools-menu li a strong { display: block; font-size: .93rem; font-weight: 700; color: var(--nsd-ink, #1f2d27); }
.main-nav .nav-tools-menu li a small { display: block; margin-top: 1px; font-size: .8rem; line-height: 1.35; color: var(--nsd-muted, #5c6870); }
.main-nav .nav-tools-menu li a:hover,
.main-nav .nav-tools-menu li a:focus { background: var(--nsd-tint, #eef7f1); color: var(--nsd-ink, #1f2d27); }
.main-nav .nav-tools-menu li a .nsd-req-badge { margin-left: auto; align-self: center; }
.nav-tools.open .dropdown { display: block; }
.nav-tools.suppress .dropdown { display: none !important; }

/* With My Tools in the bar, laptops need a slightly tighter row so the menu clears the logo text
   (one row, as before). Home keeps its icon; its word stays available to screen readers. */
@media (min-width: 901px) and (max-width: 1599px) {
    .main-nav ul:has(.nav-tools) > li > a, .main-nav ul:has(.nav-tools) > li > .nav-drop-btn { padding-left: 7px; padding-right: 7px; font-size: .88rem; }
    .main-nav ul:has(.nav-tools) .nav-home-label {
        position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Profile steps: hide/show on wide screens, folded into one bar on phones */
.nsd-steps-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; margin: 0 0 10px; padding: 7px 12px;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px;
    color: #fff; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: none; }
.nsd-steps-toggle:hover, .nsd-steps-toggle:focus-visible { background: rgba(255, 255, 255, .22); color: #fff; outline: 2px solid #fff; outline-offset: 1px; }
.nsd-steps-toggle span { flex: 1; text-align: left; }
.nsd-steps-show {
    display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 900;
    align-items: center; gap: 6px; padding: 10px 14px 10px 10px; border: 0; border-radius: 0 10px 10px 0;
    background: var(--nsd-green, #028742); color: #fff; font: inherit; font-size: .85rem; font-weight: 700;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2); cursor: pointer; }
.nsd-steps-show:hover, .nsd-steps-show:focus-visible { background: var(--nsd-green-dark, #025f30); outline: 2px solid #d99700; }
body.nsd-steps-hidden .side-nav { display: none !important; }
body.nsd-steps-hidden .nsd-steps-show { display: inline-flex; }
.side-nav.is-folded > :not(.sidebar-user-card):not(.nsd-steps-toggle) { display: none !important; }

@media (max-width: 700px) {
    .nsd-steps-toggle { flex: 0 0 100%; margin: 0; }
    .nsd-steps-show { display: none !important; }
    .nav-tools.open { flex: 0 0 100%; }
    .main-nav .nav-tools .dropdown.nav-tools-menu { position: static; min-width: 0; width: 100%; margin-top: 6px; box-shadow: none; }
    .nav-tools:hover .dropdown, .nav-tools:focus-within .dropdown { display: none; }
    .nav-tools.open .dropdown { display: block; }
}
@media (prefers-reduced-motion: reduce) { .nsd-steps-toggle, .nsd-steps-show { transition: none; } }

/* Sign-in, sign-up and the other account pages: the form starts near the top, visible without scrolling.
   The photo stays as the full background behind the card instead of a band above it (it was 335-350px). */
.nsd-public .login-hero { align-items: flex-start; min-height: 0; padding-top: 40px; }
.nsd-public .signup-hero { padding-top: 40px; }
@media (max-width: 700px) {
    .nsd-public .login-hero, .nsd-public .signup-hero { padding-top: 16px; }
    /* phones: the form first; the introduction box (which repeats the header title) moves below it */
    .nsd-public .auth .auth-form { order: -1; }
}

/* One-row header on desktops (10 Nov 2026): a smaller logo and title, and a bar that never wraps - links that do
   not fit move into a "More" menu (nsd-menu.js). Phones (900px and below) keep their own layout. */
@media (min-width: 901px) {
    .main-header { flex-wrap: nowrap !important; flex-direction: row !important; align-items: center; gap: 14px; }
    .main-header .logo { flex: 0 0 auto; min-width: 0; }
    .main-header .logo h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.12rem; line-height: 1.2; white-space: nowrap; }
    .main-header .logo h2 img { width: auto !important; height: 46px !important; }
    .main-nav { flex: 1 1 auto; min-width: 0; }
    .main-nav > ul { flex-wrap: nowrap !important; justify-content: flex-end; }
    .main-nav > ul > li { flex: 0 0 auto; }
    .main-nav > ul > li > a, .main-nav > ul > li > .nav-drop-btn { white-space: nowrap; }
    .main-nav .nav-more .dropdown { left: auto; right: 0; min-width: 210px; }
    .main-nav .nav-more.open .dropdown { display: block; }
    .main-nav .nav-more.suppress .dropdown { display: none !important; }
}
.main-nav .nav-more[hidden] { display: none !important; }