/* Review Antenna — リデザイン（ライト・ミニマルSaaS / 黒プライマリ・金星・白カード）。Pico.css の上に重ねる。 */

/* Pico v2 の light テーマ変数と同じ詳細度で、app.css を後勝ちさせる */
:root:not([data-theme="dark"]) {
  /* ルートフォントを 16px 固定。Pico は :where(:root) に font-size:var(--pico-font-size) を当て、
     画面幅で 100%→131.25%（16→21px）まで段階拡大する。参考デザイン(top.html等)は 16px 固定なので、
     広い画面だと本番だけ全体が一回り大きく＝別物に見える。ここで拡大を無効化して忠実度を合わせる。 */
  --pico-font-size: 100%;

  /* Apple ブルー・プライマリ（apple.com 系の #0071e3） */
  --pico-primary-background: #0071e3;
  --pico-primary-hover-background: #0077ed;
  --pico-primary: #0071e3;
  --pico-primary-hover: #0077ed;
  --pico-primary-border: var(--pico-primary-background);
  --pico-primary-hover-border: var(--pico-primary-hover-background);
  --pico-primary-focus: rgba(0, 113, 227, 0.25);
  --pico-primary-inverse: #ffffff;

  --pico-border-radius: 12px;
  /* SF系（macOS/iOS）を最優先、日本語は Hiragino→Noto。Apple 純正の質感に寄せる */
  --pico-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, "Segoe UI", Roboto, sans-serif;

  /* 配色（Apple ライト：ほぼ白の背景・近黒テキスト・上品なグレー） */
  --pico-background-color: #fbfbfd;
  --pico-card-background-color: #ffffff;
  --pico-color: #1d1d1f;
  --pico-h1-color: #1d1d1f;
  --pico-h2-color: #1d1d1f;
  --pico-muted-color: #86868b;
  --pico-muted-border-color: #e8e8ed;
  --pico-card-border-color: #ececf0;
  --pico-form-element-border-color: #d2d2d7;

  --ra-blue: #0066cc;      /* テキストリンク用（Apple のリンクブルー） */
  --ra-amber: #f5a623;     /* レビュー星（やや明るいゴールド） */
  --ra-green: #2f8a5f;
  --ra-red: #d0021b;
}

/* 文字レンダリングを Apple 風に滑らかに */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* 本文リンクは Apple ブルー（トップバー等は個別に上書き） */
a { color: var(--ra-blue); }

main.container { max-width: 920px; padding-block: 2.2rem; }
.narrow { max-width: 460px; margin-inline: auto; }

