/* ぶちこみAI の見た目を1か所で決めるファイル。
 *
 * 3つの画面（投入・分類・設定）から読み込む。各ページの <style> より **後ろ** で読み込むので、
 * ここに書いた指定が最後に勝つ。ページ固有の組み方（並び・幅・出し入れ）はページ側に残し、
 * ここでは「素材・余白・動き」だけを扱う。
 *
 * ── Liquid Glass の使いどころ（40_Swipe/design/apple-design/jp/foundations/materials.md より）
 *
 *   1. **コンテンツ層には使わない。** ガラスは「操作するもの」と「読むもの」を分けるためにある。
 *      文章やカードの背景に敷くと階層が濁る。だからここでは、触る部品（見出しバー・大項目・
 *      投入口・保存バー）にだけ当て、本文・入力欄・カードには当てない。
 *   2. **控えめに使う。** 全部がガラスだと、どれが手前か分からなくなって効果が消える。
 *   3. **regular と clear の2種類。** clear は透明度が高く、背景の絵を見せたいときだけ使う。
 *      文字を載せる面は contrast の出る regular を既定にする。
 *
 * ── ガラスは「後ろに何かある」ときだけガラスに見える
 * 単色の上に敷いても、ただの半透明の四角にしかならない。そのため背景に淡いグラデーションを
 * 置いている。主張させないため彩度と明度差はごく小さくしてある。
 *
 * ── 速度への配慮
 * backdrop-filter は重い。中項目のチップのように数十個並ぶものには **使わない**
 * （半透明の塗りだけにする）。実際にぼかすのは画面に数個だけ。
 */

:root {
  /* 余白は4の倍数で刻む。目が「揃っている」と感じるのは寸法が揃っているとき */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* 角丸も段階を決める。部品ごとにばらばらだと雑に見える */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-full: 999px;

  /* 動き。0.2秒前後・終わりが緩む曲線が、指の動きに一番素直につく */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;

  /* ガラス（regular）。文字を載せる面はこちら */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.8);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glass-edge: rgba(0, 0, 0, 0.06);
  --glass-blur: saturate(180%) blur(20px);
  /* 上端の細い光。ガラスの厚みは、この1本があるかどうかで決まる */
  --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.05);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.08), 0 12px 28px rgba(0, 0, 0, 0.09);
  /* 背景のうっすらした色。ガラスが屈折する相手 */
  --tint-a: rgba(99, 102, 241, 0.07);
  --tint-b: rgba(14, 165, 233, 0.055);
  /* 白いカードの上に置く小さな部品。白の半透明では白地に埋もれて輪郭が消えるため、
     文字色を薄く敷いて「へこみ」として見せる */
  --chip-bg: rgba(28, 25, 23, 0.045);
  --chip-bg-hover: rgba(28, 25, 23, 0.085);
  --chip-line: rgba(28, 25, 23, 0.14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg: rgba(60, 56, 52, 0.55);
    --glass-bg-strong: rgba(64, 60, 56, 0.75);
    --glass-line: rgba(255, 255, 255, 0.14);
    --glass-edge: rgba(0, 0, 0, 0.4);
    --glass-spec: inset 0 1px 0 rgba(255, 255, 255, 0.16);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.45);
    --tint-a: rgba(99, 102, 241, 0.16);
    --tint-b: rgba(14, 165, 233, 0.12);
    --chip-bg: rgba(255, 255, 255, 0.07);
    --chip-bg-hover: rgba(255, 255, 255, 0.13);
    --chip-line: rgba(255, 255, 255, 0.16);
  }
}

/* ---- 背景 ----
   ガラスに映る相手を用意する。動かないので読むときの邪魔にならない */
body {
  background-attachment: fixed;
  background-image:
    radial-gradient(1100px 700px at 12% -8%, var(--tint-a), transparent 60%),
    radial-gradient(900px 600px at 96% 4%, var(--tint-b), transparent 55%);
}

/* ---- ガラスの素地 ----
   使うのは「触るもの」だけ。文章やカードには当てない */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-spec), var(--shadow-1);
}

/* ---- 押した感じ ----
   押した瞬間に少しへこむ。指の力がそのまま画面に伝わったように見える */
button,
.gear,
.chips button,
.kinds label {
  transition:
    transform var(--dur-1) var(--ease),
    background-color var(--dur-2) var(--ease),
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease),
    color var(--dur-2) var(--ease);
}
button:active,
.kinds label:active,
.chips button:active {
  transform: scale(0.97);
}

