/* circles-refine.css: interaction/readability pass for circles.html */

body[data-market="otome"] {
  background:
    radial-gradient(90vw 55vh at 0% 0%, rgba(255,224,238,.34), transparent 72%),
    radial-gradient(75vw 48vh at 100% 8%, rgba(255,236,245,.44), transparent 76%),
    linear-gradient(180deg,#fffdfd 0%,#fffafd 46%,#fffdfd 100%) !important;
  background-repeat:no-repeat !important;
}

.longterm-hero.card {
  background:rgba(255,255,255,.80) !important;
  border-color:rgba(93,73,86,.12) !important;
  box-shadow:0 12px 30px rgba(87,62,77,.06), inset 0 1px 0 rgba(255,255,255,.95) !important;
}
.longterm-hero.card::before {
  opacity:.42;
}
.longterm-hero.card::after {
  opacity:.34;
}

/* classification: use resilient HTML blocks instead of a mobile-fragile SVG */
.diagram-card.card {
  padding:14px !important;
  border-color:rgba(74,61,70,.14) !important;
  background:rgba(255,255,255,.78) !important;
}
.circle-class-flow {
  display:grid;
  gap:10px;
}
.circle-class-step {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px 13px;
  border:1px solid rgba(77,60,71,.14);
  border-radius:14px;
  background:#fff;
}
.circle-class-step span {
  flex:0 0 auto;
  padding:4px 7px;
  border-radius:999px;
  background:var(--accent-pale);
  color:var(--accent-dark);
  font-size:10px;
  font-weight:800;
}
.circle-class-step strong {
  min-width:0;
  color:var(--ink);
  font-size:14px;
  line-height:1.45;
}
.circle-class-branches {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  align-items:stretch;
}
.circle-class-branches.first {
  grid-template-columns:1fr .72fr;
}
.circle-class-next {
  display:grid;
  place-items:center;
  align-content:center;
  gap:2px;
  min-height:70px;
  color:var(--accent-dark);
  font-weight:800;
}
.circle-class-next small { font-size:10px; }
.circle-class-next span { font-size:22px; line-height:1; }
.circle-class-result {
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(77,60,71,.14);
  border-radius:14px;
  background:rgba(255,255,255,.82);
}
.circle-class-result small {
  display:block;
  margin-bottom:3px;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.circle-class-result strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  line-height:1.3;
}
.circle-class-result p {
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
}
.circle-class-result.flash {
  border-color:rgba(213,75,136,.18);
  background:rgba(255,240,247,.72);
}
.circle-class-result.flash strong { color:var(--accent-dark); }
.circle-class-result.sustained {
  border-color:rgba(43,151,118,.20);
  background:rgba(237,250,246,.84);
}
.circle-class-result.sustained strong { color:var(--good); }
.circle-class-result.muted { opacity:.72; }
.classification-note {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:10px 0 0 !important;
}
.classification-note span {
  min-width:0;
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.58);
  font-size:11px;
  line-height:1.55;
}
.classification-note b { color:var(--ink); }

/* explain scope before the list */
.circle-list-guide.card {
  margin:0 0 12px;
  padding:12px 13px;
  border-color:rgba(73,60,69,.14) !important;
  background:rgba(255,255,255,.76) !important;
  box-shadow:0 6px 16px rgba(79,58,72,.045) !important;
}
.circle-list-guide>strong {
  display:block;
  color:var(--ink);
  font-size:13px;
}
.circle-list-guide p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
}
.circle-list-guide p strong { color:var(--ink); }
.circle-list-guide-legend {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:9px;
}
.circle-list-guide-legend span {
  padding:8px 9px;
  border-radius:11px;
  background:rgba(255,255,255,.72);
  color:var(--muted);
  font-size:10px;
  line-height:1.45;
}
.circle-list-guide-legend .sustained b { color:var(--good); }
.circle-list-guide-legend .flash b { color:var(--accent-dark); }
.circle-list-guide-detail {
  padding-top:8px;
  border-top:1px solid rgba(73,60,69,.09);
}
.circle-percentile-help {
  margin:8px 2px 10px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

/* compact, explicit circle cards */
.circle-cards {
  gap:9px !important;
}
.circle-card.card {
  position:relative;
  padding:12px 13px !important;
  border:1px solid rgba(76,61,71,.16) !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.82) !important;
  box-shadow:0 5px 14px rgba(80,60,73,.045), inset 0 1px 0 rgba(255,255,255,.94) !important;
}
.circle-card.has-detail {
  cursor:pointer;
}
.circle-card.has-detail:active {
  transform:scale(.995);
}
.circle-card-name {
  min-height:0 !important;
  margin:0 0 10px !important;
  padding:0 0 9px !important;
  border-bottom:1px solid rgba(76,61,71,.10) !important;
}
.circle-card-title-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.circle-card-title {
  min-width:0;
  color:var(--ink);
  font-size:16px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:-.01em;
}
.circle-type-badge,
.circle-analysis-badge {
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  line-height:1.2;
}
.circle-type-badge {
  flex:0 0 auto;
  padding:4px 7px;
  margin-top:1px;
}
.circle-type-badge.sustained {
  background:rgba(43,151,118,.11);
  color:var(--good);
}
.circle-type-badge.flash {
  background:var(--accent-pale);
  color:var(--accent-dark);
}
.circle-analysis-badge {
  margin-top:6px;
  padding:3px 7px;
}
.circle-analysis-badge.available {
  background:rgba(213,75,136,.09);
  color:var(--accent-dark);
}
.circle-analysis-badge.unavailable {
  background:rgba(90,80,87,.07);
  color:var(--muted);
}
.circle-card-stats.circle-metric-grid {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:6px !important;
  margin:0 0 10px !important;
}
.circle-metric {
  min-width:0;
  padding:7px 8px;
  border:1px solid rgba(76,61,71,.10);
  border-radius:10px;
  background:rgba(255,255,255,.62);
}
.circle-metric>span {
  display:block;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
  line-height:1.3;
}
.circle-metric>b {
  display:block;
  margin-top:2px;
  color:var(--ink);
  font-size:14px;
  font-weight:800;
  line-height:1.3;
}
.circle-metric>small {
  display:block;
  margin-top:1px;
  color:#9b8f96;
  font-size:8px;
}
.circle-strength-label {
  margin:0 0 6px;
  color:var(--muted);
  font-size:9px;
  font-weight:700;
}
.circle-card-tags {
  gap:5px !important;
}
.circle-card .tag-chip {
  padding:4px 7px !important;
  border:0 !important;
  background:rgba(255,225,239,.62) !important;
  font-size:9px !important;
}
.circle-detail-action {
  width:100%;
  margin-top:10px;
  padding:8px 10px;
  border:0;
  border-radius:10px;
  background:var(--accent-pale);
  color:var(--accent-dark);
  font:inherit;
  font-size:10px;
  font-weight:800;
  text-align:center;
}
.circle-detail-unavailable {
  margin-top:9px;
  color:#aaa0a6;
  font-size:9px;
  line-height:1.4;
}

