/* The shared shell (P50; tools/shell.mjs, js/shell.js). Tokens only. */

/* Labels are in both languages; <html lang> picks. */
html:not(:lang(es)) .gs-es,
html:lang(es) .gs-en {
  display: none;
}

.gs-skip {
  position: absolute;
  left: var(--space-2);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-2);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.gs-skip:focus {
  top: var(--space-2);
}

.gs-shell {
  position: relative;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
}
.gs-brand {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-primary);
  text-decoration: none;
}
.gs-shell summary,
.gs-shell button,
.gs-shell select {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  min-height: 32px;
  cursor: pointer;
}
.gs-shell summary {
  display: flex;
  align-items: center;
  list-style: none;
}
.gs-shell summary::-webkit-details-marker {
  display: none;
}
.gs-shell summary::after {
  content: '';
  margin-left: var(--space-2);
  border: 4px solid transparent;
  border-top-color: currentColor;
  transform: translateY(2px);
}
.gs-shell details[open] > summary::after {
  transform: translateY(-2px) rotate(180deg);
}
.gs-group[data-here] > summary {
  border-color: var(--accent);
}
.gs-shell :focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}
.gs-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.gs-nav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.gs-nav li {
  position: relative;
}
.gs-nav details ul {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 14rem;
  padding: var(--space-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.gs-nav details a {
  display: block;
  padding: var(--space-1) var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.gs-nav details a:hover,
.gs-nav [aria-current='page'] {
  background: var(--surface-3);
}
.gs-controls {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.gs-controls[hidden],
.gs-toggle[hidden] {
  display: none;
}
.gs-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.gs-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  padding: var(--space-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}
.gs-foot a {
  color: var(--text-secondary);
}

@media (min-width: 768px) {
  .gs-toggle {
    display: none;
  }
}

/* Under 768 px, with the script, groups stack behind one Menu button. */
@media (max-width: 767px) {
  .gs-toggle {
    margin-left: auto;
  }
  .gs-shell.gs-js .gs-nav,
  .gs-shell.gs-js .gs-controls {
    display: none;
  }
  .gs-shell.gs-js.is-open .gs-nav,
  .gs-shell.gs-js.is-open .gs-controls {
    display: block;
  }
  .gs-nav,
  .gs-controls {
    width: 100%;
  }
  .gs-nav > ul {
    flex-direction: column;
  }
  /* Without the script the groups stay in view, sharing rows. */
  .gs-shell:not(.gs-js) .gs-nav > ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  }
  .gs-shell:not(.gs-js) .gs-nav > ul > li:has(> details[open]) {
    grid-column: 1 / -1;
  }
  .gs-nav details ul {
    position: static;
    min-width: 0;
    box-shadow: none;
  }
  .gs-controls label {
    display: block;
    margin-top: var(--space-2);
  }
}

/* Touch: every control and open-group link is 44 px tall (WCAG 2.5.5). */
@media (pointer: coarse) {
  .gs-shell summary,
  .gs-shell button,
  .gs-shell select,
  .gs-brand,
  .gs-nav details a {
    box-sizing: border-box;
    min-height: 44px;
  }
  .gs-brand,
  .gs-nav details a {
    display: flex;
    align-items: center;
  }
}

/* The application bar (tools/shell.mjs): fixed over the canvas, one row.
   Chrome anchored at the top adds --shell-height. */
body:has(> .gs-app) {
  --shell-height: 48px;
}
.gs-shell.gs-app {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  height: var(--shell-height);
  flex-wrap: nowrap;
  padding-block: 0;
  background: color-mix(in srgb, var(--surface-1) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Above 1200 px the rail is a column: the bar stops at its inner edge. */
@media (min-width: 1201px) {
  .gs-shell.gs-app {
    right: calc(var(--rail-width) + 2 * var(--space-4));
    border-bottom-right-radius: var(--radius-md);
    border-right: 1px solid var(--border);
  }
}

/* Solid ground for reduced transparency (this sheet is unlayered). */
@media (prefers-reduced-transparency: reduce) {
  .gs-shell.gs-app {
    background: var(--surface-1);
  }
}

/* At 1200 px and under the groups fold behind Menu; open, the bar is a
   panel over the canvas. */
@media (max-width: 1200px) {
  .gs-shell.gs-app .gs-toggle:not([hidden]) {
    display: inline-flex;
    margin-left: auto;
  }
  .gs-shell.gs-app.gs-js .gs-nav,
  .gs-shell.gs-app.gs-js .gs-controls {
    display: none;
  }
  .gs-shell.gs-app.gs-js.is-open {
    z-index: 80; /* over Home (75) */
    height: auto;
    max-height: 100vh;
    overflow-y: auto;
    flex-wrap: wrap;
    padding-block: var(--space-2);
    background: var(--surface-1);
  }
  .gs-shell.gs-app.gs-js.is-open .gs-nav,
  .gs-shell.gs-app.gs-js.is-open .gs-controls {
    display: block;
    width: 100%;
  }
  .gs-shell.gs-app .gs-nav > ul {
    flex-direction: column;
  }
  .gs-shell.gs-app .gs-nav details ul {
    position: static;
    min-width: 0;
    box-shadow: none;
  }
}

/* An embedded figure is the figure alone. */
body.presentation-embed,
body[data-presentation='lecture'] {
  --shell-height: 0px;
}
body[data-presentation='lecture'] .gs-shell {
  display: none;
}
.presentation-embed .gs-skip,
.presentation-embed .gs-shell,
.presentation-embed .gs-foot {
  display: none;
}

/* A printed page is its argument, not its navigation. */
@media print {
  .gs-skip,
  .gs-shell,
  .gs-foot {
    display: none;
  }
}
.gs-offline-box{display:flex;gap:var(--space-4);align-items:center;margin:var(--space-2) var(--space-4);padding:var(--space-2);border:1px solid var(--border)}
.gs-offline-box p{margin:0}