/*
  Auto Lab 全ツール共通ベーススタイル
  ------------------------------------------------------------
  読み込まれ方: すべてのツールページの <head> の一番先頭（charsetメタの
  直後）に <link> で差し込まれる（src/utils/portal_builder.py の
  inject_base_css）。ツール自身が後から <style> で同じ要素を上書きする
  ことを前提に、あえて先に読み込ませている。

  これは「デフォルト値」であって「強制」ではない。
    - ツール側が独自の配色・フォーム・ボタンのスタイルを持つ場合、
      同じ詳細度なら文書内で後にあるツール側の <style> が勝つ
      （CSSのカスケード規則どおり）。
    - クラスや属性セレクタでツール側が指定していれば、詳細度の面でも
      このファイルの素のタグセレクタより必ず勝つ。
  そのため、既に作り込まれたツール（shift-to-cal / screen-mask /
  text-to-card 等）の見た目を壊さずに、素のまま・最小限の作り込みしか
  無かったツールにだけ実質的な改善が効く。

  自律ループが生成するツールのHTML構造まで書き換えるものではないため、
  クラス名は極力汎用的なもの（.btn 等、既に site 内で広く使われている
  命名）だけを対象にしている。
*/

:root {
  --ab-bg: #f8fafc;
  --ab-surface: #ffffff;
  --ab-border: #e2e8f0;

  --ab-primary: #4f46e5;
  --ab-primary-hover: #4338ca;
  --ab-primary-ink: #ffffff;

  --ab-heading: #0f172a;
  --ab-text: #334155;
  --ab-muted: #64748b;

  --ab-radius-s: 8px;
  --ab-radius-m: 12px;
  --ab-radius-l: 18px;

  --ab-shadow-btn: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ab-shadow-btn-hover: 0 6px 16px -6px rgba(79, 70, 229, 0.45);
  --ab-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.18);

  --ab-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Noto Sans JP", "Meiryo",
    system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ab-bg: #0f172a;
    --ab-surface: #1e293b;
    --ab-border: #334155;

    --ab-primary: #818cf8;
    --ab-primary-hover: #a5b4fc;
    --ab-primary-ink: #0f172a;

    --ab-heading: #f1f5f9;
    --ab-text: #cbd5e1;
    --ab-muted: #94a3b8;
  }
}

/* ------------------------------------------------------------
   はみ出し防止（スマホでの横スクロール事故を防ぐ最低限の保険）。
   個別要素の box-sizing は上書きしないよう *, *::before, *::after
   ではなく border-box の既定化にとどめる。
------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
}
body {
  max-width: 100%;
}
img, video, canvas, svg, table, pre, iframe {
  max-width: 100%;
}
*, *::before, *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   フォーム部品。素のタグセレクタだけを使い、ツール側の
   クラス・属性セレクタに詳細度で必ず譲る。
------------------------------------------------------------- */
input, select, textarea {
  font-family: var(--ab-font);
  font-size: 15px;
  color: var(--ab-heading);
  background: var(--ab-surface);
  border: 1.5px solid var(--ab-border);
  border-radius: var(--ab-radius-s);
  padding: 10px 14px;
  line-height: 1.5;
  max-width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ab-primary);
  box-shadow: var(--ab-focus-ring);
}
textarea {
  resize: vertical;
}
label {
  color: var(--ab-text);
}

/* ------------------------------------------------------------
   ボタン。button 要素と .btn クラスの両方に既定の見た目を与える。
   プライマリ操作は .btn-primary / .btn--primary のどちらの命名でも
   拾えるようにしておく（ツールごとに命名がまちまちなため）。
------------------------------------------------------------- */
button, .btn {
  font-family: var(--ab-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--ab-heading);
  background: var(--ab-surface);
  border: 1.5px solid var(--ab-border);
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: var(--ab-shadow-btn);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
button:hover, .btn:hover {
  box-shadow: var(--ab-shadow-btn-hover);
  transform: translateY(-1px);
}
button:active, .btn:active {
  transform: translateY(0) scale(0.98);
}
button:disabled, .btn:disabled, .btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button[type="submit"],
.btn-primary, .btn--primary {
  background: var(--ab-primary);
  border-color: var(--ab-primary);
  color: var(--ab-primary-ink);
}
button[type="submit"]:hover,
.btn-primary:hover, .btn--primary:hover {
  background: var(--ab-primary-hover);
  border-color: var(--ab-primary-hover);
}

/* ------------------------------------------------------------
   見出し・本文・補足の既定色（ツール側が独自に指定していれば、
   後勝ちのカスケードで自動的にそちらが優先される）。
------------------------------------------------------------- */
body {
  font-family: var(--ab-font);
  color: var(--ab-text);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--ab-heading);
}
small, .text-muted, .muted {
  color: var(--ab-muted);
}