.works-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  color: #f7f2e8;
  background: #11131a;
}

.works-hero h1 {
  max-width: 850px;
  font-size: clamp(44px, 5vw, 76px);
}

.works-hero p:last-child {
  color: #b7becc;
}

.engine-state {
  flex: 0 0 auto;
  border: 2px solid #4de0b1;
  padding: 12px 16px;
  color: #11131a;
  background: #4de0b1;
  font-size: 13px;
  font-weight: 900;
}

.works-shell,
.works-dashboard {
  display: grid;
  gap: 28px;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 2px solid #11131a;
  background: #fff;
  box-shadow: 5px 5px 0 #11131a;
}

.summary-strip > div {
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid #aeb3bc;
}

.summary-strip > div:last-child {
  border-right: 0;
}

.summary-strip span,
.summary-strip strong {
  display: block;
}

.summary-strip span {
  color: #656b77;
  font-size: 12px;
  font-weight: 850;
}

.summary-strip .help-topic,
.work-tools .help-topic,
.bulk-tools .help-topic,
.list-heading .help-topic,
.control-field .help-topic {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.summary-strip .help-topic > span,
.work-tools .help-topic > span,
.bulk-tools .help-topic > span,
.list-heading .help-topic > span,
.control-field .help-topic > span {
  display: inline;
}

.summary-strip .help-button,
.work-tools .help-button,
.bulk-tools .help-button,
.control-field .help-button {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.summary-strip strong {
  margin-top: 7px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 30px;
}

.work-tools {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(2, minmax(150px, 220px)) auto;
  align-items: end;
  gap: 12px;
  padding: 18px;
  color: #fff;
  background: #20242f;
  border: 2px solid #11131a;
}

.work-tools label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
}

.work-tools input,
.work-tools select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: #11131a;
  background: #fff;
  border: 2px solid #11131a;
}

.refresh-button {
  min-height: 46px;
  white-space: nowrap;
}

.period-filter {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(155px, 210px) auto minmax(155px, 210px) auto;
  align-items: end;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid #5b6270;
}

.period-intro {
  align-self: center;
  min-width: 0;
}

.period-intro strong,
.period-intro small {
  display: block;
}

.period-intro strong {
  font-size: 13px;
}

.period-intro small {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: #d4d9e2;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

.period-separator {
  min-height: 46px;
  display: grid;
  place-items: center;
  color: #f4f7fb;
  font-weight: 900;
}

.period-clear {
  min-height: 46px;
  white-space: nowrap;
}

.list-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  padding-top: 12px;
  border-bottom: 2px solid #11131a;
}

.list-heading h2 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4vw, 48px);
}

.list-heading > p {
  margin: 0 0 18px;
  color: #656b77;
  font-weight: 850;
}

.bulk-tools {
  display: grid;
  grid-template-columns: minmax(210px, .7fr) minmax(280px, 1.25fr) auto;
  align-items: end;
  gap: 12px 16px;
  padding: 16px 18px;
  color: #f7f9fc;
  background: #20242f;
  border: 2px solid #11131a;
}

.select-all-control {
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
}

.select-all-control input,
.story-select input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #087c5d;
}

.select-all-control strong,
.select-all-control small {
  display: block;
}

.select-all-control strong {
  font-size: 13px;
}

.select-all-control small {
  margin-top: 3px;
  color: #cbd1dc;
  font-size: 11px;
  font-weight: 800;
}

.bulk-visibility-field {
  min-width: 0;
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 900;
}

.bulk-visibility-field select {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  color: #11131a;
  background: #fff;
  border: 2px solid #11131a;
}

.bulk-apply {
  min-height: 46px;
  white-space: nowrap;
}

.bulk-apply:disabled {
  color: #2f3540;
  background: #b8bec8;
  box-shadow: none;
  opacity: 1;
}

.bulk-status {
  grid-column: 1 / -1;
  min-height: 18px;
  margin: 0;
  color: #d4d9e2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
}

.managed-list {
  display: grid;
  gap: 11px;
}

.managed-story {
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(640px, 1.7fr);
  gap: 0;
  background: #fff;
  border: 2px solid #11131a;
  box-shadow: 3px 3px 0 #11131a;
}

.opening-pilot {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 15px 17px;
  border-top: 2px solid #11131a;
  background: #f5f6f8;
}

.opening-pilot.is-ready_for_promotion,
.opening-pilot.is-promoted {
  background: #e9fff8;
}

.opening-pilot.is-needs_editor_attention {
  background: #fff7d9;
}

.opening-pilot-header,
.opening-pilot-actions,
.opening-pilot-episodes > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.opening-pilot-header > div {
  min-width: 0;
}

.opening-pilot-header span,
.opening-pilot-header strong,
.opening-pilot-header p {
  display: block;
}

.opening-pilot-header span {
  color: #087c5d;
  font-size: 11px;
  font-weight: 950;
}

.opening-pilot-header strong {
  margin-top: 3px;
  font-size: 17px;
}

