/* ============================================================
   NEXTGEN ALYGN - BRAND ELEMENTS
   Reusable graphic devices ("brand furniture") for visuals:
   the A family (geometry from the A of ALYGN), SmileKit system
   devices, and social format furniture.
   All are DECORATIVE (aria-hidden) and token-driven.
   ============================================================ */

/* ================= THE "A" FAMILY =================
   Abstract geometry derived from the A of ALYGN: the apex, the
   crossbar, the converging legs, the triangular counter. Every
   one is a literal alignment device. These are NOT letterforms
   and must never be assembled to imitate the wordmark or the X. */

/* ---------------- APEX ----------------
   The A's peak: a chevron. Ascent, direction, progress. */
.ngx-apex { display: inline-block; box-sizing: border-box; border-top-style: solid; border-left-style: solid; border-color: currentColor; }
.ngx-apex-stack { display: inline-flex; flex-direction: column; align-items: center; color: var(--accent-brand); }

/* ---------------- DATUM ----------------
   The A's crossbar: an alignment reference rule with end ticks.
   Reads as a technical dimension line. */
.ngx-datum { display: flex; align-items: center; gap: 12px; color: var(--text-muted-accessible); }
.ngx-datum--on-dark { color: rgba(255,255,255,0.45); }
.ngx-datum__line { flex: 1; height: 1px; background: currentColor; position: relative; min-width: 18px; }
.ngx-datum__line::before, .ngx-datum__line::after { content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: currentColor; }
.ngx-datum__line::before { left: 0; }
.ngx-datum__line::after { right: 0; }
.ngx-datum--noticks .ngx-datum__line::before, .ngx-datum--noticks .ngx-datum__line::after { display: none; }
.ngx-datum__label { font-family: var(--font-sans); font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-widest); text-transform: uppercase; white-space: nowrap; line-height: 1; }

/* ---------------- CONVERGE ----------------
   The A's two legs opening from a single apex. A framing device. */
.ngx-converge { position: absolute; inset: 0; pointer-events: none; overflow: hidden; color: var(--accent-brand); }
.ngx-converge__leg { position: absolute; left: 50%; top: 0; height: 140%; width: 1px; background: linear-gradient(to bottom, currentColor, transparent); transform-origin: top center; }
.ngx-converge--solid .ngx-converge__leg { background: currentColor; }
.ngx-converge--from-bottom { transform: scaleY(-1); }

/* ---------------- COUNTER MASK ----------------
   The A's triangular counter, as a clip shape for imagery. */
