/*
 * Portal shell (#217). Tokens only, no hex color. The header and the navigation use the ink
 * token as the surface and the panel token as the text, so they invert together under dark
 * mode and stay legible on pages that are light only. 16 px gutters, no horizontal scroll at
 * 360 px, crimson focus rings at 2 px offset.
 */
.portal-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 8px 12px;
  background: var(--bc-ink);
  color: var(--bc-panel);
}
.portal-skip:focus {
  left: 16px;
  top: 8px;
  outline: 2px solid var(--bc-crimson);
  outline-offset: 2px;
}

#portal-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  box-sizing: border-box;
  max-width: 100%;
  padding: 8px 16px;
  background: var(--bc-ink);
  color: var(--bc-panel);
  font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#portal-mark img {
  display: block;
  height: 28px;
  width: auto;
}
/* The header surface is --bc-ink: dark in the light scheme, white in the dark scheme. The dark
   logo (white lettering) suits the first, the light logo (black lettering) the second. Id level
   selectors beat the img rule above. */
#portal-mark .portal-mark-light {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) #portal-mark .portal-mark-dark {
    display: none;
  }
  :root:not([data-theme='light']) #portal-mark .portal-mark-light {
    display: block;
  }
}
:root[data-theme='dark'] #portal-mark .portal-mark-dark {
  display: none;
}
:root[data-theme='dark'] #portal-mark .portal-mark-light {
  display: block;
}
#portal-client {
  display: flex;
  align-items: center;
  gap: 8px;
}
#portal-client select {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--bc-panel);
  border-radius: 6px;
  background: var(--bc-ink);
  color: var(--bc-panel);
}
#portal-user {
  margin-left: auto;
  min-width: 0;
  overflow-wrap: anywhere;
}
#portal-signout,
#portal-nav-toggle {
  padding: 4px 12px;
  border: 1px solid var(--bc-panel);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#portal-status button {
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
#portal-nav-toggle {
  display: none;
}
#portal-header :focus-visible,
#portal-nav :focus-visible,
#portal-status :focus-visible {
  outline: 2px solid var(--bc-crimson);
  outline-offset: 2px;
}

#portal-status {
  padding: 8px 16px;
}
#portal-status:empty {
  display: none;
}

#portal-layout {
  display: flex;
  align-items: stretch;
}
#portal-nav {
  flex: 0 0 180px;
  background: var(--bc-ink);
  color: var(--bc-panel);
  font: 14px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#portal-nav ul {
  margin: 0;
  padding: 8px 0;
  list-style: none;
}
#portal-nav a {
  display: block;
  padding: 10px 16px;
  border-left: 3px solid transparent;
  color: inherit;
  text-decoration: none;
}
#portal-nav a:hover {
  text-decoration: underline;
}
#portal-nav a[aria-current='page'] {
  border-left-color: var(--bc-crimson);
  font-weight: 700;
}
/* The base layer gives every <main> 80 px of top padding for the marketing header (finding 2). */
#portal-main {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0;
}

@media (max-width: 767px) {
  #portal-nav-toggle {
    display: inline-block;
  }
  #portal-client {
    flex: 1 1 100%;
    order: 3;
  }
  #portal-client select {
    width: 100%;
  }
  #portal-layout {
    display: block;
  }
  #portal-nav {
    display: none;
  }
  #portal-nav[data-open='true'] {
    display: block;
  }
}

.portal-client-create {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 8px 0;
}
.portal-client-create[hidden] {
  display: none;
}
.portal-client-create input {
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.portal-client-create p {
  margin: 0;
  flex-basis: 100%;
}