@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;700;800&display=swap");

/* Politician demo — warm civic typography.
   The office demo should feel approachable, practical and trustworthy.
   M PLUS Rounded 1c gives the page a softer resident-facing voice without losing weight. */
[data-demo-static][data-category="politician"] {
  --font-politician-main: "M PLUS Rounded 1c", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  font-family: var(--font-politician-main);
  font-weight: 500;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

[data-demo-static][data-category="politician"] h1,
[data-demo-static][data-category="politician"] h2,
[data-demo-static][data-category="politician"] h3,
[data-demo-static][data-category="politician"] h4,
[data-demo-static][data-category="politician"] a,
[data-demo-static][data-category="politician"] button,
[data-demo-static][data-category="politician"] summary,
[data-demo-static][data-category="politician"] .font-sansjp {
  font-family: var(--font-politician-main);
}

[data-demo-static][data-category="politician"] .font-en,
[data-demo-static][data-category="politician"] time,
[data-demo-static][data-category="politician"] [class*="tracking-"],
[data-demo-static][data-category="politician"] p.text-4xl.font-black,
[data-demo-static][data-category="politician"] p.text-3xl.font-black,
[data-demo-static][data-category="politician"] p.text-2xl.font-black,
[data-demo-static][data-category="politician"] strong {
  font-family: var(--font-politician-main);
}

[data-demo-static][data-category="politician"] .font-black {
  font-weight: 700 !important;
}

[data-demo-static][data-category="politician"] .font-bold {
  font-weight: 600 !important;
}

[data-demo-static][data-category="politician"] h1.font-black,
[data-demo-static][data-category="politician"] h2.font-black,
[data-demo-static][data-category="politician"] h3.font-black,
[data-demo-static][data-category="politician"] strong {
  font-weight: 800 !important;
}

[data-demo-static][data-category="politician"] [class*="tracking-"] .font-black,
[data-demo-static][data-category="politician"] .font-en.font-black,
[data-demo-static][data-category="politician"] time.font-bold,
[data-demo-static][data-category="politician"] dt.font-black,
[data-demo-static][data-category="politician"] summary.font-black,
[data-demo-static][data-category="politician"] button.font-black {
  font-weight: 700 !important;
}

[data-demo-static][data-category="politician"] h1,
[data-demo-static][data-category="politician"] h2,
[data-demo-static][data-category="politician"] h3 {
  letter-spacing: 0.07em;
}

[data-demo-static][data-category="politician"] h1 {
  line-height: 1.32;
}

[data-demo-static][data-category="politician"] h2,
[data-demo-static][data-category="politician"] h3 {
  line-height: 1.4;
}

[data-demo-static][data-category="politician"] p,
[data-demo-static][data-category="politician"] li,
[data-demo-static][data-category="politician"] dd {
  line-height: 1.85;
}

[data-demo-static][data-category="politician"] p,
[data-demo-static][data-category="politician"] li,
[data-demo-static][data-category="politician"] dd,
[data-demo-static][data-category="politician"] dt {
  letter-spacing: 0.05em;
}

[data-demo-static][data-category="politician"] a,
[data-demo-static][data-category="politician"] button,
[data-demo-static][data-category="politician"] summary {
  letter-spacing: 0.06em;
}

[data-demo-static][data-category="politician"] .civic-mobile-dock a {
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.03em;
}

[data-demo-static][data-category="politician"] .civic-message-signature {
  font-family: "Shippori Mincho B1", "Noto Serif JP", serif;
  letter-spacing: 0.08em;
}

/* Politician demo — photo integration.
   The generated photos are strong on their own, so this keeps them from floating as
   separate stickers: tint toward the pale civic-blue UI, soften the hard edges,
   and let section backgrounds bleed naturally into the image boundary. */
[data-demo-static][data-category="politician"] img {
  background-color: #eef7ff;
  image-rendering: auto;
}

[data-demo-static][data-category="politician"] img[alt*="イメージ"],
[data-demo-static][data-category="politician"] img[alt*="活動写真"] {
  filter: saturate(0.88) contrast(0.98) brightness(1.035);
}

[data-demo-static][data-category="politician"] #profile img,
[data-demo-static][data-category="politician"] #contact img {
  border-radius: 1.1rem;
  box-shadow: 0 20px 54px rgba(73, 126, 178, 0.16);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

[data-demo-static][data-category="politician"] #policy article img,
[data-demo-static][data-category="politician"] #reports article img {
  width: calc(100% + 2px);
  margin-inline: -1px;
  border-radius: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 78%, rgba(0, 0, 0, 0.82) 88%, transparent 100%);
}

[data-demo-static][data-category="politician"] #areas img[alt*="活動イメージ"] {
  border-radius: 0.75rem 0.75rem 0 0;
  filter: saturate(0.9) contrast(0.98) brightness(1.03);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0.78) 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 84%, rgba(0, 0, 0, 0.78) 93%, transparent 100%);
}

