/*
 * マッハーアプリ（/apps/ 以下）の共通スタイル
 * 見た目は部品の見本の案2（2026-10-28 決定。.claude/memory/project_mach-apps.md）
 * 明るい面: オフホワイトの地・白いカード。暗い面: マッハーツールのダークと同じバイオレット
 */
.mach-apps {
  --ma-bg: #f5f3ed;
  --ma-card: #ffffff;
  --ma-text: #2e2e2c;
  --ma-sub: #5f5c55;
  --ma-line: #e6e2d8;
  --ma-violet: #7c5ac3;
  --ma-violet-text: #6a48b3;
  --ma-band: #3a3048;
  --ma-band-text: #ffffff;
  --ma-check: #3b82f6;
  --ma-shot-bg: #1f2125;
  background: var(--ma-bg);
  color: var(--ma-text);
  /* 日本語を文節で折り返す（「…させな／い。」のように1字だけ落ちるのを防ぐ） */
  word-break: auto-phrase;
  text-wrap: pretty;
}

[data-bs-theme="dark"] .mach-apps {
  --ma-bg: #261d3a;
  --ma-card: #3c3350;
  --ma-text: #e6e1f0;
  --ma-sub: #c2bdd0;
  --ma-line: #4f4566;
  --ma-violet: #9d83d9;
  --ma-violet-text: #b9a3ef;
  --ma-band: #1d1530;
  --ma-check: #60a5fa;
  --ma-shot-bg: #1d1530;
}

.mach-apps a:not(.btn) { color: var(--ma-violet-text); }

/* マッハーアプリの帯（ページの中のブランド） */
.mach-apps .ma-band {
  background: var(--ma-band);
  color: var(--ma-band-text);
}
.mach-apps .ma-band a:not(.btn) { color: #d6c9f6; }
.mach-apps .ma-brand {
  font-weight: 900;
  font-style: italic;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-decoration: none;
}
.mach-apps .ma-brand .mach-mi { color: #f4c20d; }

/* 白いカード（区切りは枠でなく面の色の差） */
.mach-apps .ma-card {
  background: var(--ma-card);
  border-radius: 12px;
}
.mach-apps .text-ma-sub { color: var(--ma-sub); }
.mach-apps .ma-icon-violet { color: var(--ma-violet); }
.mach-apps .ma-card > .mach-mi { font-size: 32px; }

/* 一覧のアプリのカード（全体が押せる。アイコン・文字・矢印）
   文字の列は縮めてよく、入りきらないときだけ折る。auto-phrase の「画像コンプレッサー」などは折れない塊になり、
   320px では文字の列（約 180px）が空き（128px）を超えて矢印をカードの外へ押し出していた（2026-10-29 実測） */
.mach-apps .ma-app-card { display: flex; gap: 1rem; }
.mach-apps .ma-app-card-icon { flex: none; }
.mach-apps .ma-app-card-text { min-width: 0; overflow-wrap: anywhere; }
.mach-apps .ma-app-card-go { flex: none; margin-left: auto; align-self: center; }
/* 狭い幅では並べ方を変える: 上の段にアイコンと矢印、その下に文字を全幅で */
@media (max-width: 379.98px) {
  .mach-apps .ma-app-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon go" "text text";
    gap: 0.75rem 1rem;
  }
  .mach-apps .ma-app-card-icon { grid-area: icon; }
  .mach-apps .ma-app-card-text { grid-area: text; }
  .mach-apps .ma-app-card-go { grid-area: go; justify-self: end; }
}

/* 札（無料・対応 OS。押せない情報）。ボタンの丸・黄と形と色で分ける（2026-10-29 赤間さんが見本の A 案を選んだ） */
.mach-apps .ma-tag {
  display: inline-block;
  border-radius: 3px;
  padding: 0 0.45rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.75;
  background: color-mix(in srgb, var(--ma-text) 8%, transparent);
  color: var(--ma-sub);
}
.mach-apps .ma-tag-free {
  background: color-mix(in srgb, var(--ma-violet) 16%, transparent);
  color: var(--ma-violet-text);
  font-weight: 700;
}

/* まだ押せないもの（App Store 版は準備中）。ボタンの形にせず、印と文字だけ */
.mach-apps .ma-soon {
  color: var(--ma-sub);
  font-size: 0.875rem;
  padding-left: 0.25rem;
}

/* App Store のボタン（副の操作。バイオレットの枠） */
.mach-apps .btn-ma-outline {
  --bs-btn-color: var(--ma-violet-text);
  --bs-btn-border-color: var(--ma-violet);
  --bs-btn-hover-color: var(--ma-violet-text);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ma-violet) 10%, transparent);
  --bs-btn-hover-border-color: var(--ma-violet);
  --bs-btn-disabled-color: var(--ma-sub);
  --bs-btn-disabled-border-color: var(--ma-line);
}

