/* Remote access (views/remote.js) and file transfer (views/files.js). Kept apart from
   styles.css so the terminal's styles load with the page that needs them. */

.remote-card { display: grid; gap: 12px; }
.remote-open { align-items: end; gap: 12px; }
.remote-open .rail-field { min-width: 0; }
.remote-hint:empty { display: none; }

.term-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.term-tabs[hidden] { display: none; }
.term-tab { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--glass, rgba(255, 255, 255, 0.03)); }
.term-tab.active { border-color: var(--accent-line); background: var(--accent-soft); }
.term-tab button { box-shadow: none; }
.term-tab-name { display: inline-flex; align-items: center; gap: 4px; }

.term-stage:empty { display: none; }
.term-host {
  height: min(62vh, 640px);
  min-height: 260px;
  padding: 8px;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: #07070d;
  overflow: hidden;
}
.term-host[hidden] { display: none; }
.term-host .xterm { height: 100%; }
.term-host .xterm-viewport { border-radius: 8px; }

.forward-list { display: grid; gap: 8px; }
.forward-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; }
.forward-row code { padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: var(--text-dim); }
.forward-add { gap: 10px; align-items: end; flex-wrap: wrap; }
.forward-add input { width: 7.5em; }

.remote-offers { display: grid; gap: 4px; }
.offer-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.offer-row:last-of-type { border-bottom: 0; }
.offer-head { border-bottom-color: var(--line-2); }

/* Files: transfer actions */
.file-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.file-actions input[type='file'] { display: none; }
.file-transfer { font-variant-numeric: tabular-nums; }
.file-info { display: grid; gap: 8px; }

@media (max-width: 640px) {
  .offer-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); font-size: 0.9em; }
  .term-host { height: 55vh; }
}
.forward-add[hidden], .forward-list[hidden] { display: none; }