/* ============================================================================
   QENTRA TECH — commercial front.
   Depends on tokens.css + base.css. Logical properties only.
   ========================================================================= */

/* --- Ticker: the estate talking to itself --------------------------------- */
.ticker { background: var(--ink-2); border-block-end: 1px solid var(--line); overflow: hidden; }
.ticker__row { display: flex; width: max-content; animation: qt-tick 38s linear infinite; }
.ticker__row:hover { animation-play-state: paused; }
.ticker span {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
  padding-block: var(--s-2); margin-inline-end: var(--s-7); white-space: nowrap;
}
[lang="ar"] .ticker span { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.ticker b { color: var(--accent-2); font-weight: 400; }

/* --- Nav ------------------------------------------------------------------ */
.nav {
  position: sticky; inset-block-start: 0; z-index: var(--z-nav);
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  backdrop-filter: blur(20px); border-block-end: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: var(--s-6); min-height: 74px; }
.wordmark { display: flex; align-items: center; gap: var(--s-3); min-height: var(--tap); }
.wordmark__t {
  font-family: var(--display); font-weight: 800; font-size: var(--t-lg);
  letter-spacing: var(--tr-tight); color: var(--fg); white-space: nowrap;
}
.wordmark__t em { font-style: normal; color: var(--accent); }
.wordmark__t small { font-size: .62em; color: var(--fg-dim); margin-inline-start: .4em; }
.nav__links { display: flex; gap: var(--s-6); margin-inline-start: auto; }
.nav__links a { color: var(--fg-muted); font-size: var(--t-sm); font-weight: 500; }
.nav__links a:hover { color: var(--fg); }
.nav__end { display: flex; align-items: center; gap: var(--s-3); }

.langswitch { position: relative; }
.langswitch > summary {
  list-style: none; cursor: pointer; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding-inline: var(--s-3); border-radius: var(--radius-sm);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .1em; color: var(--fg-dim);
}
[lang="ar"] .langswitch > summary { font-family: var(--body); letter-spacing: 0; }
.langswitch > summary::-webkit-details-marker { display: none; }
.langswitch > summary:hover { color: var(--fg); background: var(--ink-2); }
.langswitch ul {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  z-index: var(--z-overlay); margin: 0; padding: var(--s-2); list-style: none;
  min-width: 12rem; background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-soft);
}
.langswitch a {
  display: flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--s-3); border-radius: var(--radius-sm);
  color: var(--fg-muted); font-size: var(--t-sm);
}
.langswitch a:hover { background: var(--ink-3); color: var(--fg); }
.langswitch a[aria-current="true"] { color: var(--signal); }

@media (max-width: 900px) { .nav__links, .nav__signin { display: none; } .nav__end { margin-inline-start: auto; } }

/* --- Language hint -------------------------------------------------------- */
.langhint {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--s-3); padding: var(--s-2) var(--s-4);
  background: var(--ink-3); color: var(--bone-2); font-size: var(--t-sm);
}
.langhint[hidden] { display: none; }
.langhint .btn { min-height: 36px; }

/* --- Cinematic opening ----------------------------------------------------
   A full-viewport first frame. Three layers: a slice-cropped constellation
   field, two drifting orbs, and a vignette that stops the field competing with
   the headline. Uses 100svh (not vh) so mobile browser chrome does not push the
   scroll cue below the fold.
   ------------------------------------------------------------------------ */
.cine {
  position: relative; overflow: hidden;
  /* Subtract the ticker + sticky nav, or the primary action and the scroll cue
     fall below the fold and the opening stops being one frame. */
  min-height: calc(100svh - var(--chrome));
  display: grid; align-content: center;
  padding-block: var(--s-7) var(--s-9);
}
.has-langhint .cine { min-height: calc(100svh - var(--chrome) - 54px); }
.cine__field {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: .85; pointer-events: none; z-index: 0;
}
.cine__orbit { animation: qt-spin 70s linear infinite; }
/* Vignette: darkens the edges and the area under the type so the field reads as
   depth rather than noise. */
