/* Chrome for the drop-in calculator. Deliberately namespaced `agc-` so it
   cannot collide with any selector in the existing single-file build.

   Every colour is a var() with a fallback: if the calculator already defines
   these tokens (it does), the chrome inherits its live theme for free. */

.agc-bar,
.agc-foot {
  background: var(--panel, #fdfbf5);
  color: var(--ink, #181d26);
  border-bottom: 1px solid var(--rule, #bcaf92);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 0.86rem;
}

.agc-foot {
  border-bottom: 0;
  border-top: 1px solid var(--rule, #bcaf92);
  margin-top: 2rem;
}

.agc-bar__inner {
  max-width: 1180px;
  margin-inline: auto;
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.agc-home {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
  color: inherit;
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  margin-right: auto;
}

.agc-home__deva {
  font-family: 'Noto Serif Devanagari', serif;
  color: var(--brass, #7a5a10);
}

.agc-link {
  color: var(--muted, #545c69);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.agc-link:hover {
  color: var(--ink, #181d26);
}

.agc-link--on {
  color: var(--ink, #181d26);
  border-bottom-color: var(--brass, #7a5a10);
}

.agc-link:focus-visible,
.agc-home:focus-visible {
  outline: 2px solid var(--brass, #7a5a10);
  outline-offset: 2px;
}

.agc-note {
  margin: 0 auto 0 0;
  color: var(--muted, #545c69);
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.78rem;
}

.agc-langs {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   The drawer, to match the one the React pages carry.

   The calculator is a finished single-file build and gains no framework, so
   this is the same panel and hairline treatment done in about a hundred lines
   of plain DOM. Namespaced agc- like everything else here, and every colour a
   var() with a fallback so it follows the calculator's own theme switch.
   --------------------------------------------------------------------------- */
.agc-burger {
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--rule-control, #8a7c5c);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.agc-burger:hover {
  border-color: var(--brass, #7a5a10);
  color: var(--brass, #7a5a10);
}

.agc-burger:focus-visible {
  outline: 2px solid var(--brass, #7a5a10);
  outline-offset: 2px;
}

.agc-scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--bg, #f4efe2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0.18s;
}

.agc-scrim.is-on {
  opacity: 0.72;
  visibility: visible;
}

.agc-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  z-index: 41;
  width: min(22rem, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--panel, #fdfbf5);
  color: var(--ink, #181d26);
  border-inline-end: 1px solid var(--rule, #bcaf92);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.18s ease, visibility 0.18s;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.agc-drawer.is-on {
  transform: none;
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .agc-drawer,
  .agc-scrim {
    transition: none;
  }
}

.agc-drawer__head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid var(--rule, #bcaf92);
}

.agc-drawer__title {
  font-family: 'Zilla Slab', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
}

.agc-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

.agc-navlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.agc-navlist__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--rule, #bcaf92);
  color: var(--ink, #181d26);
  text-decoration: none;
  font-size: 0.86rem;
}

.agc-navlist li:last-child .agc-navlist__link {
  border-bottom: 0;
}

a.agc-navlist__link:hover {
  color: var(--brass, #7a5a10);
}

.agc-navlist__link--here {
  color: var(--muted, #545c69);
}

.agc-mark {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--rule-control, #8a7c5c);
  border-radius: 999px;
  color: var(--muted, #545c69);
  white-space: nowrap;
}

.agc-mark--on {
  color: var(--ok, #1a5039);
  border-color: var(--ok, #1a5039);
}

/* The chat link in the calculator's bar. A pill rather than a tab, because it
   goes somewhere else rather than to another part of this page. */
.agc-ask {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--brass, #7a5a10);
  border-radius: 999px;
  background: var(--brass, #7a5a10);
  color: var(--on-brass, #fdfbf5);
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.82rem;
}

.agc-ask:hover {
  border-color: var(--ink, #181d26);
}

.agc-ask:focus-visible {
  outline: 2px solid var(--brass, #7a5a10);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Masthead parity with the React pages

   The calculator is the page that ranks, and it was the one page on the site
   with a thin two-link strip where every other tool had a full masthead. What
   follows gives the injected bar the same height, the same order of controls
   and the same pill treatment, and hides the two controls the page carries in
   its own header now that the bar and the drawer provide them. Those two
   selectors are the only ones here that reach into the calculator's own
   markup; everything else stays namespaced agc-.
   --------------------------------------------------------------------------- */
.agc-bar__inner {
  padding-block: 0.85rem;
  gap: 1rem;
  flex-wrap: nowrap;
}

.agc-nav {
  display: flex;
  gap: 1.5rem;
  margin-inline-start: auto;
}

.agc-home {
  margin-right: 0;
}

/* The page's own language select and theme button. Both are in the bar and
   the drawer now, and two of each on one page is worse than the wrong one. */
.head .hctl {
  display: none;
}

/* The wordmark is in the masthead now, so the page's own copy of it would be
   the site name printed twice, one above the other. The subhead stays: it is
   this page's title, the way every tool page has one. */
.head .brand {
  display: none;
}

.agc-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 1rem;
  border: 1px solid var(--rule-control, #8a7c5c);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
}

.agc-pill:hover {
  border-color: var(--brass, #7a5a10);
}

.agc-account {
  position: relative;
}

.agc-pop {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  width: min(20rem, 80vw);
  display: none;
  padding: 1rem;
  background: var(--panel, #fdfbf5);
  border: 1px solid var(--rule, #bcaf92);
  border-radius: 2px;
}

.agc-pop.is-on {
  display: grid;
  gap: 0.75rem;
  justify-items: start;
}

.agc-pop__body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted, #545c69);
}

/* ---------------------------------------------------------------------------
   The chat band, under the chart output
   --------------------------------------------------------------------------- */
.agc-band {
  max-width: 1180px;
  margin: 2rem auto 0;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--panel, #fdfbf5);
  border: 1px solid var(--rule, #bcaf92);
  border-radius: 2px;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.agc-band__title {
  margin: 0;
  font-family: 'Zilla Slab', Georgia, serif;
  font-size: 1.1rem;
}

.agc-band__body {
  margin: 0.35rem 0 0;
  max-width: 56ch;
  font-size: 0.82rem;
  color: var(--muted, #545c69);
}

@media print {
  .agc-band,
  .agc-bar,
  .agc-drawer,
  .agc-scrim {
    display: none !important;
  }
}