/*
 * product-panel.css — the product subdomains' overview, panel and guide.
 * Installed at /var/www/se/assets/product-panel.css.
 *
 * ⛔ THIS FILE EXISTS BECAUSE THE CSP HAS NO NONCE. The pages emit `style-src 'self'`, so an inline
 *    style= attribute is dropped without a word in the console of most browsers and the page simply
 *    looks wrong. Everything visual lives here.
 *
 * ⛔ LOGICAL PROPERTIES THROUGHOUT (margin-inline, padding-inline, border-inline-start, text-align:
 *    start). Persian and Arabic then mirror STRUCTURALLY from the dir attribute, rather than through
 *    a second RTL stylesheet that drifts. Four of the eight languages are read left-to-right with a
 *    Latin font, two are RTL, and Chinese needs its own stack; all three cases are below.
 *
 * Palette taken from /var/www/se/index.php :root so these pages sit beside the rest of the estate
 * rather than announcing themselves as new.
 */

:root {
  --pp-bg: #fff;
  --pp-bg2: #f4f8fd;
  --pp-ink: #0d1729;
  --pp-dim: #5b6b85;
  --pp-line: #e2eaf5;
  --pp-accent: #0e5aa7;
  --pp-accent2: #12b3a0;
  --pp-warn: #b45309;
  --pp-sh: 0 12px 34px rgba(16, 44, 86, .09);
  --pp-sh2: 0 26px 64px rgba(16, 44, 86, .16);
  --pp-radius: 14px;
  --pp-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

:root:lang(fa), :root:lang(ar) {
  --pp-body: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}
:root:lang(zh) {
  --pp-body: system-ui, "Microsoft YaHei", "PingFang SC", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body.pp {
  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-body);
  line-height: 1.75;
  font-size: 16px;
}

/* The keyboard user's first stop. Visible only when focused, never a hidden trap. */
.pp-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--pp-accent);
  color: #fff;
  padding: 10px 18px;
  z-index: 10;
}
.pp-skip:focus { inset-inline-start: 0; }

a { color: var(--pp-accent); }
a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--pp-accent2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── header ────────────────────────────────────────────────────────────────────────────── */
.pp-top {
  border-block-end: 1px solid var(--pp-line);
  background: var(--pp-bg);
  padding-inline: 20px;
}
.pp-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  max-width: 68rem;
  margin-inline: auto;
  padding-block: 14px;
}
.pp-nav a { text-decoration: none; color: var(--pp-dim); font-size: .95rem; }
.pp-nav a:hover { color: var(--pp-ink); }
.pp-nav a[aria-current="page"] { color: var(--pp-ink); font-weight: 600; }
.pp-brand {
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--pp-ink) !important;
  margin-inline-end: auto;
}
.pp-langs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  max-width: 68rem;
  margin-inline: auto;
  padding-block-end: 12px;
  font-size: .8rem;
}
.pp-langs-label { color: var(--pp-dim); }
.pp-langs a { text-decoration: none; color: var(--pp-dim); }
.pp-langs a:hover { text-decoration: underline; }
.pp-langs a[aria-current="true"] { color: var(--pp-ink); font-weight: 700; }

/* ── main ──────────────────────────────────────────────────────────────────────────────── */
.pp-main { max-width: 68rem; margin-inline: auto; padding-inline: 20px; padding-block: 8px 56px; }

.pp-hero {
  padding-block: 56px 34px;
  border-block-end: 1px solid var(--pp-line);
  text-align: start;
}
.pp-hero-sm { padding-block: 38px 24px; }
.pp-hero h1 { font-size: clamp(1.6rem, 4.2vw, 2.5rem); line-height: 1.3; }
.pp-lead { color: var(--pp-dim); margin-block-start: 14px; max-width: 46rem; }

.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 26px; }
.pp-cta {
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(97deg, var(--pp-accent), var(--pp-accent2));
  color: #fff;
  padding: 11px 22px;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: var(--pp-sh);
  transition: transform .18s ease, box-shadow .18s ease;
}
.pp-cta:hover { transform: translateY(-2px); box-shadow: var(--pp-sh2); }
.pp-cta-2 {
  background: var(--pp-bg2);
  color: var(--pp-accent);
  box-shadow: none;
  border: 1px solid var(--pp-line);
}

.pp-section { padding-block: 34px; }
.pp-section > h2 { font-size: 1.25rem; margin-block-end: 18px; }

.pp-cards { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.pp-card {
  background: var(--pp-bg2);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 20px;
}
.pp-card h3 { font-size: 1.02rem; margin-block-end: 8px; }
.pp-card p { color: var(--pp-dim); font-size: .93rem; }
.pp-card-link { transition: transform .18s ease, box-shadow .18s ease; }
.pp-card-link:hover { transform: translateY(-2px); box-shadow: var(--pp-sh); }
.pp-card-link h3 a { text-decoration: none; }
.pp-card-link h3 a:hover { text-decoration: underline; }
.pp-go { margin-block-start: 12px; font-size: .88rem; font-weight: 600; }
.pp-go a { text-decoration: none; }
.pp-go a::after { content: " \2192"; }
.pp-rtl .pp-go a::after { content: " \2190"; }

.pp-unit {
  margin-block-start: 10px;
  font-size: .82rem;
  color: var(--pp-ink);
  border-inline-start: 3px solid var(--pp-accent2);
  padding-inline-start: 10px;
}
.pp-fine { margin-block-start: 10px; font-size: .8rem; color: var(--pp-dim); }
.pp-note { margin-block-start: 18px; font-size: .88rem; color: var(--pp-dim); }
.pp-note-quiet { font-size: .8rem; }
.pp-empty {
  background: var(--pp-bg2);
  border: 1px dashed var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 26px;
  color: var(--pp-warn);
}

/* ── the guide's native disclosure ─────────────────────────────────────────────────────── */
.pp-steps { display: grid; gap: 12px; }
.pp-step {
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  background: var(--pp-bg2);
  padding: 4px 20px;
}
.pp-step > summary {
  cursor: pointer;
  list-style: none;
  padding-block: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  align-items: baseline;
}
.pp-step > summary::-webkit-details-marker { display: none; }
.pp-step-n { color: var(--pp-accent); font-size: .78rem; font-weight: 700; letter-spacing: .06em; }
.pp-step-t { font-weight: 600; }
.pp-step > p { padding-block-end: 18px; color: var(--pp-dim); max-width: 46rem; }
.pp-step[open] { box-shadow: var(--pp-sh); }
/* The step the fragment points at, after the script opens it. */
.pp-step.pp-step-targeted { border-color: var(--pp-accent2); }

/* ── footer ────────────────────────────────────────────────────────────────────────────── */
.pp-foot {
  border-block-start: 1px solid var(--pp-line);
  padding: 22px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  max-width: 68rem;
  margin-inline: auto;
  font-size: .85rem;
  color: var(--pp-dim);
}
.pp-foot a { text-decoration: none; }

/* ── phone ─────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pp-nav { gap: 12px; padding-block: 12px; }
  .pp-brand { margin-inline-end: 0; width: 100%; }
  .pp-hero { padding-block: 34px 24px; }
  .pp-actions .pp-cta { flex: 1 1 100%; text-align: center; }
  .pp-cards { grid-template-columns: 1fr; }
}

/* ⛔ A person who asked the system to stop moving things means it. The transforms above are the
   only motion on these pages, and they are removed rather than shortened. */
@media (prefers-reduced-motion: reduce) {
  .pp-cta, .pp-card-link { transition: none; }
  .pp-cta:hover, .pp-card-link:hover { transform: none; }
}