/* DIA_NAV_HEADING_PILL_V1 (run 2026-10-21, Jonathan): the section headings (Sales, Procurement & Supply Chain, HR, Accounting,
   and any later one) stand out -- bold, 13.5 px (the lines are 14 px regular), uppercase with the letter-spacing kept, ink
   text in a rounded box (radius 10 px) with a thick gold border on the gold wash, a little room above and below. The same
   in the phone's slide-out menu (the same #diaPortalSide) and in Customize (its rows are grouped under the same headings).
   The lines under each heading are unchanged. Ink on the wash: 15.94:1 (WCAG AA). Was in css/hr.css (build R), then in
   css/portal-menu.css; here since run20-drivespec so that Administration (admin.html) shares the ONE declaration.
   Colours only from css/diano-theme.css (var(--dia-*)).

   DIA_DRIVE_HEADLINE_V1 (run20-drivespec, Jonathan 21 Oct): "the DIANO Drive line must look exactly like the main menu group
   headings" -- the client portal's DIANO Drive line (js/portal-menu.js lineHtml, key "folders": class dpm-headline) and
   Administration's DIANO Drive (admin.html #adminNav, class dpm-headline) take the SAME declaration as a heading (the
   selector list below, not a copy), and stay what they are: a clickable line with the drive icon, in its own place (not
   inside a group). A heading class is not put on them (js and specs read .dpm-group as "a section heading").
   The open page: the border turns ink and a 6 px gold bar shows on the left (ink on the wash 15.94:1, ink border on the
   wash 15.94:1 -- the state does not rely on the gold alone, WCAG 1.4.11). Hover: the gold tint. Phone: a 44 px target. */
#diaPortalSide .dpm-group,#diaPortalSide button.dpm-line.dpm-headline,#adminNav a.dpm-headline{display:block;margin:12px 10px 6px;padding:7px 12px;border:3px solid var(--dia-gold-deep);border-radius:10px;background:var(--dia-gold-wash);
  color:var(--dia-ink);font-family:var(--dia-font);font-size:13.5px;font-weight:800;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;flex:0 0 auto}
/* the heading that is a line: its icon beside its name; its own height (the heading's), not the 38 px of a line */
#diaPortalSide button.dpm-line.dpm-headline,#adminNav a.dpm-headline{display:flex;align-items:center;gap:10px;width:auto;height:auto;min-height:0;text-align:left;cursor:pointer;box-shadow:none;text-decoration:none}
#diaPortalSide button.dpm-line.dpm-headline .dpm-ico,#adminNav a.dpm-headline .dpm-ico{color:var(--dia-ink)}
#adminNav a.dpm-headline .dpm-ico{flex:0 0 16px;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#diaPortalSide button.dpm-line.dpm-headline:hover,#adminNav a.dpm-headline:hover{background:var(--dia-gold-soft)}
#diaPortalSide button.dpm-line.dpm-headline.is-current,#adminNav a.dpm-headline.is-current{background:var(--dia-gold-wash);border-color:var(--dia-ink);box-shadow:inset 6px 0 0 var(--dia-gold)}
#diaPortalSide button.dpm-line.dpm-headline:focus-visible,#adminNav a.dpm-headline:focus-visible{outline:2px solid var(--dia-ink);outline-offset:2px}
@media (max-width:760px){
  html.dpm-on #diaPortalSide button.dpm-line.dpm-headline{min-height:44px;font-size:13.5px}
}