h1 { font-size: 2.1rem; font-weight: 600; letter-spacing: -0.022em; line-height: 1.1; }
.card h2 { font-weight: 600; letter-spacing: -0.018em; }
.muted { color: var(--pico-muted-color); font-size: 0.85rem; }
.small { font-size: 0.78rem; }
.nowrap { white-space: nowrap; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* トップバー：ブランド左・メール/リンク右 */
.topbar { display: flex; align-items: center; justify-content: space-between;
  font-size: 0.85rem; margin-bottom: 1rem; color: var(--pico-muted-color); }
.topbar a { color: var(--pico-color); }
.topbar .brand { display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 1.05rem; font-weight: 700; color: var(--pico-color); letter-spacing: -0.01em; }
.topbar .brand-icon { color: #111114; flex: none; }
.topbar .brand { white-space: nowrap; }
.topbar-right { display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem 0.7rem; justify-content: flex-end; }
.topbar-right .topbar-email { color: var(--pico-muted-color); white-space: nowrap; }
.topbar-right .sep { color: var(--pico-muted-border-color); }

/* テナント切替（複数テナント所属時のみ表示）。セレクタ＋ロールバッジ */
.tenant-bar { display: inline-flex; align-items: center; gap: 0.45rem; }
.tenant-switch { margin: 0; flex: none; }
.tenant-switch select {
  margin: 0; width: auto; max-width: 16rem; height: auto;
  padding: 0.2rem 1.6rem 0.2rem 0.6rem;
  font-size: 0.82rem; line-height: 1.2; border-radius: 8px;
  background-color: var(--pico-card-background-color, #fff);
}
.role-badge {
  flex: none; white-space: nowrap;
  font-size: 0.72rem; font-weight: 500; color: #6e6e73;
  background: #f0f0f2;
  padding: 0.14rem 0.55rem; border-radius: 999px; letter-spacing: 0;
}

/* カード */
.card { border: 1px solid var(--pico-card-border-color); border-radius: 18px;
  padding: 1.7rem 1.9rem; margin: 1.3rem 0; background: var(--pico-card-background-color);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04); }
.card h2 { margin-top: 0; margin-bottom: 0.55rem; font-size: 1.15rem;
  display: flex; align-items: center; gap: 0.6rem; }

/* バッジ（ピル） */
.badge { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.72rem;
  font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; line-height: 1.5;
  white-space: nowrap; }
.badge .dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }
/* ストア＝白地アウトライン＋色ドット */
.badge.app_store, .badge.google_play { background: #fff; border: 1px solid var(--pico-muted-border-color);
  color: #6b6c72; font-weight: 500; }
.badge.app_store .dot { background: #0a84ff; }
.badge.google_play .dot { background: #34a853; }
/* ステータス */
.badge.ok { background: #edf3ef; color: var(--ra-green); }
.badge.ok .dot { background: var(--ra-green); }
/* 未設定はドットなしのグレーピル */
.badge.ng { background: #efeff1; color: #8a8b90; }
.badge.ng .dot { display: none; }

/* ボタン（Apple 風の丸ピル）。primary は Apple ブルー（pico 変数）。 */
button, [type="submit"], [type="button"] { border-radius: 980px; font-weight: 500;
  padding: 0.5rem 1.2rem; letter-spacing: -0.01em; transition: background-color 0.18s ease, opacity 0.18s ease; }
button:not(.ghost):not(.del):hover, [type="submit"]:hover { opacity: 0.92; }
.addform button, .vform > button, .rowbtns button, button.ghost, button.del { width: auto; }
.vform > button { width: 100%; }
/* セカンダリ（薄グレーの丸ピル）。Pico は button 内で --pico-color を反転色に再代入するため、
   文字色は明示的な濃色を指定する。 */
button.ghost, .btn-outline { background: #f5f5f7; color: #1d1d1f;
  border: 1px solid transparent; font-weight: 500; padding: 0.5rem 1.2rem; }
button.ghost:hover, .btn-outline:hover { background: #ececf0; opacity: 1; }
/* 削除（控えめな円形アイコンボタン。hover で赤） */
button.del { background: transparent; color: var(--pico-muted-color); border: 1px solid transparent;
  border-radius: 50%; width: 2rem; height: 2rem; padding: 0; font-size: 0.78rem; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; }
button.del:hover { background: #fbeaea; color: var(--ra-red); opacity: 1; }
button.del svg { width: 1.05em; height: 1.05em; }

/* CTAボタン風リンク（ガイド導線など）＝薄グレーの丸ピル */
.dlbtn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 1.1rem;
  border: 1px solid transparent; border-radius: 980px; font-size: 0.88rem;
  background: #f5f5f7; color: var(--pico-color); font-weight: 500; }
.dlbtn:hover { background: #ececf0; text-decoration: none; }
.dlbtn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

/* 入力・選択のフォーカスリング（Apple ブルー） */
input:focus, select:focus, textarea:focus {
  border-color: var(--pico-primary) !important;
  box-shadow: 0 0 0 3px var(--pico-primary-focus) !important; }

/* ガイドへ戻る等のピル型リンク */
.backpill { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.82rem;
  padding: 0.3rem 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: 999px;
  background: #fff; color: var(--pico-color); font-weight: 500; }
.backpill:hover { background: #f7f7f8; text-decoration: none; }

/* 登録フォーム（横並び） */
.addform { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin: 0.6rem 0 0; }
.addform input, .addform button, .addform select { margin: 0; }
.addform select { width: auto; padding: 0.5rem 0.8rem; border-radius: 10px; }

/* まとめて登録：候補のチェックボックス一覧 */
.importlist { display: flex; flex-direction: column; gap: 2px; margin-top: 0.2rem; }
.importrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.4rem;
  border-radius: 8px; cursor: pointer; }
.importrow:hover { background: #f7f7f8; }
.importrow input { margin: 0; flex-shrink: 0; }
.importrow.reg { opacity: 0.5; cursor: default; }
.importname { font-weight: 600; }
/* ストア選択：セグメント切替（App Store / Google Play を常に並べる） */
.addform .segmented { display: inline-flex; align-items: center; gap: 2px;
  background: #f0f0f2; border-radius: 999px; padding: 3px; }
.addform .segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.addform .segmented label { display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.05rem; border-radius: 999px; cursor: pointer; font-weight: 500;
  font-size: 0.9rem; color: #4b4b50; white-space: nowrap; transition: background 0.12s, color 0.12s; }
.addform .segmented label .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; }
.addform .segmented label .dot.as { background: #0a84ff; }
.addform .segmented label .dot.gp { background: #34a853; }
.addform .segmented input:checked + label { background: #fff; color: #1d1d1f;
  font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.04); }
.addform .segmented input:focus-visible + label { outline: 2px solid var(--pico-primary); outline-offset: 2px; }
.addform input { flex: 1; min-width: 220px; border-radius: 12px; }

/* 縦フォーム */
.vform { display: flex; flex-direction: column; gap: 0.6rem; max-width: 520px; margin: 0.6rem 0 0; }
.vform input { margin: 0; }
.vform label { font-size: 0.85rem; color: var(--pico-color); }
.rowbtns { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.8rem; }
.inlineform { display: inline; }

/* アプリ一覧テーブル */
.list-card { padding: 0.3rem 0.4rem; }
table { font-size: 0.92rem; margin: 0; }
/* Pico は th,td に --pico-background-color(ページの灰 #f4f4f5)を当てるため、
   白カードの上で行が灰色に見える。セルを透明にして白カードを透かす。 */
table th, table td { background: transparent; }
table th { font-size: 0.72rem; font-weight: 600; color: var(--pico-muted-color);
  text-transform: none; border-bottom: 1px solid var(--pico-muted-border-color);
  vertical-align: middle; }
/* ヘッダーの各見出しは列幅で横中央寄せ（.num の右寄せより詳細度を上げて上書き） */
thead th, thead th.num { text-align: center; }
table td { border-bottom: 1px solid #f1f1f2; vertical-align: middle; }
table tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 本文セルの横中央寄せ（.num の右寄せより詳細度を上げて上書き） */
.cc, td.num.cc { text-align: center; }
.count { font-weight: 700; }
.appcell { display: flex; align-items: center; gap: 0.7rem; }
.icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; object-fit: cover; }
.noicon { background: var(--pico-muted-border-color); display: inline-block; }

/* 星 + 平均 */
.stars { color: var(--ra-amber); letter-spacing: 1px; }
.avgcell { display: inline-flex; flex-direction: column; align-items: center; gap: 0.1rem; }
/* 平均値は控えめに（星を主役に）。レビュー数の .count とは別扱い */
.avgcell .count { font-weight: 500; font-size: 0.82rem; color: var(--pico-muted-color); }

/* フラッシュ */
.flash { padding: 0.75rem 1rem; border-radius: 12px; margin: 0.9rem 0; font-size: 0.9rem; }
.flash.ok { background: #e7f6ed; color: #137a3a; }
.flash.ng { background: #fde8e8; color: #c02626; }

/* 注意ボックス */
.notice { background: #fdf3e3; color: #9a6a16; padding: 0.85rem 1.05rem;
  border-radius: 12px; font-size: 0.9rem; margin: 0.9rem 0; }
/* アンバーの注記ボックス（! バッジ付き） */
.note { display: block; background: #fdf3e3; color: #9a6a16; position: relative;
  padding: 0.8rem 1rem 0.8rem 2.5rem; border-radius: 12px; font-size: 0.88rem;
  margin: 0.8rem 0; line-height: 1.6; }
.note::before { content: "!"; position: absolute; left: 0.85rem; top: 0.8rem;
  width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ra-amber);
  color: #fff; font-weight: 700; font-size: 0.78rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; }

/* 認証情報「設定済み」行（区切り線 + 左:状態 / 右:変更する） */
.reconfig summary { cursor: pointer; list-style: none; }
.reconfig summary::-webkit-details-marker { display: none; }
.cred-set { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--pico-muted-border-color); margin-top: 1.2rem; padding-top: 1rem; }
.cred-set .ok-text { color: var(--ra-green); font-size: 0.88rem;
  display: inline-flex; align-items: center; gap: 0.45rem; }
.cred-set .ok-text::before { content: "✓"; font-weight: 700; }
.cred-set .change { font-weight: 600; color: var(--pico-color); white-space: nowrap; }
.cred-set .change::after { content: " ›"; color: var(--pico-muted-color); }
.reconfig-body { margin-top: 1.1rem; }

/* レビュー詳細カード（iOS App Store のレビュー一覧風） */
.review { border: 1px solid var(--pico-card-border-color); border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.035);
  padding: 1.25rem 1.4rem; margin: 0.9rem 0; background: #fff; }
.review-title { font-weight: 700; font-size: 1.02rem; }
.review-meta { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.3rem; }
.stars-mono { letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1; }
.stars-mono .on { color: #1b1b1f; }
.stars-mono .off { color: #d4d4d8; }
.review-meta .who { color: var(--pico-muted-color); font-size: 0.85rem; }
.review-body { white-space: pre-wrap; margin-top: 0.55rem; color: #5d5d63; }

/* レビューへの返信 */
.reply-done { margin-top: 0.8rem; padding: 0.6rem 0.9rem; border-left: 3px solid var(--pico-primary);
  background: var(--pico-background-color); border-radius: 0 10px 10px 0; }
.replybox { margin-top: 0.6rem; }
.replybox summary { cursor: pointer; width: max-content; font-size: 0.85rem;
  font-weight: 600; color: var(--pico-color); list-style: none; }
.replybox summary::after { content: " ›"; color: var(--pico-muted-color); }
.replybox[open] summary::after { content: " ⌄"; }
.replyform { margin-top: 0.6rem; }
.replyform textarea { width: 100%; font-size: 0.9rem; margin-bottom: 0; }
.replyform .rowbtns { margin-top: 0.6rem; }

/* ガイド：丸数字ステップ */
.guide-steps { list-style: none; counter-reset: step; padding-left: 0; }
.guide-steps > li { counter-increment: step; position: relative; padding-left: 2.6rem;
  margin: 1.4rem 0; }
.guide-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0.05rem;
  width: 1.7rem; height: 1.7rem; background: var(--pico-primary); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; }
.guide-steps ul { margin-top: 0.4rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.6rem 0 0; }
.chip { font-size: 0.75rem; background: #ececee; color: #6b6c72; padding: 0.2rem 0.6rem;
  border-radius: 999px; }
figure { margin: 0.7rem 0 0; }
figure img { max-width: 100%; border: 1px solid var(--pico-muted-border-color); border-radius: 12px; }
figcaption { font-size: 0.75rem; color: var(--pico-muted-color); margin-top: 0.3rem; }
.shot-todo { border: 1px solid var(--pico-muted-border-color); border-radius: 12px;
  min-height: 150px; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--pico-muted-color); font-size: 0.8rem; margin: 0.7rem 0 0;
  background-color: #faf8f4;
  background-image: repeating-linear-gradient(-45deg, #efece4 0, #efece4 10px, #faf8f4 10px, #faf8f4 20px); }
code { background: #ececee; padding: 0.1rem 0.4rem; border-radius: 6px; font-size: 0.88em; }
.pick { display: block; border: 1px solid var(--pico-card-border-color); border-radius: 14px;
  padding: 1.1rem 1.2rem; margin: 0.9rem 0; font-weight: 700; background: #fff; }
.pick:hover { border-color: var(--pico-primary); text-decoration: none; }
.pick .sub { display: block; font-weight: 400; font-size: 0.82rem;
  color: var(--pico-muted-color); margin-top: 0.2rem; }

/* ログイン */
.login { text-align: center; padding-top: 12vh; }
.login h1 { font-size: 2rem; }
.login p { color: var(--pico-muted-color); }
.login .btn { display: inline-block; margin-top: 1.4rem; padding: 0.8rem 1.8rem;
  background: var(--pico-primary); color: #fff; border-radius: 980px; text-decoration: none; font-weight: 500; }
.login .btn:hover { background: var(--pico-primary-hover); text-decoration: none; }