/*
  オートモザイクの頁。
  ==========================================================================
  値は道具の theme/index.ts から。**混ぜものをしないこと。**
  白と黒と原色の青だけで、中間色を使わない。薄い灰の罫線も引かない。

  **角は落とさない。** この道具が作るのは四角いタイル。
  1 か所でも丸めると、そこだけ別のアプリの顔になる。
*/

/* 言葉の出し分け（themes/_lib.mjs の LANG_SCRIPT が決める） */
:root[data-lang="ja"] [data-l="en"],
:root[data-lang="en"] [data-l="ja"] { display: none !important; }

:root {
  --key: #0026e6;      /* 押せるもの。**この道具の色** */
  --paper: #ffffff;
  --ink: #000000;
  --sub: #5a5a5a;
}

@font-face {
  font-family: "Plex JP";
  src: url("fonts/IBMPlexSansJP-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Plex JP", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Hiragino Sans", "Noto Sans JP", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- 準備中の一枚 ---------- */
.standby {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4svh, 30px);
  padding: 24px;
  text-align: center;
}

.mark {
  width: clamp(96px, 22svmin, 168px);
  height: auto;
  display: block;
  color: var(--ink);
}

/* 名前。**字間を開ける。** 囲いを使わない代わりに、開いた字が線の役をする */
.brand {
  margin: 0;
  font-size: clamp(22px, 5.4vw, 34px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-indent: 0.14em;   /* 字間は最後の字のうしろにも付く。そのぶん左へ戻す */
  line-height: 1;
}

/* 一言。**名前より小さく、薄く。** 主役は名前のほう */
.note {
  margin: 0;
  font-size: clamp(12px, 2.4vw, 14px);
  font-weight: 700;
  letter-spacing: 0.26em;
  text-indent: 0.26em;
  color: var(--sub);
}

/* ---------- 社の口 ----------
   **青い面に白い字、角は落とさない。** 道具のボタンと同じ組み */
.socials { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.standby .social {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--paper);
  background: var(--key);
  border: 2px solid var(--ink);
  text-decoration: none;
}
.standby .social:hover { background: var(--ink); }
.standby .social:focus-visible { outline: 2px solid var(--key); outline-offset: 3px; }

/* ---------- ストアの黒い札（themes/_lib.mjs の badges()） ----------
   build が、どのテーマの css のうしろにも足す。
   **大きさは --badge だけで決める。** 札の高さは --badge の 3 倍。
   並べる札はどれも同じ高さになる（Apple と Google の札を並べたとき、
   高さが揃っていないと片方が偉そうに見える）。 */
.badges{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:calc(var(--badge, 16px) * .75);
}
a.badge{
  position:relative;
  display:inline-flex;align-items:center;
  gap:.45em;
  height:3em;
  padding:0 1.05em 0 .8em;
  font-size:var(--badge, 16px);
  border-radius:.56em;
  background:#000;color:#fff;
  border:1px solid #A6A6A6;
  text-decoration:none;
  white-space:nowrap;
  font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
  transition:filter .12s ease;
}
a.badge:hover{filter:brightness(1.3)}
a.badge:focus-visible{outline:2px solid currentColor;outline-offset:3px}
a.badge svg{width:1.6em;height:1.6em;margin-top:-.2em;flex:none}
a.badge span{display:flex;flex-direction:column;line-height:1.08;text-align:left}
a.badge b{font-size:1.32em;font-weight:600;letter-spacing:-.02em}
a.badge small{font-size:.7em;font-weight:500;letter-spacing:.01em}
a.badge[data-l="ja"] small{font-size:.74em;letter-spacing:.06em}