:root {
  --story-ink: #17312c;
  --story-muted: #63736f;
  --story-line: #dce7e4;
  --story-surface: #ffffff;
  --story-soft: #f5f9f8;
  --story-mint: #17806d;
  --story-mint-dark: #0f6455;
  --story-violet: #7356a8;
}

.story-detail-page {
  width: min(1240px, calc(100% - 40px));
  margin: 22px auto 54px;
  color: var(--story-ink);
}

.story-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 26px;
  overflow: hidden;
  padding: 28px 30px 26px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 6%, rgba(143, 111, 194, .3), transparent 29%),
    linear-gradient(125deg, #155f54 0%, #187966 58%, #655092 100%);
  box-shadow: 0 20px 45px rgba(24, 74, 65, .16);
  color: #fff;
}

.story-detail-hero::after {
  position: absolute;
  right: -70px;
  bottom: -115px;
  width: 270px;
  height: 270px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 50%;
  content: "";
}

.story-hero-main,
.story-hero-actions,
.story-hero-back {
  position: relative;
  z-index: 1;
}

.story-hero-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  color: rgba(255, 255, 255, .8);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.story-hero-mark {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  background: rgba(255, 255, 255, .12);
}

.story-detail-hero h1 {
  max-width: 820px;
  margin: 0;
  color: #fff;
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.13;
}

.story-detail-hero p {
  max-width: 720px;
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: .96rem;
  line-height: 1.55;
}

.story-hero-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.story-signal {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .92);
  font-size: .78rem;
  font-weight: 650;
  backdrop-filter: blur(8px);
}

.story-signal-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffe082;
  box-shadow: 0 0 0 3px rgba(255, 224, 130, .15);
}

.story-status.is-done .story-signal-dot { background: #92efc2; }
.story-status.is-in_progress .story-signal-dot { background: #8fc8ff; }
.story-priority.is-high { border-color: rgba(255, 184, 184, .38); }

.story-hero-actions {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding-top: 3px;
}

.story-hero-actions .btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  border-radius: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.story-primary-action.btn-primary {
  border-color: #fff;
  background: #fff;
  color: var(--story-mint-dark);
}

.story-primary-action.btn-primary:hover,
.story-primary-action.btn-primary:focus {
  border-color: #f3fffb;
  background: #f3fffb;
  color: #0b5044;
}

.story-export-menu {
  min-width: 220px;
  overflow: hidden;
  padding: 8px;
  border: 1px solid var(--story-line);
  border-radius: 13px;
  box-shadow: 0 18px 40px rgba(21, 57, 50, .16);
}

.story-export-menu .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 9px 10px;
  border-radius: 8px;
}

.story-export-menu .dropdown-item small { color: #87928f; }

.story-hero-back {
  grid-column: 1 / -1;
  padding-top: 1px;
}

.story-hero-back a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .76);
  font-size: .82rem;
  font-weight: 650;
  text-decoration: none;
}

.story-hero-back a:hover { color: #fff; }

.story-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(285px, 350px);
  gap: 20px;
  align-items: start;
  margin-top: 20px;
}

.story-main-column,
.story-sidebar {
  display: grid;
  gap: 18px;
}

.story-card {
  overflow: hidden;
  border: 1px solid var(--story-line);
  border-radius: 18px;
  background: var(--story-surface);
  box-shadow: 0 8px 26px rgba(27, 65, 58, .055);
}

