/*
 * project-detail.css — what only the project screen looks like.
 *
 * The pieces this screen shares with the rest of the app are not here and are
 * not restated here: the black full-width pill button, the status pill, the
 * slim budget bar, the tabular-figure number and the tokens they are built from
 * belong to the base stylesheet. This file is the arrangement of them — the
 * hero, the segmented control, the transaction rows, the photo grid and the
 * quote rows.
 *
 * Sized for a phone held in one hand first. Nothing has a fixed width, the
 * photo grid is two columns until there is room for more, and every tappable
 * thing clears 44px on its own rather than by sitting next to something that
 * does.
 */

/* The first icon in the app, and the rule that mirrors a directional one under
   RTL. Both are house rules rather than this screen's, so when a second screen
   wants an icon they move to the shared stylesheet instead of being copied. */
.icon {
  inline-size: 20px;
  block-size: 20px;
  flex: none;
}

[dir="rtl"] .icon--directional { transform: scaleX(-1); }

/* ---- Getting back out ---------------------------------------------------- */

.detail__nav { margin-block-end: 12px; }

.detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-block-size: 44px;
  padding-inline: 12px;
  margin-inline-start: -12px; /* the label sits on the margin, the target does not */
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

/* ---- The hero ------------------------------------------------------------ */

.hero {
  padding: 20px;
  border-radius: 20px;
  background: var(--surface);
  margin-block-end: 20px;
}

.hero__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.hero__title {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__name {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.hero__client {
  margin: 0;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.hero__number {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* The status and the way in to editing, stacked at the far edge so the job's
   name keeps the whole width it needs however long it runs. */
.hero__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex: none;
}

.hero__edit {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: 10px;
  border: none;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
}

/* ---- The owner's hero ---------------------------------------------------- */

.hero__money {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-block-start: 20px;
}

.hero__figure {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero__figure-label {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* The one big number on the screen. The dashboard card's figure is a smaller
   relative of this; if a third screen wants either, they become one rule in the
   base stylesheet rather than three near-identical ones. */
.hero__figure-value {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--value);
}

.hero__figure-value.is-positive { color: var(--pos); }
.hero__figure-value.is-negative { color: var(--neg); }

.hero__budget {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.hero__budget-caption {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ---- The member's hero --------------------------------------------------- */

.hero__dates {
  margin-block-start: 16px;
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ---- The segmented control ----------------------------------------------- */

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: var(--surface);
  margin-block-end: 20px;
}

.segmented__tab {
  flex: 1 1 0;
  min-inline-size: 0;
  min-block-size: 44px;
  padding-inline: 8px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  /* Three Hebrew labels have to fit across a 375px phone without any of them
     wrapping to a second line and making the control taller than its
     neighbours. */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.segmented__tab.is-selected {
  background: var(--bg-raise);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Transactions -------------------------------------------------------- */

.txn-day {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* The day is named once, above its rows, rather than repeated on each of them. */
.txn-day__label {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 400;
  padding-inline-start: 4px;
}

/* One soft surface per day, its rows divided by a hairline rather than each
   row being its own floating card. */
.txn-list {
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
}

.txn {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 60px;
  padding: 12px 16px;
}

.txn + .txn { border-block-start: 1px solid var(--border); }

/* A tinted chip carrying a mark, not a coloured dot and not a badge. Income is
   the only one that takes a colour; every kind of expense stays neutral and is
   told apart by its mark. */
.txn__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  flex: none;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-muted);
}

.txn__chip.chip--income {
  background: rgba(29, 122, 52, 0.1);
  color: var(--pos);
}

.txn__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
  flex: 1 1 auto;
}

.txn__desc { overflow-wrap: anywhere; }

.txn__meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.txn__amount {
  flex: none;
  font-weight: 500;
  color: var(--value);
}

.txn__amount.is-income { color: var(--pos); }

/* ---- Photos -------------------------------------------------------------- */

/* Two columns on a phone, more as the screen allows, and no fixed width at any
   size. */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}

.photo {
  display: block;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
}

.photo__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

/* A row whose file did not resolve to a link. It still says what the picture
   was of rather than leaving a blank square. */
.photo--missing {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
}

.photo__caption {
  color: var(--text-muted);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* ---- Quote --------------------------------------------------------------- */

.quote-list {
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
}

.quote-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-block-size: 60px;
  padding: 12px 16px;
  color: inherit;
  text-decoration: none;
}

.quote-row + .quote-row { border-block-start: 1px solid var(--border); }

.quote-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-inline-size: 0;
}

.quote-row__num {
  font-weight: 500;
  overflow-wrap: anywhere;
}

.quote-row__meta {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

.quote-row__amount {
  flex: none;
  font-weight: 500;
  color: var(--value);
}

/* ---- Waiting, and the ways this can go wrong ----------------------------- */

.hero--skeleton {
  block-size: 168px;
  animation: detail-pulse 1.4s ease-in-out infinite;
}

/* Shaped like the day group it stands in for, so nothing jumps when the rows
   arrive: one soft surface, four row-height bands inside it. */
.skeleton-list {
  border-radius: 20px;
  background: var(--surface);
  overflow: hidden;
  animation: detail-pulse 1.4s ease-in-out infinite;
}

.skeleton-row { block-size: 60px; }

.skeleton-row + .skeleton-row { border-block-start: 1px solid var(--border); }

@keyframes detail-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .hero--skeleton,
  .skeleton-list { animation: none; }
}

.detail__state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  border-radius: 20px;
  background: var(--surface);
  text-align: center;
}

.detail__state-title {
  margin: 0;
  font-weight: 500;
}

.detail__state-note {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  overflow-wrap: anywhere;
}

.detail__state .btn { margin-block-start: 12px; }