/* inbld downloads page. Semantic tokens from inbld-ui.css only; logical properties so RTL and LTR share one sheet. */

html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
html[dir="ltr"] { direction: ltr; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

[hidden] { display: none !important; }

/* ── top bar ─────────────────────────────────────────────────────────────── */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--gutter);
  border-block-end: var(--border-1);
  background: var(--surface);
}
.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--text); }
.brand img { width: 34px; height: 34px; display: block; }
.wordmark { font-weight: var(--fw-bold); font-size: var(--fs-h3); letter-spacing: -0.01em; direction: ltr; }
.wordmark .dot { color: var(--accent); }
.brand .section {
  padding-inline-start: var(--space-3);
  border-inline-start: var(--border-strong);
  color: var(--text-muted);
  font-size: var(--fs-lg);
}
.controls { display: flex; align-items: center; gap: var(--space-2); }

.chip {
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: transparent;
  border: var(--border-1);
  border-radius: var(--r-pill);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chip:hover { background: var(--surface-2); color: var(--text); }
.chip:focus-visible, .btn:focus-visible, .linkish:focus-visible, a:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── dev strip (local development identity only) ─────────────────────────── */
.devstrip {
  background: var(--warn-fill);
  color: var(--warn);
  font-size: var(--fs-sm);
  padding: var(--space-2) var(--gutter);
  border-block-end: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}

/* ── layout ──────────────────────────────────────────────────────────────── */
main { flex: 1; width: 100%; max-width: calc(var(--container-sm) + 2 * var(--gutter)); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-16); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: none;
  color: var(--text-muted); margin: 0 0 var(--space-3);
}
html[lang="he"] .eyebrow { letter-spacing: 0; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--brand-red); border-radius: 2px; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.lead { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--text-muted); margin: var(--space-3) 0 var(--space-8); max-width: 40em; }

.who {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  font-size: var(--fs-sm); color: var(--text-muted); margin-block-end: var(--space-6);
}
.who strong { color: var(--text); font-weight: var(--fw-bold); }

/* ── cards ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: var(--border-1);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6) var(--space-8);
}
.card + .card { margin-block-start: var(--space-4); }

.product-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
.product-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.product-head .sub { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

.pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--fs-xs); line-height: 1; white-space: nowrap;
  padding: 6px var(--space-3); border-radius: var(--r-pill);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.internal { color: var(--warn); background: var(--warn-fill); }
.pill.clients  { color: var(--success); background: var(--success-fill); }
.pill.expired, .pill.suspended { color: var(--danger); background: var(--danger-fill); }

.release {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-8); align-items: end;
  margin-block: var(--space-6); padding-block: var(--space-5); border-block: var(--border-hair);
}
.release .label { display: block; font-size: var(--fs-xs); color: var(--text-subtle); margin-block-end: var(--space-1); }
.version { font-family: var(--font-mono); font-weight: var(--fw-medium); font-size: 34px; line-height: 1; direction: ltr; unicode-bidi: isolate; }
.facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; font-size: var(--fs-sm); }
.facts div { display: flex; flex-direction: column; }
.facts dt { font-size: var(--fs-xs); color: var(--text-subtle); }
.facts dd { margin: 0; }
.num { font-size: 0.95em; unicode-bidi: isolate; }

.notes { color: var(--info); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.notes:hover { color: var(--text); }

.actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.btn {
  font: inherit; font-weight: var(--fw-bold); font-size: var(--fs-body);
  display: inline-flex; align-items: center; gap: var(--space-3);
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  padding: var(--space-3) var(--space-6);
  background: var(--accent); color: var(--text-onbrand);
  box-shadow: var(--shadow-xs);
  transition: background var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--accent-hover); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .num { font-weight: var(--fw-regular); opacity: 0.85; font-size: var(--fs-sm); }
.btn.secondary { background: var(--surface-2); color: var(--text); font-weight: var(--fw-regular); border: var(--border-1); }
.btn.secondary:hover { background: var(--surface-3); }
.hint { margin: 0; font-size: var(--fs-xs); color: var(--text-muted); }
.linkish {
  font: inherit; font-size: var(--fs-sm); background: none; border: 0; padding: var(--space-1) 0; cursor: pointer;
  color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  margin-block-start: var(--space-2);
}
.linkish:hover { color: var(--text); }
.linkish .num { font-size: var(--fs-xs); }
.error-line { color: var(--danger); font-size: var(--fs-sm); margin: var(--space-2) 0 0; }

/* notices: a status colour on the leading edge, text first */
.notice { border-inline-start: 4px solid var(--line-strong); }
.notice.warn { border-inline-start-color: var(--warn); }
.notice.danger { border-inline-start-color: var(--danger); }
.notice.info { border-inline-start-color: var(--info); }
.notice h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-block-end: var(--space-2); }
.notice p { margin: 0 0 var(--space-4); color: var(--text-muted); }
.notice p:last-child { margin-block-end: 0; }
.notice .actions { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }

.empty { color: var(--text-muted); font-size: var(--fs-sm); margin: var(--space-4) 0 0; }

.devform { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px dashed var(--line-strong); }
.devform label { width: 100%; font-size: var(--fs-xs); color: var(--warn); }
.devform input {
  font: inherit; font-size: var(--fs-sm); flex: 1; min-width: 14em;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); border: var(--border-strong);
  background: var(--bg); color: var(--text); direction: ltr;
}

/* ── footer ──────────────────────────────────────────────────────────────── */
footer {
  border-block-start: var(--border-1);
  padding: var(--space-6) var(--gutter) var(--space-8);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
}
footer .inner { max-width: var(--container-sm); margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-2); }
footer .privacy strong { color: var(--text); font-weight: var(--fw-bold); }
footer .rule { height: 2px; width: 28px; background: var(--brand-gold); border-radius: 2px; }

.loading { color: var(--text-muted); font-size: var(--fs-sm); }

@media (max-width: 560px) {
  .card { padding: var(--space-5); }
  .release { grid-template-columns: 1fr; }
  .brand .section { display: none; }
}