/* ちかちか — シェアの導線(share.js)
   色・余白・角丸・書体はstyle.cssの:rootのトークンだけを使う(昼と夜の2テーマにそのまま追従する)。
   シェアのシートは、きっぷの半券のように点線と切り欠きで「画像」と「リンク」を切り分ける。*/

/* ---- 結果の段:もどるピルの並びの右端に置く「シェア」 ---- */

.cc-share-btn--results {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-left: auto;
  padding: 4px 15px 4px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform var(--dur-press), background-color 0.2s;
}
/* 灯りの丸(チップの丸と同じ)。押す前から点けておく*/
.cc-share-btn--results::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lamp);
  box-shadow: 0 0 0 2px var(--lamp-dim);
}
.cc-share-btn--results:hover { background: var(--lamp-soft); }
.cc-share-btn--results:active { transform: scale(0.97); }

/* ---- 開いた駅名標の「この駅をシェア」 ---- */

.cc-share-btn--station {
  align-self: flex-start;
  border-color: var(--lamp-dim);
  background: var(--lamp);
  color: var(--on-lamp);
  box-shadow: var(--shadow-press);
}
.cc-share-btn--station:active { box-shadow: 0 0 0 var(--lamp-dim); transform: translateY(2px); }

/* ---- シェアのシート(<dialog>) ---- */

html.cc-share-open { overflow: hidden; }

.cc-share {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow);
  /* 切り取り線の切り欠き(.cc-share__perf の丸)は左右の縁からはみ出して半円に見せるので、横は切る */
  overflow: hidden auto;
  overscroll-behavior: contain;
}
.cc-share::backdrop { background: rgba(15, 19, 38, 0.55); }

.cc-share__body { display: flex; flex-direction: column; padding-bottom: 6px; }

.cc-share__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 8px 0 20px; }
.cc-share__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
}
.cc-share__close {
  flex: none;
  width: var(--tap-min);
  height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
}
.cc-share__close:hover { background: var(--paper); }
.cc-share__lead { margin: 0 20px 12px; color: var(--ink-2); font-size: 12px; }

/* 画像の見本。描き終えるまでは灯りの読み込み中*/
.cc-share__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(44dvh, 400px);
  margin: 0 20px;
  border-radius: var(--radius-md);
  background: var(--night);
  overflow: hidden;
}
.cc-share__preview img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.cc-share__preview .cc-loader { color: #eef0f7; }
.cc-share__error { margin: 0 24px; color: #eef0f7; font-size: 13px; text-align: center; }

.cc-share__actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 4px; }
.cc-share__actions .cc-btn { flex: 1 1 140px; }

/* 半券の切り取り線:点線と、両端の切り欠き(紙の地色の丸) */
.cc-share__perf { position: relative; height: 0; margin: 16px 0 4px; border-top: var(--perforation); }
.cc-share__perf::before,
.cc-share__perf::after {
  content: '';
  position: absolute;
  top: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
}
.cc-share__perf::before { left: -8px; border-left-color: transparent; }
.cc-share__perf::after { right: -8px; border-right-color: transparent; }

/* 文言の長さがちがう3つ(「リンクをコピー」が長い)を、中身の幅に合わせて1行に並べる。
   等分にすると375px幅で「ー」だけが2行目に落ちる。入りきらない狭い画面では3つめを次の行へ回す */
.cc-share__links { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px 4px; }
.cc-share__opt {
  flex: 1 1 auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: 6px 8px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur-press), border-color 0.2s;
}
.cc-share__opt:hover { border-color: var(--ink); }
.cc-share__opt:active { transform: scale(0.96); }

.cc-share__more {
  align-self: center;
  min-height: var(--tap-min);
  margin-top: 4px;
  padding: 6px 12px;
  border: 0;
  background: transparent;
  color: var(--rail);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cc-share__url { display: flex; flex-direction: column; gap: 4px; margin: 10px 20px 0; font-size: 11px; color: var(--muted); }
.cc-share__url input {
  min-height: var(--tap-min);
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font: 500 13px/1.4 var(--font-num);
}

.cc-share__note { min-height: 1.6em; margin: 8px 20px 10px; color: var(--ink-2); font-size: 12px; text-align: center; }

/* 狭い画面では下からせり上がるシートにする*/
@media (max-width: 520px) {
  .cc-share {
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    margin: auto 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* 動き: style.cssと同じくtransformとopacityだけ。動きを減らす設定では出さない*/
@media (prefers-reduced-motion: no-preference) {
  .cc-share[open] { animation: cc-fade-up var(--dur-rise) var(--ease-out); }
  .cc-share[open]::backdrop { animation: cc-share-dim var(--dur-rise) var(--ease-out); }
}
@keyframes cc-share-dim { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cc-share-btn--results:active, .cc-share-btn--station:active, .cc-share__opt:active { transform: none; }
}