/* Tasarım değişkenleri. Kurallar ve kararlar: .claude/skills/workout-ui (references/tokens.md).
   Renk, yazı boyutu, boşluk ve köşe değerleri yalnızca burada yazılır. Yalnızca koyu tema. */
:root {
  color-scheme: dark;

  --bg: #17191c; /* antrasit */
  --surface: #212428;
  --subtle: #2a2e33;
  --border: #353a40;
  --border-strong: #727a84; /* metin kutusu ve ikincil düğme kenarı: zeminlere karşı en az 3:1 */
  --input-bg: #17191c;
  --text: #f2f3f5;
  --muted: #a4acb5;
  --placeholder: #80878f; /* önceki değer ipucu: girilen değerden soluk, yine de 4,5:1 */
  --accent: #f06b29; /* simgedeki turuncu */
  --accent-text: #17191c; /* turuncu dolgunun yazısı: beyaz yazı turuncuda 3:1'de kalır */
  --accent-soft: rgba(240, 107, 41, 0.16);
  --highlight: var(--accent);
  --chart-line: #e8641f; /* turuncunun koyu zemin bandına indirilmiş tonu (dataviz doğrulayıcısı) */
  --ok: #5fcf8f;
  --ok-soft: rgba(95, 207, 143, 0.14);
  --danger: #ff7166;
  --danger-soft: rgba(255, 113, 102, 0.14);
  --warn-bg: rgba(217, 164, 65, 0.14);
  --warn-border: #d9a441;

  --font-size-xs: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-pill: 999px;
  --tap: 44px; /* en küçük dokunma alanı */
  --icon-md: 20px;
  --icon-lg: 24px;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.4);
  --duration-slide: 200ms; /* sekme geçişinde içeriğin ve sekme çizgisinin kayması */
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Chrome'un yatay kaydırmayla geri/ileri gitmesi kapalı: ana ekranlarda kaydırma sekme değiştirir.
     Telefonun kendi kenar hareketi (iPhone'da geri/ileri, Android'de geri) sürer. */
  overscroll-behavior-x: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--font-size-md) / 1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-4);
}

a {
  color: var(--accent);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

h1 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

h2 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.25;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend,
.field label,
.form-title {
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.muted {
  margin: 0;
  color: var(--muted);
}

.eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
}

/* Kart */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* Uzun başlık alt satıra geçer; "Hedef" ilk satırla hizalı kalır ve küçülmez. */
.card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.card-head h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

.target {
  flex: none;
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

/* Düğmeler: ana (turuncu dolgu), ikincil (nötr çerçeve), ekleme (turuncu çerçeve), tehlikeli (kırmızı). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap);
  padding: var(--space-2) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button.primary {
  background: var(--accent);
  color: var(--accent-text);
}

.button.secondary {
  border-color: var(--border-strong);
}

.button.add {
  border-color: var(--accent);
  color: var(--accent);
}

.button.danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* Küçük düğme de en az 44 × 44 px'tir; yalnızca yatay boşluğu dardır ("Sil" gibi kısa yazıda da). */
.button.small {
  min-width: var(--tap);
  padding: var(--space-2) var(--space-3);
  border-color: var(--border-strong);
  font-weight: 500;
}

.button.small.danger {
  border-color: var(--danger);
  color: var(--danger);
}

.button.small.icon {
  width: var(--tap);
  padding: 0;
  font-size: var(--font-size-lg);
}

.button.block {
  width: 100%;
}

.button:active:not(:disabled) {
  filter: brightness(0.9);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.link-button {
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* Eylem satırındaki düğmeler satırı paylaşır ("Kaydet / Vazgeç" yan yana, ana eylem solda); tek düğme
   satırı kaplar, sığmayan alt satıra geçer. */
.actions > .button {
  flex: 1 1 auto;
}

/* Silme ve sıfırlama: sayfanın sonunda, ana eylemlerden ayrı ve tam genişlikte. */
.page-actions {
  display: flex;
  flex-direction: column;
  margin: var(--space-6) 0 var(--space-2);
}

/* Form alanları */
.field {
  display: flex;
  flex-direction: column;
}

.field label {
  display: block;
}

input[type="text"],
select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-lg); /* 16 px altı iPhone'da odaklanınca ekranı yakınlaştırır */
}

input[type="text"] {
  font-variant-numeric: tabular-nums;
}

/* Sayı kutusunda girilen değer kalın, önceki değer ipucu ince ve soluk: ipucu kutuyu doldurmaz. */
input[inputmode="decimal"],
input[inputmode="numeric"] {
  font-weight: 600;
}

input[type="text"]::placeholder {
  color: var(--placeholder);
  font-weight: 400;
  opacity: 1;
}

input[type="text"]:focus,
select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.message {
  margin: var(--space-3) 0 0;
  color: var(--danger);
}

.message:empty {
  display: none;
}

/* Çipler: radyo seçimleri (makine, hareket, birim, ölçü). Radyo görünür kalır. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text);
  font: inherit;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.chip:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chip input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.chip input:focus-visible {
  outline: none;
}

.chip.add {
  border-style: dashed;
  border-color: var(--border-strong);
  color: var(--accent);
}

.chip.edit {
  border-color: transparent;
  color: var(--muted);
}

/* Mesajlar */
.flash {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--ok-soft);
  color: var(--ok);
}

.reminder {
  margin: 0 0 var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
}

/* Uyarı zemininde turuncu yazı sınırda kalır; bağlantı ana metin renginde ve altı çizili. */
.reminder a {
  color: var(--text);
  font-weight: 600;
}

.status-message {
  color: var(--ok);
}

.status-message:empty {
  display: none;
}

.save-status {
  color: var(--muted);
}

.save-status[data-state="saved"] {
  color: var(--ok);
}

.save-status[data-state="error"] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--danger);
}