.opening-pilot-header p,
.opening-pilot-actions p {
  margin: 4px 0 0;
  color: #4f5868;
  font-size: 12px;
  line-height: 1.5;
}

.opening-pilot-feedback {
  flex: 0 0 auto;
  max-width: 330px;
  padding: 8px 10px;
  color: #303846;
  background: #fff;
  border: 1px solid #8a919c;
  font-size: 11px;
  font-weight: 850;
}

.opening-pilot-metrics,
.opening-pilot-episodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.opening-pilot-metrics > div,
.opening-pilot-episodes > div {
  min-width: 0;
  padding: 10px 11px;
  background: #fff;
  border: 1px solid #aeb4bd;
}

.opening-pilot-metrics span,
.opening-pilot-metrics strong,
.opening-pilot-episodes strong,
.opening-pilot-episodes small {
  display: block;
}

.opening-pilot-metrics span,
.opening-pilot-episodes small {
  color: #626a78;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
}

.opening-pilot-metrics strong {
  margin-top: 3px;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.opening-pilot-episodes .button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 8px;
  font-size: 10px;
}

.opening-pilot-actions {
  align-items: flex-start;
}

.opening-pilot-actions .button {
  flex: 0 0 auto;
  min-height: 39px;
}

.opening-pilot-actions p {
  flex: 1 1 auto;
}

.story-replanning {
  grid-column: 1 / -1;
  border-top: 2px solid #11131a;
  background: #edf4ff;
}

.story-replanning > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 48px;
  padding: 10px 17px;
  cursor: pointer;
}

.story-replanning > summary strong {
  color: #173a72;
  font-size: 13px;
}

.story-replanning > summary small {
  color: #52627a;
  font-size: 11px;
  font-weight: 800;
}

.story-replanning-content {
  display: grid;
  gap: 11px;
  padding: 0 17px 15px;
}

.story-replanning-content > p {
  margin: 0;
  color: #3f4d62;
  font-size: 12px;
  line-height: 1.55;
}

.story-replanning-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid #9ca9bb;
  background: #fff;
}

.story-replanning-columns section {
  min-width: 0;
  padding: 11px 13px;
}

.story-replanning-columns section:first-child {
  border-right: 1px solid #c8d0da;
  box-shadow: inset 4px 0 #087c5d;
}

.story-replanning-columns section:last-child {
  box-shadow: inset 4px 0 #b87900;
}