.cine::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Scrim over the text column: the field's link lines otherwise run straight
       through the body copy. Mirrored for RTL below. */
    linear-gradient(90deg, rgba(27,23,19,.90) 0%, rgba(27,23,19,.62) 40%, transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(27,23,19,.55) 74%, var(--ink) 100%),
    linear-gradient(180deg, rgba(27,23,19,.55), transparent 26%, transparent 62%, var(--ink) 100%);
}
[dir="rtl"] .cine::after {
  background:
    linear-gradient(270deg, rgba(27,23,19,.90) 0%, rgba(27,23,19,.62) 40%, transparent 72%),
    radial-gradient(120% 90% at 50% 50%, transparent 30%, rgba(27,23,19,.55) 74%, var(--ink) 100%),
    linear-gradient(180deg, rgba(27,23,19,.55), transparent 26%, transparent 62%, var(--ink) 100%);
}
/* Stack layers explicitly — a blanket `.cine > *` rule outranks the
   backdrop's own `position: absolute` and pushes the headline off-screen. */

.cine__in { position: relative; z-index: 2; display: grid; justify-items: start; }
.cine h1 {
  margin-block-start: var(--s-5);
  max-width: 17ch; font-size: var(--t-4xl);
}
.cine h1 em { font-style: normal; color: var(--accent); }
.cine .lede { max-width: 54ch; }
.cine__cta { margin-block-start: var(--s-7); }

.cine__foot {
  position: absolute; inset-block-end: var(--s-6); inset-inline: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.cine__now {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
}
[lang="ar"] .cine__now { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.cine__scroll {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: var(--tap); color: var(--fg-dim);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; text-transform: uppercase;
}
[lang="ar"] .cine__scroll { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.cine__scroll:hover { color: var(--signal); }

@media (max-width: 900px) {
  .cine { min-height: auto; padding-block: var(--s-8) var(--s-9); }
  .cine__foot { position: static; margin-block-start: var(--s-8); }
}

.orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0; }
.orb--a { width: 380px; height: 380px; background: var(--clay); opacity: .34;
  inset-block-start: -100px; inset-inline-end: 8%; animation: qt-drift 19s ease-in-out infinite; }
.orb--b { width: 300px; height: 300px; background: var(--aqua); opacity: .24;
  inset-block-end: -60px; inset-inline-start: 12%; animation: qt-drift2 23s ease-in-out infinite; }
.spin { animation: qt-spin 26s linear infinite; }
.trace { animation: qt-draw 1.6s var(--ease) both; }

/* --- Proof ---------------------------------------------------------------- */
.proof { background: var(--ink-2); border-block: 1px solid var(--line); }
.proof__g { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof__i { padding: var(--s-6) var(--s-5); border-inline-start: 1px solid var(--line); }
.proof__i:first-child { border-inline-start: 0; padding-inline-start: 0; }
.proof__n {
  font-family: var(--display); font-weight: 800; font-size: var(--t-2xl);
  color: var(--signal); letter-spacing: var(--tr-tight); line-height: 1;
}
.proof__t { margin-block-start: var(--s-2); font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.45; }
@media (max-width: 900px) {
  .proof__g { grid-template-columns: 1fr; }
  .proof__i { border-inline-start: 0; padding-inline-start: 0; border-block-end: 1px solid var(--line);
    display: flex; align-items: baseline; gap: var(--s-5); }
  .proof__i:last-child { border-block-end: 0; }
  .proof__n { min-width: 5.5rem; }
}

/* --- Product cards -------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin-block-start: var(--s-7); }
.pcard { display: flex; flex-direction: column; gap: var(--s-4); overflow: hidden; }
.pcard--wide { grid-column: span 2; }
.pcard__art { height: 132px; overflow: hidden; margin-block-start: calc(-1 * var(--s-2)); }
/* base.css sets svg{height:auto}, which lets a wide card scale its illustration
   past the 132px box and collide with the product name. Pin it back. */
.pcard__art svg { width: 100%; height: 132px; }
.pcard:hover .trace { animation: qt-draw 1.1s var(--ease) forwards; }
.pcard__top { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.pcard__n { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); letter-spacing: var(--tr-tight); }
.pcard__t { font-size: var(--t-lg); font-weight: 600; line-height: 1.28; }
.pcard__s { font-size: var(--t-sm); color: var(--fg-dim); }
.pcard__go {
  margin-block-start: auto; display: flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-dim);
  transition: color var(--dur-fast) var(--ease2), gap var(--dur-fast) var(--ease2);
}
[lang="ar"] .pcard__go { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.pcard:hover .pcard__go { color: var(--signal); gap: var(--s-4); }
@media (max-width: 1000px) { .cards { grid-template-columns: 1fr; } .pcard--wide { grid-column: auto; } }

/* --- Facets: art / technology / human ------------------------------------- */
.facets { background: var(--ink-2); border-block: 1px solid var(--line); }
/* CSS-only tabs: radio inputs, so the section works with JavaScript disabled. */
.facets input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden; margin-block-start: var(--s-6); }
.seg label {
  min-height: var(--tap); display: inline-flex; align-items: center;
  padding-inline: var(--s-5); cursor: pointer;
  border-inline-end: 1px solid var(--line);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim);
  transition: background var(--dur-fast) var(--ease2), color var(--dur-fast) var(--ease2);
}
[lang="ar"] .seg label { text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 600; }
.seg label:last-of-type { border-inline-end: 0; }
.seg label:hover { color: var(--fg); }
.facet { display: none; grid-template-columns: .85fr 1.15fr; gap: var(--s-8);
  align-items: center; margin-block-start: var(--s-7); }
#facet-art:checked   ~ .seg label[for="facet-art"],
#facet-tech:checked  ~ .seg label[for="facet-tech"],
#facet-human:checked ~ .seg label[for="facet-human"] { background: var(--accent); color: var(--on-accent); }
#facet-art:checked   ~ .facet--art,
#facet-tech:checked  ~ .facet--tech,
#facet-human:checked ~ .facet--human { display: grid; animation: qt-rise .6s var(--ease) both; }
.facet__t { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); letter-spacing: var(--tr-tight); line-height: 1.1; }
.facet__b { margin-block-start: var(--s-4); color: var(--fg-muted); font-size: var(--t-lg); }
@media (max-width: 900px) { .facet { grid-template-columns: 1fr; gap: var(--s-5); } }

