/* Telsiz — BE ve FE'nin (ve iki Claude'un) ortak kontrol paneli.
   Üç bölüm: İşler | Kanal | Yapılanlar.
   Kanalın dili "iki istasyon, tek hat": ortadan geçen sinyal hattının iki
   yakasında istasyon kartları. Bölüm daralınca hat sola kayıp tek şeride döner. */

:root {
  --ink:        #0e1726;
  --ink-soft:   #4a5568;
  --ink-faint:  #8593a8;
  --paper:      #eaedf2;
  --card:       #ffffff;
  --rule:       #ccd3dd;
  --rule-soft:  #e3e7ee;
  --signal:     #d18a1c;   /* hop sayacı, "hazır" işler */
  --be:         #0f5c8c;   /* sunucu tarafı — kablo mavisi */
  --fe:         #8a2f5f;   /* arayüz tarafı — erik */
  --go:         #1f6f4f;   /* yürüyen iş */
  --danger:     #a3271f;

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

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow: 0 1px 0 rgba(14,23,38,.04), 0 6px 18px -12px rgba(14,23,38,.26);
  --dur: 170ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* [hidden] tarayıcı kuralı, display veren sınıf kurallarına cascade'de yeniliyor
   (.gate, .taskform gibi). Tek yerden kilitliyoruz. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

:focus-visible { outline: 2px solid var(--be); outline-offset: 2px; border-radius: 3px; }

/* Taraf rengi: her öğe kendi --st'sini alır, alt öğeler ondan miras alır. */
[data-role='be'] { --st: var(--be); }
[data-role='fe'] { --st: var(--fe); }

/* ---------- kimlik ---------- */

.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 640;
  font-size: 15px; letter-spacing: .16em;
}
/* Anten: direk + tepe topu + iki dalga. Ürünün tamamı bu resmin açılımı —
   iki istasyon, aralarında sinyal. */
.wordmark__mark { width: 23px; height: 16px; overflow: visible; }
.wordmark__mark path { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; }
.wordmark__mark circle { fill: var(--signal); }
.wordmark--gate { font-size: 19px; margin-bottom: var(--sp-5); }
.wordmark--gate .wordmark__mark { width: 30px; height: 21px; }

/* ---------- giriş ---------- */

