/* زمام على الويب: the open task as a form (task-editor.js), grouped in cards as TaskDetailView's
   Form: rows at least 44px tall, the label at the inline start and its control at the end, a line
   between rows, and a quiet note under a card. Tokens only; logical properties only. */

.task-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-section-title {
  padding-inline: var(--space-4);
  margin-block-end: var(--space-1);
}

.form-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overflow: hidden;
}

.form-card > * + * {
  border-block-start: 1px solid var(--line);
}

/* The menu and the forms it opens sit outside the rows' lines. */
.form-card > .reminder-menu,
.form-card > .reminder-form:empty,
.form-card > .reminder-list:empty {
  border: 0;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: var(--space-11);
  padding-block: var(--space-1);
  padding-inline: var(--space-4);
}

.form-row-stack {
  flex-direction: column;
  align-items: stretch;
  padding-block: var(--space-2);
  gap: var(--space-2);
}

.form-label {
  flex: none;
}

.form-control {
  inline-size: auto;
  min-inline-size: 0;
  max-inline-size: 60%;
}

/* Fields that are the row itself (the title, notes and tags): no box of their own; the focus ring marks them. */
.form-plain {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: var(--space-4);
}

.form-plain:focus-visible {
  outline-offset: -2px;
}

.form-notes {
  min-block-size: calc(var(--space-11) * 2);
  resize: vertical;
}

.form-note {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
}

.form-card > .form-note {
  border-block-start: 0;
  padding-block-start: 0;
}

.form-footer {
  padding-inline: var(--space-4);
  margin-block-start: var(--space-1);
}

.form-segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
}

/* A switch (Toggle), brand when on as the app's tint makes it. */
.switch {
  appearance: none;
  position: relative;
  flex: none;
  inline-size: calc(var(--space-11) + var(--space-2));
  block-size: var(--space-8);
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background-color var(--duration-complete) ease;
}

.switch::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--space-1) / 2);
  inset-inline-start: calc(var(--space-1) / 2);
  inline-size: calc(var(--space-8) - var(--space-1));
  block-size: calc(var(--space-8) - var(--space-1));
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 25%, transparent);
  transition: inset-inline-start var(--duration-complete) var(--ease-settle);
}

.switch:checked {
  background: var(--brand);
}

.switch:checked::before {
  inset-inline-start: calc(100% - var(--space-8) + var(--space-1) / 2);
}

@media (prefers-reduced-motion: reduce) {
  .switch,
  .switch::before {
    transition: none;
  }
}

/* «قبل العصر بـ١٠ د» between − and + (Stepper). */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  inline-size: 100%;
}

.stepper .icon-button {
  background: var(--surface-sunken);
}

.stepper .icon-button:disabled {
  color: var(--ink-faint);
  cursor: not-allowed;
}

/* The days of a weekly repeat (TaskWeekdayPicker): brand-soft with a brand edge when chosen. */
.weekday-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc(var(--space-11) * 2), 1fr));
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.weekday {
  min-block-size: var(--space-11);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--ink);
  cursor: pointer;
}

.weekday[aria-pressed="true"] {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* «التذكيرات» */
.reminder-list {
  display: flex;
  flex-direction: column;
}

.reminder-list > * + * {
  border-block-start: 1px solid var(--line);
}

.reminder-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}

.reminder-text > .zm-ico {
  color: var(--ink-muted);
}

.reminder-row .danger {
  color: var(--priority-high);
}

.form-add {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  inline-size: 100%;
  border-radius: 0;
}

.reminder-sheet {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-sunken);
}

.reminder-menu {
  min-inline-size: calc(var(--space-11) * 5);
}

/* The rest of the open task (task-extras.js, attachments-view.js) in the same cards. */
.inspector .task-extras {
  gap: var(--space-4);
  padding: 0;
  border: 0;
}

.inspector .extra-section,
.inspector .task-attachments {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.inspector .extra-section:empty {
  display: none;
}

/* A subtask: its circle, and its title that opens it. */
.subtask-list .subtask {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0;
  border: 0;
  text-decoration: none;
}

.subtask-open {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--space-11);
  margin-block: calc(var(--space-2) * -1);
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-align: start;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.subtask.is-done .subtask-open {
  color: var(--ink-faint);
  text-decoration: line-through;
}

.subtask-add {
  display: flex;
  gap: var(--space-2);
}

.subtask-add .input {
  flex: 1;
}

.assist-ask {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-1);
}

/* ——— «مهمة جديدة» ——— */

/* The sheet's toolbar: «إلغاء» at the inline start, the title, «إضافة» at the end (as the app's sheets). */
.sheet-bar {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-6) * -1) calc(var(--space-6) * -1) 0;
  padding: var(--space-2) var(--space-4);
  background: var(--surface-raised);
  border-block-end: 1px solid var(--line);
}

.sheet-bar > :first-child {
  justify-self: start;
}

.sheet-bar > :last-child {
  justify-self: end;
}

.sheet-bar-title {
  text-align: center;
}

/* A segmented choice made of radios: the radio is hidden, its label is the segment. */
.segment-choice {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--space-11);
  padding-inline: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  text-align: center;
  cursor: pointer;
}

.segment-choice input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.segment-choice:has(input:checked) {
  background: var(--surface-raised);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}

.segment-choice:has(input:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

#add-form .stepper {
  padding-block: var(--space-1);
}

/* Phones: the sheet rises from the bottom edge and goes back down the same way. */
@media (max-width: 47.99rem) {
  .sheet {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: calc(100dvh - var(--space-8));
    margin-block: auto 0;
    margin-inline: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    border-block-end: 0;
    padding-block-end: env(safe-area-inset-bottom);
  }

  .sheet[open] {
    transition: translate var(--duration-complete) var(--ease-settle), overlay var(--duration-complete) allow-discrete, display var(--duration-complete) allow-discrete;
  }

  @starting-style {
    .sheet[open] {
      translate: 0 100%;
    }
  }

  .sheet-form {
    padding: var(--space-4);
  }

  .sheet-bar {
    margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) 0;
  }
}

@media (max-width: 47.99rem) and (prefers-reduced-motion: reduce) {
  .sheet[open] {
    transition: opacity var(--duration-complete) ease;
  }

  @starting-style {
    .sheet[open] {
      translate: none;
      opacity: 0;
    }
  }
}

/* ——— Swipe to delete (swipe.js) ——— */

/* The row slides within its own box, so the page never scrolls sideways under it. */
.task-item.is-swipeable {
  position: relative;
  overflow-x: clip;
  touch-action: pan-y;
}

.swipe-delete {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--space-11) * 2);
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--priority-high);
  color: var(--on-brand);
  font-weight: 600;
  cursor: pointer;
}

.task-item.is-swipeable > .zm-task {
  position: relative;
  z-index: 1;
  /* Toward the inline start: the right in Arabic, uncovering «حذف» at the left. */
  translate: calc(var(--swipe, 0px) * var(--end-sign) * -1) 0;
  transition: translate var(--duration-complete) var(--ease-settle), background-color var(--duration-complete) ease;
}

/* While the finger holds it, the row follows with no delay. */
.task-item.is-dragging-swipe > .zm-task {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .task-item.is-swipeable > .zm-task {
    transition: none;
  }
}

/* ——— Prayer times (prayer-view.js) and settings (settings-view.js) ——— */

/* NextPrayerLine: sand on sand-soft, the only place besides prayer chips that colour is used. */
.prayer-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--space-11);
  margin-block-end: var(--space-3);
  padding-inline: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--sand-soft);
  color: var(--sand);
  text-align: start;
  cursor: pointer;
}

.prayer-line-text {
  flex: 1;
  min-inline-size: 0;
}

.timer {
  font-variant-numeric: tabular-nums;
}

.prayer-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* PrayerClockCard */
.prayer-clock {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--sand-soft);
  color: var(--sand);
}

.prayer-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0;
  margin: 0;
  list-style: none;
}

.prayer-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-11);
  padding-inline: var(--space-3);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--sand-soft);
  color: var(--sand);
}

/* The next prayer: «القادمة», heavier, with a sand edge. */
.prayer-row.is-next {
  border-color: var(--sand);
}

.prayer-time {
  margin-inline-start: auto;
}

.account-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
}

.avatar-large {
  inline-size: calc(var(--space-11) + var(--space-4));
  block-size: calc(var(--space-11) + var(--space-4));
  flex: none;
}

.account-card-body {
  flex: 1;
  min-inline-size: 0;
}

.account-card .form-plain {
  padding-inline: 0;
}

.account-email {
  overflow-wrap: anywhere;
}

.settings-link {
  inline-size: 100%;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}

.settings-link-label,
.settings-link-value {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.settings-link-label > .zm-ico {
  color: var(--ink-muted);
}

.form-add.danger {
  color: var(--priority-high);
}

/* Grouped sheets: cards on the page colour, as a grouped Form. */
.prayer-sheet,
.settings-sheet,
.prayer-sheet .sheet-bar,
.settings-sheet .sheet-bar {
  background: var(--surface);
}

/* ——— «نقل إلى مشروع…» (move-sheet.js, MoveToProjectSheet.swift) ——— */

/* Grouped like the other sheets: the place rows in cards on the page colour. */
.move-sheet,
.move-sheet .sheet-bar {
  background: var(--surface);
}

.move-task {
  padding-inline: var(--space-4);
  overflow-wrap: anywhere;
}

.move-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.move-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.move-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  inline-size: 100%;
  min-block-size: var(--space-11);
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 0;
  background: var(--surface-raised);
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.move-row:hover {
  background: color-mix(in srgb, var(--ink) 6%, var(--surface-raised));
}

.move-row:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

/* A section sits under its project, indented. */
.move-row.is-section {
  padding-inline-start: calc(var(--space-4) + var(--space-6));
}

.move-row > .zm-ico:first-child {
  flex: none;
  color: var(--ink-muted);
}

.move-name {
  flex: 1;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

/* The task's current place: a brand check at the inline end. */
.move-row[aria-current="true"] > .zm-ico:last-child {
  flex: none;
  color: var(--brand);
}

.move-empty {
  padding-inline: var(--space-4);
}

/* The row's context menu sits at the pointer (move-sheet.js sets --menu-top and --menu-end). */
.task-menu {
  max-inline-size: calc(100vw - 2 * var(--space-2));
}