/* ============================================================================
   CHERT IoT — shared shell for the marketing site AND the app (portal pages).
   Nav, footer, eyebrow, ghost button, Arabic bidi, the isometric layer stack,
   the dark app band with pill tabs, and the split-screen auth layout.
   Tokens only (chert-tokens.css); tints via color-mix. Layout is LTR in every language.
   ========================================================================== */

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
.sx { background: var(--chert-cream); }
.sx main { overflow-x: clip; }
.sx [hidden] { display: none !important; }
.sx a.btn { text-decoration: none; }
.sx-wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sx-wrap--wide { max-width: var(--maxw-wide); }
.sx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: var(--z-toast); background: var(--chert-ink); color: var(--chert-cream); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; }
.sx-hero :focus-visible, .sx-arch :focus-visible, .sx-final :focus-visible, .sx-foot :focus-visible,
.sx-nav:not(.is-solid) :focus-visible { outline-color: var(--chert-orange); }

[lang="ar"] .sx h1, [lang="ar"] .sx h2, [lang="ar"] .sx h3, [lang="ar"] .sx-eyebrow { letter-spacing: normal; }
/* Translation-only Arabic: the layout stays LTR and left-aligned, but each text block takes its
   bidi paragraph direction from its own first strong character, so mixed Arabic + Latin product
   names ("…و CHERT") read in the correct order. Alignment is explicit, so nothing mirrors. */
.sx { text-align: left; }

/* ---------------------------------------------------------------- nav --- */
.sx-nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky); height: var(--header-h); color: var(--chert-dark-text);
  transition: background-color var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease); }
.sx-nav.is-solid { background: color-mix(in srgb, var(--chert-cream) 88%, transparent); color: var(--chert-ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--chert-border); }
.sx-nav__inner { display: flex; align-items: center; gap: var(--space-5); height: 100%; }
.sx-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: .02em; }
.sx-nav__brand b { color: var(--chert-orange); }
.sx-nav__brand span, .sx-nav .btn, .sx-nav__lang { white-space: nowrap; }
.sx-nav__links { display: flex; gap: var(--space-5); margin-inline-start: var(--space-5); }
.sx-nav__links a, .sx-nav__signin { color: inherit; text-decoration: none; font-weight: 600; font-size: var(--fs-sm); opacity: .78; transition: opacity var(--dur-base); }
.sx-nav__links a:hover, .sx-nav__signin:hover { opacity: 1; }
.sx-nav__actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); }
.sx-nav__lang { color: inherit; text-decoration: none; font-size: var(--fs-sm); font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill);
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.sx-nav__lang:hover { border-color: var(--chert-orange); }
@media (max-width: 899px) { .sx-nav__links { display: none; } }
@media (max-width: 520px) { .sx-nav__signin { display: none; } .sx-nav__actions { gap: var(--space-2); } .sx-nav__inner { gap: var(--space-2); }
  .sx-nav__brand { font-size: 16px; gap: 8px; } .sx-nav__brand img { width: 26px; height: 26px; } .sx-nav .btn--sm { padding: 7px 12px; } }

/* --------------------------------------------------------------- shared --- */
.sx-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 var(--space-4);
  font-size: var(--fs-overline); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--chert-orange-deep); }
.sx-eyebrow::before { content: ""; width: 24px; height: 2px; border-radius: 2px; background: currentColor; }
.sx-hero .sx-eyebrow, .sx-arch .sx-eyebrow { color: var(--chert-orange); }
.sx-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: var(--radius-pill);
  border: 1.5px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; text-decoration: none; font-weight: 600;
  transition: border-color var(--dur-base), color var(--dur-base); }
.sx-btn-ghost:hover { border-color: var(--chert-orange); color: var(--chert-orange); }
/* -------------------------------------------------------------- footer --- */
.sx-foot { padding: 28px 0; border-top: 1px solid var(--chert-dark-border); background: var(--chert-dark); color: var(--chert-dark-muted); }
.sx-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.sx-foot .sx-nav__brand { color: var(--chert-dark-text); font-size: 16px; }
.sx-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.sx-foot__links a { color: inherit; text-decoration: none; font-size: var(--fs-sm); }
.sx-foot__links a:hover { color: var(--chert-dark-text); }