.story-replanning-columns ul {
  display: grid;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.story-replanning-columns li {
  color: #515c6e;
  font-size: 11px;
  line-height: 1.45;
}

.story-replanning-columns li b,
.story-replanning-columns li span {
  display: block;
}

.story-replanning-columns li b {
  color: #252d3b;
}

.story-replanning-guard {
  padding: 8px 10px;
  border-left: 4px solid #3b73d9;
  background: #fff;
  font-weight: 850;
}

.story-summary {
  min-width: 0;
  padding: 15px 17px;
}

.story-management {
  min-width: 0;
  border-left: 1px solid #c8ccd3;
}

.story-management > summary {
  display: none;
}

.story-management-content {
  min-width: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(370px, 1.18fr);
}

.story-metrics,
.story-controls {
  min-width: 0;
  padding: 14px 15px;
}

.story-controls {
  border-left: 1px solid #c8ccd3;
}

.story-state-line,
.story-tags,
.story-actions,
.story-save-state {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.story-select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 9px;
  border-right: 1px solid #aeb3bc;
  color: #343a45;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
}

.story-select input {
  width: 18px;
  height: 18px;
}

.story-summary h3 {
  margin: 10px 0 6px;
  font-size: 21px;
  line-height: 1.2;
  word-break: keep-all;
}

.story-summary > p {
  margin: 0;
  color: #555d6c;
  display: -webkit-box;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.story-tags {
  margin-top: 10px;
}

.story-summary > .story-created-at {
  display: block;
  margin-top: 9px;
  color: #656d7a;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.tag,
.state-badge {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  padding: 3px 7px;
  border: 1px solid #777e8a;
  font-size: 11px;
  font-weight: 900;
}

.tag {
  background: #eef1f5;
}

.state-badge.public,
.state-badge.auto,
.state-badge.running {
  color: #075c46;
  background: #d9fff3;
  border-color: #087c5d;
}

.state-badge.private,
.state-badge.manual,
.state-badge.waiting {
  color: #6b5100;
  background: #fff3c2;
  border-color: #9b7912;
}

.state-badge.paused,
.state-badge.ended,
.state-badge.archived {
  color: #7c2936;
  background: #ffe0e5;
  border-color: #b33b4d;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px 10px;
}

.metric-grid div {
  min-width: 0;
}

.metric-grid span,
.metric-grid strong {
  display: block;
}

.metric-grid span {
  color: #6c7380;
  font-size: 11px;
  font-weight: 800;
}

.metric-grid strong {
  margin-top: 3px;
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-note {
  margin: 12px 0 0;
  padding-top: 10px;
  color: #596171;
  border-top: 1px solid #d6dae0;
  font-size: 12px;
  line-height: 1.55;
}

.story-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 8px 10px;
  background: #f5f6f8;
}

.control-field {
  display: grid;
  gap: 6px;
  color: #333944;
  font-size: 11px;
  font-weight: 900;
}

.control-field select,
.control-field input,
.control-field textarea {
  width: 100%;
  min-height: 39px;
  padding: 7px 9px;
  color: #11131a;
  background: #fff;
  border: 2px solid #777e8a;
}

.control-field small {
  color: #5f6673;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
}

.rewrite-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.rewrite-controls .button {
  min-height: 39px;
  padding: 0 10px;
  font-size: 11px;
}

.story-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.story-actions .button {
  min-width: 0;
  min-height: 38px;
  padding: 0 8px;
  font-size: 11px;
}

.story-save-state {
  grid-column: 1 / -1;
  min-height: 15px;
  color: #667080;
  font-size: 11px;
  font-weight: 800;
}

.story-save-state.is-dirty {
  color: #9b5e00;
}

.next-episode-help {
  grid-column: 1 / -1;
  margin: 0;
  padding: 7px 9px;
  color: #634900;
  background: #fff4c9;
  border-left: 3px solid #a77b00;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.empty-state {
  padding: 42px 20px;
  color: #656b77;
  background: #fff;
  border: 2px dashed #777e8a;
  text-align: center;
  font-weight: 850;
}

@media (max-width: 1180px) and (min-width: 821px) {
  .managed-story {
    grid-template-columns: minmax(250px, .72fr) minmax(560px, 1.55fr);
  }

  .story-management-content {
    grid-template-columns: minmax(210px, .72fr) minmax(350px, 1.28fr);
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .works-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid #aeb3bc;
  }

  .work-tools {
    grid-template-columns: 1fr 1fr;
  }

  .period-filter {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto;
  }

  .period-intro {
    grid-column: 1 / -1;
  }

  .bulk-tools {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .select-all-control {
    grid-column: 1 / -1;
  }

  .search-field,
  .refresh-button {
    grid-column: 1 / -1;
  }

  .managed-story {
    grid-template-columns: 1fr;
  }

  .story-management {
    border-left: 0;
    border-top: 1px solid #c8ccd3;
  }

  .story-management > summary {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    background: #f5f6f8;
  }

  .story-management > summary::-webkit-details-marker {
    display: none;
  }

  .story-management > summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
  }

  .story-management[open] > summary::after {
    content: "−";
  }

  .story-management > summary strong,
  .story-management > summary small {
    display: block;
  }

  .story-management > summary strong {
    font-size: 13px;
  }

  .story-management > summary small {
    min-width: 0;
    overflow: hidden;
    color: #6a7180;
    font-size: 11px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .story-management-content {
    height: auto;
    grid-template-columns: 1fr;
  }

  .story-controls {
    border-top: 1px solid #c8ccd3;
    border-left: 0;
  }

  .opening-pilot-header,
  .opening-pilot-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .opening-pilot-feedback {
    max-width: none;
  }

  .opening-pilot-metrics,
  .opening-pilot-episodes {
    grid-template-columns: 1fr;
  }

  .story-replanning > summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .story-replanning-columns {
    grid-template-columns: 1fr;
  }

  .story-replanning-columns section:first-child {
    border-right: 0;
    border-bottom: 1px solid #c8d0da;
  }
}

@media (max-width: 520px) {
  .works-hero h1 {
    font-size: 44px;
  }

  .summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .summary-strip > div {
    padding: 10px 12px;
  }

  .summary-strip strong {
    margin-top: 3px;
    font-size: 22px;
  }

  .summary-strip > div {
    border-bottom: 1px solid #aeb3bc;
  }

  .summary-strip > div:nth-child(odd) {
    border-right: 1px solid #aeb3bc;
  }

  .summary-strip > div:nth-last-child(-n+2) {
    border-bottom: 0;
  }

  .search-field,
  .refresh-button {
    grid-column: 1 / -1;
  }

  .period-filter {
    grid-template-columns: 1fr;
  }

  .period-filter > *,
  .period-clear {
    grid-column: 1;
  }

  .period-separator {
    display: none;
  }

  .bulk-tools {
    grid-template-columns: 1fr;
  }

  .select-all-control,
  .bulk-visibility-field,
  .bulk-apply,
  .bulk-status {
    grid-column: 1;
  }

  .list-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 0;
  }

  .list-heading h2 {
    margin-bottom: 6px;
  }

  .story-summary,
  .story-metrics,
  .story-controls {
    padding: 12px 13px;
  }

  .story-summary h3 {
    margin-top: 8px;
    font-size: 19px;
  }

  .story-tags .tag:nth-child(n+4),
  .metric-grid [data-metric="published"],
  .metric-grid [data-metric="ready"],
  .metric-grid [data-metric="run"],
  .schedule-note {
    display: none;
  }

  .metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .story-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}