/* Maplore chrome: the one header, product bar and footer every page on
   maplore.in wears -- the studio site, Machhar and Tiddi. Served from
   maplore.in/chrome.css and linked by all three, so there is one copy.

   Global bar (56px): Maplore™ [/ Product] ........ How we work · Data · About
   Product bar (46px, product pages only): the product's own pages as tabs.
   Footer: the same four links and the same credit everywhere. */

:root {
  --mlc-ink: #1A1C1F;
  --mlc-dim: #5B5D61;
  --mlc-faint: #8A8C90;
  --mlc-rule: #E4E4E7;
  --mlc-bg: #FFFFFF;
  --mlc-pad: clamp(16px, 3.2vw, 48px);
  --mlc-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --mlc-serif: "DM Serif Display", Georgia, serif;
  /* Content lines up at the same x on every page and every screen: bars are
     full width (their rules run edge to edge) and pad in to a 1680 column. */
  --mlc-x: max(var(--mlc-pad), calc((100vw - 1680px) / 2 + var(--mlc-pad)));
}
@media (prefers-color-scheme: dark) {
  :root {
    --mlc-ink: #ECECEE;
    --mlc-dim: #A1A1AA;
    --mlc-faint: #71717A;
    --mlc-rule: #2C2C2A;
    --mlc-bg: #1A1C1F;
  }
  .mlc-logo img { filter: none; }
}

/* Every page reserves the scrollbar's width and is light, so moving between
   the studio, Machhar and Tiddi never shifts the bar sideways or flips colour. */
html { scrollbar-gutter: stable; color-scheme: light dark; }

/* Page content that should line up with the logo. */
.mlc-px { padding-left: var(--mlc-x); padding-right: var(--mlc-x); box-sizing: border-box; }

.mlc-head { position: relative; z-index: 20; background: var(--mlc-bg); border-bottom: 1px solid var(--mlc-rule); font-family: var(--mlc-sans); color: var(--mlc-ink); }
.mlc-bar { display: flex; align-items: center; gap: 16px; height: 56px; padding: 0 var(--mlc-x); box-sizing: border-box; }
.mlc-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--mlc-ink); text-decoration: none; flex-shrink: 0; }
.mlc-logo img { height: 24px; width: auto; display: block; }
.mlc-logo span { font-weight: 800; font-size: 13.5px; letter-spacing: .05em; text-transform: uppercase; }
.mlc-tm { font-size: .55em; font-weight: 600; vertical-align: super; margin-left: .08em; letter-spacing: 0; }
.mlc-crumb { display: inline-flex; align-items: baseline; gap: 12px; min-width: 0; }
.mlc-crumb::before { content: "/"; color: var(--mlc-rule); font-size: 22px; font-weight: 300; transform: translateY(1px); }
.mlc-product { font-family: var(--mlc-serif); font-style: italic; font-size: 22px; line-height: 1; color: var(--mlc-ink); text-decoration: none; white-space: nowrap; }
.mlc-product-dev { font-family: var(--mlc-sans); font-style: normal; font-size: 13px; color: var(--mlc-faint); margin-left: 6px; }
.mlc-what { font-size: 13px; color: var(--mlc-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mlc-global { margin-left: auto; display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.mlc-global a { font-size: 14px; color: var(--mlc-dim); text-decoration: none; }
.mlc-global a:hover, .mlc-global a[aria-current="page"] { color: var(--mlc-ink); }

.mlc-tabs { display: flex; align-items: stretch; gap: 26px; height: 46px; padding: 0 var(--mlc-x); box-sizing: border-box; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--mlc-rule); }
.mlc-tabs::-webkit-scrollbar { display: none; }
.mlc-tabs a, .mlc-tabs button { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0; cursor: pointer; }
.mlc-tabs a { display: inline-flex; align-items: center; font-size: 14px; color: var(--mlc-dim); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mlc-tabs a:hover, .mlc-tabs button:hover { color: var(--mlc-ink); }
.mlc-tabs button { display: inline-flex; align-items: center; font-size: 14px; color: var(--mlc-dim); white-space: nowrap; margin-bottom: -1px; }
.mlc-tabs a[aria-current="page"] { color: var(--mlc-ink); font-weight: 500; border-bottom-color: var(--mlc-ink); }
.mlc-tabs .mlc-sep { flex: 1; }

.mlc-logo:focus-visible, .mlc-global a:focus-visible, .mlc-tabs a:focus-visible, .mlc-foot a:focus-visible { outline: 2px solid var(--mlc-ink); outline-offset: 3px; }

.mlc-foot { font-family: var(--mlc-sans); background: var(--mlc-bg); border-top: 1px solid var(--mlc-rule); color: var(--mlc-dim); font-size: 13px; }
.mlc-foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding: 18px var(--mlc-x); box-sizing: border-box; }
.mlc-foot .mlc-logo img { height: 18px; }
.mlc-foot .mlc-logo span { font-size: 12px; }
.mlc-tag { color: var(--mlc-dim); }
.mlc-foot a { color: var(--mlc-dim); text-decoration: none; }
.mlc-foot a:hover { color: var(--mlc-ink); }
.mlc-credit { margin-left: auto; }
.mlc-credit a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .mlc-bar { gap: 12px; }
  .mlc-what, .mlc-product-dev { display: none; }
  .mlc-global { gap: 16px; }
  .mlc-global a { font-size: 13px; }
  .mlc-global .mlc-opt { display: none; }
  .mlc-tabs { gap: 20px; }
  .mlc-credit { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
  .mlc-logo span { display: none; }
}