/* Müşteri yüzeyinin kendi yerleşimi.
 *
 * Paylaşılan bileşenler (düğme, alan, kart, uyarı) `shared/css/components/`
 * altında; burada yalnızca bu yüzeye ait olanlar var: uygulama kabuğu, dar
 * kimlik sayfaları, sipariş formu ve sipariş listesi.
 *
 * Tek bir ham renk yok — hepsi token, ve `check_design.py` bunu doğruluyor.
 */

/* ── Sipariş formu ────────────────────────────────────────────────────── */

.cw-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 1.1rem;
  border: 1px dashed var(--cw-line-strong);
  border-radius: 8px;
  background: var(--cw-card);
}

.cw-file :where(input[type="file"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Girdi görsel olarak gizli ama hâlâ odaklanabilir; halkayı etikete
 * taşıyoruz, yoksa klavye kullanıcısı odağın nerede olduğunu göremez. */
.cw-file :where(input[type="file"]:focus-visible) + .cw-file__button {
  outline: 2px solid var(--cw-ai-500);
  outline-offset: 2px;
}

.cw-file__button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--cw-line-strong);
  border-radius: 6px;
  background: var(--cw-card);
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  font-weight: 500;
  cursor: pointer;
}

.cw-file__name {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-data);
  color: var(--cw-text-muted);
  overflow-wrap: anywhere;
}

/* D-024 bildirimi. Kodun yanında, kod girildiği anda okunacak yerde —
 * altbilgide bir satır değil. */
.cw-consent {
  margin-top: 0.5rem;
}

/* ── Teklif ───────────────────────────────────────────────────────────── */

.cw-quote {
  margin-top: 2rem;
}

/* Gece bandında (D-060, `.cw-on-feature` rolleri): sayfada yapılacak tek
 * iş o. Başlık kartın içinde. Kartın payı, kenarı ve köşesi kararın bandıyla
 * ortak — aşağıda, `.cw-decide--feature`'ın yanında. */

.cw-quote__card .cw-facts {
  margin-top: 1.25rem;
}

.cw-quote__total {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h1);
  font-weight: 600;
  font-variant-numeric: var(--cw-numeric-tabular);
  color: var(--cw-text);
}

.cw-quote__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ── Sipariş listesi ──────────────────────────────────────────────────── */