/* Ana ekranların başı: uygulama adı ve sekmeler. Açık ekranın sekmesi aria-current="page" taşır. */
.app-head {
  margin-bottom: var(--space-4);
}

.app-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.25;
}

/* Sekmeler satırı kaplar (görseldeki gibi). Yazı büyütülüp sığmazsa sayfa değil çubuk kayar;
   iç boşluk odak halkası kırpılmasın diye. */
.tabs {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-1) calc(-1 * var(--space-1)) 0;
  padding: var(--space-1);
  overflow-x: auto;
}

.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.tab[aria-current="page"] {
  color: var(--accent);
}

/* Durağan çizgi açık sekmenin altındadır. Sekme değişirken ve parmakla sürüklerken onun yerine kayan
   çizgi (.tab-indicator, yeri ve genişliği main.js'ten) görünür. */
.tab[aria-current="page"]::after,
.tab-indicator {
  content: "";
  position: absolute;
  bottom: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.tab[aria-current="page"]::after {
  right: 0;
  left: 0;
}

.tab-indicator {
  bottom: var(--space-1); /* .tabs iç boşluğu: sekmenin alt kenarı */
  left: 0;
  display: none;
  pointer-events: none;
}

.tabs.moving .tab-indicator {
  display: block;
}

.tabs.moving .tab[aria-current="page"]::after {
  display: none;
}

/* Parmakla sürüklerken içerik (başlık ve sekmeler hariç) parmağı izler (--drag-x, main.js); bırakınca
   yerine döner ya da kayıp çıkar. Kaydırmayla açılan ekranın içeriği karşı kenardan kayarak gelir.
   Hepsi "hareketi azalt" açıksa kapalıdır. Kayarken sayfada yatay kaydırma çubuğu çıkmasın diye main
   o sırada yatayda kırpılır. */
@media (prefers-reduced-motion: no-preference) {
  main:has(> .swipe-drag, > .swipe-settle, > .slide-left, > .slide-right) {
    overflow-x: clip;
  }

  .swipe-drag > :not(.app-head),
  .swipe-settle > :not(.app-head) {
    transform: translateX(var(--drag-x, 0));
  }

  .swipe-settle > :not(.app-head),
  .tab-indicator.animate {
    transition: transform var(--duration-slide) ease-out, width var(--duration-slide) ease-out;
  }

  .slide-left > :not(.app-head) {
    animation: slide-in-left var(--duration-slide) ease-out;
  }

  .slide-right > :not(.app-head) {
    animation: slide-in-right var(--duration-slide) ease-out;
  }
}

/* Parmak sola kaydıysa yeni içerik sağdan, sağa kaydıysa soldan gelir. */
@keyframes slide-in-left {
  from {
    transform: translateX(100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(-100%);
  }
}

/* Alt ekranların başı: geri bağlantısı ve başlık */
.page-head {
  margin-bottom: var(--space-4);
}

.page-head .back + h1 {
  margin-top: var(--space-1);
}

.back {
  display: inline-flex;
  align-items: center;
  min-width: var(--tap); /* kısa gün adında ("← Pull") da */
  min-height: var(--tap);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

/* Ana ekran */
.next,
.resume {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.resume {
  margin-bottom: var(--space-3);
  border-color: var(--highlight);
}

.next h2,
.resume h2 {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  overflow-wrap: anywhere;
}

.next .button,
.resume .button {
  min-width: 10rem;
  margin-top: var(--space-3);
}

/* Sıradaki kartı: solda gün, sağda günün görseli (süs; alt=""). Görsel metni ezmez, küçülmez. */
.next-body {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  align-self: stretch;
}

.next-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.day-art {
  flex: none;
  width: 88px;
  height: 88px;
  object-fit: contain;
}

@media (max-width: 359px) {
  .day-art {
    width: 64px;
    height: 64px;
  }
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
}

.section-head .section-title {
  margin: 0;
}

.section-title {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.section-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  color: var(--accent);
  text-decoration: none;
}

/* Başka ekrana götüren liste öğeleri: ana sayfadaki günler, geçmiş, ilerleme listesi. */
.days {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.day {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

.day-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.day-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.day .icon {
  color: var(--muted);
}

.empty-state {
  margin-top: var(--space-2);
}

/* Geçmiş: aylara göre gruplar, solda tarih rozeti (gün sayısı ve kısa gün adı). */
.month-title {
  margin: var(--space-5) 0 var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-md);
  font-weight: 500;
}

.page-head + .month-title,
.flash + .month-title {
  margin-top: 0;
}

.history .day {
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
}

.date-badge {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--subtle);
  line-height: 1.15;
}

.date-badge-day {
  font-size: var(--font-size-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.date-badge-weekday {
  color: var(--muted);
  font-size: var(--font-size-xs);
}

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

.entry h2 {
  font-size: var(--font-size-md);
}

.entry-sets {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--font-size-lg);
  font-variant-numeric: tabular-nums;
}

.detail-actions {
  margin-top: var(--space-4);
}

/* Ayarlar */
.settings-section + .settings-section {
  margin-top: var(--space-3);
}

/* Kart başlığındaki simge süstür (turuncu, sınırlı vurgu); adı başlık yazısı verir. */
.card-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-title .icon {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--accent);
}

.settings-section h2 + p {
  margin-top: var(--space-2);
}

.settings-section p {
  margin: var(--space-2) 0 0;
}

.file-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  color: var(--muted);
  font-size: var(--font-size-sm);
}

.file-field input {
  color: var(--muted);
  font: inherit;
}

.file-field input::file-selector-button {
  min-height: var(--tap);
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.restore-summary {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--warn-border);
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
}

.restore-summary p:first-child {
  margin-top: 0;
}

/* Uyarı zemininde kırmızı yazı (4,46:1) ve gri kenar (2,76:1) sınırın altında kalır; düğmeler kart
   zemininde durur (5,79:1 ve 3,59:1). */
.restore-summary .button {
  background: var(--surface);
}

/* Antrenman ekranı */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.topbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar h1 {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-xl);
  text-align: center;
}

.topbar .save-status:not(:empty) {
  margin-top: var(--space-2);
}

#workout-message {
  margin: 0 0 var(--space-3);
}

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

/* Kartların üstünde en uzun süredir ilerlemeyen hareketler: yalnızca bilgi, turuncu yok. Başlık
   "Sıradaki" gibi küçük üst başlıktır; hareket adı öne çıkar, uzun ad alt satıra geçer. */
.stalled {
  margin-bottom: var(--space-3);
}

.stalled h2 {
  color: var(--muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

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

.stalled-list li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.stalled-name {
  font-weight: 600;
}

.stalled-list .muted {
  font-size: var(--font-size-sm);
}

.options {
  margin-top: var(--space-3);
}

.suggestion {
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

.machines {
  margin-top: var(--space-3);
}

.no-machine {
  margin-bottom: var(--space-2);
}

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

.machine-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.machine-list li > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.machine-list li.editing {
  display: block;
  padding: var(--space-3);
}

.machine-actions {
  display: flex;
  flex: none;
  gap: var(--space-2);
}

.archived-title {
  margin-top: var(--space-1);
  color: var(--muted);
}

.machine-list.archived li {
  border-style: dashed;
  color: var(--muted);
}

.unit-locked {
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.machine-edit .units {
  margin-top: var(--space-3);
}

.machine-form {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
}

.form-title {
  color: var(--text);
  font-weight: 600;
}

.units {
  margin-top: var(--space-3);
}

.last {
  margin: var(--space-3) 0 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--subtle);
  font-variant-numeric: tabular-nums;
}

.last.empty {
  color: var(--muted);
}

.counter {
  margin: var(--space-2) 0 0;
  color: var(--muted);
}

.progress-live {
  margin: var(--space-2) 0 0;
  color: var(--highlight);
  font-weight: 600;
}

.progress-live:empty {
  display: none;
}

/* Ağırlık ve tekrar girişi: tek ağırlık kutusu, set başına tekrar kutusu. */
.weight {
  margin-top: var(--space-3);
}

.weight input {
  max-width: 160px;
}

.reps {
  margin-top: var(--space-3);
}

.rep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
  gap: var(--space-2);
}

.rep {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.rep span {
  color: var(--muted);
  font-size: var(--font-size-xs);
}

.set-buttons {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* "+ Hareket ekle" ile yalnızca bu antrenmana eklenen kart */
.extra-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--font-size-sm);
}

.add-exercise {
  margin-top: var(--space-4);
}

.extra-form {
  margin-top: var(--space-3);
}

.extra-form .field + .field {
  margin-top: var(--space-3);
}

/* Başka bir gün devam ederken */
.conflict h1 {
  margin: var(--space-1) 0 var(--space-2);
}

.conflict-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* "Sil ve … başla" diğer seçeneklerden ayrı (aradaki boşlukla birlikte --space-6). */
.conflict-actions .button.danger {
  margin-top: var(--space-5);
}

/* İlerleme */
.page-head + .section-title {
  margin-top: 0;
}

.progress-counter {
  margin: var(--space-4) 0 0;
  font-weight: 600;
}

.metrics {
  margin-top: var(--space-4);
}

.readout {
  min-height: 64px;
  margin-top: var(--space-4);
}

.readout p {
  margin: 0;
}

.readout-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.readout-value {
  font-size: var(--font-size-xl);
}

.readout-sets {
  font-variant-numeric: tabular-nums;
}

.chart-host {
  margin-top: var(--space-2);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y; /* dikey kaydırma sayfayı kaydırır, yatay sürükleme noktaları gezer */
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}

.chart:focus {
  outline: none;
}

.chart:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.chart .grid {
  stroke: var(--border);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart .tick {
  fill: var(--muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
}

.chart .crosshair {
  stroke: var(--muted);
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.chart .line {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart .dot,
.chart .marker {
  fill: var(--chart-line);
  stroke: var(--surface); /* zemin renginde halka: nokta çizginin üstünde okunur kalır */
  stroke-width: 2;
}

.chart-note {
  padding: var(--space-5) 0 var(--space-2);
}

.records-card {
  margin-top: var(--space-3);
}

.records {
  width: 100%;
  margin-top: var(--space-2);
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.records th {
  color: var(--muted);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-align: left;
}

.records th,
.records td {
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.records tr:last-child td {
  border-bottom: 0;
}

.records td:first-child {
  white-space: nowrap;
}

.records .number {
  white-space: nowrap;
}

/* Program düzenleyici */
.program-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.program-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-right: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.program-link {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  min-height: 56px;
  padding: var(--space-3) var(--space-4);
  color: var(--text);
  text-decoration: none;
}

.move-buttons {
  display: flex;
  flex: none;
  gap: var(--space-1);
}

.program-form {
  margin-top: var(--space-4);
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
}

.inline-form .field {
  flex: 1;
}

.program-form .field + .field,
.exercise-field + .exercise-field {
  margin-top: var(--space-4);
}

.field .sub-label {
  margin-top: var(--space-3);
}

.field-hint {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.machine-summary {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
}

.target-fieldset {
  margin-top: var(--space-4);
}

.target-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.program-form .target-fields .field + .field {
  margin-top: 0;
}

.rename-form {
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--subtle);
}

.rename-form .sub-label {
  margin-top: 0;
}

.rename-form .actions {
  margin-top: var(--space-2);
}

.reset-section {
  margin-top: var(--space-6);
}

.reset-section h2 + p {
  margin-top: var(--space-2);
}

/* Yeni sürüm bandı */
.update-banner {
  position: fixed;
  right: var(--space-3);
  bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  left: var(--space-3);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  max-width: 456px;
  margin: 0 auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-overlay);
}

.update-banner[hidden] {
  display: none;
}

/* Bant görünürken sayfanın sonu bandın altında kalmasın. */
body:has(.update-banner:not([hidden])) main {
  padding-bottom: 96px;
}

.loading,
.fatal {
  margin: 0;
  color: var(--muted);
}

.fatal {
  color: var(--danger);
}