/* Copyright (c) 2026 Atlas Machina LLC. All rights reserved. */
/* The host's stylesheet (e1-app-shell, #35; e7-ui-library-adopt, #451).

   Every part on every screen is styled by Atlas UI alone: the tokens (static/atlas_ui/tokens.css) and the
   parts' own stylesheets (static/atlas_ui/react.css and its siblings), vendored at the version
   ui-library.lock.json pins and linked with subresource integrity from base.html. This file holds only what
   the library leaves to the host: the self-hosted fonts the tokens name, and where the parts sit on the page.
   No colour value, no size of its own, no look of a part: a token or nothing (tests/e2e/test_ui_library_shell.py
   and tests/integration/http/test_home.py fail on a colour value here). A part that looks wrong is fixed in
   Atlas UI, never here (docs/eng/ui-library.md). */

/* ---- Part 0: the fonts ----
   IBM Plex Sans and IBM Plex Mono, self-hosted from static/fonts/ (no third-party request, CMMC):
   the official release @ibm/plex-sans@1.1.0 and @ibm/plex-mono@1.1.0 (github.com/IBM/plex), the
   Latin1 split woff2 of the three weights the tokens use (400, 500, 600), under the SIL Open Font
   Licence 1.1 (static/fonts/LICENSE.txt; docs/licences/policy.md). The family names are exactly the
   tokens' (--ui-font-sans, --ui-font-mono); a glyph outside the subset falls back down their stacks. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* ---- Part 1: the page layout ---- */
html,
body {
  height: 100%;
  margin: 0;
}

body.atlas-page {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font-sans);
  font-size: var(--ui-text-body);
  line-height: var(--ui-line-normal);
}

[hidden] {
  display: none !important;
}

/* The shell fills the window; only the screen scrolls (ScreenShell). */
.atlas-shell {
  height: 100%;
}

/* The bar's open menus sit above the screen under it (the page header is sticky). */
.ui-ScreenShell-top {
  position: relative;
  z-index: var(--ui-layer-popover);
}

/* A menu's rows hang under the control that opened them. The library places an open list itself in the
   browser (Layer); drawn by the server, the host anchors it here. */
.ui-Menu-root,
.ui-AccountMenu-root {
  position: relative;
}

.atlas-popover > .ui-Menu-list {
  position: absolute;
  top: calc(100% + var(--ui-space-xs));
  left: 0;
}

.atlas-popover-end > .ui-Menu-list {
  left: auto;
  right: 0;
}

.atlas-notices:empty {
  display: none;
}

.atlas-notices > div {
  padding: var(--ui-space-s) var(--ui-space-xl) 0;
}

/* Home: the empty state in the middle of the screen; the skeleton in its place while the plant changes. */
.ui-PrintFrame-page {
  padding: 0;
}

.ui-PrintFrame-frame > thead[data-print-stamp] {
  display: none;
}

.ui-ScreenShell-body > [data-when="ready"] {
  padding-top: var(--ui-space-xxl);
}

[data-when="loading"] {
  display: none;
}

.ui-ScreenShell-body > [data-when="loading"] {
  padding-top: var(--ui-space-xxl);
}

[data-when="loading"] .ui-Row-row > .ui-Card-card {
  flex: 1 1 0;
  min-height: calc(var(--ui-space-xxl) * 4);
}

.htmx-request [data-when="ready"] {
  display: none;
}

.htmx-request [data-when="loading"] {
  display: block;
}

/* Sign in: one card in the middle of the page, the badge at the top right. */
.atlas-signin {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--ui-space-l) var(--ui-space-xl);
}

.atlas-signin-top {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: var(--ui-control-height);
}

.atlas-signin-card {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
}

.atlas-signin-card > .ui-Card-card {
  width: 100%;
  max-width: calc(var(--ui-space-xxl) * 13);
}

.atlas-signin-form .ui-Button-root,
.atlas-signin-form .ui-Button-button {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* IT Setup and Activity: where the parts sit. Each part draws itself (ui(), jinja_ui.py); these rules only
   place them. */
.atlas-list {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.atlas-list-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-m);
}

.atlas-form {
  margin: 0;
}

.atlas-search {
  max-width: calc(var(--ui-space-xxl) * 12);
}

/* Fields side by side while there is room, one under the other when there is not. */
.atlas-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--ui-space-xxl) * 8), 1fr));
  align-items: start;
  gap: var(--ui-space-l);
}

/* A person's record: the cards two across while there is room. */
.atlas-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--ui-space-xxl) * 11), 1fr));
  align-items: start;
  gap: var(--ui-space-l);
}

.atlas-record-head {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-m);
}

.atlas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-s);
}

/* Activity: the search beside the list, above it when the screen is too narrow for both. */
.atlas-aside-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--ui-space-l);
}

.atlas-aside {
  flex: 1 1 calc(var(--ui-space-xxl) * 10);
  max-width: calc(var(--ui-space-xxl) * 11);
}

.atlas-aside-main {
  flex: 999 1 calc(var(--ui-space-xxl) * 16);
  min-width: 0;
}