/* Ezeme console -- the few rules the design's compiled stylesheet cannot express.
 *
 * `aegis.css` is the design's own compiled Tailwind output, vendored verbatim.
 * Everything visual should come from it, and from the same class strings the
 * design's components use. What lives here is only what a static document needs
 * and a React tree did not:
 *
 *   1. the `hidden` attribute, which the design never relied on because it
 *      unmounted views instead of hiding them;
 *   2. the sign-in gate, which is this app's and not the design's -- the design
 *      has no auth screen, and auth is not mine to replace;
 *   3. a loading state, so a container that has not been filled yet reads as
 *      pending rather than empty.
 */

/* The browser's own stylesheet gives `[hidden] { display: none }`, but any
 * author rule that sets `display` outranks it -- and every view here is
 * `flex flex-col gap-4` or similar. Without this the view-switching would
 * simply not hide anything. */
[hidden] { display: none !important; }

/* A container waiting for its data. Kept faint and small so an unfilled panel
 * looks like a pending panel, not a broken one. */
.loading { color: var(--color-faint); font-size: 0.875rem; }

/* ------------------------------------------------------------------ gate */
/* The sign-in screen. Not part of the design -- drawn in its language so the
 * one screen the design does not cover does not look like a different product.
 * Shown only when the API says it wants a token; when the server is in open
 * mode this never renders. */
.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--color-bg);
  padding: 1.5rem;
}
.gate-card {
  width: 100%;
  max-width: 26rem;
  border: 1px solid var(--color-line);
  border-radius: 1rem;
  background: var(--color-surface);
  padding: 1.5rem;
}
.gate-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--color-gold);
  color: var(--color-gold-ink);
  font-family: var(--font-serif);
  font-size: 1.125rem;
}
.gate-card h1 {
  margin: 1rem 0 0.25rem;
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: 400;
}
.gate-card p { color: var(--color-muted); font-size: 0.875rem; line-height: 1.6; }
.gate-card label { display: block; margin-top: 1rem; font-size: 0.75rem; color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.1em; }
.gate-card input {
  width: 100%;
  height: 2.75rem;
  margin-top: 0.375rem;
  border: 1px solid var(--color-line);
  border-radius: 0.5rem;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  outline: none;
}
.gate-card input:focus { border-color: var(--color-gold); }
.gate-remember { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.875rem; font-size: 0.8125rem; color: var(--color-muted); }
.gate-submit {
  width: 100%;
  height: 2.75rem;
  margin-top: 1.25rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--color-gold);
  color: var(--color-gold-ink);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
}
.gate-hint { margin-top: 1rem; font-size: 0.75rem; color: var(--color-faint); line-height: 1.6; }
.err { margin-top: 0.75rem; font-size: 0.8125rem; color: var(--color-loss); }

/* The adviser thread: the design's own classes, plus the two states a static
 * page needs (a seeded greeting before any question, and a failure). */
.thread-empty { color: var(--color-faint); font-size: 0.875rem; }

/* A disabled control that is gated rather than broken. The design uses
 * `disabled:opacity-40` for this; making the cursor honest too. */
[data-gated="1"] { cursor: not-allowed; }

/* ------------------------------------------------- the brand is the way home
 * The sidebar's top-left block is a link to the public homepage. It is styled
 * here rather than with a utility class because aegis.css is the design's own
 * compiled output and only contains the utilities its components used -- and it
 * never hovered this block, so `hover:opacity-90` is not in the file. A class
 * that resolves to nothing is worse than no class: it reads as a cue to the next
 * person and does nothing.
 *
 * The mark and the wordmark keep their own spacing; only the affordance is added. */
.brand-home {
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}
.brand-home:hover { opacity: 0.85; }
.brand-home:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/* DESIGN.md: "Cards: 14px radius, 1px line border, surface fill, 20px padding."
 * The design's compiled sheet draws cards with `rounded-2xl`, which is 16px, so
 * the spec and the component disagree by two pixels. The spec wins here rather
 * than silently.
 *
 * Scoped to the card element rather than to `.rounded-2xl` itself: the same
 * utility is used for the dialog, and redefining the utility would move that too. */
section.rounded-2xl { border-radius: 0.875rem; }