/* Translation-only Arabic: the layout stays LTR and left-aligned, but each text block takes its
   bidi paragraph direction from its own first strong character, so mixed Arabic + Latin product
   names ("…و CHERT") read in the correct order. Alignment is explicit (left), so nothing mirrors. */
[lang="ar"] .sx :is(p, h1, h2, h3, h4, li, dt, dd, th, td, label, .sx-node__txt b, .sx-node__txt small,
  .sx-plate__tag, .sx-wheel__t, .sx-stop__label, .sx-chip, .sx-stagechip, .sx-inspector__stages span,
  .sx-toggle span, .card__title, .card__desc, .card__go, .kpi__label, .panel__title, .helper,
  .empty__title, .empty__hint, .pcard__name, .pcard__desc, .app-tab span, .sx-user__name, .badge) { unicode-bidi: plaintext; }

@keyframes sx-float { 50% { transform: translateY(-7px); } }
@keyframes app-ripple { from { transform: scale(.35); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }

/* -------------------------------------------- isometric layer stack --- */
/* All geometry scales with --u (set by the container: hero art, auth panel). */
.sx-stack { position: relative; width: calc(520 * var(--u)); height: calc(430 * var(--u)); margin-inline: auto; }
.sx-plate { position: absolute; left: calc(170 * var(--u)); top: calc((70 + var(--i) * 92) * var(--u)); width: 0; height: 0;
  animation: sx-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
.sx-plate__face { position: absolute; width: calc(230 * var(--u)); height: calc(230 * var(--u)); left: calc(-115 * var(--u)); top: calc(-115 * var(--u));
  display: grid; place-items: center; border-radius: calc(24 * var(--u)); transform: rotateX(58deg) rotateZ(45deg);
  border: 1px solid color-mix(in srgb, var(--chert-orange) 42%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--chert-dark-surface) 92%, transparent), color-mix(in srgb, var(--chert-dark) 78%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chert-dark-text) 6%, transparent), 0 40px 60px -30px color-mix(in srgb, var(--chert-dark) 90%, transparent); }
.sx-plate:nth-child(4) .sx-plate__face { background: linear-gradient(135deg, color-mix(in srgb, var(--chert-orange) 34%, var(--chert-dark-surface)), color-mix(in srgb, var(--chert-orange-deep) 18%, var(--chert-dark))); border-color: var(--chert-orange); }
.sx-plate__icons { display: grid; grid-template-columns: repeat(2, auto); gap: calc(22 * var(--u)); color: var(--chert-orange); }
.sx-plate:nth-child(4) .sx-plate__icons { color: var(--chert-cream); }
.sx-plate__tag { position: absolute; left: calc(150 * var(--u)); top: calc(-12 * var(--u)); display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: calc(14 * var(--u)); font-weight: 600; color: var(--chert-dark-text); }
.sx-plate__tag::before { content: ""; width: calc(26 * var(--u)); height: 1px; background: color-mix(in srgb, var(--chert-dark-text) 35%, transparent); }
.sx-plate__tag b { font-family: var(--font-mono); font-size: calc(11 * var(--u)); color: var(--chert-orange); padding: 1px 6px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--chert-orange) 50%, transparent); }
.sx-stack__beam { position: absolute; left: calc(170 * var(--u) - 1px); top: calc(70 * var(--u)); width: 2px; height: calc(276 * var(--u));
  background: linear-gradient(to top, transparent, var(--chert-orange), transparent); opacity: .55; }
.sx-stack__packet { position: absolute; left: calc(170 * var(--u) - 4px); top: calc(346 * var(--u)); width: 8px; height: 8px; border-radius: 50%; opacity: 0;
  background: var(--chert-orange); box-shadow: 0 0 12px 2px var(--chert-orange); animation: sx-rise 4s linear infinite; animation-delay: var(--d); }
@keyframes sx-rise { 0% { transform: translateY(0); opacity: 0; } 12%, 85% { opacity: 1; } 100% { transform: translateY(calc(-276 * var(--u))); opacity: 0; } }


