/* The estate title bar — one bar, every application.
 *
 * Contract, reasoning and who adopts it: estate-title-bar.md, beside this file.
 * Umesh, 2026-09-19: "i want to have the same title bar ... but consistency overrides other
 * things." So every value that decides how the bar LOOKS lives here and nowhere else: change
 * --estate-bar-logo-w here and every application's logo cell widens on its next page load.
 *
 * Published to https://cdn.ploutos.xyz/estate/titlebar/titlebar.css — an unversioned name on
 * purpose (a dated one freezes each application until somebody edits it).
 */

:root {
  --estate-bar-h: 56px;          /* one line; the logo is contained, never the height's cause */
  --estate-bar-logo-w: 64px;     /* the white corner cell — the same width in every application */
  --estate-bar-fg: #cbd5e1;      /* slate-300 — labels and icons at rest */
  --estate-bar-fg-strong: #f1f5f9;
  --estate-bar-hover: #1e293b;
  --estate-bar-gap: 12px;
  --estate-bar-pad: 16px;

  /* THE COLOUR OF AN ENVIRONMENT IS DATA, AND THIS FILE IS NOT WHERE IT LIVES.
   *
   * An application sets `--estate-env-color` (and, where the word needs its own tone,
   * `--estate-env-word`) on the `.estate-bar` element from a value its GROUND renders. A new
   * environment then costs a row in the ground's configuration, which is the estate's rule —
   * trump's CLAUDE.md: "an environment is an opaque string, and adding one must cost rows —
   * never a migration, never a release." Every name below is a fallback for an adopter that has
   * not passed the value yet, and each is DEBT that shrinks (#1020).
   */
  --estate-env-undeclared: #7f1d1d;   /* red-900 — see .estate-bar-main */
  --estate-env-production: #312e81;   /* indigo-900 */
  --estate-env-staging:    #134e4a;   /* teal-900 */
  --estate-env-development:#78350f;   /* amber-900 */
  --estate-env-word:       #5eead4;   /* on staging; development overrides below */
}

.estate-bar {
  display: flex;
  height: var(--estate-bar-h);
  flex-shrink: 0;
  font-family: inherit;
}

/* THE LOGO SITS LEFT OF THE COLOUR, on the page's own white. The bar's background does not run
 * behind it (Umesh, 2026-09-19: "it should not sit on top of logo"). */
.estate-bar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--estate-bar-logo-w);
  flex-shrink: 0;
  background: #ffffff;
  text-decoration: none;
}
.estate-bar-logo:hover { opacity: .8; }
.estate-bar-logo img {
  height: 32px;
  max-width: calc(var(--estate-bar-logo-w) - 16px);
  object-fit: contain;   /* a wordmark is never cropped to a circle */
}

/* The coloured bar begins after the logo. */
.estate-bar-main {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--estate-bar-gap);
  padding: 0 var(--estate-bar-pad);
  /* AN ENVIRONMENT NOBODY DECLARED MUST NOT LOOK LIKE PRODUCTION. This defaulted to production's
   * indigo, so a ground the estate has never heard of — infra measured `env1` — wore the colour of
   * the one place where a mistake cannot be taken back. The whole purpose of the bar is to say
   * which ground you are on, and the unknown case was answering with the most reassuring one.
   * It is now unmistakably not production, and not any of the three below either. */
  background: var(--estate-env-color, var(--estate-env-undeclared));
}
/* FALLBACKS FOR AN ADOPTER THAT HAS NOT PASSED `--estate-env-color` YET — debt, and it shrinks
 * (#1020). The moment every application sets the value from its ground, these three lines and the
 * three variables above go, and this file knows no environment name at all. */
.estate-bar[data-env="production"]  .estate-bar-main { background: var(--estate-env-color, var(--estate-env-production)); }
.estate-bar[data-env="staging"]     .estate-bar-main { background: var(--estate-env-color, var(--estate-env-staging)); }
.estate-bar[data-env="development"] .estate-bar-main { background: var(--estate-env-color, var(--estate-env-development)); }

.estate-bar-menu,
.estate-bar-actions button,
.estate-bar-actions a,
.estate-bar-exit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--estate-bar-fg);
  cursor: pointer;
  text-decoration: none;
}
.estate-bar-menu:hover,
.estate-bar-actions button:hover,
.estate-bar-actions a:hover,
.estate-bar-exit:hover { color: var(--estate-bar-fg-strong); background: var(--estate-bar-hover); }

.estate-bar-menu svg,
.estate-bar-actions svg,
.estate-bar-exit svg { width: 20px; height: 20px; }

/* THE APPLICATION'S NAME — always shown, because a URL is not a name anybody reads. */
.estate-bar-app {
  font-size: 14px;
  font-weight: 600;
  color: var(--estate-bar-fg-strong);
  white-space: nowrap;
}

/* The tenant or account, when the application has one. Absent is a valid state. */
.estate-bar-context {
  font-size: 14px;
  color: var(--estate-bar-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The environment is a colour AND a word. An application that passes `--estate-env-word` decides
 * its own tone; the name-keyed lines below are the same debt as the colours (#1020).
 *
 * PRODUCTION CARRYING NO WORD IS THE ONE NAME THIS FILE KNOWS ON PURPOSE, and it is the exception
 * the estate's rule allows: the bar is silent exactly where an act cannot be undone, so silence
 * means production and every other ground says its own name out loud. */
.estate-bar-env {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--estate-env-word);
  white-space: nowrap;
}
.estate-bar[data-env="development"] .estate-bar-env { color: #fcd34d; }
.estate-bar[data-env="production"]  .estate-bar-env { display: none; }

.estate-bar-spacer { flex: 1; }

.estate-bar-actions { display: flex; align-items: center; gap: 4px; }

.estate-bar-who {
  font-size: 14px;
  color: var(--estate-bar-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A phone keeps the logo, the menu and the application's name; the rest gives way. */
@media (max-width: 640px) {
  .estate-bar-context,
  .estate-bar-who { display: none; }
}