/* ═════════════════════════════════════════════════════════════════════════════
   ORO · STATUS MARKERS
   Namespace `orost-`. Loaded last, owns nothing else, removable in one line.

   WHY THIS EXISTS
   ---------------------------------------------------------------
   The thirteen added `orox` sections carry a strict state vocabulary — every
   claim is marked In Progress, Planned, Scoped, Design stage or Coming Soon,
   and the closing section states plainly that there is no waitlist, no
   allocation, no form and no sale. The inherited Webflow markup above them did
   not play by those rules: the hero promised a live capability and the page
   offered four App Store / Google Play buttons for an app that does not exist.

   This file supplies the two markers that bring that markup into line:

     1 · `.orost-chip`   a state word for the hero, so the page says what it is
                         before it says what it is for
     2 · `.orost-store`  a platform marker that replaces a store link — it names
                         the platform and its state, and is not a link, because
                         there is nothing on the other end of one

   The store artwork was removed rather than dimmed. The badges read "Download
   on the App Store" and "GET IT ON Google Play" as part of the image; a
   "Coming Soon" caption under artwork that says "Download" is a contradiction,
   not a correction.

   WHY px AND NOT rem
   ---------------------------------------------------------------
   `html{font-size}` on this build is viewport-relative — 1rem == 1vw, which is
   3.9px on a 390px phone. Everything here is px or clamp(px, vw, px).
   ═════════════════════════════════════════════════════════════════════════════ */

:root {
  --orost-paper:   #F5F2EC;
  --orost-dim:     #A39D92;
  --orost-line:    rgb(245 242 236 / .14);
  --orost-gold:    #C9A46A;
  --orost-gold-hi: #EAD795;
}

/* ─────────────────────────────────────────────────────────────────────────────
   1 · STATE CHIP
   ───────────────────────────────────────────────────────────────────────────── */
.orost-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 clamp(12px, 1.2vw, 20px);
  padding: clamp(5px, .5vw, 7px) clamp(11px, 1vw, 15px);
  border: 1px solid var(--orost-line);
  border-radius: 999px;
  background: rgb(245 242 236 / .03);

  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(9.5px, .72vw, 11.5px);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--orost-dim);
  white-space: nowrap;

  /* Explicit, because these chips are dropped into six different inherited
     Webflow blocks whose line-heights disagree. Left to inherit, the same chip
     measured 17px in one block and 40px in another — one marker rendered three
     different sizes on one page, which reads as three different things. */
  line-height: 1;
}

/* The dot is the only gold in the marker — it carries the state, and the state
   is the meaning. It does not pulse: a blinking dot reads as "live". */
.orost-chip::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orost-gold);
  box-shadow: 0 0 0 3px rgb(201 164 106 / .14);
  flex: 0 0 auto;
}

/* A quieter variant for use inside a card or a claim block, where the chip is
   annotating one statement rather than heading a whole screen. Same vocabulary,
   less weight — the claim stays the loudest thing in the box. */
.orost-chip--sm {
  gap: 6px;
  margin: 0 0 clamp(8px, .8vw, 12px);
  padding: clamp(3px, .3vw, 5px) clamp(8px, .7vw, 11px);
  font-size: clamp(8.5px, .62vw, 10px);
  letter-spacing: .16em;
}
.orost-chip--sm::before { width: 4px; height: 4px; box-shadow: 0 0 0 2px rgb(201 164 106 / .14); }

/* "Planned" and "In Progress" are not the same promise, so they do not get the
   same dot. Planned is dimmer — nothing has started. */
.orost-chip--planned::before { background: var(--orost-dim); box-shadow: 0 0 0 2px rgb(163 157 146 / .12); }

/* ─────────────────────────────────────────────────────────────────────────────
   2 · PLATFORM MARKERS
   Sit inside the inherited `.app-buttons` flex row, so they inherit its
   placement and need no layout of their own beyond their own box.
   ───────────────────────────────────────────────────────────────────────────── */
/* The real store artwork, shown but not actionable. It keeps `.app-button` so
   it occupies exactly the slot the inherited layout gave it; everything here
   is about making it read as a preview rather than a control.

   Held back a little — not hidden, not greyed out. Full-strength artwork with
   a pointer cursor is a button, and a button that does nothing is worse than
   no button. This sits at the weight of something being shown to you. */
/* Full strength, deliberately. The earlier 68% hold-back existed because the
   artwork still read "Download on the App Store" and needed to be visibly
   inactive. The badges have since been repainted to say "Coming soon" in the
   image itself — so the artwork now explains its own state, and dimming it
   only makes the word that does the explaining harder to read.
   What keeps it from reading as a control is that it is not one: no href, no
   pointer, no hover response. */
.orost-badge {
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}
.orost-badge img { display: block; pointer-events: none; }

@media (forced-colors: active) {
  .orost-chip { border: 1px solid CanvasText; }
  .orost-badge { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .orost-badge { transition: none; }
}