/* 両画面で共有する小物（トースト・スピナー・骨組み・補助クラス）。
 * 色の変数（--ink / --paper / --hair など）は各画面の CSS が定義する。 */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ── トースト ── */
.toasts{
  position:fixed;left:0;right:0;bottom:calc(var(--toast-bottom,16px) + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:0 16px;z-index:60;pointer-events:none;
}
.toast{
  pointer-events:auto;display:inline-flex;align-items:center;gap:10px;
  max-width:min(480px,100%);padding:11px 16px 11px 13px;border-radius:12px;
  background:#1C1917;color:#FAFAF9;font-size:13.5px;line-height:1.55;font-weight:500;
  box-shadow:0 10px 30px rgba(12,10,9,.18), 0 1px 2px rgba(12,10,9,.2);
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1);
}
.toast.in{opacity:1;transform:none;}
.toast-ico{width:18px;height:18px;border-radius:50%;flex-shrink:0;position:relative;background:#44403C;}
.toast-ico::after{
  content:"";position:absolute;left:5px;top:5px;width:8px;height:8px;border-radius:50%;background:#FAFAF9;
}
.toast.ok .toast-ico{background:#22C55E;}
.toast.ok .toast-ico::after{
  width:5px;height:9px;border-radius:0;background:none;left:6px;top:2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.toast.error .toast-ico{background:#EF4444;}
.toast.error .toast-ico::after{width:2px;height:8px;border-radius:1px;left:8px;top:4px;}

/* ── スピナー（ボタンの中） ── */
.spin{
  width:14px;height:14px;border-radius:50%;flex-shrink:0;display:inline-block;
  border:2px solid currentColor;border-right-color:transparent;opacity:.85;
  animation:spin .7s linear infinite;vertical-align:-2px;margin-right:8px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── 骨組み（読み込み中） ── */
.sk{
  display:block;border-radius:6px;
  background:linear-gradient(90deg,#ECEAE6 25%,#F5F3F0 40%,#ECEAE6 60%);
  background-size:300% 100%;animation:shimmer 1.3s ease-in-out infinite;
}
@keyframes shimmer{from{background-position:100% 0;}to{background-position:0 0;}}
.sk-card{background:var(--paper,#fff);border:1px solid var(--hair,#E8E6E5);border-radius:12px;padding:16px 18px;margin-bottom:10px;}
.sk-row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.sk-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;}
.sk-l{height:12px;width:38%;}
.sk-t{height:11px;margin:0 0 9px;width:100%;}
.sk-t.short{width:62%;}

@media (prefers-reduced-motion: reduce){
  .toast{transition:none;}
  .spin{animation-duration:1.4s;}
  .sk{animation:none;background:#EFEDE9;}
}