/* ══ OMENATI · the chrome ═════════════════════════════════════════════════════
   One bar for the whole site. Before this there were nine hand-written headers, no
   two carrying the same links, which is why nothing felt connected: the tab you used
   to get somewhere was gone when you arrived.

   Everything here is namespaced .omen-* on purpose. It is stamped into fourteen pages
   that each have their own stylesheet, and it must not collide with any of them.
   It reads the palette the pages already declare (--paper, --ink, --btc) so it looks
   native everywhere, including inside the mine, which uses the same paper palette.
   ═══════════════════════════════════════════════════════════════════════════════ */

html,body{ overflow-x:hidden }

/* ── [hidden] must actually hide ──
   The user agent's rule is [hidden]{display:none}, which is the weakest possible
   selector: ANY class rule that sets display beats it. .cta{display:flex} and
   .doors{display:grid} both did, so three "hidden" CTA blocks and two closed doors
   rendered anyway - the phase resolver was setting el.hidden correctly and the page
   ignored it. Every data-when swap on the site depends on this one line. */
[hidden]{ display:none !important }


.omen-bar{
  position:sticky; top:0; z-index:900;
  display:flex; align-items:center; gap:14px;
  height:44px; padding:0 14px;
  background:color-mix(in srgb, var(--paper,#F2EEE5) 88%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid color-mix(in srgb, var(--ink,#141414) 11%, transparent);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  /* installed to a home screen the notch eats the top - the mine already measures
     this, so borrow it and fall back to nothing in an ordinary tab */
  padding-top:var(--sat,0px); height:calc(44px + var(--sat,0px));
  transition:transform .28s ease;
}
/* the mine hides the bar the moment you start swinging, and gives it back on haul */
body.omen-nobar .omen-bar{ transform:translateY(-100%); }

.omen-mark{ display:flex; align-items:center; gap:8px; text-decoration:none;
  color:var(--ink,#141414); flex:0 0 auto; }
.omen-mark img{ height:18px; width:auto; display:block }
.omen-mark span{ font-family:Inter,system-ui,sans-serif; font-size:13px;
  font-weight:500; letter-spacing:-.01em; white-space:nowrap }

/* ── the tab row ──
   min-width:0 is the load-bearing part. A flex child defaults to min-width:auto, which
   means it refuses to shrink below its content, so six tabs pushed the row to 418px in a
   375px viewport and shoved CONNECT off the right edge. With min-width:0 the row is
   allowed to be narrower than its contents and scrolls instead. */
.omen-tabs{ display:flex; align-items:center; gap:4px; margin-left:auto;
  min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch; }
.omen-tabs::-webkit-scrollbar{ display:none }
/* CONNECT is the one control that must never scroll away: it sits outside the scroller
   and holds its size. */
.omen-chip{ flex:0 0 auto }
.omen-tabs a{
  text-decoration:none; color:var(--ink,#141414);
  font-size:10px; letter-spacing:.16em; opacity:.5;
  padding:7px 9px; border-radius:8px; white-space:nowrap;
  transition:opacity .15s, background .15s;
}
.omen-tabs a:hover{ opacity:.95; background:color-mix(in srgb, var(--ink,#141414) 6%, transparent) }
/* ── where you are ──
   ONE treatment for the current page, and it is the only filled thing on the bar. It
   used to compete with a permanently orange DIG tab: on the mine page two different
   tabs looked selected, and on every other page the loud one was not even where you
   were. An underline in the brand orange marks the page; the fill carries the shape. */
.omen-tabs a[aria-current="page"]{
  opacity:1; color:var(--ink,#141414);
  background:color-mix(in srgb, var(--ink,#141414) 12%, transparent);
  box-shadow:inset 0 -2px 0 var(--btc,#F7931A);
}

/* MINE was the site's single call to action while the mine was open, and it kept the
   orange long after digging stopped. State lives in the pill beside the label now, so
   the tab is a tab like every other one. */
.omen-tabs a.omen-dig{ letter-spacing:.14em }

/* ── the wallet chip ── */
.omen-chip{
  flex:0 0 auto; cursor:pointer; font:inherit; font-size:10px; letter-spacing:.14em;
  padding:7px 12px; border-radius:8px; white-space:nowrap;
  color:var(--ink,#141414); background:transparent;
  border:1.3px solid color-mix(in srgb, var(--ink,#141414) 26%, transparent);
  transition:border-color .15s, background .15s;
}
.omen-chip:hover{ border-color:color-mix(in srgb, var(--ink,#141414) 55%, transparent) }
.omen-chip.on{ border-color:color-mix(in srgb, var(--btc,#F7931A) 70%, transparent) }
.omen-chip.busy{ opacity:.6; cursor:progress }
/* once there is a bag worth banking and no wallet behind it, the chip asks */
.omen-chip.nag{ border-color:var(--btc,#F7931A); color:var(--btc,#F7931A);
  animation:omen-nag 1.6s ease-in-out 3 }
@keyframes omen-nag{ 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--btc,#F7931A) 45%,transparent) }
  50%{ box-shadow:0 0 0 5px transparent } }

/* ── the second level ──
   Three boards and three crew pages became two destinations without a single URL
   dying: they moved down here instead of being deleted. */
.omen-sub{
  position:sticky; top:calc(44px + var(--sat,0px)); z-index:899;
  display:flex; align-items:center; gap:2px; height:34px; padding:0 14px;
  background:color-mix(in srgb, var(--paper,#F2EEE5) 92%, transparent);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  border-bottom:1px solid color-mix(in srgb, var(--ink,#141414) 8%, transparent);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  overflow-x:auto; scrollbar-width:none;
}
.omen-sub::-webkit-scrollbar{ display:none }
.omen-sub[hidden]{ display:none }
.omen-sub a{
  text-decoration:none; color:var(--ink,#141414); opacity:.45;
  font-size:9.5px; letter-spacing:.18em; padding:6px 10px; white-space:nowrap;
  border-bottom:1.6px solid transparent;
}
.omen-sub a:hover{ opacity:.85 }
.omen-sub a[aria-current="page"]{ opacity:1; border-bottom-color:var(--btc,#F7931A) }

/* ── the sheet the chip opens ──
   It opens in place. Every "Get Xverse" and "Get Phantom" button on the site used to
   throw you into a new tab; that guidance lives in here now and never navigates. */
.omen-veil{ position:fixed; inset:0; z-index:1000; background:rgba(10,10,10,.42);
  display:flex; align-items:flex-start; justify-content:center;
  padding:calc(58px + var(--sat,0px)) 16px 16px; }
.omen-veil[hidden]{ display:none }
.omen-sheet{
  width:min(340px,100%); background:var(--paper,#F2EEE5); color:var(--ink,#141414);
  border-radius:16px; padding:8px; box-shadow:0 20px 60px rgba(0,0,0,.3);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  animation:omen-rise .18s ease;
}
@keyframes omen-rise{ from{ opacity:0; transform:translateY(-8px) } }
.omen-sheet h3{ font-family:Inter,system-ui,sans-serif; font-size:12px; font-weight:500;
  letter-spacing:.02em; opacity:.55; padding:10px 12px 8px; margin:0 }
.omen-sheet button, .omen-sheet a.omen-row{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  cursor:pointer; font:inherit; font-size:12px; letter-spacing:.01em; text-decoration:none;
  color:var(--ink,#141414); background:transparent; border:0; border-radius:11px;
  padding:12px; transition:background .13s;
}
.omen-sheet button:hover, .omen-sheet a.omen-row:hover{
  background:color-mix(in srgb, var(--ink,#141414) 7%, transparent) }
.omen-sheet .omen-ic{ width:26px; text-align:center; font-size:15px; flex:0 0 auto }
.omen-sheet .omen-sml{ display:block; font-size:10px; opacity:.5; letter-spacing:.02em; margin-top:3px }
.omen-sheet hr{ border:0; border-top:1px solid color-mix(in srgb,var(--ink,#141414) 10%,transparent);
  margin:6px 10px }
.omen-sheet .omen-say{ padding:10px 12px 12px; font-size:11px; line-height:1.6; opacity:.72 }
.omen-sheet .omen-say b{ color:var(--btc,#F7931A); font-weight:400 }
.omen-sheet .omen-code{ font-size:26px; letter-spacing:.22em; text-align:center;
  padding:14px 0 4px; color:var(--btc,#F7931A) }

/* ── the footer, the only inbound link the terms have ever needed ── */
.omen-foot{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:center;
  padding:38px 20px calc(30px + var(--sab,0px));
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:9.5px; letter-spacing:.16em;
}
.omen-foot a{ color:var(--ink,#141414); opacity:.42; text-decoration:none }
.omen-foot a:hover{ opacity:.85 }

@media(max-width:560px){
  .omen-bar{ gap:8px; padding:0 10px }
  .omen-mark span{ display:none }
  .omen-tabs{ gap:1px }
  .omen-tabs a{ padding:7px 6px; letter-spacing:.1em }
  .omen-tabs a.omen-dig{ padding:7px 10px }
  .omen-chip{ padding:7px 9px; letter-spacing:.08em; max-width:38vw;
    overflow:hidden; text-overflow:ellipsis }
}
/* ── the narrow end ──
   Measured on the live site: at 320px the bar wanted 331px and pushed the whole page
   sideways with the chip hanging off the edge. A 320px phone is old but real, and a
   navigation you have to scroll horizontally to reach is not navigation. Everything here
   only tightens - all four tabs and the chip stay on screen, which is the point. */
@media(max-width:400px){
  .omen-bar{ gap:4px; padding:0 7px }
  .omen-tabs a{ padding:7px 4px; letter-spacing:.04em; font-size:9px }
  .omen-tabs a.omen-dig{ padding:7px 8px; letter-spacing:.04em }
  .omen-chip{ padding:7px 7px; letter-spacing:.02em; font-size:9px; max-width:31vw }
  .omen-sub{ padding:0 7px }
  .omen-sub a{ padding:6px 7px; letter-spacing:.1em }
}

/* ── phase notice ──
   Shown only when the server reports the mine is shut. Sticky under the bar rather
   than a dismissible toast: this is the state of the whole site, not a notification,
   and somebody arriving three days later should still see it. */
.omen-phase{position:sticky;top:0;z-index:60;
  background:#F7931A;color:#141414;
  font-family:Inter,-apple-system,'Segoe UI',sans-serif;font-size:13.5px;line-height:1.5;
  padding:10px 18px;text-align:center;
  border-bottom:1.4px solid rgba(0,0,0,.22)}
.omen-phase b{font-weight:600}
@media(max-width:640px){ .omen-phase{font-size:12.5px;padding:9px 13px;text-align:left} }

/* ── a control the phase guard has closed ──
   The guard disables the button and explains itself in the title, but a disabled
   control that still looks clickable is a control people keep clicking. This is the
   one visual treatment for "this exists, it is just not available right now", and it
   is here rather than on each page so the muster, the charters and the volume race
   cannot drift apart on what closed looks like. */
.is-frozen{ opacity:.42; filter:grayscale(1); cursor:not-allowed }
.is-frozen:hover{ opacity:.42 }

/* ── state pills in the nav ──
   The audit's replacement for a permanent full-width banner. A pill rides its own tab,
   so "the mint is live" and "the mine is between phases" are readable on every page at
   a glance, without a strip of orange shouting over the page's first sentence. */
.omen-pill{ font-style:normal; font-size:8px; letter-spacing:.14em; margin-left:6px;
  padding:2px 5px; border-radius:100px; vertical-align:middle; white-space:nowrap;
  font-family:'JetBrains Mono',ui-monospace,monospace }
/* acid is the Solana-action colour, and minting is the Solana action */
.omen-pill.is-live{ background:#B6FF3C; color:#141414 }
/* a waiting state is stated, never celebrated */
.omen-pill.is-wait{ background:color-mix(in srgb, var(--ink,#141414) 13%, transparent);
  color:inherit; opacity:.75 }
@media(max-width:720px){ .omen-pill{ font-size:7.5px; margin-left:4px; padding:2px 4px } }

/* ── the safety line ──
   One shape for "here is what this control does to your wallet", so the promise reads
   as the same promise wherever it appears. It was worded four ways across four pages,
   which makes a reassurance sound improvised at exactly the moment it needs to sound
   routine. The WORDS differ where the truth differs: a page that only records an oath
   must not borrow the sentence from a page that asks you to sign. */
.omen-shield{ display:flex; align-items:flex-start; gap:7px; margin-top:12px;
  font-family:'JetBrains Mono',ui-monospace,monospace; font-size:10px; line-height:1.6;
  letter-spacing:.04em; opacity:.72 }
.omen-shield:before{ content:"\1F6E1"; font-size:11px; line-height:1.45; flex:none;
  filter:grayscale(1); opacity:.75 }

/* ── the provisional stamp ──
   Loud enough to be read before the numbers under it, quiet enough that it is not the
   page. Amber rather than red: the standings are honest, they are simply not final. */
.omen-provisional{ margin:0 0 22px; padding:12px 16px; border-radius:12px;
  border:1px solid color-mix(in srgb, var(--btc,#F7931A) 45%, transparent);
  background:color-mix(in srgb, var(--btc,#F7931A) 10%, transparent);
  font-size:13px; line-height:1.6; max-width:70ch }
.omen-provisional b{ color:var(--btc,#F7931A); font-weight:500 }

/* ── the narrowest phones ──
   A fade on the right edge of the tab row is the only honest hint that it scrolls, and
   the CROSSING pill loses its word before any tab loses its place. */
@media(max-width:440px){
  .omen-tabs{ mask-image:linear-gradient(90deg,#000 88%,transparent);
              -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent) }
}
@media(max-width:400px){
  .omen-bar{ gap:8px; padding-left:10px; padding-right:10px }
  .omen-pill.is-wait{ font-size:0; padding:0; width:6px; height:6px; margin-left:5px;
    border-radius:100px; background:color-mix(in srgb, var(--ink,#141414) 34%, transparent) }
  .omen-pill.is-live{ font-size:7px; letter-spacing:.08em; padding:2px 4px }
}

/* ── thumb-sized targets in a bar that does not grow ──
   The tabs are 26px islands floating in a 44px bar: 18px of the bar is dead space that
   nothing can be tapped on. Filling the bar's full height turns that into hit area
   without moving a single pixel of the design - which matters more than usual here,
   because /twin positions its stage with a hardcoded calc(44px + safe-area) and would
   slide under a bar that got taller. Nothing above changes size; only what a thumb can
   land on does. */
@media(pointer:coarse){
  .omen-tabs a{ display:flex; align-items:center; height:100%;
                padding-top:0; padding-bottom:0 }
  .omen-tabs{ height:100% }
  /* the wordmark is the way home from every page and was an 18px target */
  .omen-mark{ height:100%; align-items:center }
  .omen-chip{ min-height:38px; display:inline-flex; align-items:center }
}