/*
  تنسيق لسان الحركات ولسان المتجر في النسخة الثانية: حقل البحث، وأزرار التصفية بالصندوق والنوع، وزرّ الملغاة، والقائمة بأيامها.
  في الجوال تنزلق أزرار التصفية أفقيًا من حافة الشاشة إلى حافتها، وفي الحاسوب تقف في صفّين فوق القائمة.
  وفيه المفتاح الصغير الذي يستعمله لسان المزيد أيضًا لزرّ شكل الحاسوب.
  يُقرأ بعد التنسيق المشترك، والألوان كلها من رموز التصميم فيعمل في المظهرين الداكن والفاتح.
  وإن غاب ظهرت الحركات بالتنسيق المشترك وحده، وأزرار التصفية بلا شكل.
*/

/* ---------- The movements tab ---------- */
.screen--moves { gap: var(--sp-3); }
@media (min-width: 1024px) {
  /* A row stays short enough for the eye to travel from the sentence to its amount */
  .screen--moves { max-width: 820px; gap: var(--sp-4); }
}

/* Search: the icon is the field's label (screen readers hear the label words); no hint text inside the field */
.moves-search { position: relative; display: flex; align-items: center; min-width: 0; }
.moves-search-ico {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: 52px;
  color: var(--muted);
  cursor: text;
}
.moves-search-input {
  width: 100%;
  min-width: 0;
  height: 52px;
  margin: 0;
  padding: 0 52px;
  border: 1px solid var(--line-ctl);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  /* 16 px keeps the iPhone from zooming into the field */
  font-size: 16px;
  line-height: var(--lh-input);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.moves-search-input::-webkit-search-cancel-button,
.moves-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.moves-search-input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.moves-search-x {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.moves-search-x:hover { background: var(--card-2); color: var(--ink); }

/* Filter rows: on the phone each row slides sideways from screen edge to screen edge */
/* The rows keep 5 px above and below the chips, so the focus ring is never cut by the sliding row */
.moves-filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; margin-block: -5px; }
.moves-scroll {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  margin-inline: calc(-1 * var(--gutter));
  padding: 5px var(--gutter);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.moves-scroll::-webkit-scrollbar { display: none; }
/* One group = one grid of equal columns: every chip is as wide as the widest one, so siblings stay equal */
.moves-chips { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--sp-2); flex: none; }
.moves-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--touch);
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line-ctl);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.moves-chip:hover { border-color: var(--gold); }
/* The chosen chip: the primary button colours (same weight, so no chip changes width when it is chosen) */
.moves-chip[aria-pressed="true"] { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-ink); }
.moves-chip .box-dot { width: 12px; height: 12px; }
.moves-chip[aria-pressed="true"] .box-dot { box-shadow: inset 0 0 0 1.5px var(--bx-deep), 0 0 0 1.5px var(--btn-primary-ink); }
.moves-chip .ico { flex: none; }

/* The list in one bank section; an empty result keeps the section calm */
.moves-list { padding-bottom: 10px; }
.moves-list.is-empty { padding-bottom: 4px; }
.moves-list .empty { padding-block: 22px 18px; }

@media (min-width: 1024px) {
  /* On the desktop the switch wraps under the kinds when the row is short; a row still slides rather than widen the page */
  .moves-scroll { margin-inline: -5px; padding-inline: 5px; flex-wrap: wrap; row-gap: var(--sp-2); }
}

/* ---------- A small on/off switch (the cancelled movements here, the desktop shape in the more tab) ---------- */
.moves-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: var(--touch);
  margin: 0;
  padding: 0 12px 0 14px;
  border: 1px solid var(--line-ctl);
  border-radius: var(--r-pill);
  background: var(--card);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color var(--dur-1) var(--ease);
}
.moves-switch:hover { border-color: var(--gold); }
.moves-switch-label { min-width: 0; }
.moves-switch-track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: var(--card-3);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  transition: background-color var(--dur-2) var(--ease);
}
.moves-switch-knob {
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.moves-switch[aria-checked="true"] .moves-switch-track { background: var(--btn-primary-bg); box-shadow: none; }
/* Right to left: off sits at the right (the inline start), on slides to the left */
.moves-switch[aria-checked="true"] .moves-switch-knob { background: var(--btn-primary-ink); transform: translateX(-16px); }
html[dir="ltr"] .moves-switch[aria-checked="true"] .moves-switch-knob { transform: translateX(16px); }

/* ---------- The store tab: a calm placeholder with two links into the store's systems ---------- */
.screen--store { gap: var(--sp-3); }
.store-card { padding-bottom: 18px; }
.store-card .empty { padding-block: 26px 18px; }
.store-links { gap: 10px; }
.store-links .src-link {
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--btn-secondary-line);
  border-radius: var(--r-ctl);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-ink);
  font-size: var(--fs-md);
  text-align: center;
  transition: background-color var(--dur-1) var(--ease);
}
.store-links .src-link:hover { background: var(--card-3); }
@media (min-width: 1024px) {
  .screen--store { max-width: 760px; gap: var(--sp-4); }
}