/* the address bar: crumbs at rest, a search field once you click in. the crumbs are text in
   a field, so they stay flat: pointing tints them, pressing darkens. */

.addr { position: relative; display: flex; flex: 1; min-width: 0; margin-left: 2px; }
.addr .lens { position: absolute; left: 7px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; }
.addr input {
  flex: 1; min-width: 0; padding: 3px 8px 3px 26px;
  font: inherit; font-size: 12.5px; color: var(--text);
  background: var(--grad-field);
  border: 1px solid var(--edge); border-right: 0; border-radius: var(--r-btn) 0 0 var(--r-btn);
  box-shadow: inset 1px 1px 0 var(--lo-deep);
}
.addr input::placeholder { color: var(--faint); }
.addr:not(.typing) input::placeholder { color: transparent; }
.addr input:focus { outline: none; box-shadow: inset 1px 1px 0 var(--lo-deep), 0 0 0 1px var(--focus); }
.addr .arrow { padding: 0 8px; border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.addr .arrow::after { content: ""; display: block; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--glyph); }
.addr .arrow:active, .addr:has(> #addr-menu:popover-open) .arrow { padding: 1px 7px 0 9px; background: var(--grad-pressed); box-shadow: var(--sunken); }

.crumbs { position: absolute; left: 22px; right: 24px; top: 1px; bottom: 1px; z-index: 1; display: flex; align-items: center; overflow: hidden; cursor: text; }
.addr.typing .crumbs { display: none; }
.crumbs .fill { flex: 1; align-self: stretch; }
.crumb {
  flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  height: 18px; padding: 0 6px;
  font-size: 12.5px; line-height: 16px; color: var(--text); text-decoration: none;
  border: 1px solid transparent; border-radius: var(--r-box);
}
a.crumb:hover { background: var(--hover); }
a.crumb:active { background: var(--press); }
.crumb-home { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; }
.crumb.current { flex-shrink: 0; font-weight: 700; cursor: text; }
/* the ▸ between crumbs opens the level below it */
.crumb-sep {
  all: unset; flex: none; display: inline-grid; place-items: center; width: 14px; height: 18px;
  cursor: pointer; border: 1px solid transparent; border-radius: var(--r-box);
}
.crumb-sep::before { content: ""; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 5px solid var(--dim); }
.crumb-sep:hover { background: var(--hover); }
.crumb-sep[aria-expanded="true"] { background: var(--press); }
.crumb-sep:hover::before, .crumb-sep[aria-expanded="true"]::before { border-left-color: var(--text); }

/* menus: search results, all pages, and each crumb's siblings. they're popovers in the top
   layer, pinned under the field with css anchors. a browser without anchors gets them
   centred, or placed by the script */
.addr { anchor-name: --addr; }
.menu {
  z-index: 20; margin: auto;
  max-height: min(440px, 70vh); overflow: auto; padding: 3px 0;
  color: var(--text);
  background: var(--grad-menu);
  border: 1px solid var(--edge); border-radius: var(--r-box);
  box-shadow: var(--raised-soft), var(--drop);
}
.menu.anchored { min-width: 220px; }
@supports (anchor-name: --a) {
  #addr-menu { inset: auto; margin: 0; top: anchor(--addr bottom); left: anchor(--addr left); right: anchor(--addr right); width: auto; }
  .menu.anchored { inset: auto; margin: 0; top: anchor(--addr bottom); left: anchor(left); }
}
.menu .grp { padding: 5px 10px 2px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); text-shadow: var(--emboss); }
/* entries are links, or buttons where picking one changes a setting */
.menu :is(a, button) {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: center; gap: 8px; padding: 3px 10px;
  font-size: 12.5px; color: var(--text); text-decoration: none; text-shadow: var(--emboss); white-space: nowrap;
}
/* a button sizes to its content even as a block, so it's stretched by hand */
.menu button { width: 100%; }
.menu :is(a, button) .hint { margin-left: auto; padding-left: 12px; font-size: 11px; color: var(--dim); }
.menu :is(a[aria-current="page"], button[aria-current]) .lbl { font-weight: 700; }
/* the current page's sections, hung under it on a guide line */
.menu a.sub { margin-left: 17px; padding-left: 16px; font-size: 12px; color: var(--text-3); border-left: 1px dotted var(--etch); }
.menu :is(a, button):focus { outline: none; }
.menu a.act, .menu :is(a, button):is(:hover, :focus-visible) { background: var(--grad-select); color: var(--on-select); text-shadow: var(--emboss-select); }
.menu a.act .hint, .menu :is(a, button):is(:hover, :focus-visible) .hint { color: var(--on-select-dim); }
.menu mark { padding: 0 1px; color: inherit; background: var(--mark); box-shadow: 0 0 0 1px var(--mark-edge); }
.menu a.act mark, .menu a:focus-visible mark { background: var(--mark-on-select); color: var(--text); text-shadow: none; }
.menu .none { padding: 8px 12px; font-size: 12.5px; color: var(--dim); }
/* the key legend only means something with js, it's what moves the highlight while you type */
:root:not([data-js]) .menu .keys { display: none; }
.menu .keys {
  display: flex; gap: 10px; padding: 5px 10px 3px; margin-top: 3px;
  font-size: 11px; color: var(--dim);
  border-top: 1px solid var(--lo); box-shadow: inset 0 1px 0 var(--hi);
}

@media (max-width: 760px) {
  .menu .hint { display: none; }
  .crumb-home .t { display: none; }
  /* no room for the whole path: the home icon, the last ▸ (its siblings) and where you are */
  .crumbs > .crumb:not(.crumb-home):not(.current) { display: none; }
  .crumbs > .crumb-sep:not(:has(+ .crumb.current)) { display: none; }
}