/* Host shell for the Antigravity Lighthouse Command Engine. */
html,
body.bridge-page {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.bridge-page .app-shell,
.bridge-shell {
  width: 100%;
  height: 100vh;
  min-height: 100vh;
}

.bridge-main.antigravity-host {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #f1f5f9;
}

/* finops-style coast banner sits above the engine — compact here so the
   nautical chart gets the room it deserves. */
.bridge-main.antigravity-host .hero-coast { flex: none; height: 156px; }
.bridge-page .hero-copy { padding: 20px 38px; }
.bridge-page .hero-copy > p:first-child { margin-bottom: 4px; font-size: 14px; }
.bridge-page .hero-copy h1 { font-size: 38px; }
.bridge-page .hero-copy h1 sup { font-size: 22px; top: 2px; margin-right: 5px; }
.bridge-page .hero-sub { margin-top: 7px; font-size: 14px; }
.bridge-page .utility-pill { top: 16px; height: 46px; }

/* live clock · date · year, right end of the utility pill */
.bridge-page .clock-state {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1;
  white-space: nowrap;
}
.bridge-page .clock-state b {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink, #071f49);
  font-variant-numeric: tabular-nums;
}
.bridge-page .clock-state small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted, #536b96);
}
@media (max-width: 1180px) { .bridge-page .clock-state small { display: none; } }
@media (max-width: 880px)  { .bridge-page .clock-state { display: none; } }
.bridge-page .mountains { width: 250px; height: 58px; bottom: 10px; }
.bridge-page .sunset { width: 38px; height: 38px; }
.bridge-page .cloud-a { top: 96px; }
.bridge-page .bird-a { top: 84px; }
.bridge-page .bird-b { top: 100px; }
.bridge-page .bird-c { top: 96px; }

.antigravity-frame {
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #f8fafc;
}

@media (max-width: 880px) {
  html,
  body.bridge-page {
    overflow: auto;
  }

  .bridge-page .app-shell,
  .bridge-shell {
    height: auto;
    min-height: 100vh;
  }

  .bridge-main.antigravity-host {
    grid-column: 1 / -1;
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .bridge-main.antigravity-host .antigravity-frame {
    height: 72vh;
    min-height: 560px;
  }
}