.gate {
  min-height: 100%;
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: linear-gradient(var(--rule-soft), var(--rule-soft)) center / 1px 100% no-repeat, var(--paper);
}
.gate__card {
  width: min(420px, 100%);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.gate__title {
  margin: 0 0 var(--sp-2);
  font-family: var(--display);
  font-variation-settings: 'wdth' 108, 'wght' 620;
  font-size: 26px; letter-spacing: -.01em;
}
.gate__lede { margin: 0 0 var(--sp-5); color: var(--ink-soft); font-size: 14px; }
.gate__error { margin: var(--sp-3) 0 0; color: var(--danger); font-size: 13.5px; }

.field__label {
  display: block; margin-bottom: 6px;
  font: 400 11px var(--mono);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}
.field__input {
  width: 100%; padding: 11px 13px;
  font: 400 14px var(--mono); color: var(--ink);
  background: #fbfcfd; border: 1px solid var(--rule); border-radius: 9px;
  transition: border-color var(--dur);
}
.field__input:focus { border-color: var(--be); }

/* ---------- düğmeler ---------- */

.btn {
  font: 500 14px var(--body);
  border: 1px solid transparent; border-radius: 9px;
  padding: 9px 16px; cursor: pointer;
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #1b2b45; }
.btn--primary:disabled { background: var(--ink-faint); cursor: default; }
.btn--block { width: 100%; margin-top: var(--sp-5); }
.btn--ghost { background: none; border-color: var(--rule); color: var(--ink-soft); padding: 6px 12px; font-size: 13px; }
.btn--ghost:hover { border-color: var(--ink-faint); color: var(--ink); }
.btn--tiny {
  background: none; border-color: var(--rule); color: var(--ink-soft);
  padding: 5px 10px; font-size: 12.5px; border-radius: 7px;
}
.btn--tiny:hover { border-color: var(--ink-faint); color: var(--ink); }
/* "Başlat" kanaldaki tek yeşil düğme: işi agent'a açan hareket bu. */
.btn--go { border-color: var(--go); color: var(--go); font-weight: 600; }
.btn--go:hover { background: var(--go); color: #fff; }

/* ---------- iskelet ---------- */

/* Satırlar açıkça atanır: .switch geniş ekranda display:none olduğunda grid'den
   düşüyor ve panel 1fr satırı yerine auto satırına oturup ekranı doldurmuyordu. */
.app { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
.topbar { grid-row: 1; }
.switch { grid-row: 2; }
.board  { grid-row: 3; }

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-5);
  background: var(--card);
  border-bottom: 1px solid var(--rule);
}
.topbar__brand { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__channel { font: 400 12px var(--mono); color: var(--ink-faint); }
.topbar__channel::before { content: '#'; opacity: .55; }

.live { display: inline-flex; align-items: center; gap: 5px; font: 400 11px var(--mono); color: var(--ink-faint); }
.live__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.live--on .live__dot { background: var(--go); }
.live--off .live__dot { background: var(--danger); }

/* Hat göstergesi — mesaj hangi oturuma düşüyor. */
.held {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--rule); border-radius: 7px;
  font: 400 11.5px var(--mono); color: var(--ink-soft);
}
.held__label { color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }
.held__where {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.held__where:hover { text-decoration: underline; }
.held__pin { color: var(--signal); }

/* Oturum seçici */
.lines {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: 340px; padding: var(--sp-3);
  background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 12px 32px -12px rgba(14,23,38,.4);
}
.lines__lede { margin: 0 0 var(--sp-3); font: 400 12px/1.5 var(--body); color: var(--ink-soft); }
.lines__tip { margin: var(--sp-3) 0 0; font: 400 11.5px var(--mono); color: var(--ink-faint); }
.lines__tip code { background: #f1f4f7; padding: 1px 5px; border-radius: 4px; }
.line {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 7px 0; border-top: 1px solid var(--rule-soft);
}
.line__where { flex: 1; min-width: 0; }
.line__cwd {
  display: block; font: 400 12.5px var(--body); color: var(--ink);
  /* Soldan kırpmak için direction:rtl denenmemeli — baştaki "/" sona kayıyor. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.line__meta { font: 400 10.5px var(--mono); color: var(--ink-faint); }
.line--on .line__cwd { color: var(--go); font-weight: 600; }
.line__take {
  background: none; border: 1px solid var(--rule); border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font: 400 11.5px var(--mono); color: var(--ink-soft);
  white-space: nowrap;
}
.line__take:hover { border-color: var(--go); color: var(--go); }
.held--idle { border-style: dashed; color: var(--ink-faint); }
.held--on .held__where { color: var(--go); font-weight: 500; }
.held__drop {
  background: none; border: 0; cursor: pointer;
  font: 400 11px var(--mono); color: var(--ink-faint);
  padding: 2px 5px; border-radius: 5px;
}
.held__drop:hover { color: var(--danger); background: #f4eceb; }

.stations { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.station { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.station__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--st);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st) 18%, transparent);
}
.station--idle .station__dot { background: var(--rule); box-shadow: none; }
.station__name { font-weight: 500; }
.station__meta { font: 400 11.5px var(--mono); color: var(--ink-faint); }
.station__line {
  font: 400 11px var(--mono); color: var(--go);
  padding: 1px 6px; border-radius: 4px; background: #eef4f1;
}
.station__line--stale { color: var(--danger); background: #f7edec; }

/* Taraf etiketi — BE / FE / ORTAK */
.chip {
  font: 500 10.5px var(--mono);
  letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--st, var(--ink-faint)) 34%, transparent);
  color: var(--st, var(--ink-soft));
  white-space: nowrap;
}

/* İmza: hop sayacı */
.hop { display: flex; align-items: center; gap: var(--sp-3); }
.hop__label { font: 400 11px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.hop__notches { display: flex; gap: 3px; }
.hop__notch { width: 5px; height: 17px; border-radius: 1.5px; background: var(--rule-soft); transition: background var(--dur) ease-out, transform var(--dur) ease-out; }
.hop__notch--on { background: var(--signal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--signal) 35%, transparent); }
.hop__notch--pop { animation: notch-pop 260ms ease-out; }
@keyframes notch-pop { 0% { transform: scaleY(.4); } 55% { transform: scaleY(1.25); } 100% { transform: scaleY(1); } }
.hop__count { font: 500 12px var(--mono); color: var(--ink-soft); }
.hop__hint { font-size: 12px; color: var(--ink-faint); }
.hop--full .hop__count, .hop--full .hop__hint { color: var(--danger); }

/* ---------- bölüm anahtarı (mobil) ---------- */

.switch { display: none; gap: 2px; padding: var(--sp-2) var(--sp-4); background: var(--card); border-bottom: 1px solid var(--rule); }
.switch__btn {
  flex: 1; padding: 8px 4px;
  font: 500 13px var(--body); color: var(--ink-soft);
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
}
.switch__btn b { font: 500 11px var(--mono); color: var(--ink-faint); }
.switch__btn--on { color: var(--ink); border-bottom-color: var(--signal); }

/* ---------- üç bölüm ---------- */

.board {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) minmax(280px, 360px);
  gap: 1px;
  background: var(--rule);
  min-height: 0;
}
.pane { display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--paper); min-height: 0; }
/* İşler: başlık + (açılınca) form + liste. Form gizliyken satır sıfır yüksekliğe
   iner, o yüzden üç satır tanımlı olması sorun değil. */
.pane--tasks   { grid-template-rows: auto auto minmax(0, 1fr); }
.pane--channel { grid-template-rows: auto minmax(0, 1fr) auto; container-type: inline-size; }

.pane__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--card);
  border-bottom: 1px solid var(--rule-soft);
}
.pane__title {
  margin: 0;
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 620;
  font-size: 13px; letter-spacing: .13em; text-transform: uppercase;
}
.pane__note { margin-left: auto; font: 400 11.5px var(--mono); color: var(--ink-faint); }
.pane__head .btn--tiny { margin-left: auto; }
.pane__scroll { overflow-y: auto; min-height: 0; padding: var(--sp-4); }

