/* アプリで足した部品。色・余白・文字の大きさは receive.css / journey.css の変数（mockups と同じ）だけを使う */

/* ステージングの帯（全画面の一番上） */
.staging-banner {
  padding: var(--s1) var(--s2);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  border-bottom: 1px solid var(--color-warning);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

a { color: var(--color-primary); }
.back { margin-top: var(--s4); font-size: var(--fs-sm); }
.wrap > .back:first-child { margin-top: 0; margin-bottom: var(--s2); }
.empty { color: var(--color-text-sub); font-size: var(--fs-sm); }

.btn { text-decoration: none; }
.btn:disabled, .mini:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  box-shadow: none;
}
.btn:disabled:hover, .mini:disabled:hover { transform: none; box-shadow: none; }

/* お知らせ（送れました・うまく送れませんでした） */
.flash {
  margin-top: var(--s3);
  padding: var(--s2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-accent);
  font-size: var(--fs-md);
  font-weight: 700;
}
.flash.is-warm { background: var(--color-primary-soft); border-left-color: var(--color-primary); }
.flash.is-error { background: var(--color-warning-soft); border-left-color: var(--color-error); color: var(--color-error); }

/* お客さんのホーム */
.home-cta { margin-top: var(--s3); }
.home-cta .btn { margin-top: var(--s2); }
.pill {
  display: inline-block;
  padding: 0 var(--s1);
  border-radius: var(--radius-sm);
  background: var(--color-accent);
  color: var(--color-on-dark);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.pill.is-sub { background: var(--color-primary); }
.link-list, .mine-list { list-style: none; padding: 0; margin-top: var(--s2); display: grid; gap: var(--s2); }
.link-card {
  display: grid;
  gap: var(--s1);
  padding: var(--s2) var(--s3);
  border-radius: var(--radius);
  background: var(--color-surface);
  border-top: 4px solid var(--color-accent);
  box-shadow: var(--shadow);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.link-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.link-card:focus-visible, .admin-card:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.link-card-top { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-sm); color: var(--color-text-sub); }
.link-card-title { font-size: var(--fs-lg); font-weight: 700; line-height: 1.5; }
.link-card-sub { font-size: var(--fs-sm); color: var(--color-primary); font-weight: 700; }
.mine-list { gap: var(--s1); }
.mine-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  font-size: var(--fs-sm);
}
.mine-list time { color: var(--color-text-sub); }
.mine-title { flex: 1 1 100%; font-size: var(--fs-md); }

/* 相談の画面 */
.rec-box { margin-top: var(--s3); }
.rec-box .btn { margin-top: var(--s2); }
.rec-box audio { display: block; width: 100%; margin-top: var(--s1); }
.rec-box audio[hidden] { display: none; }
.consult-form { margin-top: var(--s4); display: grid; gap: var(--s3); }
.field label { display: flex; align-items: center; gap: var(--s1); font-size: var(--fs-lg); font-weight: 700; }
.req {
  padding: 0 var(--s1);
  border-radius: var(--radius-sm);
  background: var(--color-error);
  color: var(--color-on-dark);
  font-size: var(--fs-sm);
}
.field-hint { font-size: var(--fs-sm); color: var(--color-text-sub); }
textarea {
  display: block;
  width: 100%;
  margin-top: var(--s1);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.8;
  resize: vertical;
}
textarea:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.share-form { margin-top: var(--s2); display: grid; gap: var(--s1); }
.share-form .btn { margin-top: 0; }

/* 見つからない画面 */
.notice { margin-top: var(--s4); padding: var(--s3); border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow); }
.notice-title { font-size: var(--fs-lg); }
.notice p { margin-top: var(--s2); }

/* 岡沢さんの一覧 */
.admin-h1 { margin-top: var(--s3); }
.admin-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, var(--grid-md)); gap: var(--s2); }
.admin-card {
  display: grid;
  gap: var(--s1);
  height: 100%;
  padding: var(--s3);
  border-radius: var(--radius);
  background: var(--color-surface);
  border-top: 4px solid var(--color-line);
  box-shadow: var(--shadow);
  color: var(--color-text);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.admin-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.admin-card.is-new { border-top-color: var(--color-primary); }
.admin-card.is-heavy { border-top-color: var(--color-warning); }
.admin-badges { display: flex; flex-wrap: wrap; gap: var(--s1); min-height: 24px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: 0 var(--s2);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
}
.badge.is-new { background: var(--color-primary); color: var(--color-on-dark); }
.badge.is-new .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-on-dark); }
.badge.is-heavy { background: var(--color-warning-soft); color: var(--color-warning); border: 1px solid var(--color-warning); }
.admin-name { font-size: var(--fs-lg); font-weight: 700; color: var(--color-primary); }
.admin-sub { font-size: var(--fs-sm); color: var(--color-text-sub); }

/* あゆみの相談の中身（状況・気持ち…） */
.consult-detail div { grid-template-columns: 136px 1fr; }
.consult-detail dt { color: var(--color-primary); }

@media (max-width: 480px) {
  .consult-detail div { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .link-card:hover, .admin-card:hover { transform: none; }
}