/* --- Transparency --------------------------------------------------------- */
.tgrid { display: grid; grid-template-columns: repeat(4, 1fr); margin-block-start: var(--s-7);
  border-block-start: 1px solid var(--line); }
.titem { padding: var(--s-6) var(--s-5); border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line); }
.titem:first-child { padding-inline-start: 0; }
.titem:last-child { border-inline-end: 0; }
.titem__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em; color: var(--accent-2); }
[lang="ar"] .titem__k { letter-spacing: 0; font-family: var(--body); }
.titem h3 { margin-block-start: var(--s-3); font-size: var(--t-lg); line-height: 1.2; }
.titem p { margin-block-start: var(--s-3); color: var(--fg-dim); font-size: var(--t-sm); }
@media (max-width: 1000px) { .tgrid { grid-template-columns: 1fr; } .titem { border-inline-end: 0; padding-inline-start: 0; } }

/* --- Audiences ------------------------------------------------------------ */
.aud { list-style: none; padding: 0; margin-block-start: var(--s-7);
  border-block-start: 1px solid var(--line); }
.aud a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-5);
  flex-wrap: wrap; padding-block: var(--s-5); border-block-end: 1px solid var(--line);
  color: var(--fg); transition: padding-inline var(--dur) var(--ease), background var(--dur) var(--ease);
}
.aud a:hover { background: var(--ink-2); padding-inline: var(--s-4); color: var(--fg); }
.aud__q { font-family: var(--display); font-weight: 800; font-size: var(--t-xl); letter-spacing: var(--tr-tight); }
.aud__a { font-family: var(--mono); font-size: var(--t-sm); letter-spacing: .1em; color: var(--accent); }
.aud a:hover .aud__a { color: var(--signal); }