/* 触れる的は44px以上（Appleの指針）。ただし中項目のチップは対象外にする。
   38個が44pxになると縦に伸びて、「一目で全部見える」という決めごとと衝突するため。
   チップは押しやすさを幅と余白で確保する */
.kinds label,
.gear {
  min-height: 44px;
}

/* ---- 見出しバー ----
   スクロールしても残り、下の内容が透けて動く。今どの画面にいるかを見失わない */
.titlebar {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: calc(var(--sp-2) * -1) calc(var(--sp-3) * -1) var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-spec);
}

.gear {
  align-items: center;
  justify-content: center;
  min-width: 44px;
  border-radius: var(--r-sm);
}
.gear:hover {
  background: var(--glass-bg-strong);
  box-shadow: var(--glass-spec);
}
.gear:active {
  transform: scale(0.92);
}

/* ---- 投入口 ----
   この画面の主役。ここに放り込むのが仕事なので、いちばん手前に見せる。
   点線は「ここに落とせる」の合図なので残すが、線を細く淡くして古びた感じを抜く */
.drop {
  border-width: 1.5px;
  border-color: var(--chip-line);
  border-radius: var(--r-lg);
  background: var(--chip-bg);
  transition:
    border-color var(--dur-2) var(--ease),
    background-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
/* 掴んだものを持ってきたとき。はっきり光らせて「離してよい」と分かるようにする */
.drop.over {
  border-style: solid;
  box-shadow:
    0 0 0 4px var(--accent-soft),
    var(--shadow-2);
}
.drop:focus-within {
  border-style: solid;
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* 説明文がボタンの隣で3行に折れて読みにくかったので、入りきらないときは行を分ける */
.droprow {
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}
.droprow span {
  flex: 1 1 100%;
}

/* 投入口の中のボタン。触るものなのでガラスにする */
.attach {
  border-radius: var(--r-full);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-spec), var(--shadow-1);
  transition:
    transform var(--dur-1) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
.attach:active {
  transform: scale(0.97);
}

/* ---- 大項目 ----
   選ぶものなのでガラス。選んだ1つだけが色を持ち、他は沈む */
.kinds label {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-spec), var(--shadow-1);
}
.kinds input:checked + label {
  background: var(--accent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    var(--shadow-2);
}

/* ---- 中項目 ----
   数が多いのでぼかしはかけない（数十個ぼかすと指の動きに追いつかなくなる）。
   半透明の塗りだけで、大項目より一段奥に見せる */
.chips button {
  border-radius: var(--r-full);
  background: var(--chip-bg);
  border-color: var(--chip-line);
  box-shadow: none;
  padding: 8px 14px;
}
.chips button:hover {
  background: var(--chip-bg-hover);
}
.chips button.on {
  background: var(--accent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    var(--shadow-1);
}

/* ---- 入力欄 ----
   **ガラスにしない。** 文字を書く場所は、後ろが透けないほうが読みやすい。
   角丸と枠だけ他と揃えて、同じ設計の部品に見せる */
input[type="text"],
input[type="date"],
input[type="password"],
input[list],
select,
textarea {
  border-radius: var(--r-sm);
  transition:
    border-color var(--dur-2) var(--ease),
    box-shadow var(--dur-2) var(--ease);
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- 主ボタン ----
   1画面に1つだけ色を持つ。迷わせないための約束 */
#submit,
button.primary {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
}
#submit:active,
button.primary:active {
  transform: scale(0.985);
}

/* ---- 保存バー（分類ページ）----
   下に貼り付いて、表の上を滑る */
.bar {
  border-radius: var(--r-md);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-spec), var(--shadow-2);
}

/* ---- 分類ページのカード ----
   中身は読むものなので、ぼかさずに面だけ整える */
.card {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}

/* ---- 手前に出るもの ---- */
.result {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

/* ---- 配慮 ---- */

/* 透明度を下げる設定。ぼかしをやめ、はっきりした面に置き換える */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .titlebar,
  .kinds label,
  .chips button,
  .bar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card);
  }
  body {
    background-image: none;
  }
}

/* コントラストを上げる設定。透けをやめ、枠をはっきりさせる */
@media (prefers-contrast: more) {
  :root {
    --glass-bg: var(--card);
    --glass-bg-strong: var(--card);
    --glass-line: var(--text);
  }
  body {
    background-image: none;
  }
}

/* 動きを減らす設定。位置は変えるが、動かさない */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
  button:active,
  .kinds label:active,
  .chips button:active,
  .gear:active {
    transform: none;
  }
}