/* ============================================================
   /new — Base styles
   Reset, body defaults, scrollbar, focus rings, generic primitives
   ============================================================ */

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

/* RTL מלא — בכל השפות, ללא קשר ל-lang */
html, body {
  direction: rtl;
}

/* Reset only. The density-with-fill technique lives in layout.css:
   .workspace uses calc(100vw / 0.75) × calc(100vh / 0.75) + transform: scale(0.75),
   which is the ONLY combo that produces both: density of #13 + zero dead space. */
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface-1);
}

body {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--ink-1);
  /* margin + background מטופלים ב-layout.css */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Numbers & dimensions — תמיד מונוספייס לתחושת דיוק */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.tabular { font-variant-numeric: tabular-nums; }

/* Scrollbar — דק ומאופק */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-4);
  border-radius: 5px;
  border: 2px solid var(--surface-1);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-5); }

/* Focus rings — חובה לנגישות */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}

/* Form primitives — כל הקלטים נראים אחיד */
input, select, textarea {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--ink-1);
  background: var(--surface-0);
  border: 1px solid var(--stroke-strong);
  border-radius: var(--r-3);
  padding: 9px 12px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
input:hover, select:hover { border-color: var(--ink-4); }
input::placeholder { color: var(--ink-4); }

label {
  display: block;
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-bottom: 6px;
  font-weight: 500;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* Logo / brand mark — wordmark עם נקודה כתומה */
.brand-mark {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.04em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--surface-0);
}
.brand-mark .dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
  display: inline-block;
}
.brand-mark .ai {
  font-weight: 700;
}

/* Utility classes — לימוש פנימי במודולים, לא לקוד שצריך לנקות */
.row { display: flex; align-items: center; gap: var(--s-3); }
.col { display: flex; flex-direction: column; gap: var(--s-3); }
.gap-2 { gap: var(--s-2); }
.gap-4 { gap: var(--s-4); }
.gap-6 { gap: var(--s-6); }
.spacer { flex: 1; }

/* Section caption — header קטן באותיות גדולות */
.section-caption {
  font-size: var(--t-micro);
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Pill / tag */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--t-micro);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.tag-accent { background: var(--accent-soft); color: var(--accent-ink); }
.tag-ok     { background: var(--ok-soft);     color: var(--ok); }
.tag-warn   { background: var(--warn-soft);   color: var(--warn); }

/* Visual hidden — for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Mobile foundations ─── */
html { -webkit-text-size-adjust: 100%; }
body { overscroll-behavior: none; }

/* manipulation = ביטול 300ms double-tap delay + מניעת pinch-zoom על buttons.
   אסור pan-x/pan-y בלי manipulation, אחרת הtap עדיין עיכוב. */
button, [role="button"], a, label, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], select {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  /* iOS Safari zoom prevention — אם font-size < 16px ב-input, iOS מזמן zoom-on-focus */
  input, select, textarea { font-size: 19.52px; }
}

/* touch targets ≥44px — רק במובייל אמיתי (≤640).
   ב-iPad/tablet (pointer:coarse אבל ≥641) ה-header pills קומפקטיים בכוונה
   והעלאה ל-44px תשבור את ה-layout של ה-header. */
@media (max-width: 640px) {
  button.mab__btn,
  .wh__hamburger,
  .wi-action,
  .wh__user-menu-item,
  .wh__mobile-drawer-item {
    min-height: var(--touch-min, 44px);
  }
}

@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}

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

/* Mobile text overflow */
@media (max-width: 640px) {
  .wh__user, .pm-modal__item-name, .notif-item__msg, .ws-acc__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Long press disabled on UI controls */
canvas, .wc-tool-btn, .ws-tool-btn, .fa {
  -webkit-touch-callout: none;
  user-select: none;
}