/* Drop-down navigation, shared by the public header ("Free tools", PublicLayout.razor) and the signed-in Portal bar and phone menu
   (NavGroup.razor). One pattern, one script (/js/pub-dd.js), one stylesheet: a disclosure link with role="button" and aria-expanded over a
   panel that the `hidden` attribute closes. The first block is the public header's rules, moved here unchanged from PublicLayout's inline
   <style>; the second is the Portal's adaptation of them. */

/* "Free tools" drop-down (desktop) and its phone-menu twin. Both are disclosure buttons that /js/pub-dd.js toggles; [hidden] is the closed state. */
.pub-dd { position: relative; }
.pub-dd-btn { cursor: pointer; display: inline-flex; align-items: center; }
.pub-dd-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pub-dd-btn[data-pub-current="true"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 0 -2px 0 rgba(255,255,255,.7); }
.pub-dd-chev { font-size: 10px; margin-left: 5px; opacity: .8; transition: transform .12s; }
[aria-expanded="true"] > .pub-dd-chev { transform: rotate(180deg); }
.pub-dd-menu {
    position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; min-width: 230px; padding: 6px 0;
    background: var(--sidebar-bg, #1b3d2a); border: 1px solid rgba(255,255,255,.12); border-radius: 2px; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.pub-dd-menu[hidden], .pub-menu-sub[hidden] { display: none; }
.pub-dd-item {
    display: flex; align-items: center; min-height: 44px; padding: 0 1rem; font-size: 14px; white-space: nowrap;
    color: rgba(255,255,255,.85); text-decoration: none;
}
.pub-dd-item:hover, .pub-dd-item:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.pub-dd-item[aria-current="page"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 rgba(255,255,255,.7); }
.pub-menu-group { cursor: pointer; }
.pub-menu-group .pub-dd-chev { margin-left: auto; }
.pub-menu-group[data-pub-current="true"] { color: #fff; background: rgba(255,255,255,.12); box-shadow: inset 3px 0 0 rgba(255,255,255,.7); }
.pub-menu-sublink { padding-left: 2.5rem; }
/* An animal under "Cut sheets": one step in from its parent, a little quieter. */
.pub-dd-subitem { padding-left: 2.25rem; font-size: 13.5px; }
.pub-menu-link.pub-menu-subsublink { padding-left: 3.75rem; font-size: 13.5px; }

/* ── Portal top bar (NavGroup, bar mode) ───────────────────────────────────────────────────────────────
   The wrapper is as tall as the 58px bar, so the panel hangs from the bar's bottom edge. The trigger keeps the bar's own item look
   (.cc-tn-item in NavMenu.razor.css, which also draws the amber underline when its group holds the current page); only what the public
   button had and the bar item lacks is added here: a visible focus ring and the pointer. */
.cc-topnav .cc-dd { align-self: stretch; display: flex; align-items: stretch; position: relative; }
.cc-topnav .cc-topnav-right .cc-dd { align-items: center; }
.cc-topnav .cc-dd > [data-pub-dd-toggle] { cursor: pointer; }
.cc-topnav .cc-dd > [data-pub-dd-toggle]:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cc-topnav .cc-dd-menu { top: 100%; min-width: 240px; max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow-y: auto; }
.cc-topnav .cc-dd-start > .cc-dd-menu { left: 0; right: auto; }
.cc-topnav .cc-dd-end > .cc-dd-menu { right: 0; left: auto; }
.cc-dd-menu .pub-dd-item { gap: 12px; }
.cc-dd-menu .pub-dd-item > i { font-size: 15px; width: 16px; flex-shrink: 0; text-align: center; }
.cc-dd-menu .pub-dd-item:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.cc-dd-head { padding: 10px 1rem 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.cc-dd-sep { height: 1px; margin: 6px 0; background: rgba(255,255,255,.12); }
.cc-dd-note { margin-left: auto; padding-left: 1.25rem; font-size: 11.5px; color: rgba(255,255,255,.6); }
/* A row with a task subtitle (nav v2): the label on one line, the subtitle under it, the icon centred beside both. Bar and phone menu alike. */
.pub-dd-item.cc-dd-has-sub, .cc-mobile-drawer .cc-drawer-sublink.cc-dd-has-sub {
    display: grid; grid-template-columns: 16px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-content: center; align-items: center;
    padding-top: 6px; padding-bottom: 6px; white-space: normal;
}
.cc-dd-has-sub > i { grid-row: 1 / span 2; }
.cc-dd-subtitle { grid-column: 2; font-size: 11.5px; line-height: 1.3; color: rgba(255,255,255,.6); }
/* Below 1024px the phone menu is the whole navigation and the gear is hidden with it (NavMenu.razor.css). */
@media (max-width: 1023px) { .cc-topnav .cc-topnav-right .cc-dd { display: none; } }
/* A global admin gets the phone menu below 1280 (NavMenu.razor.css, .cc-topnav-ga), so the gear and the avatar menu hide with it there. */
@media (max-width: 1279px) { .cc-topnav-ga .cc-topnav-right .cc-dd { display: none; } }

/* ── Portal phone menu (NavGroup, drawer mode): the public phone menu's twin ─────────────────────────────── */
.cc-mobile-drawer .cc-drawer-group { cursor: pointer; }
.cc-mobile-drawer .cc-drawer-group .pub-dd-chev { margin-left: auto; font-size: 11px; }
.cc-mobile-drawer .cc-drawer-group[data-pub-current="true"] { color: #fff; font-weight: 600; }
.cc-mobile-drawer .cc-drawer-sublink { padding: 11px 20px 11px 46px; font-size: 13.5px; }
.cc-mobile-drawer .cc-drawer-sublink[aria-current="page"] { color: #fff; font-weight: 600; border-left-color: var(--sidebar-active-bar); background: rgba(255,255,255,.1); }
.cc-ddm-head { padding: 8px 20px 2px 46px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* A group in the Free tools menu (Cut sheets and its animals): the item's own link, then a native disclosure that is closed until opened. The summary is the toggle
   (a button to assistive tech, operable with Enter and Space, no script) and sits over the right end of the item's row; the animals open beneath it. */
.pub-dd-group { position: relative; }
.pub-dd-group > .pub-dd-grouphead { padding-right: 52px; }
.pub-dd-more > summary { list-style: none; }
.pub-dd-more > summary::-webkit-details-marker { display: none; }
.pub-dd-morebtn { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 44px; cursor: pointer; color: rgba(255,255,255,.85); }
.pub-dd-morebtn:hover { color: #fff; background: rgba(255,255,255,.08); }
.pub-dd-morebtn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.pub-dd-more[open] > .pub-dd-morebtn .pub-dd-chev { transform: rotate(180deg); }