/* ===================================================================
   Psyquence / style.css
   Layout/theme based on user's reference block (16p-like, dark, soft cards)
   =================================================================== */

/* === Theme Variables === */
:root{
  --bg:#0e1624;        /* 深めのネイビー：清潔感のある暗色背景 */
  --card:#101c2e;      /* カード面は少し明るく */
  --muted:#9fb1c7;     /* くすみブルーの補助色 */
  --pri:#2b6de8;       /* 信頼感のあるブルー（主ボタン） */
  --pri-2:#1e4fd3;     /* 濃いブルー（ホバー/グラデ） */
  --ring:#2a3a55;      /* 枠線/フォーカス */
  --ink:#eef3f8;       /* メインテキスト（やわらかい白） */
  --ink-2:#c9d6e6;     /* サブテキスト */
  --white:#ffffff;     /* 純白 */

  /* MBTI風アクセント（タイプ別） */
  --acc-blue:#3b82f6;
  --acc-green:#22c55e;
  --acc-purple:#a855f7;
  --acc-orange:#f97316;
}


/* === Reset/Globals === */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -20%,#122041 0,#0a1325 45%,#050a16 100%) fixed;
}
a{color:inherit; text-decoration:none}

/* === Layout === */
.wrap{max-width:1040px;margin:auto;padding:20px}

/* Header */
header{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
header .brand{display:flex;gap:10px;align-items:center}
.brand__logo{width:32px;height:32px;border-radius:8px;background:#1f2937;display:grid;place-items:center;color:#9ca3af}
.brand__name{font-weight:700}
.nav a{color:var(--ink-2);text-decoration:none;margin-left:16px}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;padding:40px 0}
.hero h1{font-size:clamp(26px,4vw,44px);line-height:1.1;margin:.2em 0}
.hero p{color:var(--ink-2)}

/* Buttons / CTA */
.cta{display:flex;gap:12px;align-items:center;margin-top:18px}
.btn{appearance:none;border:0;border-radius:14px;padding:14px 18px;font-weight:800;cursor:pointer}
.btn--main{background:linear-gradient(180deg,var(--pri),var(--pri-2));color:var(--white)}
.btn--ghost{background:#0b1223;color:var(--ink);border:1px solid var(--ring)}

/* Text helpers */
.muted{color:var(--muted)}
.hint{margin-top:10px;color:#9ca3af}

/* Panels / Cards / Grid */
.panel{background:rgba(255,255,255,.03);border:1px solid #1f2937;border-radius:16px;padding:16px}
.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{background:rgba(255,255,255,.04);border:1px solid #1f2937;border-radius:16px;padding:18px;position:relative}
.badge{position:absolute;top:14px;right:14px;font-size:12px;padding:4px 8px;border-radius:999px;background:#0b1223;border:1px solid #263246;color:#a1a1aa}

/* Lock states */
.is-locked{opacity:.5;filter:saturate(.6)}
.lock-reason{font-size:12px;color:#9aa5b1;margin-top:6px}

/* Footer */
footer{margin:40px 0 20px;color:#94a3b8}

/* === Smartphone layout: single-column tweaks === */
@media (max-width: 640px) {
  .grid--3 { grid-template-columns: 1fr; } /* 3→1列 */
  .wrap { padding: 16px; }                  /* 余白を少しタイトに */
  .card .btn { width: 100%; }               /* ボタンは横いっぱいで押しやすく */
  .hero { grid-template-columns: 1fr; }     /* Heroを1列に */
  .cta { flex-direction: column; align-items: stretch; }
}

/* Optional: hide logout link until auth ready */
#logoutLink { display:none; }

/* === Extra utilities (existing pagesで使える軽量補助) === */
.pill{padding:6px 10px;border-radius:999px;border:1px solid var(--ring)}
.hidden{display:none}
.center{display:grid;place-items:center}
.container{max-width:1040px;margin:0 auto;padding:20px}

/* Progress bar (for quick/therapy if needed) */
.progress{height:10px;border:1px solid #1f2937;border-radius:999px;background:#0a1220;overflow:hidden}
.progress>span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#16a34a)}

/* Forms */
input,select,textarea{
  background:#0b1223;color:var(--ink);
  border:1px solid var(--ring);
  border-radius:12px; padding:10px 12px;
}
input::placeholder, textarea::placeholder{color:#728297}

/* Tables (simple) */
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{padding:10px;border-bottom:1px solid #1f2937}
thead th{color:var(--ink-2)}