/* 苍绿之眼 hub (partials/cloak-hub.html). Loaded on /posts/story_of_cloak/ only. */

/* ---------- Hub ---------- */

.cloak-hub__header {
  border-bottom: 3px double var(--cloak-green-shadow);
}

.cloak-hub__header-inner {
  display: grid;
  gap: var(--spacing-sm);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-lg);
}

.cloak-hub__title {
  color: var(--cloak-green);
  font-family: var(--font-display);
  font-size: var(--font-size-hero);
  line-height: var(--line-height-heading);
}

.cloak-hub__subtitle {
  color: var(--cloak-text);
  font-size: var(--font-size-lg);
}

.cloak-hub__intro {
  max-width: 62ch;
  color: var(--cloak-text);
}

.cloak-hub__intro p + p {
  margin-top: var(--spacing-sm);
}

.cloak-hub__intro strong,
.cloak-hub__intro a {
  color: var(--cloak-green);
}

.cloak-hub__body {
  padding-top: var(--spacing-md);
}

.cloak-block {
  margin-top: var(--spacing-xl);
}

.cloak-block__title {
  margin-bottom: var(--spacing-md);
  padding-bottom: 0.35rem;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-strong);
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: var(--line-height-heading);
}

.cloak-block__lead {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.cloak-howto {
  display: grid;
  gap: var(--spacing-sm);
  max-width: 62ch;
  counter-reset: howto;
}

.cloak-howto li {
  position: relative;
  padding-left: 2.25rem;
  color: var(--text-body);
  counter-increment: howto;
}

.cloak-howto li::before {
  content: counter(howto, decimal-leading-zero);
  position: absolute;
  left: 0;
  color: var(--story-accent);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: inherit;
}

.cloak-case {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--bg-card);
  border: 2px solid var(--text-primary);
  box-shadow: 4px 4px 0 var(--story-accent);
}

.cloak-case--old {
  border-width: 1px;
  border-style: dashed;
  box-shadow: none;
}

.cloak-case__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-md);
}

.cloak-case__id {
  color: var(--story-accent);
  font-family: var(--font-code);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
}

.cloak-case__title {
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.3;
}

.cloak-case__progress {
  margin-left: auto;
  padding: 0.05rem 0.55rem;
  color: var(--story-accent);
  background: var(--story-soft);
  border: 1px solid var(--story-accent);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.cloak-case.is-complete .cloak-case__progress {
  color: var(--cloak-ink);
  background: var(--cloak-green);
  border-color: var(--cloak-ink);
}

.cloak-case__summary {
  margin: var(--spacing-sm) 0 var(--spacing-md);
  color: var(--text-secondary);
}

.cloak-steps {
  border-top: 1px solid var(--border);
  counter-reset: step;
}

.cloak-step {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--spacing-sm) var(--spacing-md);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
  counter-increment: step;
}

.cloak-step::before {
  content: counter(step, decimal-leading-zero);
  color: var(--text-muted);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
}

.cloak-step.is-current::before {
  content: "▶";
  color: var(--story-accent);
}

.cloak-step__link {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
  line-height: 1.45;
  text-decoration: none;
}

.cloak-step__link:hover {
  color: var(--story-accent);
  text-decoration: underline;
}

.cloak-step__status {
  padding: 0.05rem 0.55rem;
  color: var(--text-secondary);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-family: var(--font-code);
  font-size: 0.78rem;
  white-space: nowrap;
}

.cloak-step__status::before {
  content: "○ ";
}

.cloak-step[data-state="reached"] .cloak-step__status {
  color: var(--story-accent);
  border-color: var(--story-accent);
}

.cloak-step[data-state="reached"] .cloak-step__status::before {
  content: "◐ ";
}

.cloak-step[data-state="solved"] .cloak-step__status {
  color: var(--bg-card);
  background: var(--story-accent);
  border-color: var(--story-accent);
}

.cloak-step[data-state="solved"] .cloak-step__status::before {
  content: "● ";
}

.cloak-step[data-state="locked"] .cloak-step__link {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.cloak-step[data-state="locked"] .cloak-step__status {
  color: var(--text-muted);
  border-style: dashed;
}

.cloak-step[data-state="locked"] .cloak-step__status::before {
  content: "– ";
}

.cloak-old-list .post-item {
  grid-template-columns: minmax(0, 1fr);
}

.voice-primer {
  display: grid;
  border-top: 1px solid var(--border);
}

.voice-primer__item {
  display: grid;
  grid-template-columns: 5.5rem 9rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--spacing-xs) var(--spacing-md);
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}

.voice-primer__name {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.voice-primer__note {
  color: var(--text-secondary);
}

.cloak-refs .card {
  text-decoration: none;
}

/* Hub: a case with `requires: "all"` waits until every other case is complete. */
.cloak-case__gate {
  margin: var(--spacing-sm) 0 var(--spacing-md);
  padding: 0.35rem 0.7rem;
  color: var(--text-secondary);
  border: 1px dashed var(--border-strong);
  font-family: var(--font-code);
  font-size: var(--font-size-sm);
}

.cloak-case__gate[hidden] {
  display: none;
}

.cloak-case.is-waiting {
  box-shadow: none;
  border-style: dashed;
}

.cloak-case.is-waiting .cloak-step__link {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

.cloak-case.is-waiting .cloak-step__link:hover {
  color: var(--story-accent);
}

@media (max-width: 640px) {
  .cloak-case {
    padding: var(--spacing-md);
  }

  .cloak-hub__title {
    font-size: 2.25rem;
  }

  .cloak-step {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }

  .cloak-step__status {
    grid-column: 2;
    justify-self: start;
  }

  .voice-primer__item {
    grid-template-columns: 5rem minmax(0, 1fr);
  }

  .voice-primer__note {
    grid-column: 1 / -1;
  }
}