/* base.css — reset, typography, RTL rules and small utilities (docs/34 §3).
   Logical properties only: margin-inline-start, inset-inline-end. Never
   left/right. A number, an address or a Latin name is an LTR island inside
   the Hebrew sentence (.ltr, <bdi>). */

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

html {
  scrollbar-gutter: stable;
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  height: 100%;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
/* The page's ground: one soft light at the top, which stays where it is
   while the page moves under it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--canvas) var(--page-glow);
  pointer-events: none;
}

/* ---- headings: light and large; the smaller ones lead by weight ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
}
h1 { font-size: var(--fs-xl); font-weight: var(--fw-light); }
h2 { font-size: var(--fs-lg); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-medium); }
h4 { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
p { margin: 0; }
p + p { margin-top: var(--s-3); }

small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-medium); }

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover { text-decoration: underline; }

/* ---- form controls inherit the face; nothing in the browser's default ---- */
button, input, select, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: 0;
  margin: 0;
}
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }

img, svg, video, iframe { display: block; max-width: 100%; }
svg { flex: none; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr {
  border: 0;
  height: var(--line);
  background: var(--hairline);
  margin: var(--s-4) 0;
}

/* ---- focus: always visible for the keyboard, never on a mouse click. A
   thin outline in the text's own colour, a little away from the control. ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
/* What only a script focuses (the view, a sheet) shows no ring. */
[tabindex="-1"]:focus-visible { outline: none; }

::selection { background: color-mix(in srgb, var(--accent) 34%, transparent); }

/* ---- RTL: numbers, addresses and Latin names are islands ---- */
bdi { unicode-bidi: isolate; }
.ltr, code, kbd, samp, [dir="ltr"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}
.ltr { display: inline-block; }
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.num {
  font-variant-numeric: tabular-nums lining-nums;
  unicode-bidi: isolate;
}
/* Mixed Hebrew/English text keeps the order of each run (docs/05 §2). */
.plain { unicode-bidi: plaintext; }

/* A directional icon (back, next, chevron) flips with the page; a player
   icon (▶) never does: it carries no .flip class. */
[dir="rtl"] .flip { transform: scaleX(-1); }

/* ---- scrollbars: thin and quiet, never the layout's business ---- */
* { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ---- motion: respected everywhere ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- utilities ---- */
.muted { color: var(--ink-2); }
.faint { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.bold { font-weight: var(--fw-medium); }
.display { font-family: var(--font-display); font-weight: var(--fw-light); letter-spacing: 0; }
.display.bold { font-size: var(--fs-md); font-weight: var(--fw-medium); letter-spacing: var(--ls-brand); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }
.on-text { color: var(--on-ink); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stack { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-2 { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-5 { display: flex; flex-direction: column; gap: var(--s-5); }
.row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.row-2 { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 0; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-4 { gap: var(--s-4); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
/* The last thing in a column goes to its end: cards side by side keep their buttons level. */
.mt-auto { margin-top: auto; }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.hidden { display: none !important; }
[hidden] { display: none !important; }

.grid-auto {
  display: grid;
  gap: var(--s-3) var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
}
.grid-auto-lg {
  display: grid;
  gap: var(--s-3) var(--s-6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.grid-2 { display: grid; gap: var(--s-3) var(--s-5); grid-template-columns: 1fr 1fr; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Section heading of a screen: "תאורה", "פעיל עכשיו" — the small spaced
   label. The count beside it is a plain number. */
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: 1.5;
  color: var(--accent);
  text-transform: none;
  margin: var(--s-6) 0 var(--s-2);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.section-title:first-child { margin-top: var(--s-2); }
.section-title .count {
  color: var(--ink-2);
  font-weight: var(--fw-regular);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.section-title > .btn, .section-title > a { letter-spacing: 0; }

.icon {
  width: var(--icon);
  height: var(--icon);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon-sm { width: 18px; height: 18px; }
.icon-lg { width: 32px; height: 32px; stroke-width: 1.15; }
.icon-xl { width: 44px; height: 44px; stroke-width: 1; }