* { box-sizing: border-box; }
body { font-family: -apple-system, system-ui, sans-serif; margin: 0; line-height: 1.5;
       color: #222; }
a { color: #06c; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- utility bar ---- */
.utilbar { background: #f4f4f4; border-bottom: 1px solid #ddd; font-size: .8rem;
           padding: .4rem 1rem; }
.utilbar a { margin-right: .9rem; color: #555; }

/* ---- horizontal nav with hover dropdowns ---- */
nav.topnav { background: #fff; border-bottom: 1px solid #ccc; }
nav.topnav ul { list-style: none; margin: 0; padding: 0; }
nav.topnav > ul { display: flex; flex-wrap: wrap; }
nav.topnav .toggle { display: flex; flex-direction: row; gap: 10px; }
nav.topnav li { position: relative; }
nav.topnav a, nav.topnav .toggle { padding: .6rem .9rem;
    white-space: nowrap; color: #222; background: none; border: none;
    font: inherit; text-align: left; cursor: pointer; width: 100%; }
nav.topnav a { display: block; }
nav.topnav li.open > a, nav.topnav li.open > .toggle { background: #06c; color: #fff; }

/* submenus: hidden until parent is .open (toggled by click) */
nav.topnav ul ul { display: none; position: absolute; top: 100%; left: 0;
                   min-width: 240px; background: #fff; border: 1px solid #ccc;
                   box-shadow: 0 4px 10px rgba(0,0,0,.12); z-index: 100; }
nav.topnav li.open > ul { display: block; }
/* nested levels open to the side */
nav.topnav ul ul ul { top: 0; left: 100%; }
nav.topnav ul ul a, nav.topnav ul ul .toggle { padding: .5rem .8rem; }
nav.topnav .has-children > .toggle::after { content: " \203A"; color: #999; }
nav.topnav ul ul .has-children > .toggle::after { content: " \203A"; float: right; }
/* top-level carets point down (rotate the right-pointing › by 90deg) */
nav.topnav > ul > li.has-children > .toggle::after {
    display: inline-block; transform: rotate(90deg); }

/* ---- page content ---- */
main { max-width: 720px; margin: 1.5rem auto; padding: 0 1rem; }
nav.crumb { font-size: .9rem; color: #666; margin-bottom: 1rem; }
nav.crumb a { color: #666; }
h1 { font-size: 1.5rem; }
ul.children { padding-left: 1.2rem; }
ul.children li { margin: .35rem 0; }
.leaf { color: #666; font-style: italic; }