/* ============================================================
   QUIZORIA SaaS — reset, typography, forms

   Written with logical properties throughout - `margin-inline`, `inset-inline`,
   `text-align: start` - so Arabic mirrors the entire interface from the single
   `dir="rtl"` on <html>, with no second stylesheet and no per-component
   override. That is the whole RTL strategy, and it is why it stays correct as
   the product grows.
   ============================================================ */

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

/*
 * `hidden` MEANS HIDDEN.
 *
 * The attribute is how JavaScript in this product shows and hides things, and
 * the browser's own rule for it - `[hidden] { display: none }` - is a
 * user-agent declaration that ANY author rule setting `display` beats. So a
 * component with `display: flex` in a media query silently stops responding to
 * `element.hidden = true`, and does so only at that width.
 *
 * That is not hypothetical: the site's mobile navigation drawer is
 * `position: fixed; inset: 0; display: flex` under 60rem, so closing it did
 * nothing and it covered the page. The menu "stayed open" and the header
 * looked cut off because the drawer was over it.
 *
 * One rule, at the base, so the whole class of bug cannot recur.
 */
[hidden] { display: none !important; }


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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Arabic gets Cairo, which has the Arabic coverage Outfit does not, and a
   fractionally looser line height because the script is taller. */
html[lang='ar'] body {
  font-family: var(--font-ar);
  line-height: 1.7;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); font-weight: 650; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); font-weight: 600; }

a {
  color: var(--text-brand);
  text-decoration: none;
  border-radius: var(--r-sm);
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

img, svg { max-width: 100%; display: block; }

/* One focus treatment for the whole product. It is visible on every surface,
   including inside a primary button, because a keyboard user who cannot see
   where they are cannot use the product at all. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* A heading focused programmatically so a screen reader announces the new
   screen is not something the user tabbed to, and a ring around it reads as a
   rendering fault. The focus itself stays - it is what makes routing audible. */
[tabindex='-1']:focus { outline: none; }

::selection { background: var(--brand-200); color: var(--ink-900); }

/* ---------------- utilities ---------------- */

.u-hidden { display: none !important; }

/* Visible to a screen reader, invisible on screen. Used for the labels that
   an icon-only control still needs. */
.u-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-muted { color: var(--text-muted); }
.u-faint { color: var(--text-faint); }
.u-small { font-size: var(--fs-small); }
.u-micro { font-size: var(--fs-micro); }
.u-strong { font-weight: 650; }
.u-mono { font-family: var(--font-mono); font-size: var(--fs-small); }
.u-center { text-align: center; }
.u-nowrap { white-space: nowrap; }

.u-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Two lines, then an ellipsis. For question text in a list, where the whole
   string would make every row a different height. */
.u-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.u-stack { display: flex; flex-direction: column; gap: var(--s-4); }
.u-stack-sm { display: flex; flex-direction: column; gap: var(--s-2); }
.u-row { display: flex; align-items: center; gap: var(--s-3); }
.u-row-wrap { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.u-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
.u-grow { flex: 1 1 auto; min-width: 0; }

/* ---------------- forms ---------------- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }

.field__label {
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text);
}

.field__hint {
  font-size: var(--fs-small);
  color: var(--text-faint);
}

.field__error {
  font-size: var(--fs-small);
  color: var(--bad-500);
  font-weight: 550;
}

.input,
.select,
.textarea {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.625rem 0.75rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

.textarea { min-height: 8rem; resize: vertical; line-height: var(--lh-body); }

.input::placeholder,
.textarea::placeholder { color: var(--text-faint); }

.input:hover,
.select:hover,
.textarea:hover { border-color: var(--brand-300); }

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px var(--bg-active);
}

.input[aria-invalid='true'],
.textarea[aria-invalid='true'] { border-color: var(--bad-500); }

.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--bg-inset);
  color: var(--text-faint);
  cursor: not-allowed;
}

.select {
  appearance: none;
  /* The chevron is drawn rather than fetched, so the control needs no asset
     and mirrors correctly in RTL through `background-position`. */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  background-position: right 1rem top 55%, right 0.79rem top 55%;
  padding-inline-end: 2.25rem;
}
html[dir='rtl'] .select {
  background-position: left 0.79rem top 55%, left 1rem top 55%;
  padding-inline-end: 0.75rem;
  padding-inline-start: 2.25rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  cursor: pointer;
}
.checkbox input {
  margin: 0;
  margin-block-start: 0.2rem;
  width: 1rem; height: 1rem;
  accent-color: var(--brand-500);
  flex: none;
}