/* ---------- iş listesi ---------- */

.taskform { padding: var(--sp-4); background: var(--card); border-bottom: 1px solid var(--rule-soft); display: grid; gap: var(--sp-2); }
.taskform__title, .taskform__detail {
  width: 100%; padding: 9px 11px;
  font: 400 14px var(--body); color: var(--ink);
  background: #fbfcfd; border: 1px solid var(--rule); border-radius: 8px;
}
.taskform__detail { resize: vertical; font-size: 13.5px; }
.taskform__title:focus, .taskform__detail:focus { border-color: var(--be); outline: none; }
.taskform__row { display: flex; gap: var(--sp-2); align-items: center; }
.taskform__row--actions { justify-content: flex-end; flex-wrap: wrap; }
.taskform__error { margin: 0; color: var(--danger); font-size: 12.5px; }

.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; }
.seg__btn {
  padding: 6px 12px; font: 500 12px var(--mono);
  background: var(--card); border: 0; border-right: 1px solid var(--rule-soft);
  color: var(--ink-faint); cursor: pointer;
}
.seg__btn:last-child { border-right: 0; }
.seg__btn--on { background: var(--ink); color: #fff; }

.group { margin-bottom: var(--sp-5); }
.group__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint);
}
.group__head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

.task {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--st, var(--ink-faint));
  border-radius: 10px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-2);
  box-shadow: var(--shadow);
}
.task--ready  { border-left-color: var(--signal); }
.task--active { border-left-color: var(--go); }
.task--done   { border-left-color: var(--rule); background: #f7f8fa; box-shadow: none; }
.task__top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.task__id { font: 500 11px var(--mono); color: var(--ink-faint); }
.task__state { margin-left: auto; font: 500 10.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.task--ready  .task__state { color: var(--signal); }
.task--active .task__state { color: var(--go); }
.task__title { font-weight: 600; font-size: 14px; line-height: 1.4; }
.task--done .task__title { color: var(--ink-soft); font-weight: 500; }
.task__detail { margin: 5px 0 0; font-size: 13px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.task__who { margin-top: 6px; font: 400 11.5px var(--mono); color: var(--ink-faint); }
.task__result { margin: 7px 0 0; padding: 8px 10px; background: #f1f4f7; border-radius: 7px; font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; }
.task__actions { display: flex; gap: 6px; margin-top: var(--sp-3); flex-wrap: wrap; }
.task__hint { margin: 6px 0 0; font: 400 11.5px var(--mono); color: var(--signal); }
/* Karşı taraf hiç bağlanmadıysa iş "hazır" görünse de kimse alamaz. */
.task__hint--wait { color: var(--danger); }

/* ---------- kanal ---------- */

.wire { padding: var(--sp-5) var(--sp-4) var(--sp-6); }
.wire__list {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--sp-5);
  min-height: 100%;
}
/* Askı kablosu — listenin kendi yüksekliği boyunca uzar, kaydırmayla birlikte
   gelir. (Kaydırma kutusuna absolute verilirse yalnız ilk ekran boyu kadar
   uzuyordu.) */
.wire__list::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 5px; transform: translateX(-50%);
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  pointer-events: none;
}

.msg { position: relative; width: calc(50% - 22px); animation: msg-in var(--dur) ease-out; }
.msg--mine { align-self: flex-start; }
.msg--peer { align-self: flex-end; }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.msg::after { content: ''; position: absolute; top: 17px; width: 22px; height: 1px; background: var(--rule); }
.msg--mine::after { right: -22px; }
.msg--peer::after { left: -22px; }

.msg__head { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: 6px; font-size: 12.5px; }
.msg--mine .msg__head { justify-content: flex-end; }
.msg__who { font-weight: 600; color: var(--st); }
.msg__time { font: 400 11.5px var(--mono); color: var(--ink-faint); }

.msg__card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: var(--sp-4) var(--sp-4) 14px; box-shadow: var(--shadow);
}
/* İnsan mesajı dolu kenarlı, Claude mesajı kesikli ve hafif renkli zeminli:
   bakışta kimin konuştuğu ayrılır. */
.msg--human .msg__card { border-left: 3px solid var(--st); }
.msg--agent .msg__card {
  background: color-mix(in srgb, var(--st) 4%, var(--card));
  border-color: color-mix(in srgb, var(--st) 22%, var(--rule));
  border-left: 3px dashed color-mix(in srgb, var(--st) 45%, transparent);
}
.msg__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__body code { font: 400 13px var(--mono); background: #f1f3f7; padding: 1px 5px; border-radius: 4px; }

/* Kanal bölümü daralınca hat sola kayar, kartlar tek şeride geçer. */
@container (max-width: 700px) {
  .wire__list::before { left: 8px; transform: none; }
  .msg, .msg--mine, .msg--peer { width: 100%; align-self: stretch; }
  .msg::after, .msg--mine::after, .msg--peer::after { left: -14px; right: auto; width: 14px; }
  .msg--mine .msg__head { justify-content: flex-start; }
  .wire { padding-left: var(--sp-5); }
}

/* ---------- ekler ---------- */

.attach { margin-top: var(--sp-3); border: 1px solid var(--rule-soft); border-radius: 9px; background: #fbfcfd; }
.attach + .attach { margin-top: var(--sp-2); }
.attach__head {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; padding: 8px 11px;
  background: none; border: 0; cursor: pointer;
  font: 500 12.5px var(--mono); color: var(--ink-soft); text-align: left;
}
.attach__head:hover { color: var(--ink); }
.attach__caret { font-size: 10px; color: var(--ink-faint); transition: transform var(--dur); }
.attach--open .attach__caret { transform: rotate(90deg); }
.attach__lines { margin-left: auto; color: var(--ink-faint); font-weight: 400; }
.attach__pre { margin: 0; padding: 11px 13px; border-top: 1px solid var(--rule-soft); overflow-x: auto; font: 400 12.5px/1.55 var(--mono); max-height: 380px; }
.attach__copy {
  display: block; margin: 0 11px 10px auto;
  font: 400 11.5px var(--mono); color: var(--ink-soft);
  background: none; border: 1px solid var(--rule); border-radius: 6px; padding: 3px 9px; cursor: pointer;
}
.attach__copy:hover { color: var(--ink); border-color: var(--ink-faint); }

/* ---------- boş durum ---------- */

.empty { position: relative; text-align: center; padding: var(--sp-6) var(--sp-4); }
.empty__line { margin: 0 0 6px; font-family: var(--display); font-variation-settings: 'wdth' 104, 'wght' 560; font-size: 18px; }
.empty__sub { margin: 0; color: var(--ink-soft); font-size: 13.5px; }
.empty__sub em { font-style: normal; font-family: var(--mono); font-size: 12.5px; }

/* ---------- yazma alanı ---------- */

.composer {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: end;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  background: var(--card); border-top: 1px solid var(--rule);
}
.composer__input {
  width: 100%; min-height: 44px; max-height: 200px; padding: 11px 13px;
  font: 400 14.5px/1.5 var(--body); color: var(--ink);
  background: #fbfcfd; border: 1px solid var(--rule); border-radius: 10px; resize: none;
  transition: border-color var(--dur);
}
.composer__input:focus { border-color: var(--be); outline: none; }
.composer__side { display: grid; justify-items: center; gap: 4px; }
.composer__note { font: 400 11px var(--mono); color: var(--ink-faint); }
.composer__error { grid-column: 1 / -1; margin: 0; color: var(--danger); font-size: 13px; }

/* ---------- yapılanlar ---------- */

.day { margin-bottom: var(--sp-5); }
.day__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font: 400 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
}
.day__head::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* Defter kayıtları hattın üzerinde boncuk gibi dizilir. */
.entry { position: relative; padding: 0 0 var(--sp-4) var(--sp-5); border-left: 1px solid var(--rule); }
.entry:last-child { border-left-color: transparent; }
.entry::before {
  content: ''; position: absolute; left: -4.5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--st); box-shadow: 0 0 0 3px var(--paper);
}
.entry__top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; }
.entry__time { font: 400 11.5px var(--mono); color: var(--ink-faint); }
.entry__who { font-size: 12.5px; font-weight: 600; color: var(--st); }
.entry__title { font-size: 13.5px; font-weight: 500; line-height: 1.45; }
.entry__detail { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: anywhere; }
.entry__files { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.entry__file { font: 400 11px var(--mono); background: #f1f4f7; border: 1px solid var(--rule-soft); border-radius: 5px; padding: 2px 6px; color: var(--ink-soft); }
.entry__task { font: 400 11px var(--mono); color: var(--ink-faint); }

.blank { padding: var(--sp-5) 0; text-align: center; color: var(--ink-faint); font-size: 13px; }

/* ---------- daralma: üç bölüm → sekmeler ---------- */

@media (max-width: 1080px) {
  .board { grid-template-columns: 1fr; }
  .switch { display: flex; }
  .pane { display: none; }
  .board[data-pane='tasks']   .pane--tasks,
  .board[data-pane='channel'] .pane--channel,
  .board[data-pane='log']     .pane--log { display: grid; }
}

@media (max-width: 860px) {
  .topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas: 'brand out' 'stations stations' 'hop hop';
    gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  }
  .topbar__brand { grid-area: brand; }
  .topbar > .btn--ghost { grid-area: out; }
  .stations { grid-area: stations; }
  .hop { grid-area: hop; flex-wrap: wrap; }
  .hop__hint { display: none; }
  .composer { grid-template-columns: 1fr; }
  .composer__side { justify-items: stretch; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }