/* ============================================================================
   viewer-fallback.css - what the viewer looks like with no brand.

   Loaded BEFORE viewer.css and after the brand. Everything here sits in
   @layer viewer-fallback, and unlayered styles beat layered ones whatever the
   source order, so brand.css and site.css win the moment they load and this
   file can never shadow them. It exists for one case: serve.py on a laptop
   with brand.xyzbim.eu unreachable.

   It is a COPY, which the house rule normally forbids - so it lives alone, in
   a file whose name says what it is, instead of hiding inside viewer.css. The
   component block below is verbatim from brand.xyzbim.eu/v1/site.css and was
   extracted from that file by script, not retyped. RE-COPY IT when site.css
   changes; nothing checks that for you.

   Deliberate viewer overrides do NOT belong here. They are unlayered rules in
   viewer.css, and each one says why it exists.
   ========================================================================= */

/* Offline fallback: the viewer's original tokens, in a layer so that brand.css
   (unlayered, loaded before) overrides them whenever it is reachable. */
@layer viewer-fallback{
:root{
  --bg:#F4F2ED; --bg-2:#EBE7DE; --rule:rgba(17,17,17,.16);
  --ink:#111111; --ink-2:#333; --ink-3:#6a6a68;
  --accent:var(--product,#E0A458); --accent-ink:#1A1206; --ok:#6FBF8B;
  --rail:56px; --topbar:52px; --drawer:400px; --panel:360px;
  --ease:cubic-bezier(.25,.8,.25,1);
  --tr-fast:.22s ease;                      /* used by the site.css copy below */
  font-synthesis:none;
}
[data-theme="dark"]{
  --accent:var(--product-up,var(--product));
  --bg:#0A0A0A; --bg-2:#141414; --rule:rgba(232,228,219,.18);
  --ink:#E8E4DB; --ink-2:#C8C2B6; --ink-3:#8d897f;
}
}
/* The house controls come from site.css, which viewer.html loads: the coin above and the
   theme switch below. The block inside the LAYER is a verbatim copy of site.css and exists
   only for the offline case (serve.py on a laptop, brand.xyzbim.eu unreachable) - unlayered
   beats layered whatever the source order, so the brand wins whenever it loads and this can
   never shadow it. Anything OUTSIDE the layer is a deliberate viewer override; keep that list
   short and say why. Re-copy this block if site.css changes. */
@layer viewer-fallback{
:root{ --xyz-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='102.542 120.452 25.680 26.355' fill='%23000'%3E%3Cpath d='M 115.600 133.702 L 119.313 138.634 L 122.858 133.924 L 123.809 133.924 L 119.789 139.266 L 119.313 139.898 L 114.649 133.702 Z'/%3E%3Cpath d='M 124.097 144.990 L 123.145 144.990 L 119.313 139.898 L 115.480 144.990 L 114.528 144.990 L 119.313 138.634 L 119.789 139.266 Z'/%3E%3Cpath d='M 114.833 133.702 L 114.833 128.137 L 110.416 122.270 L 111.399 122.270 L 115.209 127.331 L 119.019 122.270 L 120.002 122.270 L 115.600 128.117 L 115.600 133.702 Z'/%3E%3Cpath d='M 115.600 133.702 L 115.529 133.797 L 115.457 133.892 L 115.314 134.082 L 110.010 141.129 L 115.600 141.129 L 115.600 141.513 L 115.600 141.896 L 108.853 141.896 L 108.610 141.896 L 114.201 134.469 L 108.610 134.469 L 108.610 134.085 L 108.610 133.702 Z'/%3E%3C/svg%3E"); }
.xsite-nav__toggle{
  position: relative;
  width:  var(--xsite-toggle, 24px);
  height: var(--xsite-toggle, 24px);
  padding: 0;
  margin-left: var(--xsite-toggle-gap, 10px);
  border: 1px solid var(--ink);
  background: var(--ink);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background var(--tr-fast), border-color var(--tr-fast);
}
.xsite-nav__toggle::before{
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--bg);
  -webkit-mask: var(--xyz-mark) center / contain no-repeat;
  mask: var(--xyz-mark) center / contain no-repeat;
  transition: background var(--tr-fast);
}
.xsite-nav__toggle:hover{ border-color: var(--accent); }
.xsite-nav__toggle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }
.coin{
  --coin: 44px;
  position: relative; flex: 0 0 auto;
  display: grid; place-items: center;
  width: var(--coin); height: var(--coin);
  background: var(--c, var(--accent));
  /* White fails on the lighter product colours (competicoes 2.25:1,
     attic 3.59:1, monumentos 3.94:1). Whoever paints the coin passes
     --coin-fg when white does not clear 4.5:1; white is the default
     because most of the palette is dark enough for it. */
  color: var(--coin-fg, #fff);
  font-family: var(--f-mono); font-weight: 500;
  font-size: calc(var(--coin) * .34); letter-spacing: -.02em; line-height: 1;
}
.coin b{ font-weight: 500; }
.coin i{
  position: absolute; right: calc(var(--coin) * .08); bottom: calc(var(--coin) * .07);
  font-style: normal; font-size: calc(var(--coin) * .16); letter-spacing: .04em; opacity: .78;
}
.coin--lg{ --coin: 64px; }
}

/* Canonical header copied from site.css, 2026-10-22. A failed brand request
   must not leave the SVG at its intrinsic size and cover the phone screen. */
@layer viewer-fallback {
.xsite-nav{
  position: sticky;
  top: 0;
  /* Nao herdar o line-height do corpo da pagina que hospeda o cabecalho.
     Duas paginas do monumentos usam 1.7 para o texto corrido, e o mesmo
     cabecalho saia 48px la e 45px no resto: um componente que muda de
     tamanho consoante a pagina ainda nao e portatil. */
  line-height: 1.3;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 12px var(--pad, 24px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--f-sans);
}
/* color-mix is recent; this is what older engines get. */
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .xsite-nav{ background: var(--bg); }
}

.xsite-nav__mark{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}
.xsite-nav__mark svg{
  width: 26px;
  height: auto;
  display: block;
  color: currentColor;
}

.xsite-nav__word{ display: flex; flex-direction: column; line-height: 1.05; }
.xsite-nav__word b{
  font-weight: 500;          /* the wordmark is medium, never bold */
  font-size: 13px;
  letter-spacing: .01em;
}
.xsite-nav__word em{
  font-style: normal;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Which project this is. The one line each site changes. */
.xsite-nav__where{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-left: clamp(10px, 2vw, 18px);
  border-left: 1px solid var(--rule);
  align-self: stretch;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.xsite-nav__links{
  display: flex;
  gap: clamp(12px, 2vw, 26px);
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
}
.xsite-nav__links a{
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color var(--tr-fast), border-color var(--tr-fast);
}
.xsite-nav__links a:hover{ color: var(--ink); border-bottom-color: var(--accent); }
.xsite-nav__links a[aria-current]{ color: var(--ink); border-bottom-color: var(--ink-3); }
.xsite-nav a:focus-visible,
.xsite-foot a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

.xsite-nav__home{
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.xsite-nav__home:hover{ color: var(--accent); }

@media (max-width: 900px){
  .xsite-nav{ flex-wrap: wrap; gap: 10px 16px; }
  .xsite-nav__where{ border-left: 0; padding-left: 0; }

  /* Uma linha que se arrasta, em vez de varias linhas que empilham.
     Um site com muitos links dava um cabecalho de quatro linhas num
     telemovel: o monumentos, com 14, ocupava 133px de um ecra de 812 - 16%
     do que ha, e nas paginas que sao aplicacoes de viewport inteiro esse
     espaco sai directamente ao mapa. Uma fila rolavel custa uma linha, diz
     que ha mais para o lado com o esbatimento da direita, e nao esconde
     nada. */
  .xsite-nav__links{
    width: 100%; margin-left: 0; order: 3; gap: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* o esbatimento e a unica pista de que a fila continua */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  }
  .xsite-nav__links::-webkit-scrollbar{ display: none; }
  .xsite-nav__links a{ white-space: nowrap; flex: 0 0 auto; }

  /* Measured on a 375px phone 2026-09-26: with the sub-line under the wordmark
     the toggle wrapped to a row of its own and read as a second mark, and the
     header took 215px of 812. Mark, languages and toggle stay on one row,
     every control gets a 32px tap target. 215px to 87px. */
  .xsite-nav{ gap: 6px 10px; padding: 8px var(--pad, 20px); }
  .xsite-nav__mark{ margin-right: auto; }
  .xsite-nav__lang{ margin-left: 0; padding-left: 10px; gap: 0; }
  .xsite-nav__lang a{ display: inline-flex; align-items: center; min-height: 32px; padding: 0 8px; }
  .xsite-nav__toggle{ --xsite-toggle: 28px; --xsite-toggle-gap: 6px; }
  .xsite-nav__links{ gap: 18px; }
  .xsite-nav__links a{ display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; }
}

@media (max-width: 480px){
  /* the 9.5px mono sub-line is not legible at that size and is what pushed the
     toggle to a second row; the wordmark still says who this is */
  .xsite-nav__word em{ display: none; }
}


}