/* W13 — media cards */
    .media-card {
      position: relative;
      display: flex;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid #f0f0f3;
    }
    .media-card:last-child { border-bottom: none; }
    .media-card-shared { border-left: 3px solid #1a6638; padding-left: 8px; }
    .media-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 5px;
      background: #f0f0f5;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #bbb;
      flex-shrink: 0;
    }
    .media-card-body { flex: 1; min-width: 0; }
    .media-card-title {
      font-size: 13px;
      font-weight: 600;
      color: #111;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 3px;
    }
    .media-card-meta {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }
    .media-card-filename {
      font-size: 11px;
      color: #aaa;
      font-family: monospace;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-bottom: 5px;
    }
    .media-card-footer { margin-top: 6px; }
    .media-card-caption-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-bottom: 5px;
    }
    .media-card-actions { display: flex; gap: 6px; }

    /* W14 — media card action controls */
    .mc-caption-input {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      padding: 3px 6px;
      border: 1px solid #ddd;
      border-radius: 3px;
      font-family: inherit;
    }
    .mc-btn {
      font-size: 11px;
      padding: 3px 8px;
      border: 1px solid #ddd;
      border-radius: 3px;
      background: #f7f7f9;
      color: #555;
      cursor: pointer;
      white-space: nowrap;
    }
    .mc-btn:hover { background: #ebebf0; }
    .mc-btn:disabled { color: #bbb; cursor: default; border-color: #e8e8ec; background: #f7f7f9; }
    .mc-btn-primary { border-color: #bbb; color: #111; font-weight: 600; }
    .mc-btn-del { color: #b91c1c; border-color: #f5c6cb; }
    .mc-btn-del:hover { background: #fff5f5; border-color: #f5b7bb; color: #9b1c1c; }

    /* Runway rail */
    :root {
      --runway-green:     #2f9e44;
      --state-shared:     #2f9e44;
      --state-processing: #d97706;
      --state-failed:     #dc2626;
      --state-uploading:  #2563eb;
    }
    /* Section grouping wrappers — no visual weight */
    .media-section-rail { background: transparent; }
    .media-section-rail + .media-section-rail { margin-top: 16px; }
    /* Rail lives on #media-list — spans exactly first row to last row,
       no overlap with card title or status area above it. */
    #media-list {
      position: relative;
      padding-left: 21px;
    }
    /* Solid guide lines: far-left faintest, near-card strongest */
    #media-list::before {
      content: '';
      position: absolute;
      left: 11px;
      top: 4px;
      bottom: 4px;
      width: 10px;
      pointer-events: none;
      background:
        linear-gradient(
          to right,
          rgba(47,158,68,0.10) 0 1px,
          transparent 1px 9px,
          rgba(47,158,68,0.55) 9px 10px
        );
    }
    /* Dashed centerline — medium emphasis */
    #media-list::after {
      content: '';
      position: absolute;
      left: 16px;
      top: 4px;
      bottom: 4px;
      width: 1px;
      pointer-events: none;
      background:
        repeating-linear-gradient(
          to bottom,
          rgba(47,158,68,0.42) 0 6px,
          transparent 6px 18px
        );
    }
    /* Card state ownership — pill accent + faint wash, never touches rail */
    .media-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 10px;
      bottom: 10px;
      width: 3px;
      border-radius: 999px;
      background: transparent;
    }
    .media-card.state-shared {
      background: linear-gradient(to right, rgba(47,158,68,.06), transparent 24px), #fff;
    }
    .media-card.state-shared::before     { background: var(--state-shared); }
    .media-card.state-processing {
      background: linear-gradient(to right, rgba(217,119,6,.08), transparent 24px), #fff;
    }
    .media-card.state-processing::before { background: var(--state-processing); }
    .media-card.state-failed {
      background: linear-gradient(to right, rgba(220,38,38,.08), transparent 24px), #fff;
    }
    .media-card.state-failed::before     { background: var(--state-failed); }
    .media-card.state-uploading {
      background: linear-gradient(to right, rgba(37,99,235,.08), transparent 24px), #fff;
    }
    .media-card.state-uploading::before  { background: var(--state-uploading); }