/* Shooting-tips page (/tips) styles.
   Layered on top of lp3.css — reuses the lp3 design tokens and layout
   classes; this file only adds page-specific pieces (SVG diagrams,
   good/bad lists, failure-fix rows).
   CSP: style-src 'self' — keep all styles in this file, no inline styles. */

/* ---------- Header: navigation menu ---------- */

/* 左上のナビゲーションメニュー (形は nav_menu.css、tips.js が #nt_nav_root に描く) とサイト名を
   左にまとめる。描かれる前からボタンの幅を取り、サイト名が後からずれないようにする */
.nt-header-start {
  display: flex;
  align-items: center;
  min-width: 0;
}
.nt-nav-root {
  display: flex;
  flex: none;
  width: calc(2.4rem + 2px);
  height: calc(2.4rem + 2px);
  margin-right: 0.85rem;
}
/* lp3.css の全要素 border-box に対し、ボタンの大きさは他のページと同じ (中身 2.4rem + 枠) */
body.new-tips .navigation_menu {
  box-sizing: content-box;
}
/* 色はこのページ (lp3 の暗い地・青緑のアクセント) のパレット */
body.new-tips .navigation_wrapper {
  margin: 0;
  --nav-button-bg: #ffffff10;
  --nav-button-border: 1px solid var(--lp3-border);
  --nav-button-fg: #ffffff;
  --nav-panel-bg: var(--lp3-bg-raised);
  --nav-panel-text: var(--lp3-text);
  --nav-panel-dim: var(--lp3-muted);
  --nav-panel-border: var(--lp3-border);
  --nav-panel-divider: var(--lp3-border);
  --nav-accent: var(--lp3-accent);
  --nav-accent-contrast: var(--lp3-accent-ink);
  --nav-accent-text: var(--lp3-accent);
  --nav-hover-bg: rgba(58, 214, 197, 0.08);
  --nav-current-bg: rgba(58, 214, 197, 0.14);
  --nav-focus-ring: var(--lp3-accent);
  --nav-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
/* 文字色は lp3.css の body.lp3 a (青緑) より強く指定する */
body.new-tips .dropdown_list a {
  color: var(--nav-panel-text);
}
body.new-tips .dropdown_list a[aria-current="page"] {
  color: var(--nav-accent-text);
}

/* ---------- Hero ---------- */

.nt-hero {
  max-width: 760px;
  text-align: center;
}
.nt-hero .lp3-badges,
.nt-hero .lp3-cta-row {
  justify-content: center;
}

/* ---------- Illustrated basics ---------- */

.nt-diagrams {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.nt-diagram {
  margin: 0;
  background-color: var(--lp3-bg-card);
  border: 1px solid var(--lp3-border);
  border-radius: 12px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
}
.nt-diagram svg {
  /* 固定高にして 3 カードのキャプション開始位置を揃える
     （viewBox 比率差は preserveAspectRatio のレターボックスで吸収） */
  width: 100%;
  height: 230px;
  margin-bottom: 1rem;
}
.nt-diagram figcaption p {
  color: var(--lp3-muted);
  margin: 0;
}
.nt-extra-tips {
  margin-top: 1rem;
}

/* SVG parts */

.nt-orbit {
  fill: none;
  stroke: var(--lp3-accent);
  stroke-width: 2;
  stroke-dasharray: 6 6;
  opacity: 0.75;
}
.nt-obj {
  fill: #2c3a4f;
  stroke: var(--lp3-muted);
  stroke-width: 1.5;
}
.nt-cam {
  fill: var(--lp3-text);
}
.nt-label {
  fill: var(--lp3-muted);
  font-size: 12px;
  font-family: inherit;
}
.nt-arrowhead {
  fill: var(--lp3-accent);
}
.nt-frame-a {
  fill: none;
  stroke: var(--lp3-muted);
  stroke-width: 2;
}
.nt-frame-b {
  fill: none;
  stroke: var(--lp3-text);
  stroke-width: 2;
}
.nt-overlap {
  fill: var(--lp3-accent);
  opacity: 0.18;
}
.nt-measure {
  stroke: var(--lp3-accent);
  stroke-width: 2;
}
.nt-ground {
  stroke: var(--lp3-border);
  stroke-width: 2;
}

/* ---------- Good / bad subject lists ---------- */

.nt-list {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--lp3-muted);
}
.nt-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.45rem;
}
.nt-list li::before {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.nt-list-good li::before {
  content: "\2713"; /* check mark */
  color: var(--lp3-accent);
}
.nt-list-bad li::before {
  content: "\2715"; /* cross mark */
  color: #e57373;
}
.nt-env-tips {
  margin-top: 1.6rem;
}

/* ---------- Failure / fix rows ---------- */

.nt-fixes {
  display: grid;
  gap: 1rem;
}
.nt-fix {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  background-color: var(--lp3-bg-card);
  border: 1px solid var(--lp3-border);
  border-radius: 12px;
  padding: 1.1rem 1.4rem;
}
.nt-fix-cell p {
  margin: 0.3rem 0 0;
  color: var(--lp3-text);
}
.nt-fix-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--lp3-muted);
}
.nt-fix-cell:last-child .nt-fix-tag {
  color: var(--lp3-accent);
}
.nt-fix-cell:last-child p {
  color: var(--lp3-text);
}
.nt-fix-cell:first-child p {
  font-weight: 600;
  color: #ffffff;
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .nt-diagrams {
    grid-template-columns: 1fr;
  }
  .nt-fix {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }
}

/* スマホ幅ではメニュー・サイト名・Try It Free を 1 行に収める (メニューを足した分、サイト名と
   ボタンが折り返して 2 行になるため)。それでも収まらない幅ではサイト名を省略記号で切る */
@media (max-width: 520px) {
  .lp3-header .lp3-container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .nt-header-start {
    flex: 1 1 auto;
    margin-right: 0.55rem;
  }
  .nt-nav-root {
    margin-right: 0.55rem;
  }
  .nt-header-start .lp3-brand {
    min-width: 0;
    overflow: hidden;
    font-size: 0.95rem;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body.lp3 .lp3-header a.lp3-btn {
    flex: none;
    padding: 0.45rem 0.8rem;
    white-space: nowrap;
  }
}