/* Portal — Frontier skin ----------------------------------------------------
 *
 * Re-skins the customer portal onto the design system the rebuilt public pages
 * use (frontier.css, measured off harmattan.ai / anduril.com /
 * terraindustries.co). Loads *after* portal.css and overrides it; portal.css
 * keeps every layout, state and responsive rule, so this file is only about
 * surface, colour and type. Delete the <link> in app/portal/layout.tsx to get
 * the light portal back.
 *
 * One structural catch drives most of what follows. In portal.css `--pf-ink`
 * carries two opposite roles: the page's *foreground* (.pf-shell colour) and a
 * *dark fill* (topbar, primary button, chips, drawer). On a light ground both
 * happen to be "the dark one", so a single token served. Inverting the theme
 * splits them: the foreground has to become white while the fills have to stay
 * dark — or become white with dark text, as the site's own hero button does.
 * So `--pf-ink` is remapped to the foreground role, and every rule that used it
 * as a fill is restated below.
 */

:root {
  /* Native Bedienelemente mitdunkeln.
   *
   * Der Fehler war im geschlossenen Zustand nicht zu sehen: das Feld selbst ist
   * gestaltet, weisse Schrift auf #151515. Die Auswahlliste eines <select>
   * zeichnet aber der Browser, und ohne diese Zeile zeichnet er sie hell —
   * waehrend die <option>-Eintraege die weisse Schrift des Feldes erben. Weiss
   * auf Weiss, gemeldet bei "Type of organisation" in der Zugangsanfrage.
   *
   * Betrifft nicht nur dieses eine Feld: Bildlaufleisten, das Zahlenrad an
   * type="number" und jede kuenftige native Liste haengen an derselben
   * Eigenschaft. Deshalb hier auf :root und nicht am Feld.
   *
   * Diese Datei wird ausschliesslich aus app/(site)/portal/layout.tsx
   * verlinkt — die Zeile erreicht die Marketingseiten nicht. */
  color-scheme: dark;

  /* Surfaces, from deepest to lightest — the same three steps as frontier.css. */
  --pf-bg: var(--fr-bg, #0b0b0b);
  --pf-surface: var(--fr-panel, #151515);

  /* Foreground role only (see above). */
  --pf-ink: var(--fr-fg, #ffffff);

  --pf-line: var(--fr-line, rgba(255, 255, 255, 0.14));
  --pf-line-strong: var(--fr-line-strong, rgba(255, 255, 255, 0.28));
  --pf-muted: var(--fr-muted, rgba(255, 255, 255, 0.62));
  --pf-accent: var(--fr-accent, #c4b798);

  /* The light-ground status colours are too dark to read on #0b0b0b. */
  --pf-danger: #e2726a;
  --pf-ok: #74c193;
}

/* --- Fills that were `--pf-ink` ------------------------------------------- */

.pf-topbar {
  background-color: var(--fr-panel, #151515);
  border-bottom: 1px solid var(--pf-line);
}

.pf-drawer {
  background-color: var(--fr-panel, #151515);
}

/* Primary action: white pill, dark label — the same button as the hero's
   "Solutions & Services". */
.pf-btn {
  background-color: var(--fr-fg, #fff);
  border-color: var(--fr-fg, #fff);
  color: var(--fr-bg, #0b0b0b);
}

.pf-btn:hover {
  background-color: transparent;
  color: var(--fr-fg, #fff);
}

/* On a dark ground the "light" variant has nothing left to invert to, so it
   becomes the outline button. */
.pf-btn--light {
  background-color: transparent;
  border-color: var(--pf-line-strong);
  color: var(--fr-fg, #fff);
}

.pf-btn--light:hover {
  background-color: var(--fr-fg, #fff);
  color: var(--fr-bg, #0b0b0b);
}

.pf-btn--ghost:hover {
  background-color: var(--fr-fg, #fff);
  border-color: var(--fr-fg, #fff);
  color: var(--fr-bg, #0b0b0b);
}

.pf-btn--danger:hover {
  color: var(--fr-bg, #0b0b0b);
}

.pf-chip:hover,
.pf-chip.is-active {
  background-color: var(--fr-fg, #fff);
  border-color: var(--fr-fg, #fff);
  color: var(--fr-bg, #0b0b0b);
}

.pf-badge.is-dark {
  background-color: transparent;
  border-color: var(--pf-line-strong);
  color: var(--fr-fg, #fff);
}

/* --- Media placeholders --------------------------------------------------- */

/* #eee against #0b0b0b reads as a blown-out hole while an image loads. */
.pf-card__media,
.pf-hero {
  background-color: rgba(255, 255, 255, 0.05);
}

.pf-card__media.is-blank {
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.09) 0%,
    rgba(255, 255, 255, 0.03) 55%,
    rgba(196, 183, 152, 0.18) 100%
  );
}

/* --- Frontier signatures -------------------------------------------------- */

/* Eyebrows in IBM Plex Mono, as on the rebuilt pages. Both dark references set
   their labels in a mono; it is the one typeface the rebuild adds. */
.pf-tagline,
.pf-topbar__tag,
.pf-stat__label {
  font-family: var(--fr-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-weight: 400;
  letter-spacing: 0.22em;
}

.pf-tagline.is-dark {
  color: var(--pf-accent);
}

/* 2px everywhere a box has a corner — pills stay pills. */
.pf-card,
.pf-tablewrap,
.pf-stat,
.pf-alert,
.pf-empty,
.pf-doc,
.pf-card__media,
.pf-hero {
  border-radius: var(--fr-radius, 2px);
}

.pf-h1,
.pf-h2 {
  letter-spacing: -0.02em;
}

/* Card lift reads as noise on a dark ground; the hairline does the work. */
a.pf-card:hover {
  border-color: var(--pf-line-strong);
  transform: none;
}

/* --- Auth page ------------------------------------------------------------ */

/* The auth screens are not inside .pf-shell, so nothing sets a foreground here
   — on the old light ground they simply inherited the site's dark body colour.
   Once the ground went dark, the heading, the labels and the fields'
   `currentColor` underlines all went dark-on-dark and vanished. */
.pf-auth,
.pf-auth__main {
  color: var(--fr-fg, #fff);
}

/* The panel is the one raised surface on the screen — the same step above the
   ground that a card takes on the rebuilt pages. */
.pf-auth__panel {
  background-color: var(--fr-panel, #151515);
  border-radius: var(--fr-radius, 2px);
}

.pf-auth__points {
  border-top-color: var(--pf-line);
}

/* The secondary action on the sign-in screen: same shape and size as Sign in,
   drawn rather than filled. It lives here rather than in portal.css because
   this sheet loads last — the base .pf-btn fill would otherwise win. */
.pf-btn--ghost,
a.pf-btn--ghost {
  background-color: transparent;
  border-color: currentColor;
  color: inherit;
  width: 100%;
  text-decoration: none;
}

/* The fill is named, not inherited. This read `background-color: currentColor`
   with `color: #0b0b0b` in the same rule — and currentColor resolves against
   the colour that rule *sets*, not the one the button had. So the fill and the
   label both came out #0b0b0b and "Request access" vanished into the panel on
   hover. Measured 1.00:1. currentColor is only safe for a border in a rule
   that leaves `color` alone, which is what the resting state above does. */
.pf-btn--ghost:hover,
a.pf-btn--ghost:hover {
  background-color: #fff;
  border-color: #fff;
  color: #0b0b0b;
}

/* --- Header: the site's, continued ----------------------------------------
 *
 * Two rows now. The top one is the marketing header — same wordmark, same mono
 * links, Sign out where Contact sits on the public pages. The second is the
 * portal's own sections as tabs. Before this the portal had a header of its
 * own, so signing in looked like arriving at a different product.
 */

.pf-topbar__inner {
  /* The site nav takes the middle; `right` is pushed out by its own margin. */
  gap: 1.5rem;
}

.pf-sitenav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

/* Same treatment as the public header: IBM Plex Mono, 13px, uppercase, 4%. */
.pf-sitenav .pf-navlink,
.pf-tab {
  font-family: var(--site-nav-font, var(--fr-mono, "IBM Plex Mono", ui-monospace, monospace));
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- The Solutions disclosure --------------------------------------------- */

.pf-sitenav__group {
  position: relative;
  display: inline-flex;
}

.pf-sitenav__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.pf-sitenav__menu {
  position: absolute;
  top: 100%;
  left: -1rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.5rem 0;
  background-color: var(--fr-panel, #151515);
  border: 1px solid var(--pf-line);
  border-radius: var(--fr-radius, 2px);
  /* Hidden without `display: none`, so the panel can fade and so a keyboard
     tab into it still finds focusable links. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}

.pf-sitenav__group:hover .pf-sitenav__menu,
.pf-sitenav__group:focus-within .pf-sitenav__menu {
  opacity: 1;
  visibility: visible;
}

.pf-sitenav__menu .pf-navlink {
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--site-nav-font, var(--fr-mono, monospace));
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.pf-sitenav__menu .pf-navlink:hover {
  color: #ffffff;
}

/* The underline sweep is the public header's, and inside a panel it reads as a
   stray rule under one item. */
.pf-sitenav__menu .pf-navlink::before {
  display: none;
}

/* --- Section tabs ---------------------------------------------------------- */

.pf-tabs {
  border-top: 1px solid var(--pf-line);
  background-color: var(--fr-bg, #0b0b0b);
}

.pf-tabs__inner {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  width: 100%;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 4rem;
  overflow-x: auto;
}

.pf-tab {
  display: flex;
  align-items: center;
  padding: 0.875rem 0;
  color: var(--pf-muted);
  text-decoration: none;
  white-space: nowrap;
  /* The marker is a rule under the live tab, drawn on the tab itself so it
     lands exactly on the row's bottom edge. */
  border-bottom: 2px solid transparent;
  transition: color 0.2s var(--pf-ease);
}

.pf-tab:hover {
  color: var(--fr-fg, #fff);
}

.pf-tab.is-active {
  color: var(--fr-fg, #fff);
  border-bottom-color: var(--pf-accent);
}

/* --- Account link ---------------------------------------------------------- */

/* No avatar disc. Two initials in a filled circle is a consumer-app device and
   it was the brightest object in the header; the name alone does the job. */
.pf-user {
  font-family: var(--site-nav-font, var(--fr-mono, monospace));
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pf-muted);
}

.pf-user:hover {
  color: var(--fr-fg, #fff);
}

/* --- Tags ------------------------------------------------------------------
 *
 * They were bold 11px with 1px tracking in the body face — a different label
 * system from the mono `//` eyebrows the rest of the site uses, sitting right
 * next to them on the same cards. Same face, same tracking, same weight now;
 * only the border marks them as a chip rather than a heading.
 */
.pf-badge {
  font-family: var(--fr-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.5rem;
  color: var(--pf-muted);
  border-color: var(--pf-line);
  border-radius: var(--fr-radius, 2px);
}

/* The one that marks a state rather than a category keeps the accent, but as a
   hairline and label — a filled sand block shouted louder than the headline. */
.pf-badge.is-accent {
  background-color: transparent;
  border-color: var(--pf-accent);
  color: var(--pf-accent);
}

.pf-badge.is-dark {
  background-color: transparent;
  border-color: var(--pf-line-strong);
  color: var(--fr-fg, #fff);
}

.pf-chip {
  font-family: var(--fr-mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--fr-radius, 2px);
}

/* --- Secure login ---------------------------------------------------------- */

.pf-secure {
  position: relative;
}

.pf-secure__rail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  background-color: transparent;
}

.pf-secure__fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--pf-accent);
  transform: scaleX(0);
  transform-origin: left;
}

/* Runs only while the server action is in flight. Eases towards full and stops
   short of it: the bar must not sit at 100% while the request is still open,
   or it reads as finished-but-stuck. */
.pf-secure.is-busy .pf-secure__fill {
  animation: pf-secure-fill 1.6s cubic-bezier(0.16, 0.84, 0.36, 1) forwards;
}

@keyframes pf-secure-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .pf-secure.is-busy .pf-secure__fill {
    animation: none;
    transform: scaleX(0.92);
  }
}

@media (max-width: 991px) {
  /* The site nav and the account link live in the burger below 992px. */
  .pf-sitenav,
  .pf-topbar__right {
    display: none;
  }
  .pf-tabs__inner {
    padding: 0 1.5rem;
    gap: 1.25rem;
  }
}

/* --- Auswahllisten ---------------------------------------------------------- */

/* Guertel und Hosentraeger neben `color-scheme: dark`.
 *
 * Die Liste eines <select> gehoert dem Betriebssystem, und wie weit sie sich
 * gestalten laesst, geht plattformweise auseinander: Chrome unter Windows und
 * Linux nimmt Farben auf <option> an, macOS zeichnet die Liste weitgehend
 * selbst und richtet sich vor allem nach color-scheme. Beides zu setzen kostet
 * vier Zeilen und deckt beide Faelle ab.
 *
 * Der Platzhalter bleibt gedaempft, damit "Please choose…" als Aufforderung
 * lesbar bleibt und nicht wie eine getroffene Wahl aussieht. */
.pf-select option {
  background-color: var(--pf-surface, #151515);
  color: var(--pf-ink, #ffffff);
}

.pf-select option[value=""] {
  color: var(--pf-muted, rgba(255, 255, 255, 0.72));
}