/* ファイル直送：DADS の部品の外側（画面の枠と並べ方）だけ。色・字はDADSの変数だけを使う */

[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--color-neutral-white);
  color: var(--color-neutral-solid-gray-900);
}

.c-header { border-bottom: 1px solid var(--color-neutral-solid-gray-200); }
.c-header__inner {
  max-width: calc(960 / 16 * 1rem);
  margin: 0 auto;
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  display: flex; align-items: center; justify-content: space-between; gap: calc(16 / 16 * 1rem); flex-wrap: wrap;
}
.c-brand { font-weight: 700; font-size: calc(18 / 16 * 1rem); }
.c-me { display: flex; align-items: center; gap: calc(8 / 16 * 1rem); font-size: calc(14 / 16 * 1rem); flex-wrap: wrap; }
.c-me .dads-input-text__input { width: calc(180 / 16 * 1rem); }
.c-conn { color: var(--color-neutral-solid-gray-600); }
.c-conn[data-state="on"] { color: var(--color-semantic-success-1); }
.c-conn[data-state="off"] { color: var(--color-semantic-error-1); }

.c-main {
  max-width: calc(960 / 16 * 1rem);
  margin: 0 auto;
  padding: calc(32 / 16 * 1rem) calc(16 / 16 * 1rem) calc(64 / 16 * 1rem);
  display: grid; gap: calc(40 / 16 * 1rem);
}
.c-section { display: grid; gap: calc(16 / 16 * 1rem); }
.c-lead { margin: 0; color: var(--color-neutral-solid-gray-800); }
.c-note, .c-empty { margin: 0; font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }
.c-error { margin: 0; color: var(--color-semantic-error-1); font-weight: 700; }
.c-actions { display: flex; gap: calc(12 / 16 * 1rem); flex-wrap: wrap; }

/* 送り先：押すとファイル選択、ファイルを重ねるとそのまま送る */
.c-peers {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: calc(12 / 16 * 1rem);
  grid-template-columns: repeat(auto-fill, minmax(calc(200 / 16 * 1rem), 1fr));
}
.c-peer {
  width: 100%; box-sizing: border-box; text-align: left; cursor: pointer;
  display: grid; gap: calc(4 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem);
  font: inherit; color: inherit; background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-solid-gray-420); border-radius: calc(8 / 16 * 1rem);
}
.c-peer:hover { border-color: var(--color-key-900); background: var(--color-primitive-blue-50); }
.c-peer:focus-visible { outline: 4px solid var(--color-primitive-yellow-300); outline-offset: 2px; }
.c-peer.is-drop { border: 2px dashed var(--color-key-900); background: var(--color-primitive-blue-50); }
.c-peer__name { font-weight: 700; overflow-wrap: anywhere; }
.c-peer__meta { font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }

.c-code-row { display: flex; gap: calc(8 / 16 * 1rem); align-items: center; flex-wrap: wrap; }
.c-or { font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-600); }
.c-code-input { width: calc(140 / 16 * 1rem); letter-spacing: 0.1em; }
.c-codes { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8 / 16 * 1rem); }
.c-code {
  display: flex; align-items: center; gap: calc(16 / 16 * 1rem); flex-wrap: wrap;
  padding: calc(12 / 16 * 1rem) calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200); border-radius: calc(8 / 16 * 1rem);
}
.c-code__num { font-size: calc(28 / 16 * 1rem); font-weight: 700; letter-spacing: 0.15em; font-variant-numeric: tabular-nums; }

/* 受け渡し：1件ずつ、進み具合の帯つき */
.c-xfers { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(12 / 16 * 1rem); }
.c-xfer {
  display: grid; gap: calc(8 / 16 * 1rem);
  padding: calc(16 / 16 * 1rem);
  border: 1px solid var(--color-neutral-solid-gray-200); border-radius: calc(8 / 16 * 1rem);
}
.c-xfer__head { display: flex; justify-content: space-between; gap: calc(12 / 16 * 1rem); flex-wrap: wrap; }
.c-xfer__title { font-weight: 700; overflow-wrap: anywhere; }
.c-xfer__state { font-size: calc(14 / 16 * 1rem); color: var(--color-neutral-solid-gray-800); font-variant-numeric: tabular-nums; }
.c-xfer__state[data-kind="error"] { color: var(--color-semantic-error-1); font-weight: 700; }
.c-xfer__state[data-kind="done"] { color: var(--color-semantic-success-1); font-weight: 700; }
.c-bar { height: 6px; background: var(--color-neutral-solid-gray-200); border-radius: 3px; overflow: hidden; }
.c-bar__fill { height: 100%; width: 0; background: var(--color-key-900); }
.c-xfer__files { margin: 0; padding: 0; list-style: none; display: grid; gap: calc(4 / 16 * 1rem); font-size: calc(14 / 16 * 1rem); }
.c-xfer__files li { display: flex; justify-content: space-between; gap: calc(12 / 16 * 1rem); align-items: center; }
.c-xfer__files span { overflow-wrap: anywhere; }

.c-dialog {
  border: none; border-radius: calc(12 / 16 * 1rem); padding: calc(24 / 16 * 1rem);
  width: min(calc(520 / 16 * 1rem), calc(100vw - 32px)); box-sizing: border-box;
}
.c-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.c-dialog__title { margin: 0 0 calc(12 / 16 * 1rem); font-size: calc(20 / 16 * 1rem); }
.c-dialog__files {
  margin: 0 0 calc(20 / 16 * 1rem); padding-left: calc(20 / 16 * 1rem);
  max-height: 40vh; overflow: auto; overflow-wrap: anywhere;
}

.c-toast {
  position: fixed; left: 50%; bottom: calc(24 / 16 * 1rem); transform: translateX(-50%);
  background: var(--color-neutral-solid-gray-900); color: var(--color-neutral-white);
  padding: calc(10 / 16 * 1rem) calc(20 / 16 * 1rem); border-radius: calc(8 / 16 * 1rem);
  opacity: 0; pointer-events: none; transition: opacity 120ms;
}
.c-toast.is-shown { opacity: 1; }

@media (max-width: 640px) {
  .c-main { padding-top: calc(20 / 16 * 1rem); gap: calc(32 / 16 * 1rem); }
}