/*
 * 配信ブースの「オンエアランプ」が主役。ほかは静かに保つ。
 * foam = 吸音パネルの青みがかった灰 / ink = コンソールの深いスレート / lamp = 点灯したタリーランプ
 */
:root {
  --foam: #e4e9e8;
  --ink: #17262b;
  --slate: #4a5e65;
  --rule: #b5c2c3;
  --lamp: #ff4b2b;
  --lamp-hi: #ff8a5c;
  --lamp-off: #c3cfcf;
  --alert: #a3220c;
  --btn-hover: #2d4750;
  color-scheme: light dark;
}

/* スマホは端末のダークモード設定が多いので、ブースの照明を落とした配色も用意する */
@media (prefers-color-scheme: dark) {
  :root {
    --foam: #10191d;
    --ink: #e4e9e8;
    --slate: #9fb0b5;
    --rule: #2c3d43;
    --lamp-off: #2b3a40;
    --alert: #ff8a6b;
    --btn-hover: #c7d1d3;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  -webkit-tap-highlight-color: transparent;
  background: var(--foam);
  color: var(--ink);
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  line-break: strict;
  word-break: auto-phrase; /* 文節で改行する (未対応ブラウザは通常の改行) */
  text-wrap: pretty;
}

a { color: var(--ink); text-underline-offset: .25em; }
.btn, .btn:hover { text-decoration: none; }

main {
  max-width: 42rem;
  margin: 0 auto;
  /* ノッチ・ホームバーの安全領域を避ける */
  padding: max(clamp(1.5rem, 6vw, 4rem), env(safe-area-inset-top))
           max(1.25rem, env(safe-area-inset-right))
           1rem /* 下の余白は著作権表示 (site-footer) が受け持つ */
           max(1.25rem, env(safe-area-inset-left));
}

.site { margin: 0 0 clamp(2.5rem, 9vw, 5.5rem); color: var(--slate); font-weight: 700; }

/* ---- 状態表示: ランプ + 見出し ---- */
.status { display: flex; align-items: center; gap: clamp(1.1rem, 4vw, 2rem); }

.lamp {
  flex: none;
  width: clamp(4.5rem, 16vw, 6.5rem);
  aspect-ratio: 1;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .55) 0 9%, transparent 10%),
    var(--lamp-off);
}
.lamp.on {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .85) 0 9%, transparent 10%),
    radial-gradient(circle, var(--lamp-hi), var(--lamp) 70%);
  box-shadow: 0 0 0 10px rgba(255, 75, 43, .16), 0 0 56px 8px rgba(255, 75, 43, .45);
  animation: warm-up .9s ease-out both;
}
/* ページを開いたときに一度だけ、ランプが温まって点灯する */
@keyframes warm-up {
  0%   { box-shadow: none; filter: saturate(0); }
  35%  { filter: saturate(.4); }
  55%  { filter: saturate(.2); }
  100% { filter: none; }
}

h1 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere; /* 狭い画面でランプの横にはみ出さず折り返す */
  font-size: clamp(1.5rem, 6.2vw, 3.1rem);
  font-weight: 900;
  line-height: 1.25;
}

.lead { margin: 2rem 0 0; max-width: 34rem; }

/* ---- 内容 ---- */
h2 { margin: 3.5rem 0 .25rem; font-size: 1.05rem; font-weight: 900; }

.rows { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.rows li, .rows > div { padding: .85rem 0; border-bottom: 1px solid var(--rule); }

dl.rows > div { display: grid; grid-template-columns: 9rem 1fr; gap: .25rem 1rem; }
dl.rows dt { color: var(--slate); font-weight: 700; }
dl.rows dd { margin: 0; overflow-wrap: anywhere; }
dl.rows ul { margin: 0; padding: 0; list-style: none; }

.note { margin: .75rem 0 0; color: var(--slate); font-size: .9rem; max-width: 34rem; }

.actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }

.btn {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--foam);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation; /* ダブルタップ拡大の遅延を避ける */
}
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn.quiet { background: transparent; color: var(--ink); }
.btn.quiet:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); border-color: var(--ink); }

/* ボタン以外のリンクも指で押せる高さにする (44px以上) */
.actions a:not(.btn) { display: inline-block; padding: .6rem 0; }

.alert { margin: 2rem 0 0; color: var(--alert); font-weight: 700; max-width: 34rem; }

.ok { margin: 2rem 0 0; font-weight: 700; max-width: 34rem; padding-left: .9rem; border-left: 4px solid var(--lamp); }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ---- フォーム (スマホで押しやすい高さ、16px以上の文字) ---- */
.form { margin-top: 1.75rem; max-width: 34rem; }
fieldset.field { border: 0; padding: 0; min-width: 0; }
.field { margin: 0 0 1.6rem; }
.field label, .legend { display: block; margin-bottom: .4rem; font-weight: 700; }
.field .check { margin: 0; font-weight: 400; }

input[type="text"], input[type="email"], input[type="password"] {
  display: block;
  width: 100%;
  min-height: 3rem;
  padding: .7rem .9rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
}
input[readonly] { color: var(--slate); border-color: var(--rule); }
input:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; border-color: var(--ink); }

.hint { display: block; margin: .35rem 0 0; color: var(--slate); font-size: .9rem; line-height: 1.6; }
.rows li .hint { margin-top: 0; }

/* 2択 (リージョン) */
.seg { display: flex; gap: .5rem; }
.opt { position: relative; flex: 1; margin: 0; }
.opt input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.opt span {
  display: block; padding: .75rem; text-align: center; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 4px;
}
.opt input:checked + span { background: var(--ink); color: var(--foam); }
.opt input:focus-visible + span { outline: 3px solid var(--lamp); outline-offset: 2px; }

/* 権限のチェック行 */
.check { display: flex; align-items: center; gap: .85rem; min-height: 2.9rem; border-bottom: 1px solid var(--rule); }
fieldset .check:first-of-type { border-top: 2px solid var(--ink); }
.check input { width: 1.3rem; height: 1.3rem; flex: none; margin: 0; accent-color: var(--ink); }

/* コピー用の欄 */
.copyrow { display: flex; gap: .5rem; margin-top: .9rem; max-width: 34rem; }
.copyrow input { flex: 1; min-width: 0; }

.btn.small { padding: .55rem 1.05rem; min-height: 2.75rem; }
.copyrow .btn { flex: none; }

/* 折りたたみ (登録済みなら1を畳む) */
.fold { margin-top: .75rem; }
.fold > summary { cursor: pointer; padding: .75rem 0; font-weight: 700; min-height: 2.75rem; }
.fold[open] > summary { color: var(--slate); }

/* 連携中のDJ: 1人ごとに小さなランプ */
.grants li { display: flex; align-items: center; gap: .9rem; }
.grant-info { flex: 1; min-width: 0; }
.grant-id { display: block; overflow-wrap: anywhere; }
.lamp-mini {
  flex: none; width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--lamp-off);
}
.lamp-mini.on { background: var(--lamp); border-color: var(--lamp); box-shadow: 0 0 0 4px rgba(255, 75, 43, .18), 0 0 14px 2px rgba(255, 75, 43, .5); }

/* 著作権表示 (garoku.xyz と同じ: 中央揃え・12px・上余白30px・リンクは下線なし) */
footer.site-footer {
  margin: 30px auto 0;
  padding: 0 max(1.25rem, env(safe-area-inset-right)) max(2.5rem, calc(env(safe-area-inset-bottom) + 1.5rem)) max(1.25rem, env(safe-area-inset-left));
  text-align: center;
  color: var(--slate);
  font-size: 12px;
}
a.kanri-link { color: var(--slate); text-decoration: none; }

/* サインイン中の表示 */
.who { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--slate); font-size: .9rem; }
.who p { margin: 0; overflow-wrap: anywhere; }
.who-links { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.5rem; margin-top: .25rem; }
.who-links a, .linklike { display: inline-block; padding: .6rem 0; color: var(--ink); }
.who-links form { margin: 0; }
.linklike { background: none; border: 0; font: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

@media (max-width: 30rem) {
  dl.rows > div { grid-template-columns: 1fr; }
  h2 { margin-top: 2.75rem; }

  /* スマホでは親指で押しやすいよう、ボタンを幅いっぱいに縦に並べる */
  .actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .actions .btn { width: 100%; padding: 1rem 1.25rem; text-align: center; }
  .actions a:not(.btn) { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lamp.on { animation: none; }
}