/* --- Contact / footer ----------------------------------------------------- */
.cts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); margin-block-start: var(--s-7); }
.cts dt { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim); }
[lang="ar"] .cts dt { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.cts dd { margin: var(--s-2) 0 0; font-size: var(--t-lg); }
.cts dd a { display: inline-flex; align-items: center; min-height: var(--tap); }
@media (max-width: 900px) { .cts { grid-template-columns: 1fr; gap: 0; }
  .cts > div { padding-block: var(--s-3); border-block-end: 1px solid var(--line); } }

.foot { border-block-start: 1px solid var(--line); padding-block: var(--s-7); font-size: var(--t-sm); color: var(--fg-dim); }
.foot__in { display: grid; gap: var(--s-4); }
.foot a { color: var(--fg-muted); }
.foot a:hover { color: var(--signal); }
.foot__langs ul, .foot__legal { display: flex; flex-wrap: wrap; gap: var(--s-4); list-style: none; padding: 0; margin: 0; }
.foot__langs a, .foot__legal a { display: inline-flex; align-items: center; min-height: var(--tap); }
.foot__legal li + li::before { content: "·"; color: var(--fg-dim); margin-inline-end: var(--s-4); }
.foot__langs a[aria-current="true"] { color: var(--signal); }

/* --- Product page --------------------------------------------------------- */
.phero { position: relative; overflow: hidden; padding-block: var(--s-6) var(--section-y);
  border-block-end: 1px solid var(--line); }
.phero__head { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-block-start: var(--s-5); }
.phero__n { font-family: var(--display); font-weight: 800; font-size: var(--t-3xl); letter-spacing: var(--tr-tight); }
.phero__by { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-dim); }
[lang="ar"] .phero__by { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.phero__t { margin-block-start: var(--s-4); font-family: var(--display); font-weight: 800;
  font-size: var(--t-2xl); letter-spacing: var(--tr-tight); max-width: 22ch; line-height: 1.1; }
.pfacts { display: flex; flex-wrap: wrap; gap: var(--s-7); margin-block-start: var(--s-6);
  padding-block: var(--s-4); border-block: 1px solid var(--line); }
.pfacts dt { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-dim); }
[lang="ar"] .pfacts dt { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.pfacts dd { margin: var(--s-1) 0 0; font-size: var(--t-sm); }
.pfeatures { list-style: none; padding: 0; margin-block-start: var(--s-5);
  border-block-start: 1px solid var(--line); }
.pfeature { display: flex; gap: var(--s-4); align-items: flex-start;
  padding-block: var(--s-4); border-block-end: 1px solid var(--line);
  font-family: var(--display); font-weight: 600; font-size: var(--t-lg); letter-spacing: var(--tr-tight); }
.pfeature svg { flex: none; margin-block-start: .35em; }
.pinstances { list-style: none; padding: 0; margin-block-start: var(--s-5);
  border-block-start: 1px solid var(--line); }
.pinstance { display: flex; gap: var(--s-5); flex-wrap: wrap; align-items: baseline;
  padding-block: var(--s-4); border-block-end: 1px solid var(--line); }
.pinstance__name { min-width: 12rem; font-family: var(--display); font-weight: 800; color: var(--accent); }
.pinstance__what { color: var(--fg-dim); font-size: var(--t-sm); }
.psec--sunk { background: var(--ink-2); border-block: 1px solid var(--line); }

/* --- Root language picker ------------------------------------------------- */
.rootpick { display: grid; place-items: center; min-height: 100svh; text-align: center; }
.rootpick__langs { list-style: none; padding: 0; margin-block-start: var(--s-6);
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; }
.rootpick__langs a { display: inline-flex; align-items: center; min-height: var(--tap);
  padding-inline: var(--s-6); border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--fg); }
.rootpick__langs a:hover { border-color: var(--accent); color: var(--signal); }

/* --- CTA band: the one conversion moment, repeated from the opening -------- */
.ctaband {
  position: relative; overflow: hidden;
  background: var(--ink-2); border-block: 1px solid var(--line);
}
.ctaband::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  background: var(--clay); opacity: .17; filter: blur(80px);
  inset-block-start: -220px; inset-inline-end: -80px;
  animation: qt-drift 21s ease-in-out infinite;
}
.ctaband > * { position: relative; z-index: 1; }
.ctaband__in { display: grid; justify-items: start; }
.ctaband h2 { max-width: 16ch; margin-block-start: var(--s-4); }
.ctaband .lede { max-width: 56ch; }
.ctaband__acts { margin-block-start: var(--s-6); }
.ctaband__note {
  margin-block-start: var(--s-4); font-size: var(--t-sm); color: var(--fg-dim);
  display: inline-flex; align-items: center; gap: var(--s-2);
}

/* --- Product marks --------------------------------------------------------
   One family: every mark is the Qentra ring + bridge carrying one glyph. Sized
   in em so it tracks whatever text it sits beside.
   ------------------------------------------------------------------------ */
.pmark { width: 1.55em; height: 1.55em; flex: none; }
.pcard__top .pmark { width: 34px; height: 34px; }
.phero__head .pmark { width: 52px; height: 52px; }
/* The bridge points out of the ring's lower right; in RTL that reads as the
   mark pointing off the page, so mirror the whole mark. */
[dir="rtl"] .pmark { transform: scaleX(-1); }

/* --- Interface preview ---------------------------------------------------- */
.pview-wrap { margin-block-start: var(--s-5); }
.pview {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}
.pview-note {
  margin-block-start: var(--s-3);
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-xs); color: var(--fg-dim); max-width: 60ch;
}
.pview-note svg { flex: none; margin-block-start: .15em; }

/* --- Brand strapline ------------------------------------------------------ */
.slogan { display: grid; gap: var(--s-2); }
.slogan__a {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-lg); letter-spacing: var(--tr-tight); color: var(--fg);
  max-width: 26ch; line-height: 1.2;
}
.slogan__b { color: var(--fg-dim); max-width: 40ch; font-size: var(--t-sm); }