.cw-orders {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

/* Satır iki sütun: solda siparişin kendisi, sağda durumu ve o durumda
 * yapılabilecek şey. `align-items: start` — satır artık ilerleme çizgisini de
 * taşıdığı için uzun, ve rozetin ortalanması onu hiçbir şeyin hizasına
 * düşürmüyordu. */
.cw-order {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem 2rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: var(--cw-card);
}

@media (min-width: 44rem) {
  .cw-order {
    grid-template-columns: 1fr auto;
    align-items: start;
  }
}

/* Sabit iki sütun, `auto` değil: `auto` her satırı kendi içeriğine göre
 * ölçüyor ve ilerleme çizgileri satırdan satıra kayıyordu. Aynı şeyi gösteren
 * dört nokta, her kartta farklı yerde başlayınca karşılaştırılamaz oluyor —
 * ve bir listenin işi tam olarak karşılaştırmak. */
@media (min-width: 68rem) {
  .cw-order {
    grid-template-columns: minmax(0, 1fr) 30rem 10rem;
    align-items: center;
  }

  /* Üç sütunda ad tek satır: uzun bir dosya adı iki satıra kırılıp ilerleme
   * çizgisine dayanıyordu (B11b). Tamamı bağlantının `title`'ında. */
  .cw-order__name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Kırpılan ad, klavye odağının halkasını da kırpıyordu: içeride. */
  .cw-order__link:focus-visible {
    outline-offset: -2px;
  }
}

/* Motor bu siparişin üstünde. Sol kenarda coral bir şerit — D-028: coral
 * yapay zekânın, ve listede AI'ın çalıştığı tek an bu. Bir sonraki durumda
 * şerit gidiyor; ikisi işaretlenseydi işaret olmaktan çıkardı. */
.cw-order--live {
  border-left: 4px solid var(--cw-ai-500);
}

.cw-order__main {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  min-width: 0;
}

.cw-order__body {
  min-width: 0;
}

/* Dosya türü etiketi (D-060): satırın başında küçük bir kâğıt. */
.cw-order__type {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 42px;
  border-radius: 4px;
  background: var(--cw-sunken);
  color: var(--cw-text-muted);
  font-family: var(--cw-font-sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Kararınızı bekleyen sipariş: gece bandı (D-060) ──
 * Sayfanın en önemli şeyi; ad serif ve büyük, eylem coral. Renkler
 * `.cw-on-feature` rollerinden. */
.cw-order--feature {
  /* Kenar burada yazılmıyor: `.cw-order`'ın `--cw-line` çizgisi bu kapsamda
   * bandın çizgisi, ve koyu modda kartı sayfadan ayıran o. */
  /* `.cw-order` kendi kart zeminini veriyor ve token dosyasındaki
   * `.cw-on-feature` zemininden sonra yükleniyor; bant lacivert. */
  background: var(--cw-feature);
}

.cw-order--feature .cw-order__type {
  width: 52px;
  height: 66px;
  background: var(--cw-paper);
  color: var(--cw-paper-ink);
}

.cw-order--feature .cw-order__name {
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-h2);
  font-weight: 400;
}

/* Üstte ad ve eylem, altta ilerleme çizgisi: üç dar sütunda büyük serif
 * ad harf harf kırılıyordu. */
@media (min-width: 44rem) {
  .cw-order.cw-order--feature {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main side" "track track";
    align-items: start;
  }

  .cw-order--feature > .cw-order__main { grid-area: main; }
  .cw-order--feature > :is(.cw-track, .cw-order__track-slot) { grid-area: track; }
  .cw-order--feature > .cw-order__side { grid-area: side; }

  .cw-order--feature .cw-order__name {
    white-space: normal;
  }
}

.cw-order--feature .cw-btn {
  white-space: nowrap;
}

/* Kararı bekleyenler: listenin üstünde, kendi başlığıyla (B11). */
.cw-waiting {
  margin-top: 1.75rem;
}

.cw-orders-head {
  margin-top: 2.5rem;
}

.cw-order__name {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui-title);
  font-weight: 600;
  color: var(--cw-text);
  overflow-wrap: anywhere;
}

/* Bağlantı ama altı çizili değil: satırın başlığı o, ve bir liste başlığının
 * altını çizmek her satıra bir çizgi koymak demek. Üstüne gelince geliyor. */
.cw-order__link {
  color: inherit;
  text-decoration: none;
}

.cw-order__link:hover {
  text-decoration: underline;
}

.cw-order__note {
  margin-top: 0.4rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  line-height: var(--cw-lh-ui);
  color: var(--cw-text-muted);
}

.cw-order__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
}

@media (max-width: 43.99rem) {
  .cw-order__side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
  }
}

.cw-order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ── İlerleme çizgisi ─────────────────────────────────────────────────── */
/*
 * Rozet "şu an ne" diyor; bu "yolun neresi" diyor. Dört kilometre taşı
 * her zaman görünüyor — atlanan bir adım, olmayan bir adıma benziyor.
 *
 * Renk tek başına anlam taşımıyor (DESIGN.md §6.1): biten adımda bir onay
 * imi, yürüyen adımda kalın bir etiket var, ve ikisi de gri basılmış bir
 * ekranda duruyor.
 */
.cw-track {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

/* Kendi sütununda sarmalanmıyor: sarmalanan bir satırda son adımın bağlantı
 * çizgisi boşluğa uzanıyor, ve dört adım iki satıra bölününce "yol" olmaktan
 * çıkıyor. Sütun bunun için 30rem — en uzun etiket dizisi İspanyolca. */
@media (min-width: 68rem) {
  .cw-track {
    flex-wrap: nowrap;
    margin: 0;
  }

  /* Adımlar arasındaki çizgi YALNIZCA burada — sarmalanmadığı genişlikte.
   * Dar ekranda dört adım iki satıra bölünüyor ve satır sonundaki çizgi
   * hiçbir yere gitmeyen bir çizgi olarak boşluğa uzanıyordu. Bir bağlantı,
   * bağlayacak bir şey olmadığında çizilmemeli. */
  .cw-track__step:not(:last-child)::after {
    content: "";
    width: 1.25rem;
    height: 1px;
    background: var(--cw-line);
  }
}

.cw-track__step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.cw-track__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--cw-line-strong);
  background: var(--cw-card);
  font-family: var(--cw-font-sans);
  font-size: 0.6rem;
  line-height: 1;
  color: var(--cw-card);
}

.cw-track__label {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  letter-spacing: var(--cw-tracking-label);
  text-transform: uppercase;
  color: var(--cw-text-faint);
}

