/* Mobile accessibility — skip, focus, safe area. Loaded from the root shell. */
:focus-visible {
  outline: 2px solid var(--brass, #c4a15a);
  outline-offset: 3px;
}

.desk-skip {
  position: absolute;
  left: max(0.75rem, env(safe-area-inset-left, 0px));
  top: max(0.75rem, env(safe-area-inset-top, 0px));
  z-index: 100;
  padding: 0.7rem 1rem;
  background: var(--brass, #c4a15a);
  color: var(--primary-foreground, #0a1620);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-180%);
}

.desk-skip:focus,
.desk-skip:focus-visible {
  transform: none;
}

#desk-main {
  scroll-margin-top: calc(6.5rem + env(safe-area-inset-top, 0px));
}

/* Native selects were inheriting light text into an OS-gray popup on some
   Windows browsers. Keep this control deliberately high-contrast. */
#water-select {
  min-height: 44px;
  min-width: min(21rem, 78vw);
  background: var(--background, #0b1217);
  color: var(--foreground, #f3efe8);
  color-scheme: dark;
}

#water-select option,
#water-select optgroup {
  background: #11191f;
  color: #f5f1e9;
}

/* Fieldset legends normally sit in the border. On the Debrief cards that
   looked like the heading was cut through by the card line. Float the legend
   into the card body and clear the first control beneath it. */
fieldset.desk-panel > legend.desk-eyebrow {
  float: left;
  width: 100%;
  margin: 0 0 0.75rem;
  padding: 0;
}

fieldset.desk-panel > legend.desk-eyebrow + * {
  clear: both;
}