/* Tiful v4 — Circle 運営 v2 (Phase 15a)
   Topbar 設定アイコン / Type chip / Bottom sheet (設定) / Modal (改名)
   既存 style_v2.css / tokens.css を継承 */

/* === Topbar Settings === */
.ca-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}
.ca-topbar__back,
.ca-topbar__settings {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--ink, #1F232E);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ca-topbar__back svg { width: 22px; height: 22px; }
.ca-topbar__settings svg { width: 20px; height: 20px; }

/* === Hero with Type chip === */
.ca-hero {
  padding: 6px 20px 22px;
}
.ca-hero__type-chip {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 3px 9px 4px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.ca-hero__type-chip--tifuler {
  background: linear-gradient(135deg, #E8E4D8 0%, #D2CCBC 100%);
  color: #3F3D38;
}
.ca-hero__type-chip--peer {
  background: #EFEFEC;
  color: #5C5A55;
}
.ca-hero__type-chip--official {
  background: #1F232E;
  color: #FFF;
}

/* === Thread badge: Unlock 用追加 === */
.ca-thread__badge--unlock {
  background: linear-gradient(135deg, #C5BFAF 0%, #A39B85 100%);
  color: #FFF;
}

/* =================== Bottom Sheet =================== */
.cas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.36);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 90;
}
.cas-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.cas-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 414px;
  transform: translate(-50%, 100%);
  background: #FFF;
  border-radius: 20px 20px 0 0;
  padding: 8px 0 28px;
  z-index: 100;
  transition: transform 0.24s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.08);
}
.cas-sheet.is-open {
  transform: translate(-50%, 0);
}
.cas-sheet__handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: #D6D5D0;
  margin: 6px auto 8px;
}
.cas-sheet__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 20px 12px;
}
.cas-sheet__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1F232E);
  letter-spacing: 0.01em;
}
.cas-sheet__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #9A988F;
  display: flex;
  align-items: center;
}
.cas-sheet__close svg { width: 18px; height: 18px; }

.cas-sheet__body {
  padding: 4px 6px 0;
}

/* === Setting row === */
.cas-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 14px 14px;
  cursor: pointer;
  text-align: left;
  border-radius: 12px;
  transition: background 0.12s ease;
  font-family: inherit;
}
.cas-row:hover {
  background: #F7F6F3;
}
.cas-row__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cas-row__label {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink, #1F232E);
  line-height: 1.3;
}
.cas-row__hint {
  font-size: 12px;
  color: #8E8C84;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.cas-row__chev {
  width: 16px;
  height: 16px;
  color: #B6B3A9;
  flex-shrink: 0;
}
.cas-row--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.cas-row--disabled:hover {
  background: none;
}
.cas-row--disabled .cas-row__hint {
  color: #A6A39A;
}
.cas-divider {
  border: none;
  border-top: 1px solid #ECEAE3;
  margin: 8px 16px;
}

/* =================== Modal (Rename) =================== */
.cas-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 110;
  padding: 24px;
  pointer-events: none;
}
.cas-modal.is-open {
  display: flex;
  pointer-events: auto;
}
.cas-modal__inner {
  background: #FFF;
  width: 100%;
  max-width: 360px;
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16);
}
.cas-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cas-modal__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1F232E);
}
.cas-modal__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #9A988F;
  display: flex;
  align-items: center;
}
.cas-modal__close svg { width: 18px; height: 18px; }