/* アプリのアイコン（macOS のアイコンは絵の中に余白を持つので、角は丸めない） */
.mach-apps .ma-app-icon {
  width: 120px;
  height: 120px;
  flex: none;
}
@media (max-width: 575.98px) {
  .mach-apps .ma-app-icon { width: 88px; height: 88px; }
}

/* スクリーンショット */
.mach-apps .ma-shot {
  background: var(--ma-shot-bg);
  border-radius: 12px;
  padding: 12px;
}
/* 画面写真は Retina 用に 2 倍の画素で置き、img の width・height に画素の半分を書く。
   その幅より大きく出すと引き伸ばされて滲むので、width の値で止めて枠が狭いときだけ縮める。
   CSS で width を指定しない（width: auto でも属性の width が消え、画素の幅で出てしまう） */
.mach-apps .ma-shot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: 6px;
}

/* 2つの版の違い */
.mach-apps .ma-compare { font-variant-numeric: tabular-nums; }
/* 横スクロールの入れ物を位置の基準にする。基準が無いと、表の中の visually-hidden（position: absolute）が
   ページを基準に表の右端へ置かれ、入れ物の外でページの横幅を広げる（390px でページが 484px になった。2026-10-29 実測） */
.mach-apps .table-responsive { position: relative; }
.mach-apps .ma-compare th,
.mach-apps .ma-compare td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--ma-line);
  vertical-align: middle;
}
.mach-apps .ma-compare thead th {
  color: var(--ma-sub);
  font-size: 0.8125rem;
  font-weight: 700;
}
.mach-apps .ma-compare tbody tr:last-child td { border-bottom: 0; }
.mach-apps .ma-compare tbody tr:hover { background: color-mix(in srgb, var(--ma-violet) 5%, transparent); }
.mach-apps .ma-compare .ma-yes { color: var(--ma-check); }
.mach-apps .ma-compare .ma-yes > .mach-mi { font-size: 24px; font-weight: 700; }
.mach-apps .ma-compare .ma-no { color: var(--ma-sub); }

/* 項目名と値 */
.mach-apps .ma-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem 1.25rem; margin: 0; }
.mach-apps .ma-kv dt { color: var(--ma-sub); font-weight: 500; font-size: 0.875rem; }
.mach-apps .ma-kv dd { margin: 0; }

/* 改定履歴（原稿はアプリ側の 改定履歴.md。新しい2つを開き、残りは畳む） */
.mach-apps .ma-changelog h3 { margin: 1.5rem 0 0.5rem; }
.mach-apps .ma-changelog > h3:first-child { margin-top: 0; }
.mach-apps .ma-changelog ul { margin: 0; padding-left: 1.25rem; }
.mach-apps .ma-changelog li { margin-bottom: 0.25rem; }
.mach-apps .ma-changelog li::marker { color: var(--ma-sub); }
.mach-apps .ma-older { margin-top: 1.5rem; border-top: 1px solid var(--ma-line); padding-top: 1rem; }
.mach-apps .ma-older > summary { cursor: pointer; color: var(--ma-violet-text); font-weight: 700; }
.mach-apps .ma-older > summary:hover { text-decoration: underline; }

/* 文中の強調（色文字にせず黄色の蛍光ペン） */
.mach-apps .ma-mark { background: linear-gradient(transparent 60%, color-mix(in srgb, #f4c20d 45%, transparent) 60%); }