/* ------------------------------------------------------------ app nav --- */
.sx-nav--app { position: sticky; top: 0; background: var(--chert-dark); color: var(--chert-dark-text);
  border-bottom: 1px solid var(--chert-dark-border); }
.sx-nav--app :focus-visible { outline-color: var(--chert-orange); }
.sx-nav--app .sx-nav__links a.is-active { opacity: 1; color: var(--chert-orange); }
.sx-user { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 24ch; font-size: var(--fs-sm); color: var(--chert-dark-muted); }
.sx-user__avatar { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: linear-gradient(135deg, var(--chert-orange), var(--chert-orange-deep)); color: var(--chert-ink); font-weight: 800; font-size: 13px; text-transform: uppercase; }
.sx-user__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-btn-ghost--sm { padding: 6px 14px; font-size: var(--fs-sm); }
@media (max-width: 899px) {
  .sx-nav--app { height: auto; }
  .sx-nav--app .sx-nav__inner { flex-wrap: wrap; row-gap: 0; min-height: var(--header-h); }
  .sx-nav--app .sx-nav__links { display: flex; order: 3; width: 100%; margin: 0; padding: 0 0 12px; gap: var(--space-5);
    overflow-x: auto; scrollbar-width: none; }
  .sx-user__name { display: none; }
}
@media (max-width: 520px) { .sx-nav--app .sx-user { display: none; } .sx-nav--app .sx-btn-ghost--sm { padding: 5px 11px; font-size: 13px; } .sx-nav--app .sx-nav__lang { padding: 3px 10px; } }

/* ------------------------------------------------- app band (dark) --- */
.app-band { position: relative; isolation: isolate; overflow: hidden; padding: 34px 0 0; color: var(--chert-dark-text);
  background:
    radial-gradient(ellipse at 88% -20%, color-mix(in srgb, var(--chert-orange-deep) 28%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 130%, color-mix(in srgb, var(--chert-tan) 12%, transparent), transparent 50%),
    linear-gradient(color-mix(in srgb, var(--chert-dark-border) 55%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--chert-dark-border) 55%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    var(--chert-dark); }
.app-band--plain { padding-bottom: 38px; }
.app-band__pulse { position: absolute; right: 9%; top: 50%; z-index: -1; width: 0; height: 0; pointer-events: none; }
.app-band__pulse span { position: absolute; width: 240px; height: 240px; margin: -120px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--chert-orange) 38%, transparent); animation: app-ripple 7.5s linear infinite; }
.app-band__pulse span:nth-child(2) { animation-delay: -2.5s; }
.app-band__pulse span:nth-child(3) { animation-delay: -5s; }
.app-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: var(--fs-sm); color: var(--chert-dark-muted); }
.app-crumbs a { color: var(--chert-orange); text-decoration: none; font-weight: 600; }
.app-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.app-band .sx-eyebrow { color: var(--chert-orange); margin-bottom: 12px; }
.app-band__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.app-band__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.app-band__mark { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 16px; color: var(--chert-ink);
  background: linear-gradient(135deg, var(--chert-orange), var(--chert-orange-deep)); box-shadow: 0 12px 30px -12px var(--chert-orange-deep); }
.app-band__title { margin: 0; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; letter-spacing: -.03em; font-weight: 800;
  color: var(--chert-dark-text); overflow-wrap: anywhere; }
[lang="ar"] .app-band__title { letter-spacing: normal; line-height: 1.3; }
.app-band__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.app-band__ref { font-family: var(--font-mono); font-size: 12px; color: var(--chert-dark-muted); }
.app-band__lead { max-width: 72ch; margin: 10px 0 0; font-size: var(--fs-lg); color: var(--chert-dark-muted); }
.app-band__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.app-band .sx-btn-ghost { padding: 10px 20px; }
.app-tabs { display: flex; gap: 6px; margin-top: 26px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
/* Desktop: every tab visible (wrap to a second row if needed). Phones: one swipeable row with a fade. */
@media (min-width: 900px) { .app-tabs { flex-wrap: wrap; overflow: visible; row-gap: 8px; } }
.app-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 899px) { .app-tabs { -webkit-mask-image: linear-gradient(90deg, black 88%, transparent); mask-image: linear-gradient(90deg, black 88%, transparent); } }
.app-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-pill); border: 1px solid transparent;
  color: var(--chert-dark-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap;
  transition: color var(--dur-base), background-color var(--dur-base), border-color var(--dur-base); }