.ngx-countermask { display: block; overflow: hidden; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ngx-countermask--inverted { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ngx-countermask--soft { clip-path: polygon(50% 4%, 100% 100%, 0 100%); }

/* ================= THE "N" FAMILY =================
   Abstract geometry derived from the N of NEXTGEN: the upright
   stem, the descending diagonal that links two points, and the
   repeated stride. Never assemble these into a letterform. */

/* ---------------- STEM ----------------
   The N's upright: a standing rule. Section marker, lead-in. */
.ngx-stem { display: inline-flex; align-items: stretch; gap: var(--ngx-stem-gap, 4px); color: var(--accent-brand); }
.ngx-stem__bar { display: block; background: currentColor; border-radius: 1px; }
.ngx-stem--fade .ngx-stem__bar:last-child { opacity: 0.4; }

/* ---------------- TRANSIT ----------------
   The N's diagonal: a link between two corners. Scales with its box. */
.ngx-transit { position: relative; display: block; color: var(--accent-brand);
  background-image: linear-gradient(var(--ngx-transit-dir, to bottom right),
    transparent calc(50% - var(--ngx-transit-w, 1px)),
    currentColor calc(50% - var(--ngx-transit-w, 1px)),
    currentColor calc(50% + var(--ngx-transit-w, 1px)),
    transparent calc(50% + var(--ngx-transit-w, 1px)));
  background-repeat: no-repeat; }
.ngx-transit--fade { -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }

/* ---------------- STRIDE ----------------
   The N's diagonal repeated: rhythm, cadence, consistency. */
.ngx-stride { display: block; color: var(--accent-brand);
  background-image: repeating-linear-gradient(var(--ngx-stride-angle, 45deg),
    currentColor 0 var(--ngx-stride-w, 2px),
    transparent var(--ngx-stride-w, 2px) var(--ngx-stride-gap, 10px)); }
.ngx-stride--fade { -webkit-mask-image: linear-gradient(to right, #000, transparent); mask-image: linear-gradient(to right, #000, transparent); }

/* ================= THE "G" FAMILY =================
   Abstract geometry derived from the G of ALYGN: the open arc,
   the aperture it leaves, and the inward spur that closes it.
   Never assemble these into a letterform. */

/* ---------------- ARC ----------------
   The G's curve as a progress ring. */
.ngx-arc { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--accent-brand);
  background: conic-gradient(from var(--ngx-arc-from, -90deg), currentColor var(--ngx-arc-sweep, 75%), var(--ngx-arc-track, rgba(127,127,140,0.22)) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ngx-arc-w, 3px)), #000 calc(100% - var(--ngx-arc-w, 3px)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ngx-arc-w, 3px)), #000 calc(100% - var(--ngx-arc-w, 3px))); }

/* ---------------- APERTURE ----------------
   The G's opening: a ring with a gap, framing content. */
.ngx-aperture { position: relative; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ngx-aperture__ring { position: absolute; inset: 0; border-radius: 50%; color: var(--accent-brand);
  background: conic-gradient(from var(--ngx-ap-from, -60deg), currentColor 0 var(--ngx-ap-sweep, 82%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ngx-ap-w, 2px)), #000 calc(100% - var(--ngx-ap-w, 2px)));
  mask: radial-gradient(farthest-side, transparent calc(100% - var(--ngx-ap-w, 2px)), #000 calc(100% - var(--ngx-ap-w, 2px))); }
.ngx-aperture__inner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; }

/* ---------------- SPUR ----------------
   The G's inward terminal: an L that closes a statement. */
.ngx-spur { display: inline-flex; align-items: flex-start; color: var(--accent-brand); }
.ngx-spur__bar { background: currentColor; border-radius: 1px; }
.ngx-spur__tick { background: currentColor; border-radius: 1px; }
.ngx-spur--up { align-items: flex-end; }

/* ---------------- STAGE TRACK ----------------
   The 01…20 aligner-stage progression from the SmileKit pouches,
   as a progress device. Ticks read as a measured system. */
.ngx-stagetrack { display: flex; align-items: flex-end; gap: var(--ngx-track-gap, 5px); }
.ngx-stagetrack__tick { flex: 1; height: var(--ngx-track-h, 26px); background: var(--ngx-track-idle, rgba(255,255,255,0.14)); border-radius: 1px; }
.ngx-stagetrack__tick--done { background: var(--accent-brand); }
.ngx-stagetrack__tick--now { background: #fff; box-shadow: 0 0 12px 2px rgba(123,92,255,0.7); }
.ngx-stagetrack--on-light .ngx-stagetrack__tick { background: var(--ngx-track-idle, rgba(10,10,10,0.12)); }
.ngx-stagetrack--on-light .ngx-stagetrack__tick--now { background: var(--ng-obsidian); box-shadow: none; }
.ngx-stagetrack__meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted-accessible); }

/* ---------------- ALIGN SHIFT ----------------
   Horizontal rules resolving from offset to flush: the literal
   brand idea, drawn. Last rule is the aligned state. */
.ngx-alignshift { display: flex; flex-direction: column; gap: var(--ngx-shift-gap, 9px); }
.ngx-alignshift__rule { height: 2px; background: var(--ngx-shift-color, rgba(255,255,255,0.3)); border-radius: 1px; transition: transform var(--duration-slow) var(--ease-out); }
.ngx-alignshift__rule--aligned { background: var(--accent-brand); box-shadow: 0 0 14px rgba(123,92,255,0.5); }
.ngx-alignshift--on-light .ngx-alignshift__rule { background: var(--ngx-shift-color, rgba(10,10,10,0.22)); }
.ngx-alignshift--on-light .ngx-alignshift__rule--aligned { box-shadow: none; }

/* ---------------- FOIL SEAL ----------------
   The lavender circular seal with the official X, from the
   Layer 02 patient-manual envelope. */
.ngx-foilseal { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--accent-brand); }
.ngx-foilseal--outline { background: transparent; box-shadow: inset 0 0 0 1.5px var(--accent-brand); }
.ngx-foilseal--chrome { background: var(--chrome-gradient); }
.ngx-foilseal img { display: block; width: 46%; height: auto; }

/* ============================================================
   SOCIAL FORMAT ELEMENTS
   Format furniture for feed / story / reel / carousel work:
   platform safe zones, story progress, slide numbering, swipe
   cues, burned-in caption bars.
   ============================================================ */

/* ---------------- SAFE ZONE ----------------
   Non-exported guide showing where platform UI covers the frame.
   Everything essential must sit inside the clear band. */
.ngx-safezone { position: absolute; inset: 0; pointer-events: none; z-index: 200; }
.ngx-safezone__band { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(196,54,31,0.16) 0 8px, rgba(196,54,31,0.05) 8px 16px); box-shadow: inset 0 0 0 1px rgba(196,54,31,0.5); }
.ngx-safezone__side { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, rgba(196,54,31,0.10) 0 8px, rgba(196,54,31,0.03) 8px 16px); }
.ngx-safezone__note { position: absolute; font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--danger); background: rgba(255,255,255,0.9); padding: 2px 6px; border-radius: 2px; }