.cw-track__step--done .cw-track__dot {
  border-color: var(--cw-state-success-text);
  background: var(--cw-state-success-text);
}

.cw-track__step--done .cw-track__label {
  color: var(--cw-text-muted);
}

/* Yürüyen adım: içi dolu değil, çevresi belirgin — "burada" demek "bitti"
 * demekten farklı görünmeli. */
.cw-track__step--active .cw-track__dot {
  border-color: var(--cw-selected);
  border-width: 2px;
}

.cw-track__step--active .cw-track__label {
  font-weight: 700;
  color: var(--cw-text);
}

/* Motor adımı — sayfadaki tek coral (D-028).
 *
 * Üç durumun üçünde de coral, yalnızca yürürken değil: renk "bu adım
 * nerede" demiyor, "bu adımı kim yapıyor" diyor. Bittiğini onay imi
 * söylüyor, ve o im gri basılmış bir ekranda da duruyor — renk tek başına
 * hiçbir şey taşımıyor (DESIGN.md §6.1).
 *
 * Koyu modda bitmiş adım öbürleri gibi yeşil (`--cw-track-machine-done`):
 * orada coral basılacak şeyin rengi, ve coral bir onay imi hata gibi
 * okunuyordu (sahibin kullanım turu, 2026-10-23). Sipariş sayfasının
 * çubuklarında açık modda da yeşil — aşağıda, `.cw-track--bars`.
 *
 * Dört kilometre taşından biri, ve yalnızca biri. İkisi işaretlenseydi
 * işaret olmaktan çıkar, süse dönerdi. */
.cw-track__step--machine .cw-track__dot {
  border-color: var(--cw-ai-200);
}

.cw-track__step--machine.cw-track__step--active .cw-track__dot {
  border-color: var(--cw-ai-500);
}

.cw-track__step--machine.cw-track__step--done .cw-track__dot {
  border-color: var(--cw-track-machine-done, var(--cw-ai-600));
  background: var(--cw-track-machine-done, var(--cw-ai-600));
}

/* ── Bölümlü çubuklar: sipariş sayfasının ilerlemesi (D-060) ──
 * Her adım bir şerit ve altında adı; biten adımda onay imi kalıyor (renk
 * tek başına değil). Renkler aşağıda, `--done` kuralında. */
.cw-track.cw-track--bars {
  display: grid;
  /* Adımlar her genişlikte tek sırada: `auto-fit` telefonda 3 + 1 bölüp
   * "Onay"ı tek başına alt satıra düşürüyordu; yol bir çizgi olmaktan
   * çıkıyordu. Dar ekranda etiketler sarar, şeritler sarmaz. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  /* Şeritler aynı hizada: saran bir etiket (Türkçe "DÜZELTME") adımı
   * uzatıyor, ortalanınca şeridi yukarı itiyordu. */
  align-items: start;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
}

