/* The site frame's own styles: the header and the Bench frame built by
   `shell/frame.js`, for both the SPA and Calibration's own document
   (`bench/setup.html`). Framework-free, and deliberately independent of
   `styles.css` and `calibrate.css` - every rule below is scoped to a `gb-`
   class so it can be dropped into either page without a collision, and every
   colour is a value from the brief rather than a name borrowed from either
   page's own palette.

   `docs/briefs/navigation.md`, the dark "rack" header: background #0D171D,
   text #E8ECEE, teal #0B8392, teal-on-dark #8FD3DD, line #2E4550. */

:root {
  --gb-bg: #0D171D;
  --gb-text: #E8ECEE;
  --gb-text-dim: #8FA3AC;
  --gb-teal: #0B8392;
  --gb-teal-dim: #8FD3DD;
  --gb-line: #2E4550;
  --gb-surface: #12232B;
  /* The "Playing on" strip: a rig pill's fill, a piece's name, and the
     engraved role label under each pill. The label is the brief's #6E8189
     lifted just enough to hold 4.5:1 on the strip's current-page surface too. */
  --gb-rig-fill: #16303A;
  --gb-piece: #C9D3D7;
  --gb-engraved: #788B93;
  /* The founding strip: warm amber on the rack's dark, so it reads as an
     invitation and not as part of the header. Dark text on the amber is about
     9.5:1; the focus ring is the same dark so it holds on the amber. */
  --gb-banner-bg: #E9B949;
  --gb-banner-text: #231800;
  --gb-banner-line: #B88A1E;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* A shade down so the strip does not glare on a dark page; still
       about 8:1 against its text. */
    --gb-banner-bg: #D8A63C;
    --gb-banner-text: #1A1100;
    --gb-banner-line: #8F6812;
  }
}

/* ---------------------------------------------------------- the founding strip */

.gb-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gb-banner-bg);
  color: var(--gb-banner-text);
  border-bottom: 1px solid var(--gb-banner-line);
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.35;
}

