/* ZWorld theme for the shared app pages (_core/app/pad.css reads these tokens).
   Also carries the site's header/footer styles so _chrome.html renders natively
   without loading the landing page's stylesheet. */

@font-face {
  font-family: "Monogram Extended";
  src: url(/assets/monogram-extended-CTurXSgn.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Monogram Extended";
  src: url(/assets/monogram-extended-italic-DjCbAp-_.woff2) format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --pad-bg: #0a0a0a;
  --pad-surface: #101010;
  --pad-ink: #f2f2ec;
  --pad-ink-dim: #9a9a95;
  --pad-rule: #5a5a56;
  --pad-accent: #c98a1a;
  --pad-accent-ink: #0a0a0a;
  --pad-accent-text: #f0b545;
  --pad-good: #7ccf8a;
  --pad-bad: #ff7e8c;
  --pad-font: "Monogram Extended", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pad-font-display: "Monogram Extended", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pad-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --pad-radius: 0;
  --pad-max-width: 1400px;

  /* template tokens the chrome below relies on */
  --tm-ink: #0a0a0a;
  --tm-paper: #f2f2ec;
  --tm-paper-muted: #d8d8d2;
  --tm-text-muted: #9a9a95;
  --tm-rule: #5a5a56;
  --tm-header-height: 3.75rem;
  --page-pad: clamp(1rem, 2.2vw, 2.25rem);
}

html { -webkit-font-smoothing: none; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; }
body { font-size: 1.25rem; line-height: 1; }

/* ---- header (same rules as the landing page) ---- */
.site-header { z-index: 100; min-height: var(--tm-header-height); background: var(--tm-ink); color: var(--tm-paper); grid-template-columns: auto auto 1fr auto; align-items: center; display: grid; position: sticky; top: 0; font-family: var(--pad-font-display); }
.site-header:after { z-index: 1; background: var(--tm-rule); content: ""; pointer-events: none; height: 1px; position: absolute; bottom: 0; left: 0; right: 0; }
.site-header a, .site-header summary { text-decoration: none; color: inherit; }
.site-brand { min-height: var(--tm-header-height); padding: 0 var(--page-pad); white-space: nowrap; align-items: center; gap: .65rem; font-size: 1.5rem; display: inline-flex; }
.brand-mark { object-fit: contain; flex: none; width: .75rem; height: .75rem; display: block; }
.site-header .brand-mark { filter: invert(); }
.site-version { min-height: var(--tm-header-height); color: var(--tm-text-muted); place-items: center; padding: 0 1rem; font-size: 1rem; display: grid; }
.desktop-nav { min-width: 0; height: var(--tm-header-height); justify-content: flex-end; align-items: stretch; display: flex; }
.desktop-nav a { min-width: 7.5rem; color: var(--tm-paper-muted); white-space: nowrap; place-items: center; padding: 0 1rem; font-size: 1rem; transition: background-color .12s, color .12s; display: grid; }
.desktop-nav a:hover, .desktop-nav a:focus-visible, .desktop-nav a[aria-current=page] { background: var(--tm-paper); color: var(--tm-ink); }
.header-install { min-width: 8.5rem; min-height: var(--tm-header-height); background: var(--tm-paper); color: var(--tm-ink) !important; white-space: nowrap; justify-content: center; align-items: center; gap: .6rem; padding: 0 1.25rem; font-size: 1rem; transition: background-color .12s, color .12s; display: flex; }
.header-install:hover, .header-install:focus-visible { background: var(--tm-ink); color: var(--tm-paper) !important; }
.mobile-menu { display: none; }

/* ---- footer ---- */
.site-footer { padding: var(--page-pad); background: var(--tm-paper); color: var(--tm-ink); grid-template-columns: 4fr 5fr 3fr; align-items: end; gap: 2rem; display: grid; font-family: var(--pad-font-display); margin-top: 4rem; }
.site-footer a { color: inherit; }
.footer-brand { justify-items: start; width: max-content; font-size: 1.5rem; line-height: 1.2; display: grid; }
.footer-brand__title { align-items: center; gap: .5rem; display: flex; }
.footer-brand p { white-space: nowrap; margin: 0; }
.site-footer nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; display: grid; }
.footer-link-column { align-content: end; gap: .75rem; display: grid; }
.site-footer nav a { font-size: 1.5rem; text-decoration: none; }
.site-footer nav a:hover { text-underline-offset: .2rem; text-decoration: underline; }
.font-credit { text-align: right; justify-items: end; font-size: 1rem; line-height: 1.15; display: grid; margin: 0; }
.font-credit a { text-decoration: none; }
.font-credit a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .site-header { grid-template-columns: auto auto 1fr auto auto; }
  .mobile-menu { min-height: var(--tm-header-height); grid-column: 5; display: block; position: relative; }
  .mobile-menu summary { min-width: 5.5rem; min-height: var(--tm-header-height); cursor: pointer; place-items: center; font-size: 1.5rem; list-style: none; display: grid; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu nav { top: var(--tm-header-height); border-top: 1px solid var(--tm-paper); background: var(--tm-ink); width: auto; display: grid; position: fixed; left: 0; right: 0; z-index: 99; }
  .mobile-menu nav a { border-bottom: 1px solid var(--tm-paper); align-items: center; min-height: 3.5rem; padding: .75rem 1rem; font-size: 1.5rem; display: flex; }
}
@media (max-width: 760px) {
  :root { --tm-header-height: 3.4rem; }
  .site-header { grid-template-columns: minmax(0, 1fr) auto auto; }
  .site-brand { min-width: 0; padding-right: .65rem; overflow: hidden; }
  .site-version { display: none; }
  .header-install { grid-column: 2; min-width: 4.8rem; padding: 0 .75rem; font-size: 1rem; }
  .mobile-menu { grid-column: 3; }
  .mobile-menu summary { min-width: 4.8rem; font-size: 1rem; }
  .site-footer { grid-template-columns: 1fr; align-items: start; padding-top: 3rem; }
  .font-credit { text-align: initial; justify-items: start; }
}

/* Monogram is a small-bodied pixel face: scale the shared app body so copy stays readable */
.pad { zoom: 1.3; }
@media (max-width: 760px) { .pad { zoom: 1.15; } }