.cw-track--bars .cw-track__step {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.cw-track--bars .cw-track__step::before {
  content: "";
  flex: 0 0 100%;
  height: 4px;
  margin-bottom: 0.4rem;
  border-radius: 2px;
  background: var(--cw-line);
}

/* Bitmiş motor adımının noktası çubuğuyla aynı yeşil (sahibi, 2026-10-26):
 * yeşil bir çubuğun yanında coral bir nokta iki ayrı şey söylüyordu. Yalnızca
 * burada; çubuksuz listede coral nokta adımın tek işareti. */
.cw-track--bars .cw-track__step--machine.cw-track__step--done .cw-track__dot {
  border-color: var(--cw-state-success-text);
  background: var(--cw-state-success-text);
}

.cw-track--bars .cw-track__step--done::before {
  /* Bitmiş: onay iminin yeşili; yürüyen: seçim rengi (açıkta lacivert,
   * koyuda coral); bekleyen: çizgi. Gri ile lacivert açık modda 1.5 ölçüyor,
   * ayırt edilmiyordu. Yürüyen coral değil: açık modda coral yalnızca
   * motorun (D-028), ve sayfanın tek coral eylemi Onayla. */
  background: var(--cw-state-success-text);
}

.cw-track--bars .cw-track__step--active::before {
  background: var(--cw-selected);
}

/* Bir kelimelik etiket kendi sütununa sığmazsa bölünüyor: İspanyolca
 * "RECONSTRUCCIÓN" telefonda yanındaki adımın üstüne taşıyordu. */
.cw-track--bars .cw-track__label {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Aradaki bağlantı çizgisi yok: şeritler zaten yol. */
.cw-track--bars .cw-track__step:not(:last-child)::after {
  content: none;
}

/* Boş liste: bir cümle değil, bir davet. Yanında ürünün çizimi
 * (`shared/js/sheet.js`), ki "burada henüz bir şey yok" boş bir kutu gibi
 * değil, ilk belgenin bırakılacağı yer gibi okunsun. Dar ekranda çizim
 * üstte, metin altta. */
.cw-empty {
  display: grid;
  gap: 1.5rem 2.5rem;
  justify-items: center;
  align-items: center;
  margin-top: 1.75rem;
  padding: 2.5rem 1.5rem;
  border: 1px dashed var(--cw-line-strong);
  border-radius: 10px;
  background: var(--cw-card);
  text-align: center;
}

@media (min-width: 44rem) {
  .cw-empty {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    padding: 2.5rem 2.75rem;
    text-align: left;
  }
}

.cw-empty__lead {
  color: var(--cw-text-muted);
  /* `auto`: dar ekranda metin ortalı ve 46ch'lik kutu da ortada durmalı;
   * 0 yazıldığında kutu sola yaslanıp içindeki ortalı satırlar başlıktan
   * kayıyordu. Geniş düzen kendi bloğunda sıfırlıyor. */
  margin: 0.5rem auto 1.5rem;
  max-width: 46ch;
}

@media (min-width: 44rem) {
  .cw-empty__lead {
    margin-inline: 0;
  }
}



/* ── Sipariş detayı ───────────────────────────────────────────────────── */

/* Bölümler arasında nefes. Her biri ayrı bir iş: karar, belge, tartışma. */
.cw-decide,
.cw-release,
.cw-preview,
.cw-history,
.cw-waiting {
  margin-top: 2.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--cw-line);
}

.cw-decide__lead,
.cw-preview__lead,
.cw-waiting__lead {
  margin-top: 0.5rem;
  max-width: var(--cw-measure);
  color: var(--cw-text-muted);
}

/* Müşterinin iki gece bandı, tek kural: teklif kartı (yeni sipariş) ve
 * kararınız (sipariş sayfası) — sayfanın beklediği tek şey (D-060,
 * `.cw-on-feature` rolleri). Burada, `.cw-decide`'dan sonra: ortak bölümün
 * üst çizgisi ve payı yuvarlak bandın kenarında kıvrılıyordu. Dört kenar
 * bandın çizgisiyle: koyu modda lacivert-950 gece-900 sayfada 1.1 ölçüyor,
 * kenarsız bant zemine karışıyordu. Yeni bir bant bu listeye katılır. */
.cw-quote__card,
.cw-decide--feature {
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border: 1px solid var(--cw-line);
  border-radius: 20px;
}

.cw-decide__actions,
.cw-release__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.cw-reject {
  margin-top: 1.5rem;
  max-width: 34rem;
}

/* Belgenin kendisi. Yüksek — bir A4 sayfası okunacak, taranmayacak; kısa bir
 * çerçevede müşteri kaydırma çubuğuyla uğraşıp metni hiç okumuyor. */
.cw-preview__frame {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 30rem;
  margin: 1.5rem 0 1rem;
  border: 1px solid var(--cw-line-strong);
  border-radius: 10px;
  background: var(--cw-stage);
}

/* ── Tartışma ─────────────────────────────────────────────────────────── */

.cw-rounds {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cw-round {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--cw-line);
  border-radius: 10px;
  background: var(--cw-card);
  max-width: 46rem;
}

.cw-round__head {
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-label);
  letter-spacing: var(--cw-tracking-label);
  text-transform: uppercase;
  color: var(--cw-text-faint);
}

/* Gerekçe serif: bu, birinin yazdığı bir cümle — arayüz metni değil, okunan
 * metin (DESIGN.md §7). */
.cw-round__reason {
  margin-top: 0.5rem;
  font-family: var(--cw-font-serif);
  font-size: var(--cw-text-read);
  line-height: var(--cw-lh-read);
  color: var(--cw-text);
  overflow-wrap: anywhere;
}

.cw-round__outcome {
  margin-top: 0.75rem;
  font-family: var(--cw-font-sans);
  font-size: var(--cw-text-ui);
  line-height: var(--cw-lh-ui);
  color: var(--cw-text-muted);
}

.cw-round__note {
  display: inline-block;
  margin-top: 0.35rem;
  font-family: var(--cw-font-serif);
  color: var(--cw-text);
}