/* selected case study opens exactly where the user clicked */
.circle-inline-detail {
  grid-column:1 / -1;
  margin:2px 0 4px;
  padding:12px;
  border:1px solid rgba(213,75,136,.18);
  border-radius:17px;
  background:rgba(255,250,253,.94);
  box-shadow:0 10px 24px rgba(112,70,91,.07);
  scroll-margin-top:18px;
}
.circle-inline-detail-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px;
}
.circle-inline-detail-head span {
  display:block;
  color:var(--accent-dark);
  font-size:9px;
  font-weight:800;
}
.circle-inline-detail-head strong {
  display:block;
  margin-top:2px;
  color:var(--ink);
  font-size:12px;
}
.circle-inline-detail-head button {
  flex:0 0 auto;
  padding:6px 8px;
  border:1px solid rgba(76,61,71,.12);
  border-radius:999px;
  background:#fff;
  color:var(--muted);
  font-size:9px;
  font-weight:800;
}
.circle-inline-detail .selected-case-card {
  padding:12px !important;
  border:1px solid rgba(76,61,71,.13) !important;
  background:#fff !important;
  box-shadow:none !important;
}
.circle-inline-detail .selected-case-card summary {
  pointer-events:none;
}
.circle-inline-detail .selected-case-card summary::after {
  display:none !important;
}
.circle-inline-detail .selected-case-card h4 {
  margin-top:8px !important;
  font-size:15px !important;
}
.circle-inline-detail .selected-case-card .verdict {
  font-size:11px !important;
}
.circle-inline-detail .selected-case-card ul {
  margin-top:10px !important;
  padding-top:10px !important;
  border-top:1px solid rgba(76,61,71,.09) !important;
}
.circle-inline-detail .selected-case-card li {
  font-size:11px !important;
  line-height:1.65 !important;
}
.circle-inline-glossary {
  margin-top:8px;
  padding:0 2px;
}
.circle-inline-glossary>summary {
  color:var(--accent-dark);
  font-size:10px;
  font-weight:800;
  cursor:pointer;
}
.circle-inline-glossary .glossary {
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
  margin-top:7px !important;
  padding:0 !important;
  background:none !important;
}
.circle-inline-glossary .glossary>b { display:none; }
.circle-inline-glossary .gterm {
  padding:7px 8px !important;
  background:rgba(255,255,255,.62) !important;
  font-size:10px !important;
}

/* preserve the cross-circle synthesis, but keep it out of the main reading path */
.circle-cross-summary.card {
  margin:14px 0 0;
  padding:0;
  overflow:hidden;
  border-color:rgba(76,61,71,.13) !important;
  background:rgba(255,255,255,.70) !important;
}
.circle-cross-summary>summary {
  padding:12px 14px;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  list-style:none;
}
.circle-cross-summary>summary::-webkit-details-marker { display:none; }
.circle-cross-summary>summary::after {
  content:'＋';
  float:right;
  color:var(--accent-dark);
}
.circle-cross-summary[open]>summary::after { content:'−'; }
.circle-cross-summary-body {
  padding:0 14px 13px;
  border-top:1px solid rgba(76,61,71,.08);
}
.circle-cross-summary .synthesis {
  margin:0 !important;
  padding:10px 0 0 !important;
  background:none !important;
}
.circle-cross-summary .synthesis .eyebrow,
.circle-cross-summary .synthesis h4 { display:none; }
.circle-cross-summary .synthesis li {
  font-size:10px !important;
  line-height:1.65 !important;
}

@media(max-width:720px) {
  .circle-cards { grid-template-columns:1fr !important; }
}

@media(max-width:420px) {
  .longterm-shell { padding-left:10px !important; padding-right:10px !important; }
  .circle-class-branches,
  .circle-class-branches.first,
  .classification-note,
  .circle-list-guide-legend {
    grid-template-columns:1fr 1fr;
  }
  .circle-card.card { padding:11px 12px !important; }
  .circle-card-title { font-size:15px; }
  .circle-metric>b { font-size:13px; }
}