.story-card-header {
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid #e9efed;
  background: linear-gradient(180deg, #fff, #fbfdfc);
}

.story-card-header h2,
.story-regenerate-card h2 {
  margin: 2px 0 0;
  color: var(--story-ink);
  font-size: 1.08rem;
  font-weight: 750;
  letter-spacing: -.015em;
}

.story-section-kicker {
  color: var(--story-mint);
  font-size: .68rem;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.story-card-body { padding: 20px; }

.story-derived-badge,
.story-count-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid #d8e7e3;
  border-radius: 999px;
  background: #f3f9f7;
  color: #42756b;
  font-size: .72rem;
  font-weight: 700;
}

.story-count-badge {
  min-width: 31px;
  justify-content: center;
  color: #fff;
  border-color: var(--story-mint);
  background: var(--story-mint);
}

.story-statement {
  position: relative;
  margin: 0;
  padding: 18px 20px 18px 22px;
  border-left: 4px solid var(--story-mint);
  border-radius: 4px 14px 14px 4px;
  background: linear-gradient(105deg, #eff8f5, #f7f5fb);
  color: #28443e;
  font-size: 1.03rem;
  font-weight: 590;
  line-height: 1.65;
}

.story-intent-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.story-intent-item {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 11px;
  padding: 14px;
  border: 1px solid #e2ebe8;
  border-radius: 13px;
  background: #fff;
}

.story-intent-item > div { min-width: 0; }

.story-intent-item span:not(.story-intent-icon) {
  display: block;
  margin-bottom: 3px;
  color: var(--story-muted);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.story-intent-item strong {
  display: block;
  overflow-wrap: anywhere;
  color: #29453f;
  font-size: .87rem;
  font-weight: 680;
  line-height: 1.45;
}

.story-intent-icon,
.story-trace-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: 35px;
  height: 35px;
  place-items: center;
  border-radius: 10px;
}

.story-intent-icon.is-actor { background: #e7f5f1; color: #14715f; }
.story-intent-icon.is-goal { background: #eeebf7; color: #6c52a2; }
.story-intent-icon.is-benefit { background: #fff4df; color: #ad7117; }

.story-criteria-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.story-criteria-list li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 30px;
  gap: 12px;
  align-items: start;
  padding: 14px 14px 14px 12px;
  border: 1px solid #e2ebe8;
  border-radius: 13px;
  background: #fbfdfc;
}

.story-criterion-number {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  background: #e8f5f1;
  color: var(--story-mint-dark);
  font-size: .72rem;
  font-weight: 800;
}

.story-criterion-label {
  display: block;
  margin-bottom: 3px;
  color: #7a8985;
  font-size: .64rem;
  font-weight: 750;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.story-criteria-list p {
  margin: 0;
  color: #304b45;
  font-size: .9rem;
  line-height: 1.5;
}

.story-criterion-check {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #e4f5ef;
  color: #12836c;
  font-size: .7rem;
}

.story-empty-state {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border: 1px dashed #cfded9;
  border-radius: 13px;
  background: var(--story-soft);
}

.story-empty-state > span {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #e4efec;
  color: #55726b;
}

.story-empty-state strong { display: block; margin-bottom: 3px; }
.story-empty-state p { margin: 0; color: var(--story-muted); font-size: .85rem; }

.story-trace-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

.story-trace-link {
  display: grid;
  grid-template-columns: 39px minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid #e1eae7;
  border-radius: 13px;
  color: inherit;
  text-decoration: none;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.story-trace-link:hover {
  transform: translateY(-1px);
  border-color: #bcd8d0;
  color: inherit;
  box-shadow: 0 9px 20px rgba(25, 86, 73, .08);
}

.story-trace-link > span:nth-child(2) { min-width: 0; }
.story-trace-link small { display: block; color: #778681; font-size: .68rem; }
.story-trace-link strong { display: block; overflow: hidden; color: #28463f; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.story-trace-link > i { color: #91a39e; font-size: .75rem; }
.story-trace-icon.is-spec { background: #e5f4f0; color: #13715f; }
.story-trace-icon.is-epic { background: #eeeaf7; color: #6d53a2; }
.story-trace-icon.is-group { background: #e9f1fb; color: #3e6f9f; }

.story-workflow-form {
  display: grid;
  gap: 14px;
}

.story-form-field label {
  display: block;
  margin-bottom: 6px;
  color: #5d716c;
  font-size: .76rem;
  font-weight: 720;
}

.story-form-field .form-select {
  min-height: 42px;
  border-color: #d5e1de;
  border-radius: 10px;
  color: #29443e;
  box-shadow: none;
}

.story-form-field .form-select:focus {
  border-color: #63aa9b;
  box-shadow: 0 0 0 3px rgba(26, 129, 109, .1);
}

.story-form-error { margin-top: 5px; color: #a83e3e; font-size: .75rem; }

.story-readonly-state {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.story-readonly-state > div {
  padding: 12px;
  border: 1px solid #e1eae7;
  border-radius: 11px;
  background: var(--story-soft);
}

.story-readonly-state span { display: block; color: #74827e; font-size: .7rem; }
.story-readonly-state strong { display: block; margin-top: 3px; font-size: .88rem; }

.story-metadata {
  display: grid;
  gap: 0;
  margin: 0;
}

.story-metadata > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #edf1f0;
}

.story-metadata > div:first-child { padding-top: 0; }
.story-metadata > div:last-child { border-bottom: 0; }
.story-metadata dt { color: #788782; font-size: .74rem; font-weight: 650; }
.story-metadata dd { margin: 0; overflow-wrap: anywhere; color: #304b45; font-size: .8rem; font-weight: 650; text-align: right; }

.story-provenance-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 11px;
  border-radius: 10px;
  background: #f0f7f5;
  color: #567169;
  font-size: .75rem;
  line-height: 1.45;
}

.story-provenance-note i { margin-top: 2px; color: var(--story-mint); }

.story-regenerate-card .story-card-body { padding: 20px; }

.story-regenerate-icon {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 12px;
  background: #eeeaf7;
  color: var(--story-violet);
}

.story-regenerate-card p {
  margin: 8px 0 15px;
  color: var(--story-muted);
  font-size: .79rem;
  line-height: 1.5;
}

.story-sidebar .btn,
.story-workflow-form .btn {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 10px;
  font-weight: 700;
}

@media (max-width: 1050px) {
  .story-detail-hero { grid-template-columns: 1fr; }
  .story-hero-actions { padding-top: 0; }
  .story-hero-back { grid-column: 1; }
  .story-workspace { grid-template-columns: 1fr; }
  .story-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-sidebar .story-regenerate-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .story-detail-page {
    width: min(100% - 22px, 1240px);
    margin-top: 12px;
  }
  .story-detail-hero { padding: 23px 20px 21px; border-radius: 19px; }
  .story-hero-actions { flex-wrap: wrap; }
  .story-hero-actions .btn { flex: 1 1 auto; justify-content: center; }
  .story-intent-grid,
  .story-trace-grid,
  .story-sidebar { grid-template-columns: 1fr; }
  .story-sidebar .story-regenerate-card { grid-column: auto; }
  .story-derived-badge { display: none; }
}

@media (max-width: 480px) {
  .story-detail-hero h1 { font-size: 1.55rem; }
  .story-card-header,
  .story-card-body { padding-left: 15px; padding-right: 15px; }
  .story-criteria-list li { grid-template-columns: 32px minmax(0, 1fr); }
  .story-criterion-check { display: none; }
}