/* Shared by every tool page, and nothing else: each page brings its own look in its own
   style.css. Pages set --page-bg, --page-text, --page-muted, --page-line, --page-accent and
   --page-ui (a UI font) so the standalone bar and footer sit in their palette. */
@import url("fonts/fonts.css");

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }

.skip {
  position: absolute; left: 8px; top: -48px; z-index: 50; padding: 8px 12px; border-radius: 4px;
  background: var(--page-text); color: var(--page-bg); font: 600 14px var(--page-ui, system-ui); text-decoration: none;
}
.skip:focus { top: 8px; }

/* The standalone bar: only when a page is opened on its own, not inside the shell. */
.tools-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--page-line); background: var(--page-bg);
  font: 500 13px/1.2 var(--page-ui, system-ui); color: var(--page-muted);
}
.tools-bar a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.tools-bar a:hover { color: var(--page-text); }
.tools-bar .sep { opacity: 0.5; }
.tools-bar .glyph { color: var(--page-accent); }
.tools-bar b { color: var(--page-text); font-weight: 600; }
.embedded .tools-bar { display: none; }

/* Neighbours and provenance at the foot of every page. */
.tools-foot {
  margin-top: 64px; border-top: 1px solid var(--page-line); padding: 20px clamp(16px, 4vw, 40px) 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
  font: 13.5px/1.4 var(--page-ui, system-ui); color: var(--page-muted);
}
.tools-foot a { color: var(--page-text); text-decoration: none; display: grid; gap: 2px; }
.tools-foot a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.tools-foot small { font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--page-muted); }
.tools-foot .next { text-align: right; }
.tools-foot .made { grid-column: 1 / -1; margin-top: 16px; line-height: 0; }
.tools-foot p { grid-column: 1 / -1; margin: 12px 0 0; font-size: 12px; }
.tools-foot p a { display: inline; color: var(--page-muted); text-decoration: underline; text-underline-offset: 3px; }

@media print {
  .tools-bar, .tools-foot { display: none; }
}

/* Drawings keep a legible minimum width and scroll sideways inside their frame on phones. */
.fig-scroll { overflow-x: auto; scrollbar-width: thin; }
.fig-scroll > svg { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .fig-scroll > svg { min-width: 720px; } }

/* A sideways-scrolling region that has more to show (see page.js). */
[data-more] {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
@media print { [data-more] { -webkit-mask-image: none; mask-image: none; } }