/* Common navigation for Declaude's editor and reading pages. */
.demo button.go { background: #3428d6; }
.demo button.go:hover { background: #2920af; }
.tool-header { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .7rem 1.5rem; padding-bottom: 1rem;
  border-bottom: 1px solid var(--line); margin-bottom: 1.7rem; }
.tool-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem;
  min-width: 0; max-width: 100%; }
.tool-identity > a { max-width: 100%; overflow-wrap: anywhere; }
.tool-brand { color: var(--ink); font: 700 1.8rem/1.2 Georgia, 'Times New Roman', serif;
  letter-spacing: -.045em; text-decoration: none; }
.tool-brand .slash { color: #3428d6; }
.tool-parent { color: var(--muted); font-size: .8rem; text-decoration: none; }
.tool-parent strong { color: #3428d6; font-weight: 600; }
.tool-parent:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.tool-nav { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .4rem 1rem;
  min-width: min(15rem, 100%); max-width: 100%; }
.tool-nav > a { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--ink); font-size: .85rem; text-decoration: none; }
#home-account { min-width: 5rem; }
.tool-nav > a:hover { color: #3428d6; text-decoration: underline; text-underline-offset: .2em; }
/* Keep the dropdown within its navigation group when enlarged text wraps the
   header. The group is at least as wide as the menu, bounded by its container. */
.tool-menu { color: var(--ink); font-size: .85rem; }
.tool-menu > summary { cursor: pointer; min-height: 44px; display: flex;
  align-items: center; gap: .5rem; list-style: none; font-weight: 600; }
.tool-menu > summary::-webkit-details-marker { display: none; }
.tool-menu > summary::after { content: ''; width: .35rem; height: .35rem;
  border-right: 1.5px solid; border-bottom: 1.5px solid; transform: rotate(45deg); margin-top: -.2rem; }
.tool-menu[open] > summary::after { transform: rotate(225deg); margin-top: .15rem; }
.tool-menu nav { position: absolute; top: calc(100% + .3rem); right: 0; width: 15rem;
  max-width: calc(100vw - 2.4rem); z-index: 30; padding: .45rem;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 30px #21184615; }
.tool-menu nav a { display: flex; align-items: center; justify-content: space-between;
  gap: .25rem; min-height: 44px; padding: .55rem .5rem; border-radius: 6px;
  color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.tool-menu nav a:hover { background: #f4f1ff; }
.tool-menu nav a[aria-current] { color: #3428d6; background: #f0edff; font-weight: 600; }
.tool-menu nav a[aria-current]::after { content: '\2713'; }
.tool-footer { border-top: 1px solid var(--line); margin-top: 2.2rem; padding-top: 1.2rem;
  font-size: .8rem; color: var(--muted); }
.tool-footer-title { margin: 0 0 .5rem; color: #3428d6; font-weight: 600; }
.tool-footer nav { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.tool-footer a { display: inline-flex; align-items: center; min-height: 44px;
  color: inherit; text-decoration: none; }
.tool-footer a:hover { color: #3428d6; text-decoration: underline; text-underline-offset: .2em; }
.tool-footer a[aria-current] { color: #3428d6; font-weight: 600; }
.tool-footer .tool-footer-secondary { margin-top: .35rem; font-size: .75rem; }
.tool-header a:focus-visible, .tool-menu summary:focus-visible, .tool-footer a:focus-visible {
  outline: 2px solid #3428d6; outline-offset: 4px; border-radius: 3px; }
.tool-nav-status { color: var(--accent); font-size: .85rem; }
.tool-nav-status:empty { display: none; }
.topbar.tool-header { margin: 0; padding: .7rem 1.1rem; }
.topbar .tool-brand { font-size: 1.4rem; }
.topbar .tool-identity { flex-shrink: 1; }
.topbar .tool-nav { margin-left: auto; }
.suite-tool-footer { margin: 0; padding: .5rem 1.1rem; background: var(--surface); }
.suite-tool-footer .tool-footer-title { display: none; }
.suite-tool-footer .tool-footer-secondary { margin-top: 0; }
@media (max-width: 540px) {
  .tool-header { gap: .4rem; margin-bottom: 1.3rem; }
  .tool-nav { width: 100%; justify-content: space-between; gap: .2rem .65rem; }
  .tool-menu nav { left: 0; right: auto; }
  .topbar .tool-nav { margin-left: 0; }
  .tool-nav > a { max-width: 100%; overflow-wrap: anywhere; }
}