.app-tab svg { color: var(--chert-orange); }
.app-tab:hover { color: var(--chert-dark-text); background: var(--chert-dark-surface); border-color: var(--chert-dark-border); }
.app-tab.is-active { background: var(--chert-orange); border-color: var(--chert-orange); color: var(--chert-ink); }
.app-tab.is-active svg { color: currentColor; }
.app-tab:focus-visible { outline: 2px solid var(--chert-orange); outline-offset: 2px; }
/* KPIs that sit inside the band (home) become glass tiles */
.app-band .kpi-row { margin: 28px 0 0; padding-bottom: 38px; }
.app-band .kpi { background: color-mix(in srgb, var(--chert-dark-surface) 82%, transparent); border-color: var(--chert-dark-border); box-shadow: none; color: var(--chert-dark-text);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.app-band .kpi__label { color: var(--chert-dark-muted); }

/* --------------------------------------------- split-screen auth --- */
.auth-main { display: block; }
.auth { display: grid; grid-template-columns: minmax(0, 1fr); min-height: calc(100vh - var(--header-h)); }
@media (min-width: 960px) { .auth { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.auth__brand { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 26px;
  padding: clamp(32px, 5vw, 72px); color: var(--chert-dark-text);
  background:
    radial-gradient(ellipse at 80% 10%, color-mix(in srgb, var(--chert-orange-deep) 26%, transparent), transparent 55%),
    radial-gradient(ellipse at 5% 95%, color-mix(in srgb, var(--chert-tan) 14%, transparent), transparent 50%),
    var(--chert-dark); }
.auth__brand .sx-eyebrow { color: var(--chert-orange); margin: 0; }
.auth__title { margin: 0; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; }
[lang="ar"] .auth__title { letter-spacing: normal; line-height: 1.3; }
.auth__title span { color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(100deg, var(--chert-orange) 0%, var(--chert-tan) 50%, var(--chert-orange-deep) 95%); }
.auth__lead { max-width: 46ch; margin: 0; font-size: var(--fs-lg); line-height: 1.6; color: var(--chert-dark-muted); }
.auth__points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.auth__points li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth__points i { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; font-style: normal;
  background: color-mix(in srgb, var(--chert-orange) 14%, transparent); color: var(--chert-orange); }
.auth__art { --u: .62px; position: relative; height: calc(430 * var(--u)); }
.auth__art .sx-stack { margin-inline: 0; }
@media (max-width: 959px) { .auth__brand { gap: 14px; padding-block: 28px; } .auth__points, .auth__art, .auth__lead { display: none; } }
.auth__panel { display: grid; place-items: center; padding: clamp(28px, 5vw, 72px) var(--gutter);
  background: radial-gradient(color-mix(in srgb, var(--chert-tan) 38%, transparent) 1px, transparent 1px) 0 0 / 22px 22px, var(--chert-cream); }
.auth__card { width: min(100%, 500px); padding: clamp(24px, 4vw, 40px); border-radius: 24px; border: 1px solid var(--chert-border); background: var(--chert-surface);
  box-shadow: 0 40px 80px -48px color-mix(in srgb, var(--chert-ink) 55%, transparent); }
.auth__card h1 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -.02em; font-weight: 800; }
.auth__sub { margin: 0 0 24px; color: var(--chert-muted); }
.auth__card .form { max-width: none; }
.auth__card .form .btn--primary, .auth__card .auth__cta { width: 100%; padding-block: 13px; }
.auth__alt { margin: 20px 0 0; text-align: center; font-size: var(--fs-sm); color: var(--chert-muted); }
.auth__alt a { color: var(--chert-orange-deep); font-weight: 700; text-decoration: none; }
.auth__alt a:hover { text-decoration: underline; }
.auth__card .callout { margin: 0 0 18px; }
.auth a:not([class]) { color: var(--chert-orange-deep); font-weight: 600; text-decoration: none; }
.auth a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }