/*
 * 全ツール共通のデザイントークンとコンポーネント。
 * ここを変えると全ツールに波及するため、特定ツール向けの調整は各ツールの CSS に置く。
 *
 * ウェブフォントは同梱せず端末のフォントを使う。日本語は Noto Sans JP を優先。
 */

:root {
  color-scheme: light dark;

  --md-font-sans: 'Noto Sans JP', system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans',
    'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', Meiryo, sans-serif;
  --md-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo,
    monospace;

  /* --- Material color roles (light) --- */
  --md-primary: #1a73e8;
  --md-primary-hover: #1765cc;
  --md-on-primary: #ffffff;
  --md-primary-container: #d3e3fd;
  --md-on-primary-container: #041e49;

  --md-background: #f8f9fa;
  --md-surface: #ffffff;
  --md-surface-variant: #f1f3f4;
  --md-on-surface: #202124;
  --md-on-surface-variant: #5f6368;
  --md-outline: #dadce0;
  --md-outline-variant: #e8eaed;

  --md-error: #d93025;
  --md-error-container: #fce8e6;
  --md-on-error-container: #5f1412;

  --md-success: #1e8e3e;
  --md-success-container: #e6f4ea;
  --md-on-success-container: #0d652d;

  --md-warning: #f9ab00;
  --md-warning-container: #fef7e0;
  --md-on-warning-container: #7a5b00;

  /* --- Elevation (Material shadow tokens) --- */
  --md-elevation-1: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --md-elevation-2: 0 1px 2px 0 rgba(60, 64, 67, 0.30), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --md-elevation-3: 0 1px 3px 0 rgba(60, 64, 67, 0.30), 0 4px 8px 3px rgba(60, 64, 67, 0.15);

  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-full: 100px;
}

/* 明示選択はOS設定より優先する */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --md-primary: #8ab4f8;
    --md-primary-hover: #aecbfa;
    --md-on-primary: #062e6f;
    --md-primary-container: #0842a0;
    --md-on-primary-container: #d3e3fd;

    --md-background: #131314;
    --md-surface: #1e1f20;
    --md-surface-variant: #292a2d;
    --md-on-surface: #e8eaed;
    --md-on-surface-variant: #9aa0a6;
    --md-outline: #5f6368;
    --md-outline-variant: #3c4043;

    --md-error: #f2b8b5;
    --md-error-container: #601410;
    --md-on-error-container: #f9dedc;

    --md-success: #81c995;
    --md-success-container: #0d3b1e;
    --md-on-success-container: #ceead6;

    --md-warning: #fdd663;
    --md-warning-container: #4d3c00;
    --md-on-warning-container: #fbe28a;

    --md-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
    --md-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
    --md-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme='dark'] {
  --md-primary: #8ab4f8;
  --md-primary-hover: #aecbfa;
  --md-on-primary: #062e6f;
  --md-primary-container: #0842a0;
  --md-on-primary-container: #d3e3fd;

  --md-background: #131314;
  --md-surface: #1e1f20;
  --md-surface-variant: #292a2d;
  --md-on-surface: #e8eaed;
  --md-on-surface-variant: #9aa0a6;
  --md-outline: #5f6368;
  --md-outline-variant: #3c4043;

  --md-error: #f2b8b5;
  --md-error-container: #601410;
  --md-on-error-container: #f9dedc;

  --md-success: #81c995;
  --md-success-container: #0d3b1e;
  --md-on-success-container: #ceead6;

  --md-warning: #fdd663;
  --md-warning-container: #4d3c00;
  --md-on-warning-container: #fbe28a;

  --md-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --md-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --md-elevation-3: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 4px 8px 3px rgba(0, 0, 0, 0.3);
}

/* フォームコントロール等のブラウザ既定の配色も選択に追従させる */

:root[data-theme='light'] {
  color-scheme: light;
}

:root[data-theme='dark'] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

/*
 * 共通コンポーネントは display を持つため、これが無いと hidden 属性が効かない。
 * 例: <button class="btn" hidden> が inline-flex のまま表示されてしまう。
 */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--md-font-sans);
  background: var(--md-background);
  color: var(--md-on-surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* アイコンの寸法。図形は .icon-mask 側が描く */

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
  vertical-align: middle;
}

/*
 * /assets/icons/*.svg をファイルのまま使うアイコン。HTML にパスデータを埋めないので、
 * ツールが増えてもページが太らず、ブラウザキャッシュにも乗る。
 * 色は地色や文字色に合わせて変わる必要があるが、img では固定されてしまい、外部ファイルの
 * <use> は CSS の継承がシャドウツリーへ及ぶ保証がない。そこで mask で図形を切り抜き、
 * 背景色 (currentColor) を見せている。寸法は .icon 側が決めるので併用すること。
 * mask-image は CSP の img-src に従うため、参照先は同一オリジンに限られる。
 *
 * コーポレートロゴも、アプリバー上ではダークテーマの地色に対して緑が沈むため、
 * 例外的に文字色へ合わせている (ファイル自体の色は変えていない。favicon など
 * 地色が決まらない場所では /assets/stc-logo.svg をそのまま使う)。
 */

.icon-mask {
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.icon-stc-logo {
  -webkit-mask-image: url('/assets/stc-logo.svg');
  mask-image: url('/assets/stc-logo.svg');
}

.icon-dark-mode {
  -webkit-mask-image: url('/assets/icons/dark-mode.svg');
  mask-image: url('/assets/icons/dark-mode.svg');
}

.icon-light-mode {
  -webkit-mask-image: url('/assets/icons/light-mode.svg');
  mask-image: url('/assets/icons/light-mode.svg');
}

/* 視覚的にのみ隠す (フォーカス可能を維持) */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 全インタラクティブ要素にフォーカスリングを付与する */

:focus-visible {
  outline: 3px solid var(--md-primary);
  outline-offset: 2px;
}

/* アプリバーは背景が --md-primary なので、同色のリングでは位置が分からない */
.app-bar :focus-visible {
  outline-color: var(--md-on-primary);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* --- Top app bar --- */

.app-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--md-primary);
  color: var(--md-on-primary);
  padding: 18px 24px;
  box-shadow: var(--md-elevation-2);
  position: sticky;
  top: 0;
  z-index: 10;
}

.app-bar-icon {
  width: 28px;
  height: 28px;
}

.app-bar h1 {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.01em;
}

.app-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.app-bar-actions select {
  font: inherit;
  font-size: 0.8rem;
  padding: 6px 10px;
  border-radius: var(--md-shape-sm);
  border: 1px solid color-mix(in srgb, var(--md-on-primary) 40%, transparent);
  background: color-mix(in srgb, var(--md-on-primary) 12%, transparent);
  color: var(--md-on-primary);
  cursor: pointer;
}

/* 展開時の選択肢はOS描画なので配色を明示する */

.app-bar-actions option {
  background: var(--md-surface);
  color: var(--md-on-surface);
}

/* 狭い画面ではヘッダーを詰める */

@media (max-width: 480px) {
  .app-bar {
    gap: 8px;
    padding: 12px 16px;
  }

  .app-bar-icon {
    width: 22px;
    height: 22px;
  }

  .app-bar h1 {
    font-size: 1rem;
  }

  .app-bar-actions select {
    font-size: 0.72rem;
    padding: 4px 6px;
  }

  .app-bar-actions .icon-button {
    width: 34px;
    height: 34px;
  }
}

main {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}

.lede {
  color: var(--md-on-surface-variant);
  font-size: 0.9rem;
  margin: 0 4px 20px;
}

/* --- Cards --- */

.card {
  background: var(--md-surface);
  border-radius: var(--md-shape-md);
  border: 1px solid var(--md-outline-variant);
  box-shadow: var(--md-elevation-1);
  padding: 20px;
  margin-bottom: 20px;
}

.hint-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.hint-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- Buttons --- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  border-radius: var(--md-shape-full);
  padding: 10px 24px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.btn .icon {
  width: 18px;
  height: 18px;
}

.btn-filled {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--md-elevation-1);
}

.btn-filled:hover {
  background: var(--md-primary-hover);
  box-shadow: var(--md-elevation-2);
}

.btn-filled:active {
  box-shadow: var(--md-elevation-1);
}

.btn-text {
  background: transparent;
  color: var(--md-primary);
  padding: 8px 16px;
}

.btn-text:hover {
  background: color-mix(in srgb, var(--md-primary) 10%, transparent);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  cursor: pointer;
  transition: box-shadow 0.15s ease;
}

.icon-button:hover {
  box-shadow: var(--md-elevation-1);
}

/* アプリバー用の配色バリエーション */

.icon-button-on-primary {
  background: color-mix(in srgb, var(--md-on-primary) 12%, transparent);
  color: var(--md-on-primary);
}

.icon-button-on-primary:hover {
  background: color-mix(in srgb, var(--md-on-primary) 22%, transparent);
}

.icon-button .icon {
  width: 20px;
  height: 20px;
}

/* --- Badges (Material chips) --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--md-shape-full);
  font-weight: 500;
  font-size: 0.75rem;
  white-space: nowrap;
}

.badge::before {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-weight: 700;
}

.badge-ok {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
}

.badge-ok::before {
  content: "\2713";
}

.badge-ng {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.badge-ng::before {
  content: "\2715";
}

/* --- Footer --- */

.page-footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px 40px;
  color: var(--md-on-surface-variant);
  font-size: 0.78rem;
}

.footer-credits {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--md-outline-variant);
  font-size: 0.72rem;
  line-height: 1.8;
}

.footer-credits a {
  color: inherit;
}