/* Developer console — 公開LP（site/index.html）と同じトーン。
   色・書体・角丸・影のトークンは LP の :root に揃える。クラス名は変えない。 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=M+PLUS+Rounded+1c:wght@700;800&display=swap");

:root {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --sunken: #F3F4F6;
  --ink: #2B2F36;
  --sub: #6B7280;
  --faint: #9CA3AF;
  --line: #E5E7EB;
  --accent: #FF6B6B;        /* LP の --marker。塗り（ボタン・下線）に使う */
  --accent-deep: #E14B4B;   /* hover */
  --accent-text: #C43C3C;   /* 白地の文字・リンク。コーラルの生値は文字だとコントラスト不足 */
  --accent-soft: #FFECEC;   /* LP の --marker-wash */
  --ok: #0E9F6E;
  --ok-soft: #E6F6F0;
  --warn: #a16207;
  --warn-soft: #fffbeb;
  --danger: #C43C3C;
  --danger-soft: #FFECEC;
  --radius: 14px;
  --radius-btn: 10px;
  --shadow: 0 1px 2px rgba(43, 47, 54, .04), 0 10px 28px rgba(43, 47, 54, .07);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent-text); }
button, input, textarea, select { font: inherit; }
button, .button { min-height: 44px; }

.gnav {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 64px;
  padding: 10px max(20px, calc((100vw - 1080px) / 2));
  display: flex;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
}
/* LP のブランドマーク（site/index.html の .brandmark と同じ図形）。各ページの
   マークアップを触らずに揃えるため CSS で付ける */
.brand::before {
  content: "";
  flex: none;
  width: 26px;
  height: 26px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232B2F36' stroke-width='11' stroke-linecap='round'%3E%3Cpath d='M87.42 56.6 A38 38 0 0 1 12.58 56.6'/%3E%3Cpath d='M12.58 43.4 A38 38 0 0 1 87.42 43.4'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='14' fill='%23FF6B6B'/%3E%3C/svg%3E") center / contain no-repeat;
}
.nav-link {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  color: var(--sub);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); }
.nav-link.active { border-bottom: 2px solid var(--accent); color: var(--ink); font-weight: 700; }
.nav-spacer { flex: 1; }
.session-summary { max-width: 260px; overflow: hidden; color: var(--sub); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

.page { width: min(100% - 40px, 860px); margin: 0 auto; padding: 32px 0 88px; }
.page.wide { width: min(100% - 40px, 1040px); }
.page.narrow { width: min(100% - 40px, 680px); }
.page-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; }
.lead { margin: 0 0 26px; color: var(--sub); font-size: 14px; }
.section-title { margin: 30px 0 12px; font-size: 17px; font-weight: 700; }
.card { margin-bottom: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.muted { color: var(--sub); }
.small { font-size: 12.5px; }
.stack { display: grid; gap: 12px; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.button, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.button:hover, button:hover { background: var(--sunken); border-color: var(--faint); }
.button.primary, button.primary { border-color: transparent; background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(255, 107, 107, .28); }
.button.primary:hover, button.primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 107, 107, .32); }
.button.outline, button.outline { border-color: var(--accent); background: #fff; color: var(--accent-text); }
.button.outline:hover, button.outline:hover { background: var(--accent-soft); border-color: var(--accent); }
.button.danger, button.danger { border-color: #F3C9C5; color: var(--danger); }
.button.danger:hover, button.danger:hover { background: var(--danger-soft); border-color: #F3C9C5; }
button:disabled, .button[aria-disabled="true"] { cursor: not-allowed; opacity: .42; transform: none; box-shadow: none; }
.button.small-button, button.small-button { min-height: 38px; padding: 7px 13px; font-size: 13px; }

.chip { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--sunken); color: var(--sub); font-size: 11px; font-weight: 700; }
.chip.live { background: var(--warn-soft); color: var(--warn); }
.chip.done { background: var(--ok-soft); color: var(--ok); }
.chip.pending { background: var(--warn-soft); color: var(--warn); }

/* 案内は無彩色の地。LP と同じく、色はコーラル（強調）と緑・黄・赤（結果）だけに絞る */
.notice { padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--sunken); color: var(--ink); font-size: 13px; }
/* the base .notice is the informational style; named so a reader does not
   take `banner("info", ...)` for a typo. */
.notice.info { border-color: var(--line); background: var(--sunken); color: var(--ink); }
.notice.success { border-color: #A7E3CF; background: var(--ok-soft); color: var(--ok); }
.notice.warning { border-color: #fcd34d; background: var(--warn-soft); color: var(--warn); }
.notice.error { border-color: #F3C9C5; background: var(--danger-soft); color: var(--danger); }

.login-panel {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: none;
  place-items: center;
  padding: 20px;
  background: rgba(43, 47, 54, .42);
}
.login-panel.show { display: grid; }
.login-card { width: min(100%, 430px); padding: 26px; border-radius: 16px; background: #fff; box-shadow: 0 24px 60px rgba(43, 47, 54, .22); }
.login-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; }
.login-card p { margin: 0 0 18px; color: var(--sub); font-size: 13px; }
.login-link-rejection { margin: 0 0 18px; padding: 10px 12px; border: 1px solid #F3C9C5; border-radius: 10px; background: var(--danger-soft); color: var(--danger); font-size: 13px; }
.login-card label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; }
.login-card input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #D1D5DB; border-radius: 10px; }
.login-card input:focus { outline: 3px solid var(--accent-soft); border-color: var(--accent); }
.login-card .actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }

.toast { position: fixed; z-index: 120; right: 18px; bottom: 18px; display: none; max-width: min(420px, calc(100vw - 36px)); padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 13px; }
.toast.show { display: block; }

@media (max-width: 640px) {
  /* 375px にはブランド＋3 リンク＋ボタンが 1 行に収まらない（実測 430px）。
     電話幅では 2 段にする: 上段 = ブランドとログイン、下段 = 3 つのタブ。
     並び順は order で入れ替え、::before を幅 100% の改行として挟む */
  .gnav { flex-wrap: wrap; min-height: 0; padding: 8px 16px 0; gap: 0 14px; }
  .gnav::before { content: ""; order: 3; flex-basis: 100%; height: 0; }
  .brand { order: 0; font-size: 18px; gap: 8px; padding: 6px 0; }
  .brand::before { width: 24px; height: 24px; }
  .nav-spacer { order: 1; }
  .gnav > button, .gnav > .button { order: 2; }
  .nav-link { order: 4; align-self: auto; padding: 8px 0 9px; font-size: 13px; }
  .nav-link.active { margin-bottom: -1px; }
  .session-summary { display: none; }
  .button.small-button, button.small-button { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .page, .page.wide, .page.narrow { width: min(100% - 24px, 860px); padding: 22px 0 60px; }
  .page-title { font-size: 22px; }
  .card { padding: 16px; }
  .login-card .actions button { flex: 1; }
}