/* Shared chrome for every tool page: reset, nav, footer, buttons, fields, cards. Built on tokens.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: var(--text-body);
  direction: rtl;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: max(var(--space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--space-4), env(safe-area-inset-right, 0px));
}

/* Logo */
.mb-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--foreground); text-decoration: none; direction: ltr; }
.mb-logo svg { width: 32px; height: 32px; flex: none; }
.mb-logo span { font: 600 21px/1 var(--font); letter-spacing: -0.01em; }
.cell { fill: var(--logo-cell); }
.signal { fill: var(--logo-signal); }

/* Nav */
.nav { border-bottom: 1px solid var(--border); background: var(--card); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); }
.nav-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nav-divider { width: 1px; height: 20px; background: var(--border-strong); }
.nav-section { font: var(--text-body-strong); color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
@media (max-width: 560px) { .nav-divider, .nav-section, .nav .btn-secondary { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4);
  font: var(--text-body-strong); border-radius: var(--radius-lg); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn-sm { height: 32px; padding: 0 var(--space-3); font: var(--text-label); }
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--card); color: var(--foreground); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--secondary); }
.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover { background: var(--secondary); color: var(--foreground); }
.btn:disabled { background: var(--surface-disabled); color: var(--foreground-disabled); border-color: transparent; cursor: not-allowed; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }

/* Fields */
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.field-head label { font: var(--text-label); color: var(--foreground); }
.field-head small { font: var(--text-caption); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.link-btn { font: var(--text-caption); color: var(--muted-foreground); background: none; border: 0; padding: 2px 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--destructive); }
input, select, textarea {
  font: var(--text-body); color: var(--foreground); background: var(--card);
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  padding: 9px var(--space-3); width: 100%; direction: rtl;
}
input, select { height: 40px; }
textarea { min-height: 136px; resize: vertical; line-height: 1.8; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--primary-subtle); }
.is-error input, .is-error textarea { border-color: var(--destructive); }
.hint { margin: 0; font: var(--text-caption); color: var(--muted-foreground); }
.hint.warn { color: var(--warning); }
.hint.error { color: var(--destructive); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-3); border-radius: var(--radius-full); font: var(--text-label); background: var(--secondary); color: var(--secondary-foreground); }
.badge-success { background: var(--success-subtle); color: var(--success); }
.badge-primary { background: var(--primary-subtle); color: var(--primary); }

/* Footer */
.footer { border-top: 1px solid var(--border); margin-top: var(--space-12); }
.footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.footer small { font: var(--text-caption); color: var(--muted-foreground); }
.footer .made-by { display: flex; align-items: center; gap: var(--space-3); font: var(--text-caption); color: var(--muted-foreground); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }