/* زمام على الويب: spanning bars in the calendar (calendar-view.js),
   «المخطط الزمني» (timeline-view.js), «المصفوفة» (matrix-view.js) and the start date
   (duration-view.js). Tokens only; logical properties only, so the time axis and the bars flow
   from right to left in Arabic; every control is at least a 44px target (space-11). A timeline
   bar's resize handles stay thin and reach 44px past the bar's ends; «تغيير المدة…» does the
   same for keyboard and screen readers. */

/* ——— Spanning bars (calendar and timeline) ——— */

/* A multi-day task as a bar (SpanLanes in CalendarView.swift, GanttRow.swift): timeline-bar filled,
   its title in on-timeline-bar. The task's row says its priority. */
.span-bar {
  display: flex;
  align-items: center;
  min-inline-size: 0;
  padding-inline: var(--space-2);
  border: 1px solid var(--timeline-bar);
  border-radius: var(--radius-sm);
  background: var(--timeline-bar);
  color: var(--on-timeline-bar);
  text-align: start;
  cursor: pointer;
}

.span-bar-title {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A bar that began in an earlier week, or goes on into the next, runs off the row's edge. */
.span-bar.continues-before {
  border-inline-start-style: dashed;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.span-bar.continues-after {
  border-inline-end-style: dashed;
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

button.span-bar:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* Seven columns in the week's order; column 1 is the inline start, so the bars run right to left. */
.span-lanes {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--space-1);
}

.span-lanes > * {
  grid-column: var(--col) / span var(--len, 1);
  grid-row: var(--lane, 1);
}

.span-more {
  color: var(--ink-muted);
  text-align: center;
}

/* Month: a row of bars under each week's day cells, as wide as the cells (same spacing). */
.cal-lanes td {
  padding: 0;
}

.cal-bar {
  padding-block: 0;
}

/* Week: a strip of bars over the seven days, with the days named so it reads on phones too. */
.week-spans-section {
  margin-block-end: var(--space-3);
}

.week-spans {
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.span-day {
  grid-row: 1;
  text-align: center;
  color: var(--ink-muted);
}

.span-day.is-today {
  color: var(--ink);
  font-weight: 700;
}

.week-spans .span-bar {
  min-block-size: var(--space-11);
}

@container content (min-width: 75rem) {
  .week-wrap .week {
    inline-size: auto;
  }

  /* Bars line up with the seven day columns under them. */
  .week-spans {
    padding-inline: 0;
    column-gap: var(--space-2);
    background: transparent;
  }

  /* In a narrow day column, «نقل إلى…» goes under the task (features.css meant this, but its
     later two-column rule for every task list won on equal specificity). */
  .week .week-tasks > .task-item:has(.card-tools) .card-move {
    grid-column: 1;
    grid-row: auto;
    justify-self: end;
  }
}

/* «من … إلى …» under a spanning task in the selected day's list. */
.span-note {
  grid-column: 1 / -1;
  padding-inline: var(--space-4);
  padding-block-end: var(--space-2);
  margin: 0;
}

/* ——— Start date and «المدة» ——— */

.duration-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ——— «المخطط الزمني» ——— */

.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.tl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.tl-hint {
  flex-basis: 100%;
}

.tl-scroll {
  overflow: auto;
  max-block-size: 75dvh;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
  overscroll-behavior-inline: contain;
}

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

/* One day is --tl-day wide; --tl-days (from the script) days make the track. */
.tl-sheet {
  --tl-label: calc(var(--space-11) * 3);
  --tl-day: var(--space-11);
  --tl-track: calc(var(--tl-days) * var(--tl-day));
  position: relative;
  inline-size: calc(var(--tl-label) + var(--tl-track));
}

.tl-zoom-week {
  --tl-day: var(--space-3);
}

@container content (min-width: 40rem) {
  .tl-sheet {
    --tl-label: var(--card-min);
  }
}

/* The scale stays on top while the rows scroll, and the labels stay at the inline start. */
.tl-head {
  position: sticky;
  inset-block-start: 0;
  z-index: 3;
  display: flex;
  background: var(--surface-raised);
  border-block-end: 1px solid var(--line-strong);
}

.tl-corner {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  flex: none;
  display: flex;
  align-items: flex-end;
  inline-size: var(--tl-label);
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border-inline-end: 1px solid var(--line);
}

.tl-scale {
  flex: none;
  inline-size: var(--tl-track);
}

.tl-scale-row {
  position: relative;
  block-size: var(--space-6);
}

.tl-scale-row.tl-cells {
  block-size: var(--space-11);
}

.tl-scale-row > *,
.tl-grid > * {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--tl-start) * var(--tl-day));
  inline-size: calc(var(--tl-len) * var(--tl-day));
}

/* overflow: clip (not hidden) so the month's name can stick beside the labels while scrolling. */
.tl-month {
  display: flex;
  align-items: center;
  padding-inline: var(--space-2);
  border-inline-start: 1px solid var(--line);
  overflow: clip;
  white-space: nowrap;
  color: var(--ink);
  font-weight: 600;
}

.tl-month span {
  position: sticky;
  inset-inline-start: calc(var(--tl-label) + var(--space-2));
}

.tl-months-other .tl-month {
  color: var(--ink-muted);
  font-weight: 500;
}

.tl-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-inline-start: 1px solid var(--line);
  white-space: nowrap;
  overflow: clip;
}

.tl-cell-secondary {
  color: var(--ink-muted);
}

.tl-cell.is-today {
  color: var(--timeline-today);
  font-weight: 700;
}

.tl-body {
  position: relative;
}

.tl-grid {
  position: absolute;
  inset-block: 0;
  inset-inline-start: var(--tl-label);
  inline-size: var(--tl-track);
  pointer-events: none;
}

.tl-grid-cell {
  border-inline-start: 1px solid var(--line);
}

.tl-grid-cell.is-today {
  background: color-mix(in srgb, var(--timeline-today) 8%, transparent);
}

/* Today: a line through the middle of the day. */
.tl-grid > .tl-today {
  inset-inline-start: calc((var(--tl-start) + 0.5) * var(--tl-day) - 1px);
  inline-size: 2px;
  background: var(--timeline-today);
}

.tl-group-title {
  margin: 0;
  padding-block: var(--space-2);
  background: var(--surface-sunken);
  border-block-end: 1px solid var(--line);
}

.tl-group-name {
  position: sticky;
  inset-inline-start: 0;
  display: inline-block;
  padding-inline: var(--space-3);
}

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

.tl-row {
  display: flex;
  align-items: stretch;
  border-block-end: 1px solid var(--line);
}

.tl-label {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  flex: none;
  display: flex;
  flex-direction: column;
  inline-size: var(--tl-label);
  background: var(--surface-raised);
  border-inline-end: 1px solid var(--line);
}

.tl-label .zm-task {
  padding-block: var(--space-2);
  border-block-end: 0;
  background: transparent;
}

.tl-change {
  align-self: flex-end;
  margin-inline-end: var(--space-1);
}

/* Wide columns: «تغيير المدة…» beside the task, so rows stay dense. */
@container content (min-width: 40rem) {
  .tl-label {
    flex-direction: row;
    align-items: center;
  }

  .tl-label .zm-task {
    flex: 1;
    min-inline-size: 0;
  }

  .tl-change {
    align-self: center;
  }
}

.tl-span-text {
  padding-inline: var(--space-3);
  padding-block-end: var(--space-2);
  margin: 0;
}

.tl-track {
  position: relative;
  flex: none;
  inline-size: var(--tl-track);
}

.tl-bar {
  position: absolute;
  inset-block-start: var(--space-3);
  block-size: var(--space-8);
  inset-inline-start: calc(var(--tl-start) * var(--tl-day) + 1px);
  inline-size: max(var(--space-2), calc(var(--tl-len) * var(--tl-day) - 2px));
  padding-inline: var(--space-3);
  user-select: none;
}

.tl-bar.is-editable {
  cursor: grab;
  /* Vertical scrolling stays with the page; sideways moves drag the bar. */
  touch-action: pan-y;
}

.tl-bar.is-dragging {
  z-index: 2;
  cursor: grabbing;
  box-shadow: var(--shadow-lift);
}

.tl-handle {
  position: absolute;
  inset-block: 0;
  inline-size: var(--space-3);
  cursor: ew-resize;
  touch-action: none;
}

.tl-handle-start {
  inset-inline-start: 0;
}

.tl-handle-end {
  inset-inline-end: 0;
}

/* The hit area: 44px square, growing outward past the bar's end so the middle of a short bar
   still moves it. Percentages are of the handle itself (its containing block). */
.tl-handle::before {
  content: "";
  position: absolute;
  inset-block: calc((100% - var(--space-11)) / 2);
}

.tl-handle-start::before {
  inset-inline-start: calc(100% - var(--space-11));
  inset-inline-end: 0;
}

.tl-handle-end::before {
  inset-inline-start: 0;
  inset-inline-end: calc(100% - var(--space-11));
}

.tl-handle::after {
  content: "";
  position: absolute;
  inset-block: var(--space-2);
  inset-inline-start: calc(50% - 1px);
  inline-size: 2px;
  border-radius: var(--radius-pill);
  background: var(--line-strong);
}

.tl-zoom-week .tl-bar {
  padding-inline: var(--space-1);
}

/* Too short for a title: the row beside it names the task, and the bar's tooltip too. */
.tl-bar.is-short .span-bar-title,
.tl-bar.is-short .tl-handle::after {
  display: none;
}

.tl-zoom-week .tl-handle {
  inline-size: var(--space-2);
}

@media (prefers-reduced-motion: no-preference) {
  .tl-bar {
    transition: box-shadow var(--duration-complete) ease;
  }
}

/* ——— «المصفوفة» ——— */

.matrix {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* Two by two once the column has room: «مهم وعاجل» at the inline start of the first row. */
@container content (min-width: 30rem) {
  .matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Each quadrant's colour, from the quadrant tokens (MatrixQuadrantCard.swift): its icon, title, count and circles. */
.matrix-quad {
  --quad: var(--ink-muted);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-block-size: calc(var(--space-11) * 4);
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

.quad-urgent-important {
  --quad: var(--quadrant-urgent-important);
}

.quad-important {
  --quad: var(--quadrant-important);
}

.quad-urgent {
  --quad: var(--quadrant-urgent);
}

.quad-someday {
  --quad: var(--quadrant-someday);
}

.matrix-quad.is-target {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

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

.matrix-icon {
  color: var(--quad);
}

.matrix-title {
  flex: 1;
  margin: 0;
  color: var(--quad);
}

.matrix-count {
  min-inline-size: var(--space-6);
  padding-inline: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--quad);
  color: var(--on-quadrant);
  text-align: center;
}

.matrix-list {
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  /* Nothing to round off here, and clipping would cut the circles' 44px hit area (base.css). */
  overflow: visible;
}

.matrix-list .zm-task {
  padding-inline: var(--space-1);
  background: transparent;
}

.matrix-list .zm-check:not(.zm-check-on) {
  border-color: var(--quad);
}

.matrix-list > .task-item[draggable="true"] {
  cursor: grab;
}

.matrix-empty {
  padding-inline: var(--space-1);
}

.matrix-more {
  align-self: flex-start;
}