/* --- Status page ---------------------------------------------------------- */
.status__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap; }
.status__stamp {
  display: inline-flex; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim);
}
[lang="ar"] .status__stamp { text-transform: none; letter-spacing: 0; font-family: var(--body); }

.kpis { display: grid; grid-template-columns: repeat(5, 1fr); margin-block-start: var(--s-7);
  border-block-start: 1px solid var(--line); }
.kpi { padding: var(--s-6) var(--s-5); border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line); display: grid; gap: var(--s-2); align-content: start; }
.kpi:first-child { padding-inline-start: 0; }
.kpi:last-child { border-inline-end: 0; }
.kpi__k { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-dim); }
[lang="ar"] .kpi__k { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.kpi__v {
  font-family: var(--display); font-weight: 800; font-size: var(--t-2xl);
  letter-spacing: var(--tr-tight); line-height: 1; color: var(--signal);
  font-variant-numeric: tabular-nums;
}
.kpi__v[data-tone="warn"]  { color: var(--accent); }
.kpi__v[data-tone="alert"] { color: var(--rust); }
.kpi__v[data-tone="idle"]  { color: var(--fg-dim); }
.kpi__h { font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.45; }
@media (max-width: 1000px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi:nth-child(odd) { padding-inline-start: 0; }
  .kpi:nth-child(2n) { border-inline-end: 0; }
}
@media (max-width: 560px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi { border-inline-end: 0; padding-inline-start: 0; }
}

.svc { width: 100%; border-collapse: collapse; margin-block-start: var(--s-7); font-size: var(--t-sm); }
.svc th, .svc td { text-align: start; padding: var(--s-3) var(--s-4);
  border-block-end: 1px solid var(--line); }
.svc th { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-dim); font-weight: 400; }
[lang="ar"] .svc th { text-transform: none; letter-spacing: 0; font-family: var(--body); }
.svc td:first-child, .svc th:first-child { padding-inline-start: 0; }
.svc tbody tr:hover { background: var(--ink-2); }
.svc .num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; direction: ltr; }
/* Service labels are product and shop names — human text, not hostnames, so
   they follow the page's direction like any other copy. */
.svc__label { font-weight: 600; }

.status__panel[hidden] { display: none; }
.skel { display: grid; gap: var(--s-3); margin-block-start: var(--s-7); }
.skel__row { height: 46px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--ink-2) 25%, var(--ink-3) 37%, var(--ink-2) 63%);
  background-size: 400% 100%; animation: qt-shimmer 1.4s ease infinite; }
@keyframes qt-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skel__row { animation: none; } }

/* --- Status, grouped per product ------------------------------------------ */
.pgroup { margin-block-start: var(--s-7); border-block-start: 1px solid var(--line-2); }
.pgroup__head {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding-block: var(--s-4);
}
.pgroup__n { font-family: var(--display); font-weight: 800; font-size: var(--t-lg);
  letter-spacing: var(--tr-tight); }
.pgroup__count { font-family: var(--mono); font-size: var(--t-xs); color: var(--fg-dim);
  letter-spacing: .12em; margin-inline-start: auto; }
[lang="ar"] .pgroup__count { letter-spacing: 0; font-family: var(--body); }
.pgroup .svc { margin-block-start: 0; }
.pgroup .svc td { padding-block: var(--s-3); }
.svc td[data-empty="1"] { color: var(--fg-dim); }

/* --- Product identity on the status board --------------------------------- */
.pgroup__id { display: grid; gap: var(--s-1); }
.pgroup__line { display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap; }
.pgroup__full {
  font-family: var(--mono); font-size: var(--t-xs);
  letter-spacing: .08em; color: var(--fg-dim);
}
[lang="ar"] .pgroup__full { letter-spacing: 0; font-family: var(--body); }
.pgroup__brief { font-size: var(--t-sm); color: var(--fg-muted); max-width: 62ch; }
.pgroup__head { align-items: flex-start; }
.pgroup__head .chip, .pgroup__count { margin-block-start: var(--s-1); }

/* The expansion under a product name on its own page. */
.phero__full {
  margin-block-start: var(--s-3);
  font-family: var(--mono); font-size: var(--t-sm);
  letter-spacing: .1em; color: var(--accent-2);
}
[lang="ar"] .phero__full { letter-spacing: 0; font-family: var(--body); }