/* shell.css: layout and components. No design values live here: every colour,
 * font, space and radius is a var(--...) from theme/tokens.css, so reskinning
 * means replacing that one file. tests/portability.test.mjs enforces it. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-2);
  line-height: 1.45;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-5);
  height: var(--topbar-h);
  background: var(--c-nav-bg);
  border-bottom: 1px solid var(--c-nav-border);
}

.brand { display: flex; align-items: center; }

/* Height-driven so the lockup's own proportions are never altered. The narrow
   breakpoint swaps in the mark-only file rather than scaling the full lockup
   down until the tagline turns to mud. */
.brand-logo {
  display: block;
  height: var(--logo-h);
  width: auto;
}

/* Visually hidden, not display:none, so the header keeps an accessible name.
   The clip-rect pattern rather than a negative text-indent, because the latter
   is announced oddly by some screen readers. */
.brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.tabs { display: flex; gap: var(--sp-5); height: 100%; }

.tab {
  display: flex;
  align-items: center;
  position: relative;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-2);
  color: var(--c-nav-fg);
}

.tab[aria-selected="true"] { color: var(--c-nav-fg-on); }

.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--c-accent);
}

/* One ring for the whole shell. Sits outside the control's own border rather
   than replacing it, so a focused control keeps its shape. */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-1);
}

/* The auto margin lives on the wrapper, not the avatar, so the avatar and the
   sign-out button travel to the right of the bar together. */
.account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--c-accent);
  color: var(--c-accent-fg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Hidden until a user is actually signed in, so it never invites a click that
   would do nothing. boot.js reveals it. */
.signout {
  background: none;
  border: 1px solid var(--c-nav-fg);
  color: var(--c-nav-fg-on);
  font-family: var(--font-body);
  font-size: var(--fs-1);
  line-height: 1;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-1);
  cursor: pointer;
  white-space: nowrap;
}

.signout:hover,
.signout:focus-visible {
  border-color: var(--c-nav-fg-on);
}

/* ---------- stage ---------- */
.stage {
  max-width: var(--stage-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

.view-h {
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--c-fg-heading);
  margin: 0 0 var(--sp-4);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
}

/* ---------- tile ---------- */
.tile {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-2);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tile-head { display: flex; align-items: center; gap: var(--sp-2); }

.tile-src {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-eyebrow);
}

.tile-flag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-1);
  border-radius: var(--radius-pill);
  padding: var(--sp-1) var(--sp-2);
  background: var(--c-flag-bg);
  color: var(--c-flag-fg);
}

.tile-flag-stale { background: var(--c-warn-bg); color: var(--c-warn-fg); }

.tile-label {
  font-family: var(--font-display);
  font-size: var(--fs-3);
  margin: 0;
}

.tile-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-5);
  line-height: 1;
  color: var(--c-fg-heading);
  margin: var(--sp-2) 0 0;
}

.tile-unit { font-size: var(--fs-4); color: var(--c-fg-2); margin-left: var(--sp-1); }

.tile-none {
  font-size: var(--fs-3);
  color: var(--c-fg-3);
  margin: var(--sp-2) 0 0;
}

.tile-reason { font-size: var(--fs-2); color: var(--c-fg-2); margin: var(--sp-1) 0 0; }

.tile-foot { font-size: var(--fs-1); color: var(--c-fg-3); margin-top: auto; padding-top: var(--sp-2); }

/* ---------- configuration notice ---------- */
.notice {
  max-width: var(--stage-max);
  margin: var(--sp-6) auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-2);
  padding: var(--sp-5);
}

.notice-h { font-family: var(--font-display); font-weight: 700; color: var(--c-fg-heading); font-size: var(--fs-4); margin: 0 0 var(--sp-3); }
.notice-list { margin: 0; padding-left: var(--sp-5); color: var(--c-fg-2); }
.notice-list li { margin-bottom: var(--sp-2); }

@media (max-width: 700px) {
  .topbar { gap: var(--sp-4); padding: 0 var(--sp-3); }
  .tabs { gap: var(--sp-4); }
  /* The mark-only file is squarer than the full lockup, so it is held to a
     smaller height to keep the bar's optical weight the same. */
  .brand-logo { height: var(--logo-h-compact); }
}