.gb-banner-text {
  margin: 0;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.gb-banner-link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.gb-banner-link:focus-visible,
.gb-banner-close:focus-visible {
  outline: 2px solid var(--gb-banner-text);
  outline-offset: 2px;
}

.gb-banner-close {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.gb-banner-close:hover { background: rgba(0, 0, 0, 0.12); }

.gb-banner-demo { flex-wrap: wrap; }
.gb-banner-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.gb-banner-action {
  min-height: 32px;
  padding: 2px 12px;
  border: 1px solid var(--gb-banner-text);
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.gb-banner-action:hover:not(:disabled) { background: rgba(0, 0, 0, 0.12); }
.gb-banner-action:disabled { opacity: 0.6; cursor: default; }
.gb-banner-action:focus-visible { outline: 2px solid var(--gb-banner-text); outline-offset: 2px; }
.gb-demo-link {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.gb-demo-note { margin-left: 8px; font-size: 13px; }

@media (max-width: 520px) {
  .gb-banner { padding: 4px 6px 4px 12px; font-size: 13px; }
}

/* A TOOL PAGE RUNS NEARLY FULL WIDTH (Jacob, 28 Sep: "Is there some good
   reason that I'm only using half the available width?"). The Bench's three
   tabs, Your gear and the Collection all carry this class; a reading page
   (Home's welcome text, Privacy, Terms, the guides) keeps its own narrower
   column instead and does not use it. */
.tool-page {
  width: min(1600px, 100% - 2 * clamp(16px, 3vw, 40px));
  margin-inline: auto;
}

/* ---------------------------------------------------------------- the header */

.gb-header {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--gb-bg);
  color: var(--gb-text);
  padding: 12px 24px;
  border-bottom: 1px solid var(--gb-line);
  flex-wrap: wrap;
}

/* Visually hidden until the keyboard reaches it, then a plain teal-on-dark
   button above everything else. */
.gb-skip {
  position: fixed;
  top: 8px;
  left: 12px;
  z-index: 1000;
  padding: 8px 14px;
  background: var(--gb-bg);
  color: var(--gb-text);
  border: 2px solid var(--gb-teal-dim);
  border-radius: 4px;
  font-size: 14px;
  text-decoration: none;
  transform: translateY(-300%);
}

.gb-skip:focus,
.gb-skip:focus-visible {
  transform: none;
  outline: 2px solid var(--gb-teal-dim);
  outline-offset: 2px;
}

.gb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

.gb-mark {
  width: 26px;
  height: 26px;
  color: var(--gb-text);
  flex: none;
}

.gb-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.gb-brand-name {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.02em;
}

.gb-brand-line {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--gb-text-dim);
}

.gb-nav {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.gb-nav-link {
  color: var(--gb-text-dim);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

.gb-nav-link:hover {
  color: var(--gb-text);
}

.gb-nav-link.is-current,
.gb-nav-link[aria-current="page"] {
  color: var(--gb-teal-dim);
  background: rgba(143, 211, 221, 0.12);
}

/* -------------------------------------------------------------- the account */

.gb-account {
  position: relative;
  margin-left: auto;
}

/* Weight and size as longhands after `font: inherit`: the one-line
   `font: 600 13.5px inherit` is invalid (inherit cannot stand in for the
   family inside the shorthand), so the browser dropped each such rule. */
.gb-signin {
  background: var(--gb-teal);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.gb-account-trigger {
  background: none;
  border: 1px solid var(--gb-line);
  border-radius: 999px;
  padding: 5px 12px 5px 5px;
  color: var(--gb-text);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
}

.gb-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gb-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
}

.gb-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--gb-surface);
  border: 1px solid var(--gb-line);
  border-radius: 6px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  width: 250px;
  padding: 6px;
  z-index: 30;
}

.gb-menu:not([hidden]) {
  display: grid;
}

.gb-menu-item {
  gap: 1px;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--gb-text);
  text-decoration: none;
  font-size: 13.5px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font-family: inherit;
}

.gb-menu-item:not([hidden]) {
  display: grid;
}

.gb-menu-item small {
  color: var(--gb-text-dim);
  font-size: 12px;
}

.gb-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.gb-menu-rule {
  border: 0;
  border-top: 1px solid var(--gb-line);
  margin: 4px 0;
}

/* ---------------------------------------------------------------- the Bench frame */

.gb-bench-frame {
  background: var(--gb-bg);
  color: var(--gb-text);
  border-bottom: 1px solid var(--gb-line);
}

.gb-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--gb-line);
}

/* Your gear is open: the strip is where you are, as a tab is when one is
   selected (the same teal accent, on the strip's left edge). */
.gb-strip.is-current {
  background: var(--gb-surface);
  box-shadow: inset 3px 0 0 var(--gb-teal);
}

.gb-strip-label {
  font-weight: 600;
  color: var(--gb-text-dim);
  font-size: 13px;
}

/* Each item is a column: the pill, then its engraved label centred under it.
   The rig's is the link to the rig. */
.gb-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 0;
  text-decoration: none;
}

.gb-chip {
  border: 1px solid var(--gb-line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  color: var(--gb-piece);
  overflow-wrap: anywhere;
}

.gb-chip-rig {
  border-color: var(--gb-teal-dim);
  background: var(--gb-rig-fill);
  padding: 3px 12px;
  font-weight: 700;
  color: var(--gb-text);
}

.gb-strip-rig:hover .gb-chip-rig {
  text-decoration: underline;
}

.gb-strip-rig:focus-visible {
  outline: 2px solid var(--gb-teal-dim);
  outline-offset: 3px;
  border-radius: 8px;
}

/* The small engraved label under a pill, the rig's and each piece's. */
.gb-strip-tag {
  font-family: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-engraved);
}

.gb-strip-rig .gb-strip-tag {
  color: var(--gb-teal-dim);
}

.gb-strip-sep {
  color: var(--gb-engraved);
  font-size: 13px;
  padding-top: 4px;
}

/* The row is top-aligned so each pill lines up with its neighbours; the text
   that has no label under it drops to the pills' own text line. */
.gb-strip-label,
.gb-strip-empty,
.gb-strip-checked,
.gb-strip-link {
  padding-top: 5px;
}