[data-demo-static][data-category="politician"] #profile,
[data-demo-static][data-category="politician"] #contact {
  background-image:
    radial-gradient(circle at 16% 18%, rgba(88, 189, 248, 0.09), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(248, 95, 143, 0.06), transparent 26%);
}

[data-demo-static][data-category="politician"] #policy [style*="consultation-room"],
[data-demo-static][data-category="politician"] section [style*="city-view"] {
  filter: saturate(0.72) brightness(1.08);
  mix-blend-mode: multiply;
}

/* Mobile fixed dock — final icon style.
   The markup keeps text labels for accessibility; the number marks are visually replaced by inline SVG masks. */
@media (max-width: 767px) {
  [data-demo-static][data-category="politician"] {
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    inset-inline: 12px !important;
    width: auto !important;
    min-height: 72px !important;
    padding: 6px 8px !important;
    border: 1px solid rgba(191, 224, 255, 0.78) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow:
      0 -10px 30px rgba(18, 61, 112, 0.12),
      0 8px 28px rgba(248, 95, 143, 0.08) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    backdrop-filter: blur(18px) !important;
    overflow: hidden !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a {
    position: relative !important;
    min-height: 60px !important;
    grid-template-rows: 34px auto !important;
    align-content: center !important;
    justify-items: center !important;
    gap: 2px !important;
    color: #274b70 !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    opacity: 0.9 !important;
    border-radius: 18px !important;
    transition:
      color 180ms ease,
      background-color 180ms ease,
      transform 180ms ease !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:is(:hover, :focus-visible, :active) {
    color: #1e78db !important;
    background: rgba(231, 245, 255, 0.76) !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:active {
    transform: translateY(1px) !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(5) {
    color: #f85f8f !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(5):is(:hover, :focus-visible, :active) {
    background: rgba(255, 241, 246, 0.92) !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock__mark {
    width: 34px !important;
    height: 30px !important;
    display: grid !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: currentColor !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:is(:hover, :focus-visible, :active) .civic-mobile-dock__mark {
    background: #e7f5ff !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(5) .civic-mobile-dock__mark {
    background: #fff1f6 !important;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock__mark::before {
    content: "";
    width: 22px;
    height: 22px;
    display: block;
    background: currentColor;
    -webkit-mask: var(--dock-icon) center / contain no-repeat;
    mask: var(--dock-icon) center / contain no-repeat;
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(1) .civic-mobile-dock__mark::before {
    --dock-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%2010v10h14V10'/%3E%3Cpath%20d='M9%2020v-6h6v6'/%3E%3C/svg%3E");
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(2) .civic-mobile-dock__mark::before {
    --dock-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2015a4%204%200%200%201-4%204H8l-5%203V7a4%204%200%200%201%204-4h10a4%204%200%200%201%204%204z'/%3E%3Cpath%20d='M8%209h8'/%3E%3Cpath%20d='M8%2013h5'/%3E%3C/svg%3E");
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(3) .civic-mobile-dock__mark::before {
    --dock-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2021h18'/%3E%3Cpath%20d='M5%2010h14'/%3E%3Cpath%20d='M6%2010v8'/%3E%3Cpath%20d='M10%2010v8'/%3E%3Cpath%20d='M14%2010v8'/%3E%3Cpath%20d='M18%2010v8'/%3E%3Cpath%20d='M12%203%2020%208H4z'/%3E%3C/svg%3E");
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(4) .civic-mobile-dock__mark::before {
    --dock-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%204h16v16H4z'/%3E%3Cpath%20d='M8%208h8'/%3E%3Cpath%20d='M8%2012h8'/%3E%3Cpath%20d='M8%2016h5'/%3E%3C/svg%3E");
  }

  [data-demo-static][data-category="politician"] .civic-mobile-dock a:nth-child(5) .civic-mobile-dock__mark::before {
    --dock-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%206h16v12H4z'/%3E%3Cpath%20d='m4%207%208%206%208-6'/%3E%3C/svg%3E");
  }
}

@media (max-width: 640px) {
  [data-demo-static][data-category="politician"] {
    letter-spacing: 0.05em;
  }

  [data-demo-static][data-category="politician"] h1.font-black,
  [data-demo-static][data-category="politician"] h2.font-black {
    font-weight: 800 !important;
  }

  [data-demo-static][data-category="politician"] h1 {
    letter-spacing: 0.08em;
    line-height: 1.34;
  }

  [data-demo-static][data-category="politician"] h2 {
    letter-spacing: 0.08em;
    line-height: 1.4;
  }

  [data-demo-static][data-category="politician"] p,
  [data-demo-static][data-category="politician"] li,
  [data-demo-static][data-category="politician"] dd {
    line-height: 1.85;
  }

  [data-demo-static][data-category="politician"] .text-xs.font-black,
  [data-demo-static][data-category="politician"] .text-\[11px\].font-black,
  [data-demo-static][data-category="politician"] .font-bold {
    font-weight: 600 !important;
  }

  [data-demo-static][data-category="politician"] #profile img,
  [data-demo-static][data-category="politician"] #contact img {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
  }
}