/* ---------------- STORY PROGRESS ---------------- */
.ngx-storyprogress { display: flex; gap: 4px; width: 100%; }
.ngx-storyprogress__seg { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.3); overflow: hidden; }
.ngx-storyprogress__seg--done { background: #fff; }
.ngx-storyprogress__seg--now { background: rgba(255,255,255,0.3); }
.ngx-storyprogress__fill { display: block; height: 100%; background: #fff; }
.ngx-storyprogress--on-light .ngx-storyprogress__seg { background: rgba(10,10,10,0.2); }
.ngx-storyprogress--on-light .ngx-storyprogress__seg--done,
.ngx-storyprogress--on-light .ngx-storyprogress__fill { background: var(--ng-obsidian); }

/* ---------------- SLIDE COUNTER ---------------- */
.ngx-slidecounter { display: inline-flex; align-items: baseline; gap: 3px; font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: 1; color: #fff; }
.ngx-slidecounter__n { font-size: 1em; }
.ngx-slidecounter__sep { opacity: 0.45; font-size: 0.7em; }
.ngx-slidecounter__total { opacity: 0.45; font-size: 0.7em; }
.ngx-slidecounter--accent .ngx-slidecounter__n { color: var(--accent-text-dark); }
.ngx-slidecounter--on-light { color: var(--ng-obsidian); }
.ngx-slidecounter--on-light.ngx-slidecounter--accent .ngx-slidecounter__n { color: var(--accent-text-light); }

/* ---------------- SWIPE CUE ---------------- */
.ngx-swipecue { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.72); }
.ngx-swipecue--on-light { color: var(--text-muted-accessible); }
.ngx-swipecue__arrows { display: inline-flex; align-items: center; }
.ngx-swipecue__arrows span { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); margin-left: -2px; }
.ngx-swipecue__arrows span:nth-child(1) { opacity: 0.35; }
.ngx-swipecue__arrows span:nth-child(2) { opacity: 0.65; }
@media (prefers-reduced-motion: no-preference) {
  .ngx-swipecue--animate .ngx-swipecue__arrows { animation: ngx-nudge 1.6s var(--ease-in-out) infinite; }
  @keyframes ngx-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
}

/* ---------------- CAPTION BAR ----------------
   Burned-in subtitle styling for Reels. Minimum 28px at 1080w
   so it stays legible on a phone; never thinner than Medium. */
.ngx-captionbar { display: inline-block; max-width: 86%; font-family: var(--font-sans); font-weight: var(--weight-bold); line-height: 1.24; letter-spacing: var(--tracking-tight); text-align: center; color: #fff; text-wrap: balance; }
.ngx-captionbar--solid { background: var(--ng-obsidian); padding: 0.28em 0.5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ngx-captionbar--accent { background: var(--accent-brand); padding: 0.28em 0.5em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ngx-captionbar--shadow { text-shadow: 0 2px 14px rgba(10,10,10,0.85), 0 0 3px rgba(10,10,10,0.7); }
.ngx-captionbar em { font-style: normal; color: var(--accent-text-dark); }
.ngx-captionbar--accent em { color: #fff; text-decoration: underline; text-underline-offset: 0.15em; }