.cas-modal__label {
  display: block;
  font-size: 11.5px;
  color: #8E8C84;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.cas-modal__input {
  width: 100%;
  border: 1px solid #DAD7CE;
  border-radius: 10px;
  padding: 11px 12px;
  font-size: 14.5px;
  color: var(--ink, #1F232E);
  margin-bottom: 8px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}
.cas-modal__input:focus {
  border-color: var(--ink, #1F232E);
}
.cas-modal__counter {
  font-size: 11.5px;
  color: #A6A39A;
  margin-bottom: 12px;
  padding-left: 2px;
}
.cas-modal__hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #F8F7F3;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.cas-modal__hint-icon {
  width: 14px;
  height: 14px;
  color: #8E8C84;
  flex-shrink: 0;
  margin-top: 2px;
}
.cas-modal__hint span {
  font-size: 12px;
  color: #5C5A55;
  line-height: 1.5;
}
.cas-modal__footer {
  display: flex;
  gap: 8px;
}
.cas-modal__btn {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.12s ease;
}
.cas-modal__btn--secondary {
  background: #F0EEE8;
  color: var(--ink, #1F232E);
}
.cas-modal__btn--primary {
  background: var(--ink, #1F232E);
  color: #FFF;
  letter-spacing: 0.02em;
}
.cas-modal__btn:hover {
  opacity: 0.85;
}

/* === Stat row (Circle 作成数) === */
.cas-row--stat {
  cursor: default;
}
.cas-row--stat:hover {
  background: none;
}
.cas-row__value {
  font-family: 'Noto Serif JP', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--ink, #1F232E);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.cas-row__value-sub {
  font-size: 12px;
  color: #A6A39A;
  font-weight: 400;
}

/* === Rich Modal (Archive / Delete) === */
.cas-modal--rich .cas-modal__inner {
  max-width: 380px;
}
.cas-modal__lead {
  font-size: 13.5px;
  color: #5C5A55;
  line-height: 1.65;
  margin: 0 0 16px;
  letter-spacing: 0.005em;
}

.cas-modal__info-block {
  background: #F8F7F3;
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.cas-modal__info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
}
.cas-modal__info-label {
  font-size: 11.5px;
  color: #8E8C84;
  letter-spacing: 0.02em;
}
.cas-modal__info-value {
  font-size: 13px;
  color: var(--ink, #1F232E);
  font-weight: 500;
}

.cas-modal__info-card {
  background: #FAF9F4;
  border: 1px solid #ECEAE3;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cas-modal__info-card--alt {
  background: #F4F2EC;
  border-color: #E5E2D8;
}
.cas-modal__info-card-title {
  font-size: 11px;
  font-weight: 600;
  color: #5C5A55;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cas-modal__info-card-list {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.cas-modal__info-card-list li {
  font-size: 12.5px;
  color: #3F3D38;
  line-height: 1.65;
  margin-bottom: 5px;
}
.cas-modal__info-card-list li:last-child {
  margin-bottom: 0;
}
.cas-modal__info-card-list strong {
  color: var(--ink, #1F232E);
  font-weight: 600;
}
.cas-modal__info-card-text {
  font-size: 12.5px;
  color: #3F3D38;
  line-height: 1.65;
  margin: 0;
}
.cas-modal__info-card-text strong {
  color: var(--ink, #1F232E);
  font-weight: 600;
}

/* === Countdown (PEER 削除残日数) === */
.cas-modal__countdown {
  text-align: center;
  padding: 14px 0 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid #ECEAE3;
}
.cas-modal__countdown-num {
  font-family: 'Noto Serif JP', serif;
  font-size: 56px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink, #1F232E);
  letter-spacing: 0.005em;
}
.cas-modal__countdown-unit {
  font-size: 22px;
  color: #5C5A55;
  margin-left: 4px;
  font-weight: 400;
}
.cas-modal__countdown-label {
  font-size: 11.5px;
  color: #8E8C84;
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* ============================================================
   Phase 4 — Substack式 Admin Hero + ca-revenue 全面再設計
   Spec: Tiful_v4_Circle_VisualUpgrade_Spec.md §6.2
   T1-T9 厳守 (T1: 無彩色UI / T3: ロゴグラデは印象点 / T6: 大胆な余白 / T9: Inter Light Tabular)
   追加日: 2026-05-04
   依存: style_v2.css §5.1 (--stat-xl/--logo-gradient/--ease-soft) + §5.2 (.stat-block)
   ============================================================ */

/* === Hero (Substack 余白 + 数字主役の前段) === */
.ca-hero {
  padding: 4px 22px 16px;
}
.ca-hero__name {
  margin: 0 0 8px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--ink, #1A1A1A);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.ca-hero__meta {
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 12px;
  color: var(--mist, #9B9B9B);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' on;
  letter-spacing: 0.02em;
}

/* === ca-revenue (Substack 式 / 3 sections) === */
.ca-revenue {
  margin: 4px 16px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

/* §A: Hero stat-block + chart */
.ca-revenue__hero {
  background: var(--white, #FFF);
  border: 0.5px solid var(--border, #F0F0F0);
  border-radius: 16px;
  padding: 24px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.ca-revenue__hero .stat-block__value {
  margin-top: 2px;
}
.ca-revenue__hero .stat-block__delta {
  margin-top: 8px;
}
.ca-revenue__delta-vs {
  margin-left: 4px;
  color: var(--mist, #9B9B9B);
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* === 30-day chart === */
.ca-chart {
  width: 100%;
  height: 92px;
  margin-top: 18px;
  display: block;
  overflow: visible;
}
.ca-chart__line {
  /* JS で stroke-dasharray + stroke-dashoffset を実長さで設定 */
  transition: stroke-dashoffset 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.ca-chart__area {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;
}
.ca-chart.is-mounted .ca-chart__area {
  opacity: 1;
}
.ca-chart__axis {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  padding: 0 2px;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  color: var(--mist, #9B9B9B);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* §B: 2x2 grid (お金 + KPI) */
.ca-revenue__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ca-revenue__cell {
  background: var(--white, #FFF);
  border: 0.5px solid var(--border, #F0F0F0);
  border-radius: 14px;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.ca-revenue__cell .stat-block__value {
  margin-top: 2px;
}
.ca-revenue__cell .stat-block__sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--stone, #6B6B6B);
}
.ca-revenue__cell .stat-block__sub.stat-block__delta--up {
  color: #4FA88E;
  font-weight: 500;
}

/* §C: Owner Compass Tier 円弧 — §C-X 確定により削除 (2026-05-04 ECD承認)
   理由: my_compass_v1.html に Compass Score メーター + 4Tier ladder + Next Tier 表示が
        既存しており、Admin 内に「YOUR COMPASS TIER」を再掲すると二重表示になる。
        Owner Compass Tier の表示は My Compass 本体に集約し、
        Admin は §A (Hero stat-block + chart) + §B (2x2 grid) の
        "金 + 関係性" Substack Creator Hub 本質に純化する。 */

/* === 余白の最終整え (subtabs まで連続性) === */
.ca-subtabs {
  margin-top: 4px;
}