.gb-strip-empty,
.gb-strip-checked {
  color: var(--gb-text-dim);
  font-size: 13px;
}

.gb-strip-link {
  margin-left: auto;
  color: var(--gb-teal-dim);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.gb-tabs {
  display: flex;
  padding: 0 24px;
  gap: 0;
}

.gb-tab {
  display: grid;
  gap: 2px;
  padding: 10px 20px;
  color: var(--gb-text-dim);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  flex: 1;
  text-align: center;
}

.gb-tab-label {
  font-weight: 600;
  font-size: 14px;
  color: inherit;
}

.gb-tab-sub {
  font-size: 13px;
  opacity: 0.8;
}

.gb-tab[aria-selected="true"] {
  color: var(--gb-teal-dim);
  border-bottom-color: var(--gb-teal);
}

/* ---------------------------------------------------------------- "This computer" */

.gb-input-dialog {
  background: var(--gb-surface);
  color: var(--gb-text);
  border: 1px solid var(--gb-line);
  border-radius: 8px;
  padding: 20px;
  width: min(420px, calc(100vw - 32px));
}

.gb-input-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.gb-input-heading {
  margin: 0 0 6px;
  font-size: 16px;
}

.gb-input-line {
  margin: 0 0 14px;
  color: var(--gb-text-dim);
  font-size: 13.5px;
}

.gb-input-body {
  display: grid;
  gap: 8px;
}

.gb-input-select {
  background: var(--gb-bg);
  color: var(--gb-text);
  border: 1px solid var(--gb-line);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 13.5px;
}

.gb-input-note {
  margin: 0;
  color: var(--gb-text-dim);
  font-size: 12px;
}

.gb-input-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.gb-btn {
  border: 0;
  border-radius: 4px;
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
}

.gb-btn-primary {
  background: var(--gb-teal);
  color: #fff;
}

/* ---------------------------------------------------------------- responsive
   `nav` collided at phone width today (Home/Calibrate/Bench ran together at
   390px, a known bug this frame must not repeat) - it now has three links, a
   brand and an account button to fit into the same space, so paddings shrink
   and the tagline drops well above where the old bug started.

   `flex: 1; min-width: 0` on `.gb-nav` shrinks the NAV'S OWN BOX, but its
   three links keep `white-space: nowrap` and do not shrink with it - past a
   width somewhere in the 480-560px range they overflowed that box rather
   than wrapping, spilling into `.gb-account`'s space exactly the way the
   comment above says this frame must not repeat (found again testing this
   file at 390px, `docs/briefs/navigation.md` Part B1). Below `.gb-strip`'s
   own reflow (also a phone-width concern, three rows below), the header
   below this width becomes two rows instead - brand and the account button
   on the first, the three links given the second and the whole width to
   themselves - rather than trying to keep three things on one line that do
   not fit on the narrowest phones this product runs on. */
@media (max-width: 560px) {
  .gb-header {
    padding: 10px 12px;
    gap: 6px 10px;
    flex-wrap: wrap;
  }

  .gb-brand-line {
    display: none;
  }

  .gb-account {
    order: 1;
  }

  .gb-nav {
    order: 2;
    flex: 1 1 100%;
    gap: 0;
  }

  .gb-nav-link {
    padding: 7px 8px;
    font-size: 13px;
  }

  .gb-account-name {
    display: none;
  }

  .gb-strip {
    padding: 8px 12px;
  }

  .gb-tabs {
    padding: 0 4px;
    overflow-x: auto;
  }

  .gb-tab {
    padding: 8px 12px;
  }

  .gb-tab-sub {
    display: none;
  }
}

/* A 280px screen (a folded phone) is the narrowest this frame is checked at:
   the three tabs fit side by side there without scrolling. */
@media (max-width: 390px) {
  .gb-nav-link {
    padding: 6px 6px;
    font-size: 12.5px;
  }

  .gb-tab {
    padding: 8px 6px;
    white-space: nowrap;
  }

  .gb-avatar {
    width: 